material 3.4.1 → 3.4.2

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 (188) hide show
  1. package/README.md +1 -1
  2. package/dist/components/button-group/button-group.js +5 -2
  3. package/dist/components/search/features/states.js +14 -7
  4. package/dist/elements/css/bottom-sheet.css +1 -1
  5. package/dist/elements/css/bottom-sheet.js +1 -1
  6. package/dist/elements/css/checkbox.css +1 -1
  7. package/dist/elements/css/checkbox.js +1 -1
  8. package/dist/elements/css/datepicker.css +1 -1
  9. package/dist/elements/css/datepicker.js +1 -1
  10. package/dist/elements/css/dialog.css +1 -1
  11. package/dist/elements/css/dialog.js +1 -1
  12. package/dist/elements/css/fab.css +1 -1
  13. package/dist/elements/css/fab.js +1 -1
  14. package/dist/elements/css/list.css +1 -1
  15. package/dist/elements/css/list.js +1 -1
  16. package/dist/elements/css/navigation-rail.css +1 -1
  17. package/dist/elements/css/navigation-rail.js +1 -1
  18. package/dist/elements/css/radios.css +1 -1
  19. package/dist/elements/css/radios.js +1 -1
  20. package/dist/elements/css/search.css +1 -1
  21. package/dist/elements/css/search.js +1 -1
  22. package/dist/elements/css/side-sheet.css +1 -1
  23. package/dist/elements/css/side-sheet.js +1 -1
  24. package/dist/elements/css/slider.css +1 -1
  25. package/dist/elements/css/slider.js +1 -1
  26. package/dist/elements/css/switch.css +1 -1
  27. package/dist/elements/css/switch.js +1 -1
  28. package/dist/elements/css/timepicker.css +1 -1
  29. package/dist/elements/css/timepicker.js +1 -1
  30. package/dist/elements/css/tooltip.css +1 -1
  31. package/dist/elements/css/tooltip.js +1 -1
  32. package/dist/elements/preupgrade/badge.css +1 -1
  33. package/dist/elements/preupgrade/bottom-app-bar.css +1 -1
  34. package/dist/elements/preupgrade/bottom-sheet.css +1 -1
  35. package/dist/elements/preupgrade/button-group.css +1 -1
  36. package/dist/elements/preupgrade/button.css +1 -1
  37. package/dist/elements/preupgrade/card.css +1 -1
  38. package/dist/elements/preupgrade/carousel.css +1 -1
  39. package/dist/elements/preupgrade/checkbox.css +1 -1
  40. package/dist/elements/preupgrade/chips.css +1 -1
  41. package/dist/elements/preupgrade/datepicker.css +1 -1
  42. package/dist/elements/preupgrade/dialog.css +1 -1
  43. package/dist/elements/preupgrade/divider.css +1 -1
  44. package/dist/elements/preupgrade/drawer.css +1 -1
  45. package/dist/elements/preupgrade/extended-fab.css +1 -1
  46. package/dist/elements/preupgrade/fab-menu.css +1 -1
  47. package/dist/elements/preupgrade/fab.css +1 -1
  48. package/dist/elements/preupgrade/icon-button.css +1 -1
  49. package/dist/elements/preupgrade/list.css +1 -1
  50. package/dist/elements/preupgrade/loading-indicator.css +1 -1
  51. package/dist/elements/preupgrade/menu.css +1 -1
  52. package/dist/elements/preupgrade/navigation-bar.css +1 -1
  53. package/dist/elements/preupgrade/navigation-rail.css +1 -1
  54. package/dist/elements/preupgrade/progress.css +1 -1
  55. package/dist/elements/preupgrade/radios.css +1 -1
  56. package/dist/elements/preupgrade/search.css +1 -1
  57. package/dist/elements/preupgrade/select.css +1 -1
  58. package/dist/elements/preupgrade/side-sheet.css +1 -1
  59. package/dist/elements/preupgrade/slider.css +1 -1
  60. package/dist/elements/preupgrade/snackbar.css +1 -1
  61. package/dist/elements/preupgrade/split-button.css +1 -1
  62. package/dist/elements/preupgrade/switch.css +1 -1
  63. package/dist/elements/preupgrade/tabs.css +1 -1
  64. package/dist/elements/preupgrade/text-field.css +2 -2
  65. package/dist/elements/preupgrade/timepicker.css +1 -1
  66. package/dist/elements/preupgrade/toolbar.css +1 -1
  67. package/dist/elements/preupgrade/tooltip.css +1 -1
  68. package/dist/elements/preupgrade/top-app-bar.css +1 -1
  69. package/dist/elements/preupgrade.css +2 -2
  70. package/dist/elements/preupgrade.js +1 -1
  71. package/dist/package.json +1 -1
  72. package/dist/styles/badge.css +1 -1
  73. package/dist/styles/base.css +1 -1
  74. package/dist/styles/bottom-app-bar.css +1 -1
  75. package/dist/styles/bottom-sheet.css +2 -2
  76. package/dist/styles/button-group.css +1 -1
  77. package/dist/styles/button.css +1 -1
  78. package/dist/styles/card.css +1 -1
  79. package/dist/styles/carousel.css +1 -1
  80. package/dist/styles/checkbox.css +2 -2
  81. package/dist/styles/chips.css +1 -1
  82. package/dist/styles/contrast.css +1 -1
  83. package/dist/styles/datepicker.css +2 -2
  84. package/dist/styles/dialog.css +2 -2
  85. package/dist/styles/divider.css +1 -1
  86. package/dist/styles/drawer.css +1 -1
  87. package/dist/styles/extended-fab.css +1 -1
  88. package/dist/styles/fab-menu.css +1 -1
  89. package/dist/styles/fab.css +2 -2
  90. package/dist/styles/icon-button.css +1 -1
  91. package/dist/styles/list.css +2 -2
  92. package/dist/styles/loading-indicator.css +1 -1
  93. package/dist/styles/menu.css +1 -1
  94. package/dist/styles/navigation-bar.css +1 -1
  95. package/dist/styles/navigation-rail.css +2 -2
  96. package/dist/styles/progress.css +1 -1
  97. package/dist/styles/radios.css +2 -2
  98. package/dist/styles/search.css +2 -2
  99. package/dist/styles/select.css +1 -1
  100. package/dist/styles/side-sheet.css +2 -2
  101. package/dist/styles/slider.css +2 -2
  102. package/dist/styles/snackbar.css +1 -1
  103. package/dist/styles/split-button.css +1 -1
  104. package/dist/styles/switch.css +2 -2
  105. package/dist/styles/tabs.css +1 -1
  106. package/dist/styles/text-field.css +1 -1
  107. package/dist/styles/timepicker.css +2 -2
  108. package/dist/styles/toolbar.css +1 -1
  109. package/dist/styles/tooltip.css +2 -2
  110. package/dist/styles/top-app-bar.css +1 -1
  111. package/dist/styles/typography.css +1 -1
  112. package/dist/styles/utilities.css +2 -2
  113. package/dist/styles.css +2 -2
  114. package/dist/themes/autumn-contrast.css +1 -1
  115. package/dist/themes/autumn.css +2 -2
  116. package/dist/themes/baseline-contrast.css +1 -1
  117. package/dist/themes/baseline.css +1 -1
  118. package/dist/themes/brownbeige-contrast.css +1 -1
  119. package/dist/themes/brownbeige.css +2 -2
  120. package/dist/themes/content-contrast.css +1 -1
  121. package/dist/themes/content.css +2 -2
  122. package/dist/themes/desert-contrast.css +1 -1
  123. package/dist/themes/desert.css +2 -2
  124. package/dist/themes/expressive-contrast.css +1 -1
  125. package/dist/themes/expressive.css +2 -2
  126. package/dist/themes/fidelity-contrast.css +1 -1
  127. package/dist/themes/fidelity.css +2 -2
  128. package/dist/themes/forest-contrast.css +1 -1
  129. package/dist/themes/forest.css +1 -1
  130. package/dist/themes/fruit-salad-contrast.css +1 -1
  131. package/dist/themes/fruit-salad.css +2 -2
  132. package/dist/themes/highcontrast-contrast.css +1 -1
  133. package/dist/themes/highcontrast.css +2 -2
  134. package/dist/themes/monochrome-contrast.css +1 -1
  135. package/dist/themes/monochrome.css +2 -2
  136. package/dist/themes/neutral-contrast.css +1 -1
  137. package/dist/themes/neutral.css +2 -2
  138. package/dist/themes/ocean-contrast.css +1 -1
  139. package/dist/themes/ocean.css +1 -1
  140. package/dist/themes/rainbow-contrast.css +1 -1
  141. package/dist/themes/rainbow.css +2 -2
  142. package/dist/themes/sageivory-contrast.css +1 -1
  143. package/dist/themes/sageivory.css +2 -2
  144. package/dist/themes/spring-contrast.css +1 -1
  145. package/dist/themes/spring.css +1 -1
  146. package/dist/themes/summer-contrast.css +1 -1
  147. package/dist/themes/summer.css +2 -2
  148. package/dist/themes/sunset-contrast.css +1 -1
  149. package/dist/themes/sunset.css +1 -1
  150. package/dist/themes/tealcaramel-contrast.css +1 -1
  151. package/dist/themes/tealcaramel.css +2 -2
  152. package/dist/themes/vibrant-contrast.css +1 -1
  153. package/dist/themes/vibrant.css +2 -2
  154. package/package.json +1 -1
  155. package/src/styles/components/_bottom-sheet.scss +1 -0
  156. package/src/styles/components/_checkbox.scss +1 -0
  157. package/src/styles/components/_datepicker.scss +2 -1
  158. package/src/styles/components/_dialog.scss +1 -0
  159. package/src/styles/components/_fab.scss +1 -0
  160. package/src/styles/components/_list.scss +1 -0
  161. package/src/styles/components/_navigation-rail.scss +2 -0
  162. package/src/styles/components/_radios.scss +1 -0
  163. package/src/styles/components/_search.scss +2 -5
  164. package/src/styles/components/_side-sheet.scss +2 -1
  165. package/src/styles/components/_slider.scss +1 -7
  166. package/src/styles/components/_switch.scss +1 -0
  167. package/src/styles/components/_timepicker.scss +1 -0
  168. package/src/styles/components/_tooltip.scss +0 -2
  169. package/src/styles/elements/_text-field.scss +7 -1
  170. package/src/styles/main.scss +2 -1
  171. package/src/styles/themes/_autumn.scss +2 -13
  172. package/src/styles/themes/_base-theme.scss +16 -7
  173. package/src/styles/themes/_brownbeige.scss +5 -3
  174. package/src/styles/themes/_content.scss +5 -3
  175. package/src/styles/themes/_desert.scss +5 -3
  176. package/src/styles/themes/_expressive.scss +5 -3
  177. package/src/styles/themes/_fidelity.scss +5 -3
  178. package/src/styles/themes/_fruit-salad.scss +5 -3
  179. package/src/styles/themes/_highcontrast.scss +5 -3
  180. package/src/styles/themes/_monochrome.scss +5 -3
  181. package/src/styles/themes/_neutral.scss +5 -3
  182. package/src/styles/themes/_rainbow.scss +5 -3
  183. package/src/styles/themes/_sageivory.scss +5 -3
  184. package/src/styles/themes/_summer.scss +5 -3
  185. package/src/styles/themes/_tealcaramel.scss +5 -3
  186. package/src/styles/themes/_vibrant.scss +5 -3
  187. package/src/styles/utilities/_typography.scss +9 -3
  188. package/src/styles/utilities/_visibility.scss +2 -7
package/dist/elements/css/navigation-rail.css CHANGED
@@ -1 +1 @@
1
- .mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 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-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 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-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 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-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 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),inline-size 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),block-size 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-navigation-rail__indicator::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);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),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);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),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:48px;inset-block-start:8px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:54px;inset-block-start:10px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 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);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}
1
+ .mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 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-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 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-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{font:inherit;display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 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-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{font:inherit;position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 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),inline-size 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),block-size 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-navigation-rail__indicator::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);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),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);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),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:48px;inset-block-start:8px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:54px;inset-block-start:10px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 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);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}
package/dist/elements/css/navigation-rail.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "navigation-rail": ".mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 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-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 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-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 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-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 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),inline-size 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),block-size 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-navigation-rail__indicator::before{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);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),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);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),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:48px;inset-block-start:8px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:54px;inset-block-start:10px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 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);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}" });
3
+ registerStyles({ "navigation-rail": ".mtrl-navigation-rail{display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;inline-size:96px;block-size:100%;min-block-size:0;padding-block:44px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface-variant);transition:inline-size 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-navigation-rail--expanded{inline-size:var(--mtrl-navigation-rail-expanded-width, 280px)}.mtrl-navigation-rail__header{--mtrl-extended-fab-compact: 0;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;gap:8px;margin-block-end:40px;padding-inline-start:24px;transition:padding-inline-start 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-navigation-rail--expanded .mtrl-navigation-rail__header{--mtrl-extended-fab-compact: initial;padding-inline-start:20px}.mtrl-navigation-rail__toggle{font:inherit;display:grid;place-items:center;position:relative;overflow:hidden;inline-size:48px;block-size:48px;padding:12px;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant);cursor:pointer;transition:background-color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__toggle svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__toggle:hover{background:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-navigation-rail__items{display:flex;flex-direction:column;flex-shrink:0;gap:4px;transition:gap 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-navigation-rail--expanded .mtrl-navigation-rail__items{gap:0}.mtrl-navigation-rail__content{display:contents}.mtrl-navigation-rail__item{font:inherit;position:relative;isolation:isolate;display:block;box-sizing:border-box;inline-size:100%;block-size:64px;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:block-size 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item[aria-disabled=true]{opacity:.38;cursor:default}.mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-secondary)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item{block-size:56px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--active{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail__indicator{position:absolute;z-index:-1;inset-block-start:6px;inset-inline-start:20px;inline-size:56px;block-size:32px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);overflow:hidden;pointer-events:none;transition:inset-block-start 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),inline-size 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),block-size 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-navigation-rail__indicator::before{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-secondary-container);opacity:0;transform:scaleX(0.4);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),opacity 450ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__indicator::after{content:\"\";position:absolute;inset:0;border-radius:inherit;background:var(--mtrl-sys-color-on-secondary-container);opacity:0;transition:opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__indicator{inset-block-start:0;inline-size:calc(100% - 40px);block-size:56px}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator::before{opacity:1;transform:scaleX(1);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),opacity 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__item:hover .mtrl-navigation-rail__indicator::after{opacity:.08}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item:active .mtrl-navigation-rail__indicator::after{opacity:.1}.mtrl-navigation-rail__item[aria-disabled=true] .mtrl-navigation-rail__indicator::after{opacity:0}.mtrl-navigation-rail__item:focus-visible{outline:none}.mtrl-navigation-rail__item:focus-visible .mtrl-navigation-rail__indicator{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-navigation-rail__ripple{position:absolute;border-radius:50%;pointer-events:none;background:var(--mtrl-sys-color-on-secondary-container);animation:mtrl-navigation-rail-ripple 450ms ease-out forwards}.mtrl-navigation-rail__icon{position:absolute;display:grid;place-items:center;inset-block-start:10px;inset-inline-start:36px;inline-size:24px;block-size:24px;color:var(--mtrl-sys-color-on-surface-variant);transition:inset-block-start 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),color 250ms linear(0, 0.066, 0.203, 0.355, 0.496, 0.616, 0.713, 0.788, 0.845, 0.888, 0.92, 0.943, 0.96, 0.971, 0.98, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 1)}.mtrl-navigation-rail__icon svg{inline-size:24px;block-size:24px;fill:currentColor}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__icon{color:var(--mtrl-sys-color-on-secondary-container)}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__icon{inset-block-start:16px}.mtrl-navigation-rail__label{position:absolute;box-sizing:border-box;inset-block-start:42px;inset-inline-start:16px;inline-size:64px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-block-start 0s linear 225ms,inset-inline-start 0s linear 225ms,inline-size 0s linear 225ms,font-size 0s linear 225ms,line-height 0s linear 225ms,letter-spacing 0s linear 225ms,text-align 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__label{inset-block-start:18px;inset-inline-start:68px;inline-size:calc(100% - 104px);text-align:start;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__item--badged .mtrl-navigation-rail__label{inline-size:calc(100% - 140px)}.mtrl-navigation-rail--switching .mtrl-navigation-rail__label,.mtrl-navigation-rail--switching .mtrl-navigation-rail__badge{animation:mtrl-navigation-rail-swap 450ms linear}.mtrl-navigation-rail__badge{position:absolute;box-sizing:border-box;inset-inline-start:48px;inset-block-start:8px;min-inline-size:16px;min-block-size:16px;padding-inline:4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500;transition:inset-inline-start 0s linear 225ms,inset-inline-end 0s linear 225ms,inset-block-start 0s linear 225ms;transition-behavior:allow-discrete}.mtrl-navigation-rail__badge--dot{inline-size:6px;block-size:6px;min-inline-size:0;min-block-size:0;padding:0;inset-inline-start:54px;inset-block-start:10px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge{inset-inline-start:auto;inset-inline-end:36px;inset-block-start:20px}.mtrl-navigation-rail--expanded .mtrl-navigation-rail__badge--dot{inset-block-start:25px}.mtrl-navigation-rail--hide-collapsed:not(.mtrl-navigation-rail--expanded){display:none}.mtrl-navigation-rail--modal{position:fixed;inset-block:0;inset-inline:0 auto;margin:0;border:0;max-inline-size:calc(100vw - 56px);max-block-size:100dvh;block-size:100dvh;background:var(--mtrl-sys-color-surface-container);border-start-end-radius:var(--mtrl-sys-shape-corner-large, 16px);border-end-end-radius:var(--mtrl-sys-shape-corner-large, 16px);transition:inline-size 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);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15)}.mtrl-navigation-rail--modal:not([open]){display:none}.mtrl-navigation-rail--modal::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-navigation-rail__toggle:focus-visible{outline:2px solid var(--mtrl-sys-color-secondary);outline-offset:-2px}@media(prefers-reduced-motion: reduce){.mtrl-navigation-rail,.mtrl-navigation-rail *,.mtrl-navigation-rail *::before,.mtrl-navigation-rail *::after{transition:none;animation:none}}@media(forced-colors: active){.mtrl-navigation-rail{border-inline-end:1px solid CanvasText}.mtrl-navigation-rail__item--active .mtrl-navigation-rail__indicator{outline:2px solid Highlight;outline-offset:-2px}}@keyframes mtrl-navigation-rail-ripple{from{transform:scale(0);opacity:.1}to{transform:scale(1);opacity:0}}@keyframes mtrl-navigation-rail-swap{0%,100%{opacity:1}50%{opacity:0}}" });
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: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}
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{font:inherit;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: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}" });
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{font:inherit;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/search.css CHANGED
@@ -1 +1 @@
1
- .mtrl-search .mtrl-search__surface{position:static;display:flex;flex-direction:column;box-sizing:border-box;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit;background:rgba(0,0,0,0);overflow:visible}.mtrl-search{position:relative;display:flex;flex-direction:column;width:100%;min-width:var(--mtrl-search-min-width, 360px);max-width:var(--mtrl-search-max-width, 720px);background-color:rgba(0,0,0,0)}.mtrl-search--bar .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2);height:56px}.mtrl-search--bar .mtrl-search__divider,.mtrl-search--bar .mtrl-search__content{display:none}.mtrl-search--view{height:56px}.mtrl-search--view .mtrl-search__container{border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px) 0 0}.mtrl-search--view .mtrl-search__divider,.mtrl-search--view .mtrl-search__content{display:block}.mtrl-search--view .mtrl-search__surface{position:fixed;z-index:1000}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:var(--mtrl-search-top) auto auto var(--mtrl-search-left);width:var(--mtrl-search-width);height:auto}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{min-height:240px;max-height:calc(66.67vh - 56px);border-radius:0 0 var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface::backdrop{background:rgba(0,0,0,0)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:72px;border-radius:0}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--disabled{pointer-events:none}.mtrl-search--disabled .mtrl-search__container{opacity:.38}.mtrl-search--full-width{min-width:0;max-width:none}.mtrl-search--contained.mtrl-search--view .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--view .mtrl-search__divider{display:none}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:2px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}.mtrl-search--view .mtrl-search__content{animation:mtrl-search-reveal 300ms cubic-bezier(0.05, 0.7, 0.1, 1)}@keyframes mtrl-search-reveal{from{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion: reduce){.mtrl-search--view .mtrl-search__content{animation:none}}.mtrl-search__container{position:relative;display:flex;align-items:center;height:56px;padding:0 4px;background-color:var(--mtrl-sys-color-surface-container-high);transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),border-radius 200ms cubic-bezier(0.2, 0, 0, 1),height 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search--bar:not(.mtrl-search--disabled) .mtrl-search__container:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, var(--mtrl-sys-color-surface-container-high))}.mtrl-search__leading-icon,.mtrl-search__clear-button,.mtrl-search__trailing-icon{--mtrl-search-layer: 0%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;margin:0;padding:0;border:none;border-radius:50%;font:inherit;background-color:color-mix(in srgb, currentColor var(--mtrl-search-layer), transparent);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__leading-icon svg,.mtrl-search__clear-button svg,.mtrl-search__trailing-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__leading-icon:hover,.mtrl-search__clear-button:hover,.mtrl-search__trailing-icon:hover{--mtrl-search-layer: 8%}.mtrl-search__leading-icon:focus-visible,.mtrl-search__leading-icon:active,.mtrl-search__clear-button:focus-visible,.mtrl-search__clear-button:active,.mtrl-search__trailing-icon:focus-visible,.mtrl-search__trailing-icon:active{--mtrl-search-layer: 10%}.mtrl-search__leading-icon:focus,.mtrl-search__clear-button:focus,.mtrl-search__trailing-icon:focus{outline:none}.mtrl-search__leading-icon:focus-visible,.mtrl-search__clear-button:focus-visible,.mtrl-search__trailing-icon:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-search__leading-icon[aria-disabled=true],.mtrl-search__clear-button[aria-disabled=true],.mtrl-search__trailing-icon[aria-disabled=true]{cursor:not-allowed;opacity:.38;--mtrl-search-layer: 0%}.mtrl-search__leading-icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-search__clear-button,.mtrl-search__trailing-icon{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__clear-button{opacity:1;visibility:visible;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s,background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__clear-button--hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s 200ms}.mtrl-search__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px}.mtrl-search__avatar>*{width:30px;height:30px;border-radius:50%;object-fit:cover}.mtrl-search__trailing{display:flex;align-items:center}.mtrl-search__input-wrapper{flex:1;min-width:0;height:100%;margin:0 4px;display:flex;align-items:center}.mtrl-search__input{width:100%;height:100%;min-height:36px;padding:8px 0;border:none;background:rgba(0,0,0,0);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);caret-color:var(--mtrl-sys-color-primary);outline:none;box-sizing:border-box}.mtrl-search__input::placeholder{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__input:disabled{cursor:not-allowed;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__divider{width:100%;height:1px;background-color:var(--mtrl-sys-color-outline);flex-shrink:0}.mtrl-search__content{display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high);overflow:hidden}.mtrl-search__suggestions{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.mtrl-search__suggestion-list{list-style:none;padding:8px 0;margin:0}.mtrl-search__suggestion-item{display:flex;align-items:center;gap:16px;padding:8px 16px;min-height:56px;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);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box}.mtrl-search__suggestion-item:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-search__suggestion-item--selected,.mtrl-search__suggestion-item--selected:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-search__suggestion-item strong{font-weight:600;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__suggestion-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__suggestion-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-search__suggestion-item--two-line{min-height:72px}.mtrl-search__suggestion-item--two-line .mtrl-search__suggestion-text{display:flex;flex-direction:column}.mtrl-search__suggestion-supporting{overflow:hidden;text-overflow:ellipsis;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-search__suggestion-divider{height:1px;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-search__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width: 599px){.mtrl-search{min-width:0;max-width:100%}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{border-radius:0}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}}
1
+ .mtrl-search .mtrl-search__surface{position:static;display:flex;flex-direction:column;box-sizing:border-box;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit;background:rgba(0,0,0,0);overflow:visible}.mtrl-search{position:relative;display:flex;flex-direction:column;width:100%;min-width:var(--mtrl-search-min-width, 360px);max-width:var(--mtrl-search-max-width, 720px);background-color:rgba(0,0,0,0)}.mtrl-search--bar .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2);height:56px}.mtrl-search--bar .mtrl-search__divider,.mtrl-search--bar .mtrl-search__content{display:none}.mtrl-search--view{height:56px}.mtrl-search--view .mtrl-search__container{border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px) 0 0}.mtrl-search--view .mtrl-search__divider,.mtrl-search--view .mtrl-search__content{display:block}.mtrl-search--view .mtrl-search__surface{position:fixed;z-index:1000}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:var(--mtrl-search-top) auto auto var(--mtrl-search-left);width:var(--mtrl-search-width);height:auto}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{min-height:240px;max-height:calc(66.67vh - 56px);border-radius:0 0 var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface::backdrop{background:rgba(0,0,0,0)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:72px;border-radius:0}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--disabled{pointer-events:none}.mtrl-search--disabled .mtrl-search__container{opacity:.38}.mtrl-search--full-width{min-width:0;max-width:none}.mtrl-search--contained.mtrl-search--view .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--view .mtrl-search__divider{display:none}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:2px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}.mtrl-search--view .mtrl-search__content{animation:mtrl-search-reveal 300ms cubic-bezier(0.05, 0.7, 0.1, 1)}@keyframes mtrl-search-reveal{from{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion: reduce){.mtrl-search--view .mtrl-search__content{animation:none}}.mtrl-search__container{position:relative;display:flex;align-items:center;height:56px;padding:0 4px;background-color:var(--mtrl-sys-color-surface-container-high);transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),border-radius 200ms cubic-bezier(0.2, 0, 0, 1),height 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search--bar:not(.mtrl-search--disabled) .mtrl-search__container:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, var(--mtrl-sys-color-surface-container-high))}.mtrl-search__leading-icon,.mtrl-search__clear-button,.mtrl-search__trailing-icon{--mtrl-search-layer: 0%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;margin:0;padding:0;border:none;border-radius:50%;font:inherit;background-color:color-mix(in srgb, currentColor var(--mtrl-search-layer), transparent);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__leading-icon svg,.mtrl-search__clear-button svg,.mtrl-search__trailing-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__leading-icon:hover,.mtrl-search__clear-button:hover,.mtrl-search__trailing-icon:hover{--mtrl-search-layer: 8%}.mtrl-search__leading-icon:focus-visible,.mtrl-search__leading-icon:active,.mtrl-search__clear-button:focus-visible,.mtrl-search__clear-button:active,.mtrl-search__trailing-icon:focus-visible,.mtrl-search__trailing-icon:active{--mtrl-search-layer: 10%}.mtrl-search__leading-icon:focus,.mtrl-search__clear-button:focus,.mtrl-search__trailing-icon:focus{outline:none}.mtrl-search__leading-icon:focus-visible,.mtrl-search__clear-button:focus-visible,.mtrl-search__trailing-icon:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-search__leading-icon[aria-disabled=true],.mtrl-search__clear-button[aria-disabled=true],.mtrl-search__trailing-icon[aria-disabled=true]{cursor:not-allowed;opacity:.38;--mtrl-search-layer: 0%}.mtrl-search__leading-icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-search__clear-button,.mtrl-search__trailing-icon{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__clear-button{opacity:1;visibility:visible;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s,background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__clear-button--hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s 200ms}.mtrl-search__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px}.mtrl-search__avatar>*{width:30px;height:30px;border-radius:50%;object-fit:cover}.mtrl-search__trailing{display:flex;align-items:center}.mtrl-search__input-wrapper{flex:1;min-width:0;height:100%;margin:0 4px;display:flex;align-items:center}.mtrl-search__input{width:100%;height:100%;min-height:36px;padding:8px 0;border:none;background:rgba(0,0,0,0);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);caret-color:var(--mtrl-sys-color-primary);outline:none;box-sizing:border-box}.mtrl-search__input::placeholder{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__input:disabled{cursor:not-allowed;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__divider{width:100%;height:1px;background-color:var(--mtrl-sys-color-outline);flex-shrink:0}.mtrl-search__content{display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high);overflow:hidden}.mtrl-search__suggestions{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.mtrl-search__suggestion-list{list-style:none;padding:8px 0;margin:0}.mtrl-search__suggestion-item{display:flex;align-items:center;gap:16px;padding:8px 16px;min-height:56px;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);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box}.mtrl-search__suggestion-item:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-search__suggestion-item--selected,.mtrl-search__suggestion-item--selected:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-search__suggestion-item strong{font-weight:600;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__suggestion-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__suggestion-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-search__suggestion-item--two-line{min-height:72px}.mtrl-search__suggestion-supporting{display:block;overflow:hidden;text-overflow:ellipsis;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-search__suggestion-divider{height:1px;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-search__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width: 599px){.mtrl-search{min-width:0;max-width:100%}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{border-radius:0}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}}
package/dist/elements/css/search.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "search": ".mtrl-search .mtrl-search__surface{position:static;display:flex;flex-direction:column;box-sizing:border-box;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit;background:rgba(0,0,0,0);overflow:visible}.mtrl-search{position:relative;display:flex;flex-direction:column;width:100%;min-width:var(--mtrl-search-min-width, 360px);max-width:var(--mtrl-search-max-width, 720px);background-color:rgba(0,0,0,0)}.mtrl-search--bar .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2);height:56px}.mtrl-search--bar .mtrl-search__divider,.mtrl-search--bar .mtrl-search__content{display:none}.mtrl-search--view{height:56px}.mtrl-search--view .mtrl-search__container{border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px) 0 0}.mtrl-search--view .mtrl-search__divider,.mtrl-search--view .mtrl-search__content{display:block}.mtrl-search--view .mtrl-search__surface{position:fixed;z-index:1000}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:var(--mtrl-search-top) auto auto var(--mtrl-search-left);width:var(--mtrl-search-width);height:auto}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{min-height:240px;max-height:calc(66.67vh - 56px);border-radius:0 0 var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface::backdrop{background:rgba(0,0,0,0)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:72px;border-radius:0}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--disabled{pointer-events:none}.mtrl-search--disabled .mtrl-search__container{opacity:.38}.mtrl-search--full-width{min-width:0;max-width:none}.mtrl-search--contained.mtrl-search--view .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--view .mtrl-search__divider{display:none}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:2px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}.mtrl-search--view .mtrl-search__content{animation:mtrl-search-reveal 300ms cubic-bezier(0.05, 0.7, 0.1, 1)}@keyframes mtrl-search-reveal{from{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion: reduce){.mtrl-search--view .mtrl-search__content{animation:none}}.mtrl-search__container{position:relative;display:flex;align-items:center;height:56px;padding:0 4px;background-color:var(--mtrl-sys-color-surface-container-high);transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),border-radius 200ms cubic-bezier(0.2, 0, 0, 1),height 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search--bar:not(.mtrl-search--disabled) .mtrl-search__container:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, var(--mtrl-sys-color-surface-container-high))}.mtrl-search__leading-icon,.mtrl-search__clear-button,.mtrl-search__trailing-icon{--mtrl-search-layer: 0%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;margin:0;padding:0;border:none;border-radius:50%;font:inherit;background-color:color-mix(in srgb, currentColor var(--mtrl-search-layer), transparent);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__leading-icon svg,.mtrl-search__clear-button svg,.mtrl-search__trailing-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__leading-icon:hover,.mtrl-search__clear-button:hover,.mtrl-search__trailing-icon:hover{--mtrl-search-layer: 8%}.mtrl-search__leading-icon:focus-visible,.mtrl-search__leading-icon:active,.mtrl-search__clear-button:focus-visible,.mtrl-search__clear-button:active,.mtrl-search__trailing-icon:focus-visible,.mtrl-search__trailing-icon:active{--mtrl-search-layer: 10%}.mtrl-search__leading-icon:focus,.mtrl-search__clear-button:focus,.mtrl-search__trailing-icon:focus{outline:none}.mtrl-search__leading-icon:focus-visible,.mtrl-search__clear-button:focus-visible,.mtrl-search__trailing-icon:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-search__leading-icon[aria-disabled=true],.mtrl-search__clear-button[aria-disabled=true],.mtrl-search__trailing-icon[aria-disabled=true]{cursor:not-allowed;opacity:.38;--mtrl-search-layer: 0%}.mtrl-search__leading-icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-search__clear-button,.mtrl-search__trailing-icon{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__clear-button{opacity:1;visibility:visible;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s,background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__clear-button--hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s 200ms}.mtrl-search__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px}.mtrl-search__avatar>*{width:30px;height:30px;border-radius:50%;object-fit:cover}.mtrl-search__trailing{display:flex;align-items:center}.mtrl-search__input-wrapper{flex:1;min-width:0;height:100%;margin:0 4px;display:flex;align-items:center}.mtrl-search__input{width:100%;height:100%;min-height:36px;padding:8px 0;border:none;background:rgba(0,0,0,0);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);caret-color:var(--mtrl-sys-color-primary);outline:none;box-sizing:border-box}.mtrl-search__input::placeholder{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__input:disabled{cursor:not-allowed;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__divider{width:100%;height:1px;background-color:var(--mtrl-sys-color-outline);flex-shrink:0}.mtrl-search__content{display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high);overflow:hidden}.mtrl-search__suggestions{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.mtrl-search__suggestion-list{list-style:none;padding:8px 0;margin:0}.mtrl-search__suggestion-item{display:flex;align-items:center;gap:16px;padding:8px 16px;min-height:56px;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);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box}.mtrl-search__suggestion-item:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-search__suggestion-item--selected,.mtrl-search__suggestion-item--selected:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-search__suggestion-item strong{font-weight:600;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__suggestion-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__suggestion-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-search__suggestion-item--two-line{min-height:72px}.mtrl-search__suggestion-item--two-line .mtrl-search__suggestion-text{display:flex;flex-direction:column}.mtrl-search__suggestion-supporting{overflow:hidden;text-overflow:ellipsis;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-search__suggestion-divider{height:1px;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-search__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width: 599px){.mtrl-search{min-width:0;max-width:100%}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{border-radius:0}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}}" });
3
+ registerStyles({ "search": ".mtrl-search .mtrl-search__surface{position:static;display:flex;flex-direction:column;box-sizing:border-box;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit;background:rgba(0,0,0,0);overflow:visible}.mtrl-search{position:relative;display:flex;flex-direction:column;width:100%;min-width:var(--mtrl-search-min-width, 360px);max-width:var(--mtrl-search-max-width, 720px);background-color:rgba(0,0,0,0)}.mtrl-search--bar .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2);height:56px}.mtrl-search--bar .mtrl-search__divider,.mtrl-search--bar .mtrl-search__content{display:none}.mtrl-search--view{height:56px}.mtrl-search--view .mtrl-search__container{border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px) 0 0}.mtrl-search--view .mtrl-search__divider,.mtrl-search--view .mtrl-search__content{display:block}.mtrl-search--view .mtrl-search__surface{position:fixed;z-index:1000}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:var(--mtrl-search-top) auto auto var(--mtrl-search-left);width:var(--mtrl-search-width);height:auto}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface::backdrop{background:color-mix(in srgb, var(--mtrl-sys-color-scrim) 32%, transparent)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{min-height:240px;max-height:calc(66.67vh - 56px);border-radius:0 0 var(--mtrl-sys-shape-corner-extra-large, 28px) var(--mtrl-sys-shape-corner-extra-large, 28px)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;max-width:none;max-height:none;display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface::backdrop{background:rgba(0,0,0,0)}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:72px;border-radius:0}.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--disabled{pointer-events:none}.mtrl-search--disabled .mtrl-search__container{opacity:.38}.mtrl-search--full-width{min-width:0;max-width:none}.mtrl-search--contained.mtrl-search--view .mtrl-search__container{border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--view .mtrl-search__divider{display:none}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:2px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--fullscreen.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}.mtrl-search--view .mtrl-search__content{animation:mtrl-search-reveal 300ms cubic-bezier(0.05, 0.7, 0.1, 1)}@keyframes mtrl-search-reveal{from{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion: reduce){.mtrl-search--view .mtrl-search__content{animation:none}}.mtrl-search__container{position:relative;display:flex;align-items:center;height:56px;padding:0 4px;background-color:var(--mtrl-sys-color-surface-container-high);transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),border-radius 200ms cubic-bezier(0.2, 0, 0, 1),height 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search--bar:not(.mtrl-search--disabled) .mtrl-search__container:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, var(--mtrl-sys-color-surface-container-high))}.mtrl-search__leading-icon,.mtrl-search__clear-button,.mtrl-search__trailing-icon{--mtrl-search-layer: 0%;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;margin:0;padding:0;border:none;border-radius:50%;font:inherit;background-color:color-mix(in srgb, currentColor var(--mtrl-search-layer), transparent);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__leading-icon svg,.mtrl-search__clear-button svg,.mtrl-search__trailing-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__leading-icon:hover,.mtrl-search__clear-button:hover,.mtrl-search__trailing-icon:hover{--mtrl-search-layer: 8%}.mtrl-search__leading-icon:focus-visible,.mtrl-search__leading-icon:active,.mtrl-search__clear-button:focus-visible,.mtrl-search__clear-button:active,.mtrl-search__trailing-icon:focus-visible,.mtrl-search__trailing-icon:active{--mtrl-search-layer: 10%}.mtrl-search__leading-icon:focus,.mtrl-search__clear-button:focus,.mtrl-search__trailing-icon:focus{outline:none}.mtrl-search__leading-icon:focus-visible,.mtrl-search__clear-button:focus-visible,.mtrl-search__trailing-icon:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-search__leading-icon[aria-disabled=true],.mtrl-search__clear-button[aria-disabled=true],.mtrl-search__trailing-icon[aria-disabled=true]{cursor:not-allowed;opacity:.38;--mtrl-search-layer: 0%}.mtrl-search__leading-icon{color:var(--mtrl-sys-color-on-surface)}.mtrl-search__clear-button,.mtrl-search__trailing-icon{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__clear-button{opacity:1;visibility:visible;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s,background-color 200ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-search__clear-button--hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms cubic-bezier(0.2, 0, 0, 1),visibility 0s 200ms}.mtrl-search__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px}.mtrl-search__avatar>*{width:30px;height:30px;border-radius:50%;object-fit:cover}.mtrl-search__trailing{display:flex;align-items:center}.mtrl-search__input-wrapper{flex:1;min-width:0;height:100%;margin:0 4px;display:flex;align-items:center}.mtrl-search__input{width:100%;height:100%;min-height:36px;padding:8px 0;border:none;background:rgba(0,0,0,0);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);caret-color:var(--mtrl-sys-color-primary);outline:none;box-sizing:border-box}.mtrl-search__input::placeholder{color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__input:disabled{cursor:not-allowed;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__divider{width:100%;height:1px;background-color:var(--mtrl-sys-color-outline);flex-shrink:0}.mtrl-search__content{display:flex;flex-direction:column;background-color:var(--mtrl-sys-color-surface-container-high);overflow:hidden}.mtrl-search__suggestions{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.mtrl-search__suggestion-list{list-style:none;padding:8px 0;margin:0}.mtrl-search__suggestion-item{display:flex;align-items:center;gap:16px;padding:8px 16px;min-height:56px;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);cursor:pointer;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box}.mtrl-search__suggestion-item:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 8%, transparent)}.mtrl-search__suggestion-item--selected,.mtrl-search__suggestion-item--selected:hover{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 10%, transparent);outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-search__suggestion-item strong{font-weight:600;color:var(--mtrl-sys-color-on-surface)}.mtrl-search__suggestion-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-search__suggestion-icon svg{width:24px;height:24px;fill:currentColor}.mtrl-search__suggestion-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-search__suggestion-item--two-line{min-height:72px}.mtrl-search__suggestion-supporting{display:block;overflow:hidden;text-overflow:ellipsis;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-search__suggestion-divider{height:1px;margin:8px 0;background-color:var(--mtrl-sys-color-outline-variant)}.mtrl-search__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width: 599px){.mtrl-search{min-width:0;max-width:100%}.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{inset:0;width:100%;height:100%;background-color:var(--mtrl-sys-color-surface-container-high)}.mtrl-search--docked.mtrl-search--view .mtrl-search__container{border-radius:0}.mtrl-search--docked.mtrl-search--view .mtrl-search__content{flex:1;max-height:none;border-radius:0}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__surface{box-sizing:border-box;padding:12px;background-color:var(--mtrl-sys-color-surface-container-low)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__container{height:56px;border-radius:min(var(--mtrl-sys-shape-corner-full, 9999px),56px/2)}.mtrl-search--contained.mtrl-search--docked.mtrl-search--view .mtrl-search__content{margin-top:8px;background-color:rgba(0,0,0,0);border-radius:0}}" });
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-direction: 1}:where(.mtrl-rtl) .mtrl-side-sheet,:where(:host(.mtrl-rtl)) .mtrl-side-sheet,[dir=rtl] .mtrl-side-sheet:not(:where(.mtrl-ltr,.mtrl-ltr *)){--mtrl-side-sheet-direction: -1}.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:calc(32px*var(--mtrl-side-sheet-direction)) 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:calc(-32px*var(--mtrl-side-sheet-direction)) 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),calc(32px*var(--mtrl-side-sheet-direction)) 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),calc(-32px*var(--mtrl-side-sheet-direction)) 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(calc(100% * var(--mtrl-side-sheet-direction)))}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(calc(-100% * var(--mtrl-side-sheet-direction)))}.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-direction: 1}:where(.mtrl-rtl) .mtrl-side-sheet,:where(:host(.mtrl-rtl)) .mtrl-side-sheet,[dir=rtl] .mtrl-side-sheet:not(:where(.mtrl-ltr,.mtrl-ltr *)){--mtrl-side-sheet-direction: -1}.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{font:inherit;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:0;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:calc(32px*var(--mtrl-side-sheet-direction)) 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:calc(-32px*var(--mtrl-side-sheet-direction)) 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),calc(32px*var(--mtrl-side-sheet-direction)) 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),calc(-32px*var(--mtrl-side-sheet-direction)) 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(calc(100% * var(--mtrl-side-sheet-direction)))}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(calc(-100% * var(--mtrl-side-sheet-direction)))}.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-direction: 1}:where(.mtrl-rtl) .mtrl-side-sheet,:where(:host(.mtrl-rtl)) .mtrl-side-sheet,[dir=rtl] .mtrl-side-sheet:not(:where(.mtrl-ltr,.mtrl-ltr *)){--mtrl-side-sheet-direction: -1}.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:calc(32px*var(--mtrl-side-sheet-direction)) 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:calc(-32px*var(--mtrl-side-sheet-direction)) 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),calc(32px*var(--mtrl-side-sheet-direction)) 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),calc(-32px*var(--mtrl-side-sheet-direction)) 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(calc(100% * var(--mtrl-side-sheet-direction)))}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(calc(-100% * var(--mtrl-side-sheet-direction)))}.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-direction: 1}:where(.mtrl-rtl) .mtrl-side-sheet,:where(:host(.mtrl-rtl)) .mtrl-side-sheet,[dir=rtl] .mtrl-side-sheet:not(:where(.mtrl-ltr,.mtrl-ltr *)){--mtrl-side-sheet-direction: -1}.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{font:inherit;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:0;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:calc(32px*var(--mtrl-side-sheet-direction)) 0 0 0 var(--mtrl-sys-color-surface)}.mtrl-side-sheet--standard.mtrl-side-sheet--start .mtrl-side-sheet__container{box-shadow:calc(-32px*var(--mtrl-side-sheet-direction)) 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),calc(32px*var(--mtrl-side-sheet-direction)) 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),calc(-32px*var(--mtrl-side-sheet-direction)) 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(calc(100% * var(--mtrl-side-sheet-direction)))}.mtrl-side-sheet--start{justify-content:flex-start}.mtrl-side-sheet--start .mtrl-side-sheet__container{transform:translateX(calc(-100% * var(--mtrl-side-sheet-direction)))}.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/slider.css CHANGED
@@ -1 +1 @@
1
- .mtrl-slider{position:relative;width:100%;display:flex;flex-direction:column;user-select:none;touch-action:none;--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-primary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container));--mtrl-slider-tick-color: var(--mtrl-slider-on-color, var(--mtrl-slider-inactive-track-color));--mtrl-slider-active-opacity: 1;--mtrl-slider-inactive-opacity: 1;--mtrl-slider-tick-opacity: 1;--mtrl-slider-active-tick-opacity: 1}.mtrl-slider:focus{outline:none}.mtrl-slider__label{display:block;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);margin-bottom:4px}.mtrl-slider__label--end{margin-bottom:0;margin-top:4px}.mtrl-slider__icon{display:flex;align-items:center;justify-content:center;color:var(--mtrl-sys-color-on-surface-variant);width:40px;height:40px}.mtrl-slider__icon svg{width:24px;height:24px}.mtrl-slider--icon{display:grid;grid-template-columns:40px minmax(0, 1fr);grid-template-areas:". label" "icon track";column-gap:8px;align-items:center}.mtrl-slider--icon .mtrl-slider__label{grid-area:label}.mtrl-slider--icon .mtrl-slider__container{grid-area:track}.mtrl-slider--icon .mtrl-slider__icon{grid-area:icon}.mtrl-slider--icon.mtrl-slider--label-end{grid-template-areas:"icon track" ". label"}.mtrl-slider--icon-end{grid-template-columns:minmax(0, 1fr) 40px;grid-template-areas:"label ." "track icon"}.mtrl-slider--icon-end.mtrl-slider--label-end{grid-template-areas:"track icon" "label ."}.mtrl-slider__container{position:relative;height:40px;display:flex;align-items:center}.mtrl-slider--secondary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-secondary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container))}.mtrl-slider--tertiary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-tertiary-container))}.mtrl-slider--error{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-error));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-error-container))}.mtrl-slider--disabled{--mtrl-slider-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-inactive-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-tick-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-active-opacity: 0.38;--mtrl-slider-inactive-opacity: 0.12;--mtrl-slider-tick-opacity: 0.38;--mtrl-slider-active-tick-opacity: 0.12}.mtrl-slider__visual{position:absolute;inset:0;pointer-events:none;container-type:size}.mtrl-slider__track{position:absolute;top:50%;width:100%;transform:translateY(-50%);overflow:hidden}.mtrl-slider__segment{position:absolute;height:100%;border-radius:2px;background:var(--mtrl-slider-inactive-track-color);opacity:var(--mtrl-slider-inactive-opacity)}.mtrl-slider__segment--active{background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__ticks{position:absolute;inset:0;color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity);background-image:radial-gradient(circle at center, currentColor 2px, transparent 2px);background-repeat:repeat-x}.mtrl-slider__ticks--active{color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon svg{width:100%;height:100%;fill:currentColor}.mtrl-slider__inset-icon--inactive{color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity)}.mtrl-slider__dot{position:absolute;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__handle{position:absolute;top:50%;transform:translate(-50%, -50%);cursor:pointer;z-index:4;width:14px;height:50px;border-radius:16px;background-color:rgba(255,0,0,0)}.mtrl-slider__handle:focus{outline:none}.mtrl-slider__handle::before{pointer-events:none;content:"";position:absolute;width:4px;height:100%;background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary));border-radius:var(--mtrl-sys-shape-corner-full, 9999px);left:50%;top:50%;transform:translate(-50%, -50%)}.mtrl-slider--secondary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--disabled .mtrl-slider__handle::before{background-color:var(--mtrl-sys-color-on-surface);opacity:.38}.mtrl-slider__handle::before{pointer-events:none}.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider__handle:active::before,.mtrl-slider__handle:focus-visible::before,.mtrl-slider__handle--focused::before{width:2px}.mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--disabled .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-on-surface);opacity:.38}.mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:active::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--range .mtrl-slider__handle:nth-of-type(1){z-index:3}.mtrl-slider--range .mtrl-slider__dot{z-index:2}.mtrl-slider__value{position:absolute;bottom:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);left:0;box-sizing:border-box;min-width:48px;height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center;background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;white-space:nowrap;transform:translateX(-50%);transform-origin:50% 100%;scale:0;visibility:hidden;opacity:0;transition:scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms;pointer-events:none}.mtrl-slider__value--visible{visibility:visible;opacity:1;scale:1;transition:scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--settling .mtrl-slider__handle,.mtrl-slider--settling .mtrl-slider__inset-icon{transition:left 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),right 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),bottom 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),top 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-slider--settling .mtrl-slider__segment{transition:left 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),right 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),bottom 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),top 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),width 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),height 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-slider--settling .mtrl-slider__value{transition:left 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),right 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),bottom 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),top 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),scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms}.mtrl-slider--settling .mtrl-slider__value--visible{transition:left 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),right 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),bottom 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),top 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),scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--vertical{width:auto;height:100%;align-items:center}.mtrl-slider--vertical .mtrl-slider__container{height:100%;min-height:120px}.mtrl-slider--vertical .mtrl-slider__track{top:0;left:50%;width:auto;height:100%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__segment{width:100%}.mtrl-slider--vertical .mtrl-slider__ticks{background-repeat:repeat-y}.mtrl-slider--vertical .mtrl-slider__dot{top:auto;left:calc(50% - 2px)}.mtrl-slider--vertical .mtrl-slider__inset-icon{top:auto;left:50%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__handle{top:auto;left:50%;height:14px}.mtrl-slider--vertical .mtrl-slider__handle::before{width:100%;height:4px}.mtrl-slider--vertical.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider--vertical .mtrl-slider__handle:active::before,.mtrl-slider--vertical .mtrl-slider__handle:focus-visible::before,.mtrl-slider--vertical .mtrl-slider__handle--focused::before{width:100%;height:2px}.mtrl-slider--vertical .mtrl-slider__value{left:auto;bottom:auto;right:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);transform-origin:100% 50%}.mtrl-slider--disabled .mtrl-slider__handle{cursor:default;pointer-events:none}.mtrl-slider--disabled .mtrl-slider__handle::before{opacity:.38;background-color:var(--mtrl-sys-color-on-surface)}.mtrl-slider--discrete .mtrl-slider__tick{width:4px;height:4px}
1
+ .mtrl-slider{position:relative;width:100%;display:flex;flex-direction:column;user-select:none;touch-action:none;--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-primary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container));--mtrl-slider-tick-color: var(--mtrl-slider-on-color, var(--mtrl-slider-inactive-track-color));--mtrl-slider-active-opacity: 1;--mtrl-slider-inactive-opacity: 1;--mtrl-slider-tick-opacity: 1;--mtrl-slider-active-tick-opacity: 1}.mtrl-slider:focus{outline:none}.mtrl-slider__label{display:block;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);margin-bottom:4px}.mtrl-slider__label--end{margin-bottom:0;margin-top:4px}.mtrl-slider__icon{display:flex;align-items:center;justify-content:center;color:var(--mtrl-sys-color-on-surface-variant);width:40px;height:40px}.mtrl-slider__icon svg{width:24px;height:24px}.mtrl-slider--icon{display:grid;grid-template-columns:40px minmax(0, 1fr);grid-template-areas:". label" "icon track";column-gap:8px;align-items:center}.mtrl-slider--icon .mtrl-slider__label{grid-area:label}.mtrl-slider--icon .mtrl-slider__container{grid-area:track}.mtrl-slider--icon .mtrl-slider__icon{grid-area:icon}.mtrl-slider--icon.mtrl-slider--label-end{grid-template-areas:"icon track" ". label"}.mtrl-slider--icon-end{grid-template-columns:minmax(0, 1fr) 40px;grid-template-areas:"label ." "track icon"}.mtrl-slider--icon-end.mtrl-slider--label-end{grid-template-areas:"track icon" "label ."}.mtrl-slider__container{position:relative;height:40px;display:flex;align-items:center}.mtrl-slider--secondary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-secondary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container))}.mtrl-slider--tertiary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-tertiary-container))}.mtrl-slider--error{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-error));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-error-container))}.mtrl-slider--disabled{--mtrl-slider-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-inactive-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-tick-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-active-opacity: 0.38;--mtrl-slider-inactive-opacity: 0.12;--mtrl-slider-tick-opacity: 0.38;--mtrl-slider-active-tick-opacity: 0.12}.mtrl-slider__visual{position:absolute;inset:0;pointer-events:none;container-type:size}.mtrl-slider__track{position:absolute;top:50%;width:100%;transform:translateY(-50%);overflow:hidden}.mtrl-slider__segment{position:absolute;height:100%;border-radius:2px;background:var(--mtrl-slider-inactive-track-color);opacity:var(--mtrl-slider-inactive-opacity)}.mtrl-slider__segment--active{background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__ticks{position:absolute;inset:0;color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity);background-image:radial-gradient(circle at center, currentColor 2px, transparent 2px);background-repeat:repeat-x}.mtrl-slider__ticks--active{color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon svg{width:100%;height:100%;fill:currentColor}.mtrl-slider__inset-icon--inactive{color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity)}.mtrl-slider__dot{position:absolute;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__handle{position:absolute;top:50%;transform:translate(-50%, -50%);cursor:pointer;z-index:4;width:14px;height:50px;border-radius:16px;background-color:rgba(255,0,0,0)}.mtrl-slider__handle:focus{outline:none}.mtrl-slider__handle::before{content:"";position:absolute;width:4px;height:100%;background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary));border-radius:var(--mtrl-sys-shape-corner-full, 9999px);left:50%;top:50%;transform:translate(-50%, -50%)}.mtrl-slider--secondary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider__handle::before{pointer-events:none}.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider__handle:active::before,.mtrl-slider__handle:focus-visible::before,.mtrl-slider__handle--focused::before{width:2px}.mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--disabled .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-on-surface);opacity:.38}.mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:active::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--range .mtrl-slider__handle:nth-of-type(1){z-index:3}.mtrl-slider--range .mtrl-slider__dot{z-index:2}.mtrl-slider__value{position:absolute;bottom:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);left:0;box-sizing:border-box;min-width:48px;height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center;background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;white-space:nowrap;transform:translateX(-50%);transform-origin:50% 100%;scale:0;visibility:hidden;opacity:0;transition:scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms;pointer-events:none}.mtrl-slider__value--visible{visibility:visible;opacity:1;scale:1;transition:scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--settling .mtrl-slider__handle,.mtrl-slider--settling .mtrl-slider__inset-icon{transition:left 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),right 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),bottom 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),top 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-slider--settling .mtrl-slider__segment{transition:left 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),right 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),bottom 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),top 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),width 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),height 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-slider--settling .mtrl-slider__value{transition:left 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),right 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),bottom 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),top 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),scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms}.mtrl-slider--settling .mtrl-slider__value--visible{transition:left 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),right 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),bottom 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),top 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),scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--vertical{width:auto;height:100%;align-items:center}.mtrl-slider--vertical .mtrl-slider__container{height:100%;min-height:120px}.mtrl-slider--vertical .mtrl-slider__track{top:0;left:50%;width:auto;height:100%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__segment{width:100%}.mtrl-slider--vertical .mtrl-slider__ticks{background-repeat:repeat-y}.mtrl-slider--vertical .mtrl-slider__dot{top:auto;left:calc(50% - 2px)}.mtrl-slider--vertical .mtrl-slider__inset-icon{top:auto;left:50%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__handle{top:auto;left:50%;height:14px}.mtrl-slider--vertical .mtrl-slider__handle::before{width:100%;height:4px}.mtrl-slider--vertical.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider--vertical .mtrl-slider__handle:active::before,.mtrl-slider--vertical .mtrl-slider__handle:focus-visible::before,.mtrl-slider--vertical .mtrl-slider__handle--focused::before{width:100%;height:2px}.mtrl-slider--vertical .mtrl-slider__value{left:auto;bottom:auto;right:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);transform-origin:100% 50%}.mtrl-slider--disabled .mtrl-slider__handle{cursor:default;pointer-events:none}.mtrl-slider--disabled .mtrl-slider__handle::before{opacity:.38;background-color:var(--mtrl-sys-color-on-surface)}.mtrl-slider--discrete .mtrl-slider__tick{width:4px;height:4px}
package/dist/elements/css/slider.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "slider": ".mtrl-slider{position:relative;width:100%;display:flex;flex-direction:column;user-select:none;touch-action:none;--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-primary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container));--mtrl-slider-tick-color: var(--mtrl-slider-on-color, var(--mtrl-slider-inactive-track-color));--mtrl-slider-active-opacity: 1;--mtrl-slider-inactive-opacity: 1;--mtrl-slider-tick-opacity: 1;--mtrl-slider-active-tick-opacity: 1}.mtrl-slider:focus{outline:none}.mtrl-slider__label{display:block;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);margin-bottom:4px}.mtrl-slider__label--end{margin-bottom:0;margin-top:4px}.mtrl-slider__icon{display:flex;align-items:center;justify-content:center;color:var(--mtrl-sys-color-on-surface-variant);width:40px;height:40px}.mtrl-slider__icon svg{width:24px;height:24px}.mtrl-slider--icon{display:grid;grid-template-columns:40px minmax(0, 1fr);grid-template-areas:\". label\" \"icon track\";column-gap:8px;align-items:center}.mtrl-slider--icon .mtrl-slider__label{grid-area:label}.mtrl-slider--icon .mtrl-slider__container{grid-area:track}.mtrl-slider--icon .mtrl-slider__icon{grid-area:icon}.mtrl-slider--icon.mtrl-slider--label-end{grid-template-areas:\"icon track\" \". label\"}.mtrl-slider--icon-end{grid-template-columns:minmax(0, 1fr) 40px;grid-template-areas:\"label .\" \"track icon\"}.mtrl-slider--icon-end.mtrl-slider--label-end{grid-template-areas:\"track icon\" \"label .\"}.mtrl-slider__container{position:relative;height:40px;display:flex;align-items:center}.mtrl-slider--secondary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-secondary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container))}.mtrl-slider--tertiary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-tertiary-container))}.mtrl-slider--error{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-error));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-error-container))}.mtrl-slider--disabled{--mtrl-slider-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-inactive-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-tick-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-active-opacity: 0.38;--mtrl-slider-inactive-opacity: 0.12;--mtrl-slider-tick-opacity: 0.38;--mtrl-slider-active-tick-opacity: 0.12}.mtrl-slider__visual{position:absolute;inset:0;pointer-events:none;container-type:size}.mtrl-slider__track{position:absolute;top:50%;width:100%;transform:translateY(-50%);overflow:hidden}.mtrl-slider__segment{position:absolute;height:100%;border-radius:2px;background:var(--mtrl-slider-inactive-track-color);opacity:var(--mtrl-slider-inactive-opacity)}.mtrl-slider__segment--active{background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__ticks{position:absolute;inset:0;color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity);background-image:radial-gradient(circle at center, currentColor 2px, transparent 2px);background-repeat:repeat-x}.mtrl-slider__ticks--active{color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon svg{width:100%;height:100%;fill:currentColor}.mtrl-slider__inset-icon--inactive{color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity)}.mtrl-slider__dot{position:absolute;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__handle{position:absolute;top:50%;transform:translate(-50%, -50%);cursor:pointer;z-index:4;width:14px;height:50px;border-radius:16px;background-color:rgba(255,0,0,0)}.mtrl-slider__handle:focus{outline:none}.mtrl-slider__handle::before{pointer-events:none;content:\"\";position:absolute;width:4px;height:100%;background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary));border-radius:var(--mtrl-sys-shape-corner-full, 9999px);left:50%;top:50%;transform:translate(-50%, -50%)}.mtrl-slider--secondary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--disabled .mtrl-slider__handle::before{background-color:var(--mtrl-sys-color-on-surface);opacity:.38}.mtrl-slider__handle::before{pointer-events:none}.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider__handle:active::before,.mtrl-slider__handle:focus-visible::before,.mtrl-slider__handle--focused::before{width:2px}.mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--disabled .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-on-surface);opacity:.38}.mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:active::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--range .mtrl-slider__handle:nth-of-type(1){z-index:3}.mtrl-slider--range .mtrl-slider__dot{z-index:2}.mtrl-slider__value{position:absolute;bottom:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);left:0;box-sizing:border-box;min-width:48px;height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center;background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;white-space:nowrap;transform:translateX(-50%);transform-origin:50% 100%;scale:0;visibility:hidden;opacity:0;transition:scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms;pointer-events:none}.mtrl-slider__value--visible{visibility:visible;opacity:1;scale:1;transition:scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--settling .mtrl-slider__handle,.mtrl-slider--settling .mtrl-slider__inset-icon{transition:left 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),right 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),bottom 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),top 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-slider--settling .mtrl-slider__segment{transition:left 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),right 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),bottom 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),top 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),width 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),height 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-slider--settling .mtrl-slider__value{transition:left 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),right 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),bottom 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),top 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),scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms}.mtrl-slider--settling .mtrl-slider__value--visible{transition:left 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),right 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),bottom 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),top 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),scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--vertical{width:auto;height:100%;align-items:center}.mtrl-slider--vertical .mtrl-slider__container{height:100%;min-height:120px}.mtrl-slider--vertical .mtrl-slider__track{top:0;left:50%;width:auto;height:100%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__segment{width:100%}.mtrl-slider--vertical .mtrl-slider__ticks{background-repeat:repeat-y}.mtrl-slider--vertical .mtrl-slider__dot{top:auto;left:calc(50% - 2px)}.mtrl-slider--vertical .mtrl-slider__inset-icon{top:auto;left:50%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__handle{top:auto;left:50%;height:14px}.mtrl-slider--vertical .mtrl-slider__handle::before{width:100%;height:4px}.mtrl-slider--vertical.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider--vertical .mtrl-slider__handle:active::before,.mtrl-slider--vertical .mtrl-slider__handle:focus-visible::before,.mtrl-slider--vertical .mtrl-slider__handle--focused::before{width:100%;height:2px}.mtrl-slider--vertical .mtrl-slider__value{left:auto;bottom:auto;right:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);transform-origin:100% 50%}.mtrl-slider--disabled .mtrl-slider__handle{cursor:default;pointer-events:none}.mtrl-slider--disabled .mtrl-slider__handle::before{opacity:.38;background-color:var(--mtrl-sys-color-on-surface)}.mtrl-slider--discrete .mtrl-slider__tick{width:4px;height:4px}" });
3
+ registerStyles({ "slider": ".mtrl-slider{position:relative;width:100%;display:flex;flex-direction:column;user-select:none;touch-action:none;--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-primary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container));--mtrl-slider-tick-color: var(--mtrl-slider-on-color, var(--mtrl-slider-inactive-track-color));--mtrl-slider-active-opacity: 1;--mtrl-slider-inactive-opacity: 1;--mtrl-slider-tick-opacity: 1;--mtrl-slider-active-tick-opacity: 1}.mtrl-slider:focus{outline:none}.mtrl-slider__label{display:block;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);margin-bottom:4px}.mtrl-slider__label--end{margin-bottom:0;margin-top:4px}.mtrl-slider__icon{display:flex;align-items:center;justify-content:center;color:var(--mtrl-sys-color-on-surface-variant);width:40px;height:40px}.mtrl-slider__icon svg{width:24px;height:24px}.mtrl-slider--icon{display:grid;grid-template-columns:40px minmax(0, 1fr);grid-template-areas:\". label\" \"icon track\";column-gap:8px;align-items:center}.mtrl-slider--icon .mtrl-slider__label{grid-area:label}.mtrl-slider--icon .mtrl-slider__container{grid-area:track}.mtrl-slider--icon .mtrl-slider__icon{grid-area:icon}.mtrl-slider--icon.mtrl-slider--label-end{grid-template-areas:\"icon track\" \". label\"}.mtrl-slider--icon-end{grid-template-columns:minmax(0, 1fr) 40px;grid-template-areas:\"label .\" \"track icon\"}.mtrl-slider--icon-end.mtrl-slider--label-end{grid-template-areas:\"track icon\" \"label .\"}.mtrl-slider__container{position:relative;height:40px;display:flex;align-items:center}.mtrl-slider--secondary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-secondary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-secondary-container))}.mtrl-slider--tertiary{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-tertiary-container))}.mtrl-slider--error{--mtrl-slider-track-color: var(--mtrl-slider-color, var(--mtrl-sys-color-error));--mtrl-slider-inactive-track-color: var(--mtrl-slider-container-color, var(--mtrl-sys-color-error-container))}.mtrl-slider--disabled{--mtrl-slider-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-inactive-track-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-tick-color: var(--mtrl-sys-color-on-surface);--mtrl-slider-active-opacity: 0.38;--mtrl-slider-inactive-opacity: 0.12;--mtrl-slider-tick-opacity: 0.38;--mtrl-slider-active-tick-opacity: 0.12}.mtrl-slider__visual{position:absolute;inset:0;pointer-events:none;container-type:size}.mtrl-slider__track{position:absolute;top:50%;width:100%;transform:translateY(-50%);overflow:hidden}.mtrl-slider__segment{position:absolute;height:100%;border-radius:2px;background:var(--mtrl-slider-inactive-track-color);opacity:var(--mtrl-slider-inactive-opacity)}.mtrl-slider__segment--active{background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__ticks{position:absolute;inset:0;color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity);background-image:radial-gradient(circle at center, currentColor 2px, transparent 2px);background-repeat:repeat-x}.mtrl-slider__ticks--active{color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--mtrl-slider-tick-color);opacity:var(--mtrl-slider-active-tick-opacity)}.mtrl-slider__inset-icon svg{width:100%;height:100%;fill:currentColor}.mtrl-slider__inset-icon--inactive{color:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-tick-opacity)}.mtrl-slider__dot{position:absolute;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--mtrl-slider-track-color);opacity:var(--mtrl-slider-active-opacity)}.mtrl-slider__handle{position:absolute;top:50%;transform:translate(-50%, -50%);cursor:pointer;z-index:4;width:14px;height:50px;border-radius:16px;background-color:rgba(255,0,0,0)}.mtrl-slider__handle:focus{outline:none}.mtrl-slider__handle::before{content:\"\";position:absolute;width:4px;height:100%;background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary));border-radius:var(--mtrl-sys-shape-corner-full, 9999px);left:50%;top:50%;transform:translate(-50%, -50%)}.mtrl-slider--secondary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider__handle::before{pointer-events:none}.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider__handle:active::before,.mtrl-slider__handle:focus-visible::before,.mtrl-slider__handle--focused::before{width:2px}.mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:hover::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--disabled .mtrl-slider__handle:hover::before{background-color:var(--mtrl-sys-color-on-surface);opacity:.38}.mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-primary))}.mtrl-slider--secondary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-secondary))}.mtrl-slider--tertiary .mtrl-slider__handle:active::before{background-color:var(--mtrl-slider-color, var(--mtrl-sys-color-tertiary))}.mtrl-slider--error .mtrl-slider__handle:active::before{background-color:var(--mtrl-sys-color-error)}.mtrl-slider--range .mtrl-slider__handle:nth-of-type(1){z-index:3}.mtrl-slider--range .mtrl-slider__dot{z-index:2}.mtrl-slider__value{position:absolute;bottom:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);left:0;box-sizing:border-box;min-width:48px;height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center;background-color:var(--mtrl-sys-color-inverse-surface);color:var(--mtrl-sys-color-inverse-on-surface);border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;white-space:nowrap;transform:translateX(-50%);transform-origin:50% 100%;scale:0;visibility:hidden;opacity:0;transition:scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms;pointer-events:none}.mtrl-slider__value--visible{visibility:visible;opacity:1;scale:1;transition:scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--settling .mtrl-slider__handle,.mtrl-slider--settling .mtrl-slider__inset-icon{transition:left 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),right 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),bottom 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),top 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-slider--settling .mtrl-slider__segment{transition:left 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),right 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),bottom 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),top 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),width 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),height 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-slider--settling .mtrl-slider__value{transition:left 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),right 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),bottom 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),top 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),scale 150ms cubic-bezier(0.3, 0, 0.8, 0.15),opacity 150ms cubic-bezier(0.3, 0, 0.8, 0.15),visibility 0s linear 150ms}.mtrl-slider--settling .mtrl-slider__value--visible{transition:left 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),right 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),bottom 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),top 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),scale 400ms cubic-bezier(0.05, 0.7, 0.1, 1),opacity 400ms cubic-bezier(0.05, 0.7, 0.1, 1),visibility 0s}.mtrl-slider--vertical{width:auto;height:100%;align-items:center}.mtrl-slider--vertical .mtrl-slider__container{height:100%;min-height:120px}.mtrl-slider--vertical .mtrl-slider__track{top:0;left:50%;width:auto;height:100%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__segment{width:100%}.mtrl-slider--vertical .mtrl-slider__ticks{background-repeat:repeat-y}.mtrl-slider--vertical .mtrl-slider__dot{top:auto;left:calc(50% - 2px)}.mtrl-slider--vertical .mtrl-slider__inset-icon{top:auto;left:50%;transform:translateX(-50%)}.mtrl-slider--vertical .mtrl-slider__handle{top:auto;left:50%;height:14px}.mtrl-slider--vertical .mtrl-slider__handle::before{width:100%;height:4px}.mtrl-slider--vertical.mtrl-slider--dragging .mtrl-slider__handle::before,.mtrl-slider--vertical .mtrl-slider__handle:active::before,.mtrl-slider--vertical .mtrl-slider__handle:focus-visible::before,.mtrl-slider--vertical .mtrl-slider__handle--focused::before{width:100%;height:2px}.mtrl-slider--vertical .mtrl-slider__value{left:auto;bottom:auto;right:calc(50% + var(--mtrl-slider-handle-height, 44px)/2 + 12px);transform-origin:100% 50%}.mtrl-slider--disabled .mtrl-slider__handle{cursor:default;pointer-events:none}.mtrl-slider--disabled .mtrl-slider__handle::before{opacity:.38;background-color:var(--mtrl-sys-color-on-surface)}.mtrl-slider--discrete .mtrl-slider__tick{width:4px;height:4px}" });
package/dist/elements/css/switch.css CHANGED
@@ -1 +1 @@
1
- .mtrl-switch{display:inline-flex;flex-direction:column;position:relative;width:100%;padding:4px 0;user-select:none}.mtrl-switch__container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:48px;width:100%;column-gap:12px}.mtrl-switch:where(:not(:has(.mtrl-switch__label,.mtrl-switch__helper))) .mtrl-switch__container{column-gap:0;min-height:40px}.mtrl-switch__content{display:flex;flex-direction:column;flex-grow:1}.mtrl-switch--label-end .mtrl-switch__container{flex-direction:row-reverse}.mtrl-switch__label{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-switch__input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.mtrl-switch__input:disabled{cursor:not-allowed}.mtrl-switch__input:focus-visible~.mtrl-switch__track{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-switch__track{position:relative;flex-shrink:0;min-width:52px;height:32px;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-highest);border:2px solid var(--mtrl-sys-color-outline);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),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-switch__track::after{content:"";position:absolute;width:40px;height:40px;top:-6px;inset-inline-start:-6px;background-color:var(--mtrl-sys-color-on-surface);opacity:0;border-radius:50%;z-index: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),inset-inline-start 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),inset 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);pointer-events:none}.mtrl-switch__thumb{position:absolute;top:6px;inset-inline-start:6px;width:16px;height:16px;border-radius:50%;background-color:var(--mtrl-sys-color-outline);transition:inset-inline-start 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),inset 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),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),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);display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.mtrl-switch__thumb-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(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),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);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-switch__thumb-icon svg{width:16px;height:16px}.mtrl-switch__thumb-icon--unselected{color:var(--mtrl-sys-color-surface-container-highest)}.mtrl-switch__helper{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-switch__helper--error{color:var(--mtrl-sys-color-error)}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb{width:24px;height:24px;top:2px;inset-inline-start:2px}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb-icon--unselected{opacity:1;transform:scale(1)}.mtrl-switch--checked .mtrl-switch__track{background-color:var(--mtrl-sys-color-primary);border-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__track::after{inset-inline-start:14px;background-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-primary);width:24px;height:24px;top:2px;inset-inline-start:22px}.mtrl-switch--checked .mtrl-switch__thumb-icon:not(.mtrl-switch__thumb-icon--unselected){opacity:1;transform:scale(1)}.mtrl-switch--dense .mtrl-switch__container{min-height:initial}.mtrl-switch--error .mtrl-switch__track{border-color:var(--mtrl-sys-color-error)}.mtrl-switch--disabled{pointer-events:none}.mtrl-switch--disabled .mtrl-switch__track{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent);border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb-icon--unselected{color:color-mix(in srgb, var(--mtrl-sys-color-surface-container-highest) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__label,.mtrl-switch--disabled .mtrl-switch__helper{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__track{border-color:rgba(0,0,0,0)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-surface)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb-icon{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-primary-container)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:hover~.mtrl-switch__track::after{opacity:.08}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:focus-visible~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{width:28px;height:28px;top:0;inset-inline-start:0}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{inset-inline-start:20px}@media(prefers-reduced-motion: reduce){.mtrl-switch .mtrl-switch__track,.mtrl-switch .mtrl-switch__thumb,.mtrl-switch .mtrl-switch__thumb-icon{transition:none}}@media(forced-colors: active){.mtrl-switch .mtrl-switch__track{border-width:2px}.mtrl-switch--checked .mtrl-switch__track{border-color:currentColor}}
1
+ .mtrl-switch{display:inline-flex;flex-direction:column;position:relative;width:100%;padding:4px 0;user-select:none}.mtrl-switch__container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:48px;width:100%;column-gap:12px}.mtrl-switch:where(:not(:has(.mtrl-switch__label,.mtrl-switch__helper))) .mtrl-switch__container{column-gap:0;min-height:40px}.mtrl-switch__content{display:flex;flex-direction:column;flex-grow:1}.mtrl-switch--label-end .mtrl-switch__container{flex-direction:row-reverse}.mtrl-switch__label{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-switch__input{font:inherit;position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.mtrl-switch__input:disabled{cursor:not-allowed}.mtrl-switch__input:focus-visible~.mtrl-switch__track{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-switch__track{position:relative;flex-shrink:0;min-width:52px;height:32px;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-highest);border:2px solid var(--mtrl-sys-color-outline);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),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-switch__track::after{content:"";position:absolute;width:40px;height:40px;top:-6px;inset-inline-start:-6px;background-color:var(--mtrl-sys-color-on-surface);opacity:0;border-radius:50%;z-index: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),inset-inline-start 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),inset 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);pointer-events:none}.mtrl-switch__thumb{position:absolute;top:6px;inset-inline-start:6px;width:16px;height:16px;border-radius:50%;background-color:var(--mtrl-sys-color-outline);transition:inset-inline-start 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),inset 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),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),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);display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.mtrl-switch__thumb-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(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),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);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-switch__thumb-icon svg{width:16px;height:16px}.mtrl-switch__thumb-icon--unselected{color:var(--mtrl-sys-color-surface-container-highest)}.mtrl-switch__helper{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-switch__helper--error{color:var(--mtrl-sys-color-error)}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb{width:24px;height:24px;top:2px;inset-inline-start:2px}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb-icon--unselected{opacity:1;transform:scale(1)}.mtrl-switch--checked .mtrl-switch__track{background-color:var(--mtrl-sys-color-primary);border-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__track::after{inset-inline-start:14px;background-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-primary);width:24px;height:24px;top:2px;inset-inline-start:22px}.mtrl-switch--checked .mtrl-switch__thumb-icon:not(.mtrl-switch__thumb-icon--unselected){opacity:1;transform:scale(1)}.mtrl-switch--dense .mtrl-switch__container{min-height:initial}.mtrl-switch--error .mtrl-switch__track{border-color:var(--mtrl-sys-color-error)}.mtrl-switch--disabled{pointer-events:none}.mtrl-switch--disabled .mtrl-switch__track{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent);border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb-icon--unselected{color:color-mix(in srgb, var(--mtrl-sys-color-surface-container-highest) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__label,.mtrl-switch--disabled .mtrl-switch__helper{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__track{border-color:rgba(0,0,0,0)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-surface)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb-icon{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-primary-container)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:hover~.mtrl-switch__track::after{opacity:.08}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:focus-visible~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{width:28px;height:28px;top:0;inset-inline-start:0}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{inset-inline-start:20px}@media(prefers-reduced-motion: reduce){.mtrl-switch .mtrl-switch__track,.mtrl-switch .mtrl-switch__thumb,.mtrl-switch .mtrl-switch__thumb-icon{transition:none}}@media(forced-colors: active){.mtrl-switch .mtrl-switch__track{border-width:2px}.mtrl-switch--checked .mtrl-switch__track{border-color:currentColor}}
package/dist/elements/css/switch.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./ripple.js";
2
2
  import { registerStyles } from "../styles.js";
3
- registerStyles({ "switch": ".mtrl-switch{display:inline-flex;flex-direction:column;position:relative;width:100%;padding:4px 0;user-select:none}.mtrl-switch__container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:48px;width:100%;column-gap:12px}.mtrl-switch:where(:not(:has(.mtrl-switch__label,.mtrl-switch__helper))) .mtrl-switch__container{column-gap:0;min-height:40px}.mtrl-switch__content{display:flex;flex-direction:column;flex-grow:1}.mtrl-switch--label-end .mtrl-switch__container{flex-direction:row-reverse}.mtrl-switch__label{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-switch__input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.mtrl-switch__input:disabled{cursor:not-allowed}.mtrl-switch__input:focus-visible~.mtrl-switch__track{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-switch__track{position:relative;flex-shrink:0;min-width:52px;height:32px;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-highest);border:2px solid var(--mtrl-sys-color-outline);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),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-switch__track::after{content:\"\";position:absolute;width:40px;height:40px;top:-6px;inset-inline-start:-6px;background-color:var(--mtrl-sys-color-on-surface);opacity:0;border-radius:50%;z-index: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),inset-inline-start 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),inset 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);pointer-events:none}.mtrl-switch__thumb{position:absolute;top:6px;inset-inline-start:6px;width:16px;height:16px;border-radius:50%;background-color:var(--mtrl-sys-color-outline);transition:inset-inline-start 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),inset 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),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),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);display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.mtrl-switch__thumb-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(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),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);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-switch__thumb-icon svg{width:16px;height:16px}.mtrl-switch__thumb-icon--unselected{color:var(--mtrl-sys-color-surface-container-highest)}.mtrl-switch__helper{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-switch__helper--error{color:var(--mtrl-sys-color-error)}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb{width:24px;height:24px;top:2px;inset-inline-start:2px}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb-icon--unselected{opacity:1;transform:scale(1)}.mtrl-switch--checked .mtrl-switch__track{background-color:var(--mtrl-sys-color-primary);border-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__track::after{inset-inline-start:14px;background-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-primary);width:24px;height:24px;top:2px;inset-inline-start:22px}.mtrl-switch--checked .mtrl-switch__thumb-icon:not(.mtrl-switch__thumb-icon--unselected){opacity:1;transform:scale(1)}.mtrl-switch--dense .mtrl-switch__container{min-height:initial}.mtrl-switch--error .mtrl-switch__track{border-color:var(--mtrl-sys-color-error)}.mtrl-switch--disabled{pointer-events:none}.mtrl-switch--disabled .mtrl-switch__track{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent);border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb-icon--unselected{color:color-mix(in srgb, var(--mtrl-sys-color-surface-container-highest) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__label,.mtrl-switch--disabled .mtrl-switch__helper{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__track{border-color:rgba(0,0,0,0)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-surface)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb-icon{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-primary-container)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:hover~.mtrl-switch__track::after{opacity:.08}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:focus-visible~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{width:28px;height:28px;top:0;inset-inline-start:0}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{inset-inline-start:20px}@media(prefers-reduced-motion: reduce){.mtrl-switch .mtrl-switch__track,.mtrl-switch .mtrl-switch__thumb,.mtrl-switch .mtrl-switch__thumb-icon{transition:none}}@media(forced-colors: active){.mtrl-switch .mtrl-switch__track{border-width:2px}.mtrl-switch--checked .mtrl-switch__track{border-color:currentColor}}" });
3
+ registerStyles({ "switch": ".mtrl-switch{display:inline-flex;flex-direction:column;position:relative;width:100%;padding:4px 0;user-select:none}.mtrl-switch__container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-height:48px;width:100%;column-gap:12px}.mtrl-switch:where(:not(:has(.mtrl-switch__label,.mtrl-switch__helper))) .mtrl-switch__container{column-gap:0;min-height:40px}.mtrl-switch__content{display:flex;flex-direction:column;flex-grow:1}.mtrl-switch--label-end .mtrl-switch__container{flex-direction:row-reverse}.mtrl-switch__label{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-switch__input{font:inherit;position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.mtrl-switch__input:disabled{cursor:not-allowed}.mtrl-switch__input:focus-visible~.mtrl-switch__track{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:2px}.mtrl-switch__track{position:relative;flex-shrink:0;min-width:52px;height:32px;box-sizing:border-box;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-highest);border:2px solid var(--mtrl-sys-color-outline);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),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-switch__track::after{content:\"\";position:absolute;width:40px;height:40px;top:-6px;inset-inline-start:-6px;background-color:var(--mtrl-sys-color-on-surface);opacity:0;border-radius:50%;z-index: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),inset-inline-start 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),inset 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);pointer-events:none}.mtrl-switch__thumb{position:absolute;top:6px;inset-inline-start:6px;width:16px;height:16px;border-radius:50%;background-color:var(--mtrl-sys-color-outline);transition:inset-inline-start 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),inset 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),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),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);display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}.mtrl-switch__thumb-icon{position:absolute;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(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),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);color:var(--mtrl-sys-color-on-primary-container)}.mtrl-switch__thumb-icon svg{width:16px;height:16px}.mtrl-switch__thumb-icon--unselected{color:var(--mtrl-sys-color-surface-container-highest)}.mtrl-switch__helper{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-switch__helper--error{color:var(--mtrl-sys-color-error)}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb{width:24px;height:24px;top:2px;inset-inline-start:2px}.mtrl-switch--icons:not(.mtrl-switch--checked) .mtrl-switch__thumb-icon--unselected{opacity:1;transform:scale(1)}.mtrl-switch--checked .mtrl-switch__track{background-color:var(--mtrl-sys-color-primary);border-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__track::after{inset-inline-start:14px;background-color:var(--mtrl-sys-color-primary)}.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-primary);width:24px;height:24px;top:2px;inset-inline-start:22px}.mtrl-switch--checked .mtrl-switch__thumb-icon:not(.mtrl-switch__thumb-icon--unselected){opacity:1;transform:scale(1)}.mtrl-switch--dense .mtrl-switch__container{min-height:initial}.mtrl-switch--error .mtrl-switch__track{border-color:var(--mtrl-sys-color-error)}.mtrl-switch--disabled{pointer-events:none}.mtrl-switch--disabled .mtrl-switch__track{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent);border-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 12%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb{background-color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__thumb-icon--unselected{color:color-mix(in srgb, var(--mtrl-sys-color-surface-container-highest) 38%, transparent)}.mtrl-switch--disabled .mtrl-switch__label,.mtrl-switch--disabled .mtrl-switch__helper{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__track{border-color:rgba(0,0,0,0)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-surface)}.mtrl-switch--disabled.mtrl-switch--checked .mtrl-switch__thumb-icon{color:color-mix(in srgb, var(--mtrl-sys-color-on-surface) 38%, transparent)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:is(:hover,:focus-visible,:active)~.mtrl-switch__track .mtrl-switch__thumb{background-color:var(--mtrl-sys-color-primary-container)}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:hover~.mtrl-switch__track::after{opacity:.08}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:focus-visible~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track::after{opacity:.1}.mtrl-switch:not(.mtrl-switch--disabled) .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{width:28px;height:28px;top:0;inset-inline-start:0}.mtrl-switch:not(.mtrl-switch--disabled).mtrl-switch--checked .mtrl-switch__input:active~.mtrl-switch__track .mtrl-switch__thumb{inset-inline-start:20px}@media(prefers-reduced-motion: reduce){.mtrl-switch .mtrl-switch__track,.mtrl-switch .mtrl-switch__thumb,.mtrl-switch .mtrl-switch__thumb-icon{transition:none}}@media(forced-colors: active){.mtrl-switch .mtrl-switch__track{border-width:2px}.mtrl-switch--checked .mtrl-switch__track{border-color:currentColor}}" });