mtrl 0.8.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (253) hide show
  1. package/dist/components/badge/config.d.ts +2 -2
  2. package/dist/components/bottom-sheet/bottom-sheet.js +1 -1
  3. package/dist/components/bottom-sheet/config.d.ts +2 -2
  4. package/dist/components/bottom-sheet/features/drag.d.ts +2 -2
  5. package/dist/components/bottom-sheet/features/drag.js +1 -1
  6. package/dist/components/button/api.d.ts +3 -3
  7. package/dist/components/button/button.d.ts +1 -1
  8. package/dist/components/button/config.d.ts +2 -2
  9. package/dist/components/button/features/progress.d.ts +17 -5
  10. package/dist/components/button-group/config.d.ts +20 -0
  11. package/dist/components/card/api.d.ts +10 -1
  12. package/dist/components/card/api.js +6 -1
  13. package/dist/components/card/card.js +1 -1
  14. package/dist/components/card/config.d.ts +15 -9
  15. package/dist/components/card/content.js +5 -2
  16. package/dist/components/card/features.d.ts +2 -1
  17. package/dist/components/card/types.d.ts +5 -4
  18. package/dist/components/carousel/config.d.ts +2 -2
  19. package/dist/components/carousel/features/slides.js +3 -2
  20. package/dist/components/checkbox/config.d.ts +2 -2
  21. package/dist/components/checkbox/types.d.ts +15 -16
  22. package/dist/components/chips/api.d.ts +6 -6
  23. package/dist/components/chips/chip/api.d.ts +2 -2
  24. package/dist/components/chips/chip/config.d.ts +6 -7
  25. package/dist/components/chips/config.d.ts +2 -2
  26. package/dist/components/chips/features/dom.js +0 -1
  27. package/dist/components/chips/types.d.ts +12 -1
  28. package/dist/components/datepicker/api.d.ts +5 -2
  29. package/dist/components/datepicker/config.d.ts +16 -13
  30. package/dist/components/datepicker/datepicker.js +10 -4
  31. package/dist/components/datepicker/render.d.ts +14 -6
  32. package/dist/components/datepicker/render.js +1 -1
  33. package/dist/components/datepicker/types.d.ts +51 -3
  34. package/dist/components/dialog/api.d.ts +1 -1
  35. package/dist/components/dialog/config.d.ts +3 -4
  36. package/dist/components/dialog/config.js +1 -1
  37. package/dist/components/dialog/features.js +1 -1
  38. package/dist/components/dialog/types.d.ts +1 -1
  39. package/dist/components/divider/features.js +2 -0
  40. package/dist/components/drawer/api.d.ts +3 -3
  41. package/dist/components/drawer/config.d.ts +2 -2
  42. package/dist/components/drawer/drawer.d.ts +1 -1
  43. package/dist/components/drawer/features/headline.d.ts +12 -2
  44. package/dist/components/drawer/features/items.d.ts +17 -3
  45. package/dist/components/drawer/features/state.d.ts +14 -2
  46. package/dist/components/extended-fab/api.d.ts +12 -4
  47. package/dist/components/extended-fab/api.js +12 -0
  48. package/dist/components/extended-fab/config.d.ts +10 -10
  49. package/dist/components/extended-fab/types.d.ts +4 -2
  50. package/dist/components/fab/api.d.ts +9 -2
  51. package/dist/components/fab/api.js +12 -0
  52. package/dist/components/fab/config.d.ts +8 -8
  53. package/dist/components/fab/types.d.ts +2 -1
  54. package/dist/components/icon-button/config.d.ts +2 -2
  55. package/dist/components/icon-button/features/toggle.d.ts +1 -5
  56. package/dist/components/icon-button/types.d.ts +6 -0
  57. package/dist/components/list/api.d.ts +18 -18
  58. package/dist/components/list/config.d.ts +6 -3
  59. package/dist/components/list/config.js +6 -7
  60. package/dist/components/list/features/renderer.js +2 -2
  61. package/dist/components/list/list.d.ts +20 -1
  62. package/dist/components/list/types.d.ts +32 -32
  63. package/dist/components/loading-indicator/config.d.ts +2 -2
  64. package/dist/components/loading-indicator/types.d.ts +3 -1
  65. package/dist/components/menu/api.d.ts +6 -5
  66. package/dist/components/menu/config.d.ts +2 -2
  67. package/dist/components/menu/features/keyboard.d.ts +19 -9
  68. package/dist/components/menu/types.d.ts +25 -9
  69. package/dist/components/navigation/config.d.ts +2 -2
  70. package/dist/components/navigation/features/controller.d.ts +1 -3
  71. package/dist/components/navigation/features/items.d.ts +1 -2
  72. package/dist/components/navigation/system/core.d.ts +6 -6
  73. package/dist/components/navigation/system/events.d.ts +3 -3
  74. package/dist/components/navigation/system/mobile.d.ts +6 -6
  75. package/dist/components/navigation/system/state.d.ts +3 -3
  76. package/dist/components/navigation/system/types.d.ts +43 -11
  77. package/dist/components/navigation/types.d.ts +15 -6
  78. package/dist/components/navigation-rail/navigation-rail.js +2 -1
  79. package/dist/components/progress/api.js +0 -1
  80. package/dist/components/progress/config.d.ts +2 -2
  81. package/dist/components/progress/features/canvas.d.ts +14 -5
  82. package/dist/components/progress/features/state.d.ts +1 -2
  83. package/dist/components/progress/types.d.ts +1 -1
  84. package/dist/components/radios/config.d.ts +2 -2
  85. package/dist/components/search/api.js +4 -4
  86. package/dist/components/search/config.d.ts +2 -2
  87. package/dist/components/search/features/suggestions.d.ts +1 -3
  88. package/dist/components/search/features/suggestions.js +16 -15
  89. package/dist/components/search/search.js +1 -1
  90. package/dist/components/segmented-button/config.d.ts +1 -5
  91. package/dist/components/segmented-button/config.js +1 -1
  92. package/dist/components/select/api.d.ts +2 -2
  93. package/dist/components/select/features.d.ts +2 -2
  94. package/dist/components/select/features.js +2 -1
  95. package/dist/components/select/types.d.ts +38 -21
  96. package/dist/components/side-sheet/config.d.ts +2 -2
  97. package/dist/components/slider/api.d.ts +6 -6
  98. package/dist/components/slider/config.d.ts +2 -2
  99. package/dist/components/slider/types.d.ts +2 -2
  100. package/dist/components/snackbar/config.d.ts +2 -2
  101. package/dist/components/snackbar/features.d.ts +3 -3
  102. package/dist/components/snackbar/position.d.ts +1 -1
  103. package/dist/components/snackbar/types.d.ts +5 -6
  104. package/dist/components/split-button/api.js +1 -3
  105. package/dist/components/split-button/config.d.ts +2 -2
  106. package/dist/components/split-button/features/buttons.d.ts +3 -2
  107. package/dist/components/split-button/features/menu.d.ts +3 -2
  108. package/dist/components/split-button/types.d.ts +13 -2
  109. package/dist/components/switch/config.d.ts +2 -2
  110. package/dist/components/switch/types.d.ts +0 -1
  111. package/dist/components/tabs/api.d.ts +8 -5
  112. package/dist/components/tabs/config.d.ts +9 -1
  113. package/dist/components/tabs/features.d.ts +7 -11
  114. package/dist/components/tabs/features.js +2 -1
  115. package/dist/components/tabs/indicator.js +4 -2
  116. package/dist/components/tabs/responsive.js +2 -1
  117. package/dist/components/tabs/tab-api.d.ts +11 -5
  118. package/dist/components/tabs/tab-api.js +1 -1
  119. package/dist/components/tabs/tab.js +9 -1
  120. package/dist/components/tabs/types.d.ts +9 -2
  121. package/dist/components/tabs/utils.d.ts +14 -3
  122. package/dist/components/textfield/api.d.ts +1 -1
  123. package/dist/components/textfield/config.d.ts +2 -2
  124. package/dist/components/textfield/features/error.d.ts +1 -2
  125. package/dist/components/textfield/features/leading-icon.d.ts +1 -2
  126. package/dist/components/textfield/features/prefix-text.d.ts +1 -2
  127. package/dist/components/textfield/features/suffix-text.d.ts +1 -2
  128. package/dist/components/textfield/features/supporting-text.d.ts +1 -2
  129. package/dist/components/textfield/features/trailing-icon.d.ts +1 -2
  130. package/dist/components/textfield/types.d.ts +0 -2
  131. package/dist/components/timepicker/api.d.ts +5 -4
  132. package/dist/components/timepicker/config.d.ts +14 -11
  133. package/dist/components/tooltip/config.d.ts +2 -2
  134. package/dist/components/tooltip/tooltip.d.ts +1 -1
  135. package/dist/core/compose/base.d.ts +2 -2
  136. package/dist/core/compose/base.js +1 -1
  137. package/dist/core/compose/component.d.ts +13 -4
  138. package/dist/core/compose/component.js +1 -1
  139. package/dist/core/compose/features/badge.d.ts +3 -4
  140. package/dist/core/compose/features/badge.js +1 -1
  141. package/dist/core/compose/features/checkable.d.ts +3 -4
  142. package/dist/core/compose/features/debounce.d.ts +2 -3
  143. package/dist/core/compose/features/disabled.d.ts +1 -2
  144. package/dist/core/compose/features/events.d.ts +4 -3
  145. package/dist/core/compose/features/icon.d.ts +1 -5
  146. package/dist/core/compose/features/input.d.ts +2 -3
  147. package/dist/core/compose/features/lifecycle.d.ts +2 -2
  148. package/dist/core/compose/features/lifecycle.js +3 -3
  149. package/dist/core/compose/features/position.d.ts +1 -2
  150. package/dist/core/compose/features/ripple.d.ts +1 -2
  151. package/dist/core/compose/features/size.d.ts +1 -2
  152. package/dist/core/compose/features/style.d.ts +1 -2
  153. package/dist/core/compose/features/text.d.ts +1 -5
  154. package/dist/core/compose/features/textinput.d.ts +2 -3
  155. package/dist/core/compose/features/textlabel.d.ts +1 -2
  156. package/dist/core/compose/features/throttle.d.ts +1 -2
  157. package/dist/core/compose/features/track.d.ts +0 -1
  158. package/dist/core/compose/features/variant.d.ts +1 -2
  159. package/dist/core/compose/index.d.ts +1 -1
  160. package/dist/core/compose/pipe.d.ts +43 -3
  161. package/dist/core/compose/pipe.js +6 -2
  162. package/dist/core/compose/utils/type-guards.d.ts +4 -4
  163. package/dist/core/compose/utils/type-guards.js +1 -1
  164. package/dist/core/config/component.d.ts +12 -9
  165. package/dist/core/config/global.d.ts +12 -8
  166. package/dist/core/config.d.ts +1 -1
  167. package/dist/core/dom/attributes.d.ts +6 -6
  168. package/dist/core/dom/attributes.js +8 -5
  169. package/dist/core/dom/create.d.ts +27 -10
  170. package/dist/core/dom/create.js +5 -26
  171. package/dist/core/dom/utils.d.ts +1 -1
  172. package/dist/core/dom/utils.js +4 -1
  173. package/dist/core/state/emitter.d.ts +2 -2
  174. package/dist/core/state/events.d.ts +3 -3
  175. package/dist/core/state/lifecycle.d.ts +0 -1
  176. package/dist/core/state/store.d.ts +3 -3
  177. package/dist/core/utils/index.d.ts +1 -0
  178. package/dist/core/utils/index.js +1 -0
  179. package/dist/core/utils/object.d.ts +2 -2
  180. package/dist/core/utils/performance.d.ts +3 -3
  181. package/dist/core/utils/url.d.ts +20 -0
  182. package/dist/core/utils/url.js +0 -0
  183. package/dist/core/utils/validate.d.ts +6 -6
  184. package/dist/core/utils/validate.js +13 -12
  185. package/dist/index.cjs +0 -0
  186. package/dist/package.json +1 -1
  187. package/dist/styles/badge.css +2 -2
  188. package/dist/styles/base.css +2 -2
  189. package/dist/styles/bottom-app-bar.css +2 -2
  190. package/dist/styles/bottom-sheet.css +2 -2
  191. package/dist/styles/button-group.css +2 -2
  192. package/dist/styles/button.css +2 -2
  193. package/dist/styles/card.css +2 -2
  194. package/dist/styles/carousel.css +2 -2
  195. package/dist/styles/checkbox.css +2 -2
  196. package/dist/styles/chips.css +2 -2
  197. package/dist/styles/dialog.css +2 -2
  198. package/dist/styles/divider.css +2 -2
  199. package/dist/styles/drawer.css +2 -2
  200. package/dist/styles/extended-fab.css +2 -2
  201. package/dist/styles/fab.css +2 -2
  202. package/dist/styles/icon-button.css +2 -2
  203. package/dist/styles/list.css +2 -2
  204. package/dist/styles/loading-indicator.css +2 -2
  205. package/dist/styles/menu.css +2 -2
  206. package/dist/styles/navigation-rail.css +2 -2
  207. package/dist/styles/navigation.css +2 -2
  208. package/dist/styles/progress.css +2 -2
  209. package/dist/styles/radios.css +2 -2
  210. package/dist/styles/search.css +2 -2
  211. package/dist/styles/segmented-button.css +2 -2
  212. package/dist/styles/select.css +2 -2
  213. package/dist/styles/side-sheet.css +2 -2
  214. package/dist/styles/slider.css +2 -2
  215. package/dist/styles/snackbar.css +2 -2
  216. package/dist/styles/split-button.css +2 -2
  217. package/dist/styles/switch.css +2 -2
  218. package/dist/styles/tabs.css +2 -2
  219. package/dist/styles/textfield.css +2 -2
  220. package/dist/styles/timepicker.css +2 -2
  221. package/dist/styles/tooltip.css +2 -0
  222. package/dist/styles/tooltip.d.ts +1 -0
  223. package/dist/styles/tooltip.js +2 -0
  224. package/dist/styles/top-app-bar.css +2 -2
  225. package/dist/styles/utilities.css +2 -2
  226. package/dist/styles.css +2 -2
  227. package/dist/themes/autumn.css +1 -1
  228. package/dist/themes/baseline.css +1 -1
  229. package/dist/themes/brownbeige.css +1 -1
  230. package/dist/themes/browngreen.css +1 -1
  231. package/dist/themes/desert.css +1 -1
  232. package/dist/themes/forest.css +1 -1
  233. package/dist/themes/highcontrast.css +1 -1
  234. package/dist/themes/legacy.css +1 -1
  235. package/dist/themes/material.css +1 -1
  236. package/dist/themes/ocean.css +1 -1
  237. package/dist/themes/sageivory.css +1 -1
  238. package/dist/themes/spring.css +1 -1
  239. package/dist/themes/summer.css +1 -1
  240. package/dist/themes/sunset.css +1 -1
  241. package/dist/themes/tealcaramel.css +1 -1
  242. package/dist/themes/winter.css +1 -1
  243. package/package.json +2 -2
  244. package/src/styles/abstract/_mixins.scss +5 -1
  245. package/src/styles/components/_checkbox.scss +27 -7
  246. package/src/styles/components/_chips.scss +13 -13
  247. package/src/styles/components/_datepicker.scss +5 -5
  248. package/src/styles/components/_dialog.scss +2 -2
  249. package/src/styles/components/_radios.scss +30 -30
  250. package/src/styles/components/_switch.scss +36 -26
  251. package/src/styles/components/_tabs.scss +59 -58
  252. package/src/styles/components/_timepicker.scss +3 -3
  253. package/src/styles/main.scss +1 -0
@@ -6,14 +6,33 @@
6
6
  * Event handler function type
7
7
  */
8
8
  export type EventHandler = (event: Event) => void;
9
- /**
10
- * Event condition type
11
- */
12
- export type EventCondition = boolean | ((context: any, event: Event) => boolean);
13
9
  /**
14
10
  * Element type that can be either HTMLElement or SVGElement
15
11
  */
16
12
  export type DOMElement = HTMLElement | SVGElement;
13
+ /**
14
+ * Component context passed to created elements for event forwarding
15
+ */
16
+ export interface ElementContext {
17
+ /** Emits forwarded events */
18
+ emit?(event: string, data: {
19
+ event: Event;
20
+ element: DOMElement;
21
+ originalEvent: Event;
22
+ }): void;
23
+ /** Subscribes to events */
24
+ on?(event: string, handler: (...args: unknown[]) => void): unknown;
25
+ }
26
+ /**
27
+ * Event condition type
28
+ * Declared through a method signature so conditions typed for a specific
29
+ * component or event subtype stay assignable under strictFunctionTypes
30
+ */
31
+ export type EventCondition = boolean | {
32
+ condition(context: ElementContext & {
33
+ element: DOMElement;
34
+ }, event: Event): boolean;
35
+ }["condition"];
17
36
  /**
18
37
  * Options for element creation with comprehensive configuration
19
38
  */
@@ -55,22 +74,20 @@ export interface CreateElementOptions {
55
74
  /** CSS classes that will NOT be prefixed - added as-is to the element */
56
75
  rawClass?: string | string[];
57
76
  /** HTML attributes */
58
- attributes?: Record<string, any>;
77
+ attributes?: object;
59
78
  /** Events to forward when component has emit method */
60
79
  forwardEvents?: Record<string, EventCondition>;
61
80
  /** Callback after element creation */
62
- onCreate?: (element: HTMLElement, context?: any) => void;
81
+ onCreate?(element: HTMLElement, context?: ElementContext): void;
63
82
  /** Component context */
64
- context?: any;
65
- /** Additional attributes via spread */
66
- [key: string]: any;
83
+ context?: ElementContext & object;
67
84
  }
68
85
  /**
69
86
  * Options for SVG element creation
70
87
  */
71
88
  export interface CreateSVGElementOptions extends Omit<CreateElementOptions, "container" | "onCreate"> {
72
89
  container?: DOMElement | null;
73
- onCreate?: (element: SVGElement, context?: any) => void;
90
+ onCreate?(element: SVGElement, context?: ElementContext): void;
74
91
  }
75
92
  /**
76
93
  * Event handler storage
@@ -1,29 +1,7 @@
1
1
  import { setAttributes } from "./attributes.js";
2
2
  import { addClass } from "./classes.js";
3
- const SVG_TAGS = [
4
- "svg",
5
- "circle",
6
- "ellipse",
7
- "line",
8
- "path",
9
- "polygon",
10
- "polyline",
11
- "rect",
12
- "g",
13
- "text",
14
- "tspan",
15
- "textPath",
16
- "defs",
17
- "clipPath",
18
- "mask",
19
- "pattern",
20
- "marker",
21
- "linearGradient",
22
- "radialGradient",
23
- "stop",
24
- "use",
25
- "foreignObject",
26
- ];
3
+ import { safeUrl, URL_ATTRIBUTES } from "../utils/url.js";
4
+ const EVENT_HANDLER_ATTRIBUTE = /^on[a-z]/i;
27
5
  const RESERVED_OPTIONS = {
28
6
  __proto__: null,
29
7
  tag: true,
@@ -181,10 +159,11 @@ export const createElement = (options = {}) => {
181
159
  setAttributes(element, options.attributes);
182
160
  }
183
161
  for (const key in options) {
184
- if (!(key in RESERVED_OPTIONS)) {
162
+ if (!(key in RESERVED_OPTIONS) && !EVENT_HANDLER_ATTRIBUTE.test(key)) {
185
163
  const value = options[key];
186
164
  if (value != null) {
187
- element.setAttribute(key, String(value));
165
+ const text = String(value);
166
+ element.setAttribute(key, URL_ATTRIBUTES.has(key.toLowerCase()) ? safeUrl(text) : text);
188
167
  }
189
168
  }
190
169
  }
@@ -6,7 +6,7 @@ export { normalizeClasses } from "./classes.js";
6
6
  * @param attributes - Element attributes
7
7
  * @returns Created element
8
8
  */
9
- export declare const createElement: <T extends HTMLElement>(tag: string, attributes?: Record<string, any>) => T;
9
+ export declare const createElement: <T extends HTMLElement>(tag: string, attributes?: Record<string, unknown>) => T;
10
10
  /**
11
11
  * Sets inline styles on an element
12
12
  *
@@ -1,3 +1,4 @@
1
+ import { safeUrl, URL_ATTRIBUTES } from "../utils/url.js";
1
2
  export { normalizeClasses } from "./classes.js";
2
3
  export const createElement = (tag, attributes = {}) => {
3
4
  const element = document.createElement(tag);
@@ -27,8 +28,10 @@ export const createElement = (tag, attributes = {}) => {
27
28
  const eventName = key.slice(2).toLowerCase();
28
29
  element.addEventListener(eventName, value);
29
30
  }
31
+ else if (key.startsWith("on")) {
32
+ }
30
33
  else if (value !== null && value !== undefined) {
31
- element.setAttribute(key, String(value));
34
+ element.setAttribute(key, URL_ATTRIBUTES.has(key.toLowerCase()) ? safeUrl(String(value)) : String(value));
32
35
  }
33
36
  });
34
37
  return element;
@@ -4,7 +4,7 @@
4
4
  /**
5
5
  * Type definition for event callback functions
6
6
  */
7
- export type EventCallback = (...args: any[]) => void;
7
+ export type EventCallback = (...args: never[]) => void;
8
8
  /**
9
9
  * Interface for the event emitter
10
10
  */
@@ -27,7 +27,7 @@ export interface Emitter {
27
27
  * @param event - Event name
28
28
  * @param args - Event arguments
29
29
  */
30
- emit(event: string, ...args: any[]): void;
30
+ emit(event: string, ...args: unknown[]): void;
31
31
  /**
32
32
  * Clear all event listeners
33
33
  */
@@ -8,14 +8,14 @@ export interface EventManagerState {
8
8
  * @param handler - Event handler
9
9
  * @returns EventManagerState instance for chaining
10
10
  */
11
- on: (event: string, handler: (...args: any[]) => void) => EventManagerState;
11
+ on: (event: string, handler: (...args: never[]) => void) => EventManagerState;
12
12
  /**
13
13
  * Removes an event listener
14
14
  * @param event - Event name
15
15
  * @param handler - Event handler
16
16
  * @returns EventManagerState instance for chaining
17
17
  */
18
- off: (event: string, handler: (...args: any[]) => void) => EventManagerState;
18
+ off: (event: string, handler: (...args: never[]) => void) => EventManagerState;
19
19
  /**
20
20
  * Removes all event listeners and cleans up
21
21
  */
@@ -24,7 +24,7 @@ export interface EventManagerState {
24
24
  * Gets all active handlers
25
25
  * @returns Map of event names to handlers
26
26
  */
27
- getHandlers: () => Map<(...args: any[]) => void, string>;
27
+ getHandlers: () => Map<(...args: never[]) => void, string>;
28
28
  }
29
29
  /**
30
30
  * Creates an event manager for a component
@@ -11,7 +11,6 @@ export interface LifecycleManagers {
11
11
  icon?: {
12
12
  getElement: () => HTMLElement | null;
13
13
  };
14
- [key: string]: any;
15
14
  }
16
15
  /**
17
16
  * Lifecycle manager interface
@@ -64,7 +64,7 @@ export interface Store<T> {
64
64
  * @param options - Store options
65
65
  * @returns State store interface
66
66
  */
67
- export declare const createStore: <T extends Record<string, any>>(initialState?: T, options?: StoreOptions<T>) => Store<T>;
67
+ export declare const createStore: <T extends object>(initialState?: T, options?: StoreOptions<T>) => Store<T>;
68
68
  /**
69
69
  * Example middleware that logs state changes
70
70
  *
@@ -72,11 +72,11 @@ export declare const createStore: <T extends Record<string, any>>(initialState?:
72
72
  * @param oldState - Previous state before change
73
73
  * @returns Processed state (unchanged in this middleware)
74
74
  */
75
- export declare const loggingMiddleware: <T extends Record<string, any>>(newState: T, oldState: T) => T;
75
+ export declare const loggingMiddleware: <T extends object>(newState: T, oldState: T) => T;
76
76
  /**
77
77
  * Creates a derived state selector for filtering objects
78
78
  *
79
79
  * @param predicate - Filter predicate function
80
80
  * @returns Computation function for derived state
81
81
  */
82
- export declare const deriveFiltered: <T>(predicate: (value: any, key: string) => boolean) => (state: Record<string, T>) => Record<string, T>;
82
+ export declare const deriveFiltered: <T>(predicate: (value: T, key: string) => boolean) => (state: Record<string, T>) => Record<string, T>;
@@ -4,6 +4,7 @@ export { getInheritedBackground } from "./background.js";
4
4
  export { throttle, debounce, once } from "./performance.js";
5
5
  export { getThemeColor } from "./theme.js";
6
6
  export { colorToRGBA } from "./color.js";
7
+ export { isSafeUrl, safeUrl, URL_ATTRIBUTES } from "./url.js";
7
8
  /**
8
9
  * Creates a transformer that only runs if a condition is met
9
10
  * @param {Function} predicate - Condition to check
@@ -4,5 +4,6 @@ export { getInheritedBackground } from "./background.js";
4
4
  export { throttle, debounce, once } from "./performance.js";
5
5
  export { getThemeColor } from "./theme.js";
6
6
  export { colorToRGBA } from "./color.js";
7
+ export { isSafeUrl, safeUrl, URL_ATTRIBUTES } from "./url.js";
7
8
  export const when = (predicate, transformer) => (obj, context) => predicate(obj, context) ? transformer(obj, context) : obj;
8
9
  export const classNames = (...classes) => classes.filter(Boolean).join(' ');
@@ -3,11 +3,11 @@
3
3
  * @param value - The value to check
4
4
  * @returns true if the value is a plain object
5
5
  */
6
- export declare const isObject: (value: unknown) => value is Record<string, any>;
6
+ export declare const isObject: (value: unknown) => value is Record<string, unknown>;
7
7
  /**
8
8
  * Accesses a nested property of an object using a string path
9
9
  * @param obj - The object to traverse
10
10
  * @param path - The property path (e.g. 'user.address.street')
11
11
  * @returns The value at the specified path or undefined if not found
12
12
  */
13
- export declare const byString: <T extends Record<string, any>, R = any>(obj: T, path: string) => R | undefined;
13
+ export declare const byString: <T extends object, R = unknown>(obj: T, path: string) => R | undefined;
@@ -27,7 +27,7 @@ export type Cancellable<F> = F & {
27
27
  *
28
28
  * window.addEventListener('scroll', throttledScroll);
29
29
  */
30
- export declare const throttle: <T extends (...args: any[]) => any>(fn: T, wait: number, options?: {
30
+ export declare const throttle: <T extends (...args: never[]) => unknown>(fn: T, wait: number, options?: {
31
31
  leading?: boolean;
32
32
  trailing?: boolean;
33
33
  }) => Cancellable<(...args: Parameters<T>) => void>;
@@ -56,7 +56,7 @@ export declare const throttle: <T extends (...args: any[]) => any>(fn: T, wait:
56
56
  * debouncedSearch(e.target.value);
57
57
  * });
58
58
  */
59
- export declare const debounce: <T extends (...args: any[]) => any>(fn: T, wait: number, options?: {
59
+ export declare const debounce: <T extends (...args: never[]) => unknown>(fn: T, wait: number, options?: {
60
60
  leading?: boolean;
61
61
  maxWait?: number;
62
62
  }) => Cancellable<(...args: Parameters<T>) => void>;
@@ -79,4 +79,4 @@ export declare const debounce: <T extends (...args: any[]) => any>(fn: T, wait:
79
79
  * button1.addEventListener('click', initApp);
80
80
  * button2.addEventListener('click', initApp);
81
81
  */
82
- export declare const once: <T extends (...args: any[]) => any>(fn: T) => ((...args: Parameters<T>) => ReturnType<T>);
82
+ export declare const once: <T extends (...args: never[]) => unknown>(fn: T) => ((...args: Parameters<T>) => ReturnType<T>);
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Attributes whose value is a URL, and so must be checked before assignment.
3
+ */
4
+ export declare const URL_ATTRIBUTES: Set<string>;
5
+ /**
6
+ * Whether a URL is safe to assign to a navigable attribute.
7
+ *
8
+ * Relative URLs, fragments and query-only URLs have no scheme and are safe:
9
+ * they cannot execute. A value with a scheme is safe only if the scheme is
10
+ * in the allowlist. Leading whitespace and control characters are stripped
11
+ * first, because browsers ignore them when resolving `java\nscript:alert(1)`.
12
+ */
13
+ export declare const isSafeUrl: (url: string) => boolean;
14
+ /**
15
+ * Returns the URL if its scheme is allowed, otherwise an empty string.
16
+ *
17
+ * Empty rather than throwing: a refused URL should leave an inert control, not
18
+ * break the page that rendered it.
19
+ */
20
+ export declare const safeUrl: (url: string) => string;
Binary file
@@ -25,7 +25,7 @@ export interface ValidationRule {
25
25
  /**
26
26
  * Allowed values (enum)
27
27
  */
28
- enum?: any[];
28
+ enum?: unknown[];
29
29
  /**
30
30
  * Minimum string length
31
31
  */
@@ -37,11 +37,11 @@ export interface ValidationRule {
37
37
  /**
38
38
  * Default value
39
39
  */
40
- default?: any;
40
+ default?: unknown;
41
41
  /**
42
42
  * Custom validator function
43
43
  */
44
- validator?: (value: any) => boolean | string;
44
+ validator?(value: unknown): boolean | string;
45
45
  }
46
46
  /**
47
47
  * Validation schema type
@@ -54,7 +54,7 @@ export type ValidationSchema = Record<string, ValidationRule>;
54
54
  * @param schema - Validation schema
55
55
  * @throws Error if validation fails
56
56
  */
57
- export declare const validateConfig: (config: Record<string, any>, schema: ValidationSchema) => void;
57
+ export declare const validateConfig: (config: object, schema: ValidationSchema) => void;
58
58
  /**
59
59
  * Validates a single value against a rule
60
60
  *
@@ -62,7 +62,7 @@ export declare const validateConfig: (config: Record<string, any>, schema: Valid
62
62
  * @param rule - Validation rule
63
63
  * @returns Validation result (true if valid, error message if invalid)
64
64
  */
65
- export declare const validateValue: (value: any, rule: ValidationRule) => true | string;
65
+ export declare const validateValue: (value: unknown, rule: ValidationRule) => true | string;
66
66
  /**
67
67
  * Applies default values from schema to config
68
68
  *
@@ -70,4 +70,4 @@ export declare const validateValue: (value: any, rule: ValidationRule) => true |
70
70
  * @param schema - Validation schema with defaults
71
71
  * @returns Configuration with defaults applied
72
72
  */
73
- export declare const applyDefaults: <T extends Record<string, any>>(config: T, schema: ValidationSchema) => T;
73
+ export declare const applyDefaults: <T extends object>(config: T, schema: ValidationSchema) => T;
@@ -1,47 +1,48 @@
1
1
  export const validateConfig = (config, schema) => {
2
2
  const errors = [];
3
+ const values = config;
3
4
  Object.entries(schema).forEach(([key, rule]) => {
4
- if (rule.required && config[key] === undefined) {
5
+ if (rule.required && values[key] === undefined) {
5
6
  errors.push(`Missing required field: ${key}`);
6
7
  }
7
- if (config[key] !== undefined) {
8
+ if (values[key] !== undefined) {
8
9
  if (rule.type) {
9
- const actualType = typeof config[key];
10
+ const actualType = typeof values[key];
10
11
  if (actualType !== rule.type) {
11
12
  errors.push(`Invalid type for ${key}: expected ${rule.type}, got ${actualType}`);
12
13
  }
13
14
  }
14
- if (typeof config[key] === 'number') {
15
- if (rule.minimum !== undefined && config[key] < rule.minimum) {
15
+ if (typeof values[key] === 'number') {
16
+ if (rule.minimum !== undefined && values[key] < rule.minimum) {
16
17
  errors.push(`Value for ${key} is too small: minimum is ${rule.minimum}`);
17
18
  }
18
- if (rule.maximum !== undefined && config[key] > rule.maximum) {
19
+ if (rule.maximum !== undefined && values[key] > rule.maximum) {
19
20
  errors.push(`Value for ${key} is too large: maximum is ${rule.maximum}`);
20
21
  }
21
22
  }
22
- if (typeof config[key] === 'string') {
23
- if (rule.minLength !== undefined && config[key].length < rule.minLength) {
23
+ if (typeof values[key] === 'string') {
24
+ if (rule.minLength !== undefined && values[key].length < rule.minLength) {
24
25
  errors.push(`String for ${key} is too short: minimum length is ${rule.minLength}`);
25
26
  }
26
- if (rule.maxLength !== undefined && config[key].length > rule.maxLength) {
27
+ if (rule.maxLength !== undefined && values[key].length > rule.maxLength) {
27
28
  errors.push(`String for ${key} is too long: maximum length is ${rule.maxLength}`);
28
29
  }
29
30
  if (rule.pattern) {
30
31
  const pattern = rule.pattern instanceof RegExp
31
32
  ? rule.pattern
32
33
  : new RegExp(rule.pattern);
33
- if (!pattern.test(config[key])) {
34
+ if (!pattern.test(values[key])) {
34
35
  errors.push(`Invalid format for ${key}: must match pattern ${pattern}`);
35
36
  }
36
37
  }
37
38
  }
38
39
  if (rule.enum) {
39
- if (!rule.enum.includes(config[key])) {
40
+ if (!rule.enum.includes(values[key])) {
40
41
  errors.push(`Invalid value for ${key}. Must be one of: ${rule.enum.join(', ')}`);
41
42
  }
42
43
  }
43
44
  if (rule.validator) {
44
- const result = rule.validator(config[key]);
45
+ const result = rule.validator(values[key]);
45
46
  if (result === false) {
46
47
  errors.push(`Invalid value for ${key}`);
47
48
  }
package/dist/index.cjs CHANGED
Binary file
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mtrl",
3
- "version": "0.8.0",
3
+ "version": "0.9.1",
4
4
  "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
5
5
  "author": "floor",
6
6
  "license": "MIT",
@@ -1,2 +1,2 @@
1
- /*! mtrl v0.8.0 | MIT */
2
- @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list;@layer mtrl.badge{.mtrl-badge-wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;box-sizing:border-box;overflow:hidden;transition:all 200ms ease;text-overflow:ellipsis}.mtrl-badge--invisible{display:none}.mtrl-badge--small{width:6px;height:6px;min-width:6px;border-radius:3px;font-size:0;padding:0}.mtrl-badge--large{height:16px;min-width:16px;border-radius:8px;padding:0 4px;font-size:11px;line-height:16px;padding-top:.5px}.mtrl-badge--large.mtrl-badge--overflow{min-width:auto;max-width:34px;padding:0 4px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-8px;left:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-8px;left:-8px}.mtrl-badge--error{background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}.mtrl-badge--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-badge--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-badge--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-badge--success{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}.mtrl-badge--warning{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}.mtrl-badge--info{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-left{left:auto;right:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-left{left:auto;right:-8px}}
1
+ /*! mtrl v0.9.1 | MIT */
2
+ @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list,mtrl.tooltip;@layer mtrl.badge{.mtrl-badge-wrapper{position:relative;display:inline-flex;flex-shrink:0}.mtrl-badge{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:500;box-sizing:border-box;overflow:hidden;transition:all 200ms ease;text-overflow:ellipsis}.mtrl-badge--invisible{display:none}.mtrl-badge--small{width:6px;height:6px;min-width:6px;border-radius:3px;font-size:0;padding:0}.mtrl-badge--large{height:16px;min-width:16px;border-radius:8px;padding:0 4px;font-size:11px;line-height:16px;padding-top:.5px}.mtrl-badge--large.mtrl-badge--overflow{min-width:auto;max-width:34px;padding:0 4px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-right{top:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--top-left{top:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-right{bottom:-3px;right:-3px}.mtrl-badge--positioned.mtrl-badge--small.mtrl-badge--bottom-left{bottom:-3px;left:-3px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-right{top:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--top-left{top:-8px;left:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-right{bottom:-8px;right:-8px}.mtrl-badge--positioned.mtrl-badge--large.mtrl-badge--bottom-left{bottom:-8px;left:-8px}.mtrl-badge--error{background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}.mtrl-badge--primary{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}.mtrl-badge--secondary{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}.mtrl-badge--tertiary{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}.mtrl-badge--success{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}.mtrl-badge--warning{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}.mtrl-badge--info{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--top-left{left:auto;right:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-right{right:auto;left:-8px}[dir=rtl] .mtrl-badge--positioned.mtrl-badge--bottom-left{left:auto;right:-8px}}
@@ -1,2 +1,2 @@
1
- /*! mtrl v0.8.0 | MIT */
2
- @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list;@layer mtrl.base{:root{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-error-rgb: 179, 38, 30;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-on-error-rgb: 255, 255, 255;--mtrl-sys-color-primary: #6750a4;--mtrl-sys-color-primary-rgb: 103, 80, 164;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-on-primary-rgb: 255, 255, 255;--mtrl-sys-color-primary-container: #eaddff;--mtrl-sys-color-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-on-primary-container: #21005d;--mtrl-sys-color-on-primary-container-rgb: 33, 0, 93;--mtrl-sys-color-secondary: #625b71;--mtrl-sys-color-secondary-rgb: 98, 91, 113;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-on-secondary-rgb: 255, 255, 255;--mtrl-sys-color-secondary-container: #e8def8;--mtrl-sys-color-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-on-secondary-container: #1d192b;--mtrl-sys-color-on-secondary-container-rgb: 29, 25, 43;--mtrl-sys-color-tertiary: #7d5260;--mtrl-sys-color-tertiary-rgb: 125, 82, 96;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-on-tertiary-rgb: 255, 255, 255;--mtrl-sys-color-tertiary-container: #ffd8e4;--mtrl-sys-color-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-on-tertiary-container: #31111d;--mtrl-sys-color-on-tertiary-container-rgb: 49, 17, 29;--mtrl-sys-color-surface: #fffbfe;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #ded8e1;--mtrl-sys-color-surface-dim-rgb: 222, 216, 225;--mtrl-sys-color-surface-bright: #fff8f7;--mtrl-sys-color-surface-bright-rgb: 255, 248, 247;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-lowest-rgb: 255, 255, 255;--mtrl-sys-color-surface-container-low: #f7f2fa;--mtrl-sys-color-surface-container-low-rgb: 247, 242, 250;--mtrl-sys-color-surface-container: #f3edf7;--mtrl-sys-color-surface-container-rgb: 243, 237, 247;--mtrl-sys-color-surface-container-high: #ece6f0;--mtrl-sys-color-surface-container-high-rgb: 236, 230, 240;--mtrl-sys-color-surface-container-highest: #e6e0e9;--mtrl-sys-color-surface-container-highest-rgb: 230, 224, 233;--mtrl-sys-color-on-surface: #1c1b1f;--mtrl-sys-color-on-surface-rgb: 28, 27, 31;--mtrl-sys-color-on-surface-variant: #49454f;--mtrl-sys-color-on-surface-variant-rgb: 73, 69, 79;--mtrl-sys-color-outline: #79747e;--mtrl-sys-color-outline-rgb: 121, 116, 126;--mtrl-sys-color-outline-variant: #cac4d0;--mtrl-sys-color-outline-variant-rgb: 202, 196, 208;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #313033;--mtrl-sys-color-inverse-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-on-surface: #f4eff4;--mtrl-sys-color-inverse-on-surface-rgb: 244, 239, 244;--mtrl-sys-color-inverse-primary: #d0bcff;--mtrl-sys-color-inverse-primary-rgb: 208, 188, 255;--mtrl-sys-state-hover-state-layer-opacity: 0.08;--mtrl-sys-state-focus-state-layer-opacity: 0.12;--mtrl-sys-state-pressed-state-layer-opacity: 0.12;--mtrl-sys-state-dragged-state-layer-opacity: 0.16}@media(prefers-color-scheme: dark){:root{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-error-rgb: 242, 184, 181;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-on-error-rgb: 96, 20, 16;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-primary-rgb: 208, 188, 255;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-on-primary-rgb: 56, 30, 114;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-primary-container-rgb: 79, 55, 139;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-on-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-secondary-rgb: 204, 194, 220;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-on-secondary-rgb: 51, 45, 65;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-secondary-container-rgb: 74, 68, 88;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-tertiary-rgb: 239, 184, 200;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-on-tertiary-rgb: 73, 37, 50;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-tertiary-container-rgb: 99, 59, 72;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-surface: #1c1b1f;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-dim-rgb: 20, 18, 24;--mtrl-sys-color-surface-bright: #3b383d;--mtrl-sys-color-surface-bright-rgb: 59, 56, 61;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-lowest-rgb: 15, 13, 19;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container-low-rgb: 29, 27, 32;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-rgb: 33, 31, 38;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-high-rgb: 43, 41, 48;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-surface-container-highest-rgb: 54, 52, 59;--mtrl-sys-color-on-surface: #e6e1e5;--mtrl-sys-color-on-surface-rgb: 230, 225, 229;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-on-surface-variant-rgb: 202, 196, 208;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-rgb: 147, 143, 153;--mtrl-sys-color-outline-variant: #444746;--mtrl-sys-color-outline-variant-rgb: 68, 71, 70;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #e6e1e5;--mtrl-sys-color-inverse-surface-rgb: 230, 225, 229;--mtrl-sys-color-inverse-on-surface: #313033;--mtrl-sys-color-inverse-on-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-primary: #6750a4;--mtrl-sys-color-inverse-primary-rgb: 103, 80, 164}}.dark-theme{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-error-rgb: 242, 184, 181;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-on-error-rgb: 96, 20, 16;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-primary-rgb: 208, 188, 255;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-on-primary-rgb: 56, 30, 114;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-primary-container-rgb: 79, 55, 139;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-on-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-secondary-rgb: 204, 194, 220;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-on-secondary-rgb: 51, 45, 65;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-secondary-container-rgb: 74, 68, 88;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-tertiary-rgb: 239, 184, 200;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-on-tertiary-rgb: 73, 37, 50;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-tertiary-container-rgb: 99, 59, 72;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-surface: #1c1b1f;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-dim-rgb: 20, 18, 24;--mtrl-sys-color-surface-bright: #3b383d;--mtrl-sys-color-surface-bright-rgb: 59, 56, 61;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-lowest-rgb: 15, 13, 19;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container-low-rgb: 29, 27, 32;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-rgb: 33, 31, 38;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-high-rgb: 43, 41, 48;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-surface-container-highest-rgb: 54, 52, 59;--mtrl-sys-color-on-surface: #e6e1e5;--mtrl-sys-color-on-surface-rgb: 230, 225, 229;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-on-surface-variant-rgb: 202, 196, 208;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-rgb: 147, 143, 153;--mtrl-sys-color-outline-variant: #444746;--mtrl-sys-color-outline-variant-rgb: 68, 71, 70;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #e6e1e5;--mtrl-sys-color-inverse-surface-rgb: 230, 225, 229;--mtrl-sys-color-inverse-on-surface: #313033;--mtrl-sys-color-inverse-on-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-primary: #6750a4;--mtrl-sys-color-inverse-primary-rgb: 103, 80, 164}[data-theme=baseline]{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-error-rgb: 179, 38, 30;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-on-error-rgb: 255, 255, 255;--mtrl-sys-color-primary: #6750a4;--mtrl-sys-color-primary-rgb: 103, 80, 164;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-on-primary-rgb: 255, 255, 255;--mtrl-sys-color-primary-container: #eaddff;--mtrl-sys-color-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-on-primary-container: #21005d;--mtrl-sys-color-on-primary-container-rgb: 33, 0, 93;--mtrl-sys-color-secondary: #625b71;--mtrl-sys-color-secondary-rgb: 98, 91, 113;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-on-secondary-rgb: 255, 255, 255;--mtrl-sys-color-secondary-container: #e8def8;--mtrl-sys-color-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-on-secondary-container: #1d192b;--mtrl-sys-color-on-secondary-container-rgb: 29, 25, 43;--mtrl-sys-color-tertiary: #7d5260;--mtrl-sys-color-tertiary-rgb: 125, 82, 96;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-on-tertiary-rgb: 255, 255, 255;--mtrl-sys-color-tertiary-container: #ffd8e4;--mtrl-sys-color-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-on-tertiary-container: #31111d;--mtrl-sys-color-on-tertiary-container-rgb: 49, 17, 29;--mtrl-sys-color-surface: #fffbfe;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #ded8e1;--mtrl-sys-color-surface-dim-rgb: 222, 216, 225;--mtrl-sys-color-surface-bright: #fff8f7;--mtrl-sys-color-surface-bright-rgb: 255, 248, 247;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-lowest-rgb: 255, 255, 255;--mtrl-sys-color-surface-container-low: #f7f2fa;--mtrl-sys-color-surface-container-low-rgb: 247, 242, 250;--mtrl-sys-color-surface-container: #f3edf7;--mtrl-sys-color-surface-container-rgb: 243, 237, 247;--mtrl-sys-color-surface-container-high: #ece6f0;--mtrl-sys-color-surface-container-high-rgb: 236, 230, 240;--mtrl-sys-color-surface-container-highest: #e6e0e9;--mtrl-sys-color-surface-container-highest-rgb: 230, 224, 233;--mtrl-sys-color-on-surface: #1c1b1f;--mtrl-sys-color-on-surface-rgb: 28, 27, 31;--mtrl-sys-color-on-surface-variant: #49454f;--mtrl-sys-color-on-surface-variant-rgb: 73, 69, 79;--mtrl-sys-color-outline: #79747e;--mtrl-sys-color-outline-rgb: 121, 116, 126;--mtrl-sys-color-outline-variant: #cac4d0;--mtrl-sys-color-outline-variant-rgb: 202, 196, 208;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #313033;--mtrl-sys-color-inverse-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-on-surface: #f4eff4;--mtrl-sys-color-inverse-on-surface-rgb: 244, 239, 244;--mtrl-sys-color-inverse-primary: #d0bcff;--mtrl-sys-color-inverse-primary-rgb: 208, 188, 255;--mtrl-sys-state-hover-state-layer-opacity: 0.08;--mtrl-sys-state-focus-state-layer-opacity: 0.12;--mtrl-sys-state-pressed-state-layer-opacity: 0.12;--mtrl-sys-state-dragged-state-layer-opacity: 0.16}[data-theme=baseline][data-theme-mode=dark]{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-error-rgb: 242, 184, 181;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-on-error-rgb: 96, 20, 16;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-primary-rgb: 208, 188, 255;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-on-primary-rgb: 56, 30, 114;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-primary-container-rgb: 79, 55, 139;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-on-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-secondary-rgb: 204, 194, 220;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-on-secondary-rgb: 51, 45, 65;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-secondary-container-rgb: 74, 68, 88;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-tertiary-rgb: 239, 184, 200;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-on-tertiary-rgb: 73, 37, 50;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-tertiary-container-rgb: 99, 59, 72;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-surface: #1c1b1f;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-dim-rgb: 20, 18, 24;--mtrl-sys-color-surface-bright: #3b383d;--mtrl-sys-color-surface-bright-rgb: 59, 56, 61;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-lowest-rgb: 15, 13, 19;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container-low-rgb: 29, 27, 32;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-rgb: 33, 31, 38;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-high-rgb: 43, 41, 48;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-surface-container-highest-rgb: 54, 52, 59;--mtrl-sys-color-on-surface: #e6e1e5;--mtrl-sys-color-on-surface-rgb: 230, 225, 229;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-on-surface-variant-rgb: 202, 196, 208;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-rgb: 147, 143, 153;--mtrl-sys-color-outline-variant: #444746;--mtrl-sys-color-outline-variant-rgb: 68, 71, 70;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #e6e1e5;--mtrl-sys-color-inverse-surface-rgb: 230, 225, 229;--mtrl-sys-color-inverse-on-surface: #313033;--mtrl-sys-color-inverse-on-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-primary: #6750a4;--mtrl-sys-color-inverse-primary-rgb: 103, 80, 164}:root{--mtrl-ref-typeface-brand: Roboto, sans-serif;--mtrl-ref-typeface-plain: Roboto, sans-serif;--mtrl-sys-shape-corner-none: 0;--mtrl-sys-shape-corner-extra-tiny: 1px;--mtrl-sys-shape-corner-tiny: 2px;--mtrl-sys-shape-corner-extra-small: 4px;--mtrl-sys-shape-corner-small: 8px;--mtrl-sys-shape-corner-medium: 12px;--mtrl-sys-shape-corner-large: 16px;--mtrl-sys-shape-corner-large-increased: 20px;--mtrl-sys-shape-corner-extra-large: 28px;--mtrl-sys-shape-corner-full: 9999px;--mtrl-sys-shape-corner-pill: 100px;--mtrl-sys-typescale-display-large-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-display-large-font-size: 57px;--mtrl-sys-typescale-display-large-line-height: 64px;--mtrl-sys-typescale-display-large-letter-spacing: -0.25px;--mtrl-sys-typescale-display-large-font-weight: 400;--mtrl-sys-typescale-display-medium-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-display-medium-font-size: 45px;--mtrl-sys-typescale-display-medium-line-height: 52px;--mtrl-sys-typescale-display-medium-letter-spacing: 0;--mtrl-sys-typescale-display-medium-font-weight: 400;--mtrl-sys-typescale-display-small-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-display-small-font-size: 36px;--mtrl-sys-typescale-display-small-line-height: 44px;--mtrl-sys-typescale-display-small-letter-spacing: 0;--mtrl-sys-typescale-display-small-font-weight: 400;--mtrl-sys-typescale-headline-large-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-headline-large-font-size: 32px;--mtrl-sys-typescale-headline-large-line-height: 40px;--mtrl-sys-typescale-headline-large-letter-spacing: 0;--mtrl-sys-typescale-headline-large-font-weight: 400;--mtrl-sys-typescale-headline-medium-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-headline-medium-font-size: 28px;--mtrl-sys-typescale-headline-medium-line-height: 36px;--mtrl-sys-typescale-headline-medium-letter-spacing: 0;--mtrl-sys-typescale-headline-medium-font-weight: 400;--mtrl-sys-typescale-headline-small-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-headline-small-font-size: 24px;--mtrl-sys-typescale-headline-small-line-height: 32px;--mtrl-sys-typescale-headline-small-letter-spacing: 0;--mtrl-sys-typescale-headline-small-font-weight: 400;--mtrl-sys-typescale-title-large-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-title-large-font-size: 22px;--mtrl-sys-typescale-title-large-line-height: 28px;--mtrl-sys-typescale-title-large-letter-spacing: 0;--mtrl-sys-typescale-title-large-font-weight: 400;--mtrl-sys-typescale-title-medium-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-title-medium-font-size: 16px;--mtrl-sys-typescale-title-medium-line-height: 24px;--mtrl-sys-typescale-title-medium-letter-spacing: 0.15px;--mtrl-sys-typescale-title-medium-font-weight: 500;--mtrl-sys-typescale-title-small-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-title-small-font-size: 14px;--mtrl-sys-typescale-title-small-line-height: 20px;--mtrl-sys-typescale-title-small-letter-spacing: 0.1px;--mtrl-sys-typescale-title-small-font-weight: 500;--mtrl-sys-typescale-body-large-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-body-large-font-size: 16px;--mtrl-sys-typescale-body-large-line-height: 24px;--mtrl-sys-typescale-body-large-letter-spacing: 0.5px;--mtrl-sys-typescale-body-large-font-weight: 400;--mtrl-sys-typescale-body-medium-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-body-medium-font-size: 14px;--mtrl-sys-typescale-body-medium-line-height: 20px;--mtrl-sys-typescale-body-medium-letter-spacing: 0.25px;--mtrl-sys-typescale-body-medium-font-weight: 400;--mtrl-sys-typescale-body-small-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-body-small-font-size: 12px;--mtrl-sys-typescale-body-small-line-height: 16px;--mtrl-sys-typescale-body-small-letter-spacing: 0.4px;--mtrl-sys-typescale-body-small-font-weight: 400;--mtrl-sys-typescale-label-large-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-label-large-font-size: 14px;--mtrl-sys-typescale-label-large-line-height: 20px;--mtrl-sys-typescale-label-large-letter-spacing: 0.1px;--mtrl-sys-typescale-label-large-font-weight: 500;--mtrl-sys-typescale-label-medium-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-label-medium-font-size: 12px;--mtrl-sys-typescale-label-medium-line-height: 16px;--mtrl-sys-typescale-label-medium-letter-spacing: 0.5px;--mtrl-sys-typescale-label-medium-font-weight: 500;--mtrl-sys-typescale-label-small-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-label-small-font-size: 11px;--mtrl-sys-typescale-label-small-line-height: 16px;--mtrl-sys-typescale-label-small-letter-spacing: 0.5px;--mtrl-sys-typescale-label-small-font-weight: 500}*,*::before,*::after{box-sizing:border-box}html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;padding:0}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}button{background:rgba(0,0,0,0);border:none;cursor:pointer;padding:0}ul,ol{list-style:none;margin:0;padding:0}a{text-decoration:none;color:inherit}table{border-collapse:collapse;border-spacing:0}.mtrl-display-large{font-family:"Roboto",sans-serif;font-size:57px;line-height:64px;letter-spacing:-0.25px;font-weight:400}.mtrl-display-medium{font-family:"Roboto",sans-serif;font-size:45px;line-height:52px;letter-spacing:0;font-weight:400}.mtrl-display-small{font-family:"Roboto",sans-serif;font-size:36px;line-height:44px;letter-spacing:0;font-weight:400}.mtrl-headline-large{font-family:"Roboto",sans-serif;font-size:32px;line-height:40px;letter-spacing:0;font-weight:400}.mtrl-headline-medium{font-family:"Roboto",sans-serif;font-size:28px;line-height:36px;letter-spacing:0;font-weight:400}.mtrl-headline-small{font-family:"Roboto",sans-serif;font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-title-large{font-family:"Roboto",sans-serif;font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-title-medium{font-family:"Roboto",sans-serif;font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-title-small{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-body-large{font-family:"Roboto",sans-serif;font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-body-medium{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}.mtrl-body-small{font-family:"Roboto",sans-serif;font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}.mtrl-label-large{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-label-medium{font-family:"Roboto",sans-serif;font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500}.mtrl-label-small{font-family:"Roboto",sans-serif;font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500}.mtrl-text-center{text-align:center}.mtrl-text-left{text-align:left}.mtrl-text-right{text-align:right}.mtrl-font-thin{font-weight:100}.mtrl-font-light{font-weight:300}.mtrl-font-regular{font-weight:400}.mtrl-font-medium{font-weight:500}.mtrl-font-bold{font-weight:700}.mtrl-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mtrl-truncate-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}h1{font-family:"Roboto",sans-serif;font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h2{font-family:"Roboto",sans-serif;font-size:28px;line-height:36px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h3{font-family:"Roboto",sans-serif;font-size:24px;line-height:32px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h4{font-family:"Roboto",sans-serif;font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h5{font-family:"Roboto",sans-serif;font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;margin-bottom:.5em}h6{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;margin-bottom:.5em}p{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;margin-bottom:1em}.mtrl-ripple{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}.mtrl-ripple-wave{position:absolute;border-radius:50%;background-color:currentColor;opacity:0;transform:scale(0);pointer-events:none;will-change:transform,opacity;transition:opacity .4s cubic-bezier(0.4, 0, 0.2, 1)}.mtrl-ripple-wave.active{animation:mtrl-ripple-expand .4s cubic-bezier(0.4, 0, 0.2, 1) both;opacity:.08}.mtrl-ripple-wave.fade-out{opacity:0}@keyframes mtrl-ripple-expand{from{transform:scale(0)}to{transform:scale(1)}}@media(prefers-reduced-motion: reduce){.mtrl-ripple-wave.active{animation:none;transform:scale(1)}.mtrl-ripple-wave{transition:none}}[data-ripple]{position:relative;overflow:hidden}[data-ripple]::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none}[data-ripple][data-ripple=light]::after{background-color:hsla(0,0%,100%,.3)}[data-ripple][data-ripple=dark]::after{background-color:rgba(0,0,0,.1)}[data-ripple]>*{position:relative;z-index:1}body{margin:0;padding:0;background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-sys-typescale-body-medium-font);font-size:var(--mtrl-sys-typescale-body-medium-font-size);line-height:var(--mtrl-sys-typescale-body-medium-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),color 200ms cubic-bezier(0.2, 0, 0, 1)}html{scroll-behavior:smooth}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}}*,*::before,*::after{box-sizing:border-box}}
1
+ /*! mtrl v0.9.1 | MIT */
2
+ @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list,mtrl.tooltip;@layer mtrl.base{:root{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-error-rgb: 179, 38, 30;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-on-error-rgb: 255, 255, 255;--mtrl-sys-color-primary: #6750a4;--mtrl-sys-color-primary-rgb: 103, 80, 164;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-on-primary-rgb: 255, 255, 255;--mtrl-sys-color-primary-container: #eaddff;--mtrl-sys-color-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-on-primary-container: #21005d;--mtrl-sys-color-on-primary-container-rgb: 33, 0, 93;--mtrl-sys-color-secondary: #625b71;--mtrl-sys-color-secondary-rgb: 98, 91, 113;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-on-secondary-rgb: 255, 255, 255;--mtrl-sys-color-secondary-container: #e8def8;--mtrl-sys-color-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-on-secondary-container: #1d192b;--mtrl-sys-color-on-secondary-container-rgb: 29, 25, 43;--mtrl-sys-color-tertiary: #7d5260;--mtrl-sys-color-tertiary-rgb: 125, 82, 96;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-on-tertiary-rgb: 255, 255, 255;--mtrl-sys-color-tertiary-container: #ffd8e4;--mtrl-sys-color-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-on-tertiary-container: #31111d;--mtrl-sys-color-on-tertiary-container-rgb: 49, 17, 29;--mtrl-sys-color-surface: #fffbfe;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #ded8e1;--mtrl-sys-color-surface-dim-rgb: 222, 216, 225;--mtrl-sys-color-surface-bright: #fff8f7;--mtrl-sys-color-surface-bright-rgb: 255, 248, 247;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-lowest-rgb: 255, 255, 255;--mtrl-sys-color-surface-container-low: #f7f2fa;--mtrl-sys-color-surface-container-low-rgb: 247, 242, 250;--mtrl-sys-color-surface-container: #f3edf7;--mtrl-sys-color-surface-container-rgb: 243, 237, 247;--mtrl-sys-color-surface-container-high: #ece6f0;--mtrl-sys-color-surface-container-high-rgb: 236, 230, 240;--mtrl-sys-color-surface-container-highest: #e6e0e9;--mtrl-sys-color-surface-container-highest-rgb: 230, 224, 233;--mtrl-sys-color-on-surface: #1c1b1f;--mtrl-sys-color-on-surface-rgb: 28, 27, 31;--mtrl-sys-color-on-surface-variant: #49454f;--mtrl-sys-color-on-surface-variant-rgb: 73, 69, 79;--mtrl-sys-color-outline: #79747e;--mtrl-sys-color-outline-rgb: 121, 116, 126;--mtrl-sys-color-outline-variant: #cac4d0;--mtrl-sys-color-outline-variant-rgb: 202, 196, 208;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #313033;--mtrl-sys-color-inverse-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-on-surface: #f4eff4;--mtrl-sys-color-inverse-on-surface-rgb: 244, 239, 244;--mtrl-sys-color-inverse-primary: #d0bcff;--mtrl-sys-color-inverse-primary-rgb: 208, 188, 255;--mtrl-sys-state-hover-state-layer-opacity: 0.08;--mtrl-sys-state-focus-state-layer-opacity: 0.12;--mtrl-sys-state-pressed-state-layer-opacity: 0.12;--mtrl-sys-state-dragged-state-layer-opacity: 0.16}@media(prefers-color-scheme: dark){:root{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-error-rgb: 242, 184, 181;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-on-error-rgb: 96, 20, 16;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-primary-rgb: 208, 188, 255;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-on-primary-rgb: 56, 30, 114;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-primary-container-rgb: 79, 55, 139;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-on-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-secondary-rgb: 204, 194, 220;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-on-secondary-rgb: 51, 45, 65;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-secondary-container-rgb: 74, 68, 88;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-tertiary-rgb: 239, 184, 200;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-on-tertiary-rgb: 73, 37, 50;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-tertiary-container-rgb: 99, 59, 72;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-surface: #1c1b1f;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-dim-rgb: 20, 18, 24;--mtrl-sys-color-surface-bright: #3b383d;--mtrl-sys-color-surface-bright-rgb: 59, 56, 61;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-lowest-rgb: 15, 13, 19;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container-low-rgb: 29, 27, 32;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-rgb: 33, 31, 38;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-high-rgb: 43, 41, 48;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-surface-container-highest-rgb: 54, 52, 59;--mtrl-sys-color-on-surface: #e6e1e5;--mtrl-sys-color-on-surface-rgb: 230, 225, 229;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-on-surface-variant-rgb: 202, 196, 208;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-rgb: 147, 143, 153;--mtrl-sys-color-outline-variant: #444746;--mtrl-sys-color-outline-variant-rgb: 68, 71, 70;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #e6e1e5;--mtrl-sys-color-inverse-surface-rgb: 230, 225, 229;--mtrl-sys-color-inverse-on-surface: #313033;--mtrl-sys-color-inverse-on-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-primary: #6750a4;--mtrl-sys-color-inverse-primary-rgb: 103, 80, 164}}.dark-theme{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-error-rgb: 242, 184, 181;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-on-error-rgb: 96, 20, 16;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-primary-rgb: 208, 188, 255;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-on-primary-rgb: 56, 30, 114;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-primary-container-rgb: 79, 55, 139;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-on-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-secondary-rgb: 204, 194, 220;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-on-secondary-rgb: 51, 45, 65;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-secondary-container-rgb: 74, 68, 88;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-tertiary-rgb: 239, 184, 200;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-on-tertiary-rgb: 73, 37, 50;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-tertiary-container-rgb: 99, 59, 72;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-surface: #1c1b1f;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-dim-rgb: 20, 18, 24;--mtrl-sys-color-surface-bright: #3b383d;--mtrl-sys-color-surface-bright-rgb: 59, 56, 61;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-lowest-rgb: 15, 13, 19;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container-low-rgb: 29, 27, 32;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-rgb: 33, 31, 38;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-high-rgb: 43, 41, 48;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-surface-container-highest-rgb: 54, 52, 59;--mtrl-sys-color-on-surface: #e6e1e5;--mtrl-sys-color-on-surface-rgb: 230, 225, 229;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-on-surface-variant-rgb: 202, 196, 208;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-rgb: 147, 143, 153;--mtrl-sys-color-outline-variant: #444746;--mtrl-sys-color-outline-variant-rgb: 68, 71, 70;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #e6e1e5;--mtrl-sys-color-inverse-surface-rgb: 230, 225, 229;--mtrl-sys-color-inverse-on-surface: #313033;--mtrl-sys-color-inverse-on-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-primary: #6750a4;--mtrl-sys-color-inverse-primary-rgb: 103, 80, 164}[data-theme=baseline]{--mtrl-sys-color-error: #B3261E;--mtrl-sys-color-error-rgb: 179, 38, 30;--mtrl-sys-color-on-error: #FFFFFF;--mtrl-sys-color-on-error-rgb: 255, 255, 255;--mtrl-sys-color-primary: #6750a4;--mtrl-sys-color-primary-rgb: 103, 80, 164;--mtrl-sys-color-on-primary: #ffffff;--mtrl-sys-color-on-primary-rgb: 255, 255, 255;--mtrl-sys-color-primary-container: #eaddff;--mtrl-sys-color-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-on-primary-container: #21005d;--mtrl-sys-color-on-primary-container-rgb: 33, 0, 93;--mtrl-sys-color-secondary: #625b71;--mtrl-sys-color-secondary-rgb: 98, 91, 113;--mtrl-sys-color-on-secondary: #ffffff;--mtrl-sys-color-on-secondary-rgb: 255, 255, 255;--mtrl-sys-color-secondary-container: #e8def8;--mtrl-sys-color-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-on-secondary-container: #1d192b;--mtrl-sys-color-on-secondary-container-rgb: 29, 25, 43;--mtrl-sys-color-tertiary: #7d5260;--mtrl-sys-color-tertiary-rgb: 125, 82, 96;--mtrl-sys-color-on-tertiary: #ffffff;--mtrl-sys-color-on-tertiary-rgb: 255, 255, 255;--mtrl-sys-color-tertiary-container: #ffd8e4;--mtrl-sys-color-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-on-tertiary-container: #31111d;--mtrl-sys-color-on-tertiary-container-rgb: 49, 17, 29;--mtrl-sys-color-surface: #fffbfe;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #ded8e1;--mtrl-sys-color-surface-dim-rgb: 222, 216, 225;--mtrl-sys-color-surface-bright: #fff8f7;--mtrl-sys-color-surface-bright-rgb: 255, 248, 247;--mtrl-sys-color-surface-container-lowest: #ffffff;--mtrl-sys-color-surface-container-lowest-rgb: 255, 255, 255;--mtrl-sys-color-surface-container-low: #f7f2fa;--mtrl-sys-color-surface-container-low-rgb: 247, 242, 250;--mtrl-sys-color-surface-container: #f3edf7;--mtrl-sys-color-surface-container-rgb: 243, 237, 247;--mtrl-sys-color-surface-container-high: #ece6f0;--mtrl-sys-color-surface-container-high-rgb: 236, 230, 240;--mtrl-sys-color-surface-container-highest: #e6e0e9;--mtrl-sys-color-surface-container-highest-rgb: 230, 224, 233;--mtrl-sys-color-on-surface: #1c1b1f;--mtrl-sys-color-on-surface-rgb: 28, 27, 31;--mtrl-sys-color-on-surface-variant: #49454f;--mtrl-sys-color-on-surface-variant-rgb: 73, 69, 79;--mtrl-sys-color-outline: #79747e;--mtrl-sys-color-outline-rgb: 121, 116, 126;--mtrl-sys-color-outline-variant: #cac4d0;--mtrl-sys-color-outline-variant-rgb: 202, 196, 208;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #313033;--mtrl-sys-color-inverse-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-on-surface: #f4eff4;--mtrl-sys-color-inverse-on-surface-rgb: 244, 239, 244;--mtrl-sys-color-inverse-primary: #d0bcff;--mtrl-sys-color-inverse-primary-rgb: 208, 188, 255;--mtrl-sys-state-hover-state-layer-opacity: 0.08;--mtrl-sys-state-focus-state-layer-opacity: 0.12;--mtrl-sys-state-pressed-state-layer-opacity: 0.12;--mtrl-sys-state-dragged-state-layer-opacity: 0.16}[data-theme=baseline][data-theme-mode=dark]{--mtrl-sys-color-error: #F2B8B5;--mtrl-sys-color-error-rgb: 242, 184, 181;--mtrl-sys-color-on-error: #601410;--mtrl-sys-color-on-error-rgb: 96, 20, 16;--mtrl-sys-color-primary: #d0bcff;--mtrl-sys-color-primary-rgb: 208, 188, 255;--mtrl-sys-color-on-primary: #381e72;--mtrl-sys-color-on-primary-rgb: 56, 30, 114;--mtrl-sys-color-primary-container: #4f378b;--mtrl-sys-color-primary-container-rgb: 79, 55, 139;--mtrl-sys-color-on-primary-container: #eaddff;--mtrl-sys-color-on-primary-container-rgb: 234, 221, 255;--mtrl-sys-color-secondary: #ccc2dc;--mtrl-sys-color-secondary-rgb: 204, 194, 220;--mtrl-sys-color-on-secondary: #332d41;--mtrl-sys-color-on-secondary-rgb: 51, 45, 65;--mtrl-sys-color-secondary-container: #4a4458;--mtrl-sys-color-secondary-container-rgb: 74, 68, 88;--mtrl-sys-color-on-secondary-container: #e8def8;--mtrl-sys-color-on-secondary-container-rgb: 232, 222, 248;--mtrl-sys-color-tertiary: #efb8c8;--mtrl-sys-color-tertiary-rgb: 239, 184, 200;--mtrl-sys-color-on-tertiary: #492532;--mtrl-sys-color-on-tertiary-rgb: 73, 37, 50;--mtrl-sys-color-tertiary-container: #633b48;--mtrl-sys-color-tertiary-container-rgb: 99, 59, 72;--mtrl-sys-color-on-tertiary-container: #ffd8e4;--mtrl-sys-color-on-tertiary-container-rgb: 255, 216, 228;--mtrl-sys-color-surface: #1c1b1f;--mtrl-sys-color-surface-rgb: 28, 27, 31;--mtrl-sys-color-surface-dim: #141218;--mtrl-sys-color-surface-dim-rgb: 20, 18, 24;--mtrl-sys-color-surface-bright: #3b383d;--mtrl-sys-color-surface-bright-rgb: 59, 56, 61;--mtrl-sys-color-surface-container-lowest: #0f0d13;--mtrl-sys-color-surface-container-lowest-rgb: 15, 13, 19;--mtrl-sys-color-surface-container-low: #1d1b20;--mtrl-sys-color-surface-container-low-rgb: 29, 27, 32;--mtrl-sys-color-surface-container: #211f26;--mtrl-sys-color-surface-container-rgb: 33, 31, 38;--mtrl-sys-color-surface-container-high: #2b2930;--mtrl-sys-color-surface-container-high-rgb: 43, 41, 48;--mtrl-sys-color-surface-container-highest: #36343b;--mtrl-sys-color-surface-container-highest-rgb: 54, 52, 59;--mtrl-sys-color-on-surface: #e6e1e5;--mtrl-sys-color-on-surface-rgb: 230, 225, 229;--mtrl-sys-color-on-surface-variant: #cac4d0;--mtrl-sys-color-on-surface-variant-rgb: 202, 196, 208;--mtrl-sys-color-outline: #938f99;--mtrl-sys-color-outline-rgb: 147, 143, 153;--mtrl-sys-color-outline-variant: #444746;--mtrl-sys-color-outline-variant-rgb: 68, 71, 70;--mtrl-sys-color-shadow: #000000;--mtrl-sys-color-shadow-rgb: 0, 0, 0;--mtrl-sys-color-scrim: #000000;--mtrl-sys-color-scrim-rgb: 0, 0, 0;--mtrl-sys-color-inverse-surface: #e6e1e5;--mtrl-sys-color-inverse-surface-rgb: 230, 225, 229;--mtrl-sys-color-inverse-on-surface: #313033;--mtrl-sys-color-inverse-on-surface-rgb: 49, 48, 51;--mtrl-sys-color-inverse-primary: #6750a4;--mtrl-sys-color-inverse-primary-rgb: 103, 80, 164}:root{--mtrl-ref-typeface-brand: Roboto, sans-serif;--mtrl-ref-typeface-plain: Roboto, sans-serif;--mtrl-sys-shape-corner-none: 0;--mtrl-sys-shape-corner-extra-tiny: 1px;--mtrl-sys-shape-corner-tiny: 2px;--mtrl-sys-shape-corner-extra-small: 4px;--mtrl-sys-shape-corner-small: 8px;--mtrl-sys-shape-corner-medium: 12px;--mtrl-sys-shape-corner-large: 16px;--mtrl-sys-shape-corner-large-increased: 20px;--mtrl-sys-shape-corner-extra-large: 28px;--mtrl-sys-shape-corner-full: 9999px;--mtrl-sys-shape-corner-pill: 100px;--mtrl-sys-typescale-display-large-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-display-large-font-size: 57px;--mtrl-sys-typescale-display-large-line-height: 64px;--mtrl-sys-typescale-display-large-letter-spacing: -0.25px;--mtrl-sys-typescale-display-large-font-weight: 400;--mtrl-sys-typescale-display-medium-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-display-medium-font-size: 45px;--mtrl-sys-typescale-display-medium-line-height: 52px;--mtrl-sys-typescale-display-medium-letter-spacing: 0;--mtrl-sys-typescale-display-medium-font-weight: 400;--mtrl-sys-typescale-display-small-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-display-small-font-size: 36px;--mtrl-sys-typescale-display-small-line-height: 44px;--mtrl-sys-typescale-display-small-letter-spacing: 0;--mtrl-sys-typescale-display-small-font-weight: 400;--mtrl-sys-typescale-headline-large-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-headline-large-font-size: 32px;--mtrl-sys-typescale-headline-large-line-height: 40px;--mtrl-sys-typescale-headline-large-letter-spacing: 0;--mtrl-sys-typescale-headline-large-font-weight: 400;--mtrl-sys-typescale-headline-medium-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-headline-medium-font-size: 28px;--mtrl-sys-typescale-headline-medium-line-height: 36px;--mtrl-sys-typescale-headline-medium-letter-spacing: 0;--mtrl-sys-typescale-headline-medium-font-weight: 400;--mtrl-sys-typescale-headline-small-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-headline-small-font-size: 24px;--mtrl-sys-typescale-headline-small-line-height: 32px;--mtrl-sys-typescale-headline-small-letter-spacing: 0;--mtrl-sys-typescale-headline-small-font-weight: 400;--mtrl-sys-typescale-title-large-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-title-large-font-size: 22px;--mtrl-sys-typescale-title-large-line-height: 28px;--mtrl-sys-typescale-title-large-letter-spacing: 0;--mtrl-sys-typescale-title-large-font-weight: 400;--mtrl-sys-typescale-title-medium-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-title-medium-font-size: 16px;--mtrl-sys-typescale-title-medium-line-height: 24px;--mtrl-sys-typescale-title-medium-letter-spacing: 0.15px;--mtrl-sys-typescale-title-medium-font-weight: 500;--mtrl-sys-typescale-title-small-font: var(--mtrl-ref-typeface-brand);--mtrl-sys-typescale-title-small-font-size: 14px;--mtrl-sys-typescale-title-small-line-height: 20px;--mtrl-sys-typescale-title-small-letter-spacing: 0.1px;--mtrl-sys-typescale-title-small-font-weight: 500;--mtrl-sys-typescale-body-large-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-body-large-font-size: 16px;--mtrl-sys-typescale-body-large-line-height: 24px;--mtrl-sys-typescale-body-large-letter-spacing: 0.5px;--mtrl-sys-typescale-body-large-font-weight: 400;--mtrl-sys-typescale-body-medium-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-body-medium-font-size: 14px;--mtrl-sys-typescale-body-medium-line-height: 20px;--mtrl-sys-typescale-body-medium-letter-spacing: 0.25px;--mtrl-sys-typescale-body-medium-font-weight: 400;--mtrl-sys-typescale-body-small-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-body-small-font-size: 12px;--mtrl-sys-typescale-body-small-line-height: 16px;--mtrl-sys-typescale-body-small-letter-spacing: 0.4px;--mtrl-sys-typescale-body-small-font-weight: 400;--mtrl-sys-typescale-label-large-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-label-large-font-size: 14px;--mtrl-sys-typescale-label-large-line-height: 20px;--mtrl-sys-typescale-label-large-letter-spacing: 0.1px;--mtrl-sys-typescale-label-large-font-weight: 500;--mtrl-sys-typescale-label-medium-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-label-medium-font-size: 12px;--mtrl-sys-typescale-label-medium-line-height: 16px;--mtrl-sys-typescale-label-medium-letter-spacing: 0.5px;--mtrl-sys-typescale-label-medium-font-weight: 500;--mtrl-sys-typescale-label-small-font: var(--mtrl-ref-typeface-plain);--mtrl-sys-typescale-label-small-font-size: 11px;--mtrl-sys-typescale-label-small-line-height: 16px;--mtrl-sys-typescale-label-small-letter-spacing: 0.5px;--mtrl-sys-typescale-label-small-font-weight: 500}*,*::before,*::after{box-sizing:border-box}html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;padding:0}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}button{background:rgba(0,0,0,0);border:none;cursor:pointer;padding:0}ul,ol{list-style:none;margin:0;padding:0}a{text-decoration:none;color:inherit}table{border-collapse:collapse;border-spacing:0}.mtrl-display-large{font-family:"Roboto",sans-serif;font-size:57px;line-height:64px;letter-spacing:-0.25px;font-weight:400}.mtrl-display-medium{font-family:"Roboto",sans-serif;font-size:45px;line-height:52px;letter-spacing:0;font-weight:400}.mtrl-display-small{font-family:"Roboto",sans-serif;font-size:36px;line-height:44px;letter-spacing:0;font-weight:400}.mtrl-headline-large{font-family:"Roboto",sans-serif;font-size:32px;line-height:40px;letter-spacing:0;font-weight:400}.mtrl-headline-medium{font-family:"Roboto",sans-serif;font-size:28px;line-height:36px;letter-spacing:0;font-weight:400}.mtrl-headline-small{font-family:"Roboto",sans-serif;font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-title-large{font-family:"Roboto",sans-serif;font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}.mtrl-title-medium{font-family:"Roboto",sans-serif;font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}.mtrl-title-small{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-body-large{font-family:"Roboto",sans-serif;font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}.mtrl-body-medium{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}.mtrl-body-small{font-family:"Roboto",sans-serif;font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}.mtrl-label-large{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}.mtrl-label-medium{font-family:"Roboto",sans-serif;font-size:12px;line-height:16px;letter-spacing:.5px;font-weight:500}.mtrl-label-small{font-family:"Roboto",sans-serif;font-size:11px;line-height:16px;letter-spacing:.5px;font-weight:500}.mtrl-text-center{text-align:center}.mtrl-text-left{text-align:left}.mtrl-text-right{text-align:right}.mtrl-font-thin{font-weight:100}.mtrl-font-light{font-weight:300}.mtrl-font-regular{font-weight:400}.mtrl-font-medium{font-weight:500}.mtrl-font-bold{font-weight:700}.mtrl-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtrl-truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mtrl-truncate-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}h1{font-family:"Roboto",sans-serif;font-size:32px;line-height:40px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h2{font-family:"Roboto",sans-serif;font-size:28px;line-height:36px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h3{font-family:"Roboto",sans-serif;font-size:24px;line-height:32px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h4{font-family:"Roboto",sans-serif;font-size:22px;line-height:28px;letter-spacing:0;font-weight:400;margin-bottom:.5em}h5{font-family:"Roboto",sans-serif;font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500;margin-bottom:.5em}h6{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500;margin-bottom:.5em}p{font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;margin-bottom:1em}.mtrl-ripple{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}.mtrl-ripple-wave{position:absolute;border-radius:50%;background-color:currentColor;opacity:0;transform:scale(0);pointer-events:none;will-change:transform,opacity;transition:opacity .4s cubic-bezier(0.4, 0, 0.2, 1)}.mtrl-ripple-wave.active{animation:mtrl-ripple-expand .4s cubic-bezier(0.4, 0, 0.2, 1) both;opacity:.08}.mtrl-ripple-wave.fade-out{opacity:0}@keyframes mtrl-ripple-expand{from{transform:scale(0)}to{transform:scale(1)}}@media(prefers-reduced-motion: reduce){.mtrl-ripple-wave.active{animation:none;transform:scale(1)}.mtrl-ripple-wave{transition:none}}[data-ripple]{position:relative;overflow:hidden}[data-ripple]::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none}[data-ripple][data-ripple=light]::after{background-color:hsla(0,0%,100%,.3)}[data-ripple][data-ripple=dark]::after{background-color:rgba(0,0,0,.1)}[data-ripple]>*{position:relative;z-index:1}body{margin:0;padding:0;background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-sys-typescale-body-medium-font);font-size:var(--mtrl-sys-typescale-body-medium-font-size);line-height:var(--mtrl-sys-typescale-body-medium-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color 200ms cubic-bezier(0.2, 0, 0, 1),color 200ms cubic-bezier(0.2, 0, 0, 1)}html{scroll-behavior:smooth}@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto}}*,*::before,*::after{box-sizing:border-box}}
@@ -1,2 +1,2 @@
1
- /*! mtrl v0.8.0 | MIT */
2
- @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list;@layer mtrl.bottom-app-bar{.mtrl-bottom-app-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-top-left-radius:var(--mtrl-sys-shape-medium);border-top-right-radius:var(--mtrl-sys-shape-medium);transition:transform .3s ease-in-out}.mtrl-bottom-app-bar-actions{display:flex;align-items:center;gap:4px;height:100%}.mtrl-bottom-app-bar-actions>*{flex-shrink:0}.mtrl-bottom-app-bar-fab-container{display:flex;align-items:center;justify-content:center;margin-left:auto}.mtrl-bottom-app-bar--with-fab{height:72px}.mtrl-bottom-app-bar--fab-center .mtrl-bottom-app-bar-fab-container{position:absolute;left:50%;transform:translateX(-50%)}.mtrl-bottom-app-bar--hidden{transform:translateY(100%)}[dir=rtl] .mtrl-bottom-app-bar{padding:12px 4px 12px 16px}[dir=rtl] .mtrl-bottom-app-bar-actions{flex-direction:row-reverse}[dir=rtl] .mtrl-bottom-app-bar-fab-container{margin-right:auto;margin-left:initial}@media(prefers-reduced-motion: reduce){.mtrl-bottom-app-bar{transition-duration:.01ms}}@media(forced-colors: active){.mtrl-bottom-app-bar{border-top:1px solid currentColor}}}
1
+ /*! mtrl v0.9.1 | MIT */
2
+ @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list,mtrl.tooltip;@layer mtrl.bottom-app-bar{.mtrl-bottom-app-bar{position:absolute;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container);box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 2px 6px 2px rgba(0,0,0,.15);border-top-left-radius:var(--mtrl-sys-shape-medium);border-top-right-radius:var(--mtrl-sys-shape-medium);transition:transform .3s ease-in-out}.mtrl-bottom-app-bar-actions{display:flex;align-items:center;gap:4px;height:100%}.mtrl-bottom-app-bar-actions>*{flex-shrink:0}.mtrl-bottom-app-bar-fab-container{display:flex;align-items:center;justify-content:center;margin-left:auto}.mtrl-bottom-app-bar--with-fab{height:72px}.mtrl-bottom-app-bar--fab-center .mtrl-bottom-app-bar-fab-container{position:absolute;left:50%;transform:translateX(-50%)}.mtrl-bottom-app-bar--hidden{transform:translateY(100%)}[dir=rtl] .mtrl-bottom-app-bar{padding:12px 4px 12px 16px}[dir=rtl] .mtrl-bottom-app-bar-actions{flex-direction:row-reverse}[dir=rtl] .mtrl-bottom-app-bar-fab-container{margin-right:auto;margin-left:initial}@media(prefers-reduced-motion: reduce){.mtrl-bottom-app-bar{transition-duration:.01ms}}@media(forced-colors: active){.mtrl-bottom-app-bar{border-top:1px solid currentColor}}}
@@ -1,2 +1,2 @@
1
- /*! mtrl v0.8.0 | MIT */
2
- @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list;@layer mtrl.bottom-sheet{.mtrl-bottom-sheet{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.mtrl-bottom-sheet--scrim-visible,.mtrl-bottom-sheet--partial,.mtrl-bottom-sheet--expanded{pointer-events:auto}.mtrl-bottom-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 400ms cubic-bezier(0.2, 0, 0, 1),visibility 400ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-bottom-sheet-container{position:relative;width:100%;max-width:640px;max-height:100%;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-on-surface);border-start-start-radius:28px;border-start-end-radius:28px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);transform:translateY(100%);transition:transform 500ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-bottom-sheet-container:focus{outline:none}.mtrl-bottom-sheet-container:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-bottom-sheet-handle{flex:0 0 auto;width:32px;height:4px;margin:16px auto;border-radius:28px;background-color:var(--mtrl-sys-color-on-surface-variant);cursor:grab;touch-action:none}.mtrl-bottom-sheet-handle:active{cursor:grabbing}.mtrl-bottom-sheet-header{flex:0 0 auto;padding:0 24px 16px}.mtrl-bottom-sheet-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:"Roboto",sans-serif;font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-bottom-sheet-content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 24px;font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-bottom-sheet--partial .mtrl-bottom-sheet-container{transform:translateY(0);max-height:50%}.mtrl-bottom-sheet--partial .mtrl-bottom-sheet-scrim{opacity:1;visibility:visible}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet-container{transform:translateY(0);max-height:100%}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet-container:where(.mtrl-bottom-sheet--full-height *){border-start-start-radius:0;border-start-end-radius:0}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet-scrim{opacity:1;visibility:visible}.mtrl-bottom-sheet--standard{pointer-events:none}.mtrl-bottom-sheet--standard .mtrl-bottom-sheet-container{pointer-events:auto}@media(prefers-reduced-motion: reduce){.mtrl-bottom-sheet .mtrl-bottom-sheet-container,.mtrl-bottom-sheet .mtrl-bottom-sheet-scrim{transition:none}}}
1
+ /*! mtrl v0.9.1 | MIT */
2
+ @layer mtrl.base,mtrl.utilities,mtrl.textfield,mtrl.badge,mtrl.bottom-app-bar,mtrl.bottom-sheet,mtrl.side-sheet,mtrl.menu,mtrl.slider,mtrl.switch,mtrl.select,mtrl.progress,mtrl.button,mtrl.tabs,mtrl.top-app-bar,mtrl.icon-button,mtrl.button-group,mtrl.fab,mtrl.extended-fab,mtrl.segmented-button,mtrl.card,mtrl.carousel,mtrl.checkbox,mtrl.chips,mtrl.divider,mtrl.dialog,mtrl.drawer,mtrl.loading-indicator,mtrl.split-button,mtrl.radios,mtrl.timepicker,mtrl.search,mtrl.snackbar,mtrl.navigation-rail,mtrl.navigation,mtrl.list,mtrl.tooltip;@layer mtrl.bottom-sheet{.mtrl-bottom-sheet{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.mtrl-bottom-sheet--scrim-visible,.mtrl-bottom-sheet--partial,.mtrl-bottom-sheet--expanded{pointer-events:auto}.mtrl-bottom-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 400ms cubic-bezier(0.2, 0, 0, 1),visibility 400ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-bottom-sheet-container{position:relative;width:100%;max-width:640px;max-height:100%;display:flex;flex-direction:column;box-sizing:border-box;pointer-events:auto;background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-on-surface);border-start-start-radius:28px;border-start-end-radius:28px;box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15);transform:translateY(100%);transition:transform 500ms cubic-bezier(0.2, 0, 0, 1)}.mtrl-bottom-sheet-container:focus{outline:none}.mtrl-bottom-sheet-container:focus-visible{outline:3px solid var(--mtrl-sys-color-secondary);outline-offset:-3px}.mtrl-bottom-sheet-handle{flex:0 0 auto;width:32px;height:4px;margin:16px auto;border-radius:28px;background-color:var(--mtrl-sys-color-on-surface-variant);cursor:grab;touch-action:none}.mtrl-bottom-sheet-handle:active{cursor:grabbing}.mtrl-bottom-sheet-header{flex:0 0 auto;padding:0 24px 16px}.mtrl-bottom-sheet-title{margin:0;color:var(--mtrl-sys-color-on-surface);font-family:"Roboto",sans-serif;font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}.mtrl-bottom-sheet-content{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 24px 24px;font-family:"Roboto",sans-serif;font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400;color:var(--mtrl-sys-color-on-surface-variant)}.mtrl-bottom-sheet--partial .mtrl-bottom-sheet-container{transform:translateY(0);max-height:50%}.mtrl-bottom-sheet--partial .mtrl-bottom-sheet-scrim{opacity:1;visibility:visible}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet-container{transform:translateY(0);max-height:100%}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet-container:where(.mtrl-bottom-sheet--full-height *){border-start-start-radius:0;border-start-end-radius:0}.mtrl-bottom-sheet--expanded .mtrl-bottom-sheet-scrim{opacity:1;visibility:visible}.mtrl-bottom-sheet--standard{pointer-events:none}.mtrl-bottom-sheet--standard .mtrl-bottom-sheet-container{pointer-events:auto}@media(prefers-reduced-motion: reduce){.mtrl-bottom-sheet .mtrl-bottom-sheet-container,.mtrl-bottom-sheet .mtrl-bottom-sheet-scrim{transition:none}}}