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.
- package/dist/components/badge/config.d.ts +2 -2
- package/dist/components/bottom-sheet/bottom-sheet.js +1 -1
- package/dist/components/bottom-sheet/config.d.ts +2 -2
- package/dist/components/bottom-sheet/features/drag.d.ts +2 -2
- package/dist/components/bottom-sheet/features/drag.js +1 -1
- package/dist/components/button/api.d.ts +3 -3
- package/dist/components/button/button.d.ts +1 -1
- package/dist/components/button/config.d.ts +2 -2
- package/dist/components/button/features/progress.d.ts +17 -5
- package/dist/components/button-group/config.d.ts +20 -0
- package/dist/components/card/api.d.ts +10 -1
- package/dist/components/card/api.js +6 -1
- package/dist/components/card/card.js +1 -1
- package/dist/components/card/config.d.ts +15 -9
- package/dist/components/card/content.js +5 -2
- package/dist/components/card/features.d.ts +2 -1
- package/dist/components/card/types.d.ts +5 -4
- package/dist/components/carousel/config.d.ts +2 -2
- package/dist/components/carousel/features/slides.js +3 -2
- package/dist/components/checkbox/config.d.ts +2 -2
- package/dist/components/checkbox/types.d.ts +15 -16
- package/dist/components/chips/api.d.ts +6 -6
- package/dist/components/chips/chip/api.d.ts +2 -2
- package/dist/components/chips/chip/config.d.ts +6 -7
- package/dist/components/chips/config.d.ts +2 -2
- package/dist/components/chips/features/dom.js +0 -1
- package/dist/components/chips/types.d.ts +12 -1
- package/dist/components/datepicker/api.d.ts +5 -2
- package/dist/components/datepicker/config.d.ts +16 -13
- package/dist/components/datepicker/datepicker.js +10 -4
- package/dist/components/datepicker/render.d.ts +14 -6
- package/dist/components/datepicker/render.js +1 -1
- package/dist/components/datepicker/types.d.ts +51 -3
- package/dist/components/dialog/api.d.ts +1 -1
- package/dist/components/dialog/config.d.ts +3 -4
- package/dist/components/dialog/config.js +1 -1
- package/dist/components/dialog/features.js +1 -1
- package/dist/components/dialog/types.d.ts +1 -1
- package/dist/components/divider/features.js +2 -0
- package/dist/components/drawer/api.d.ts +3 -3
- package/dist/components/drawer/config.d.ts +2 -2
- package/dist/components/drawer/drawer.d.ts +1 -1
- package/dist/components/drawer/features/headline.d.ts +12 -2
- package/dist/components/drawer/features/items.d.ts +17 -3
- package/dist/components/drawer/features/state.d.ts +14 -2
- package/dist/components/extended-fab/api.d.ts +12 -4
- package/dist/components/extended-fab/api.js +12 -0
- package/dist/components/extended-fab/config.d.ts +10 -10
- package/dist/components/extended-fab/types.d.ts +4 -2
- package/dist/components/fab/api.d.ts +9 -2
- package/dist/components/fab/api.js +12 -0
- package/dist/components/fab/config.d.ts +8 -8
- package/dist/components/fab/types.d.ts +2 -1
- package/dist/components/icon-button/config.d.ts +2 -2
- package/dist/components/icon-button/features/toggle.d.ts +1 -5
- package/dist/components/icon-button/types.d.ts +6 -0
- package/dist/components/list/api.d.ts +18 -18
- package/dist/components/list/config.d.ts +6 -3
- package/dist/components/list/config.js +6 -7
- package/dist/components/list/features/renderer.js +2 -2
- package/dist/components/list/list.d.ts +20 -1
- package/dist/components/list/types.d.ts +32 -32
- package/dist/components/loading-indicator/config.d.ts +2 -2
- package/dist/components/loading-indicator/types.d.ts +3 -1
- package/dist/components/menu/api.d.ts +6 -5
- package/dist/components/menu/config.d.ts +2 -2
- package/dist/components/menu/features/keyboard.d.ts +19 -9
- package/dist/components/menu/types.d.ts +25 -9
- package/dist/components/navigation/config.d.ts +2 -2
- package/dist/components/navigation/features/controller.d.ts +1 -3
- package/dist/components/navigation/features/items.d.ts +1 -2
- package/dist/components/navigation/system/core.d.ts +6 -6
- package/dist/components/navigation/system/events.d.ts +3 -3
- package/dist/components/navigation/system/mobile.d.ts +6 -6
- package/dist/components/navigation/system/state.d.ts +3 -3
- package/dist/components/navigation/system/types.d.ts +43 -11
- package/dist/components/navigation/types.d.ts +15 -6
- package/dist/components/navigation-rail/navigation-rail.js +2 -1
- package/dist/components/progress/api.js +0 -1
- package/dist/components/progress/config.d.ts +2 -2
- package/dist/components/progress/features/canvas.d.ts +14 -5
- package/dist/components/progress/features/state.d.ts +1 -2
- package/dist/components/progress/types.d.ts +1 -1
- package/dist/components/radios/config.d.ts +2 -2
- package/dist/components/search/api.js +4 -4
- package/dist/components/search/config.d.ts +2 -2
- package/dist/components/search/features/suggestions.d.ts +1 -3
- package/dist/components/search/features/suggestions.js +16 -15
- package/dist/components/search/search.js +1 -1
- package/dist/components/segmented-button/config.d.ts +1 -5
- package/dist/components/segmented-button/config.js +1 -1
- package/dist/components/select/api.d.ts +2 -2
- package/dist/components/select/features.d.ts +2 -2
- package/dist/components/select/features.js +2 -1
- package/dist/components/select/types.d.ts +38 -21
- package/dist/components/side-sheet/config.d.ts +2 -2
- package/dist/components/slider/api.d.ts +6 -6
- package/dist/components/slider/config.d.ts +2 -2
- package/dist/components/slider/types.d.ts +2 -2
- package/dist/components/snackbar/config.d.ts +2 -2
- package/dist/components/snackbar/features.d.ts +3 -3
- package/dist/components/snackbar/position.d.ts +1 -1
- package/dist/components/snackbar/types.d.ts +5 -6
- package/dist/components/split-button/api.js +1 -3
- package/dist/components/split-button/config.d.ts +2 -2
- package/dist/components/split-button/features/buttons.d.ts +3 -2
- package/dist/components/split-button/features/menu.d.ts +3 -2
- package/dist/components/split-button/types.d.ts +13 -2
- package/dist/components/switch/config.d.ts +2 -2
- package/dist/components/switch/types.d.ts +0 -1
- package/dist/components/tabs/api.d.ts +8 -5
- package/dist/components/tabs/config.d.ts +9 -1
- package/dist/components/tabs/features.d.ts +7 -11
- package/dist/components/tabs/features.js +2 -1
- package/dist/components/tabs/indicator.js +4 -2
- package/dist/components/tabs/responsive.js +2 -1
- package/dist/components/tabs/tab-api.d.ts +11 -5
- package/dist/components/tabs/tab-api.js +1 -1
- package/dist/components/tabs/tab.js +9 -1
- package/dist/components/tabs/types.d.ts +9 -2
- package/dist/components/tabs/utils.d.ts +14 -3
- package/dist/components/textfield/api.d.ts +1 -1
- package/dist/components/textfield/config.d.ts +2 -2
- package/dist/components/textfield/features/error.d.ts +1 -2
- package/dist/components/textfield/features/leading-icon.d.ts +1 -2
- package/dist/components/textfield/features/prefix-text.d.ts +1 -2
- package/dist/components/textfield/features/suffix-text.d.ts +1 -2
- package/dist/components/textfield/features/supporting-text.d.ts +1 -2
- package/dist/components/textfield/features/trailing-icon.d.ts +1 -2
- package/dist/components/textfield/types.d.ts +0 -2
- package/dist/components/timepicker/api.d.ts +5 -4
- package/dist/components/timepicker/config.d.ts +14 -11
- package/dist/components/tooltip/config.d.ts +2 -2
- package/dist/components/tooltip/tooltip.d.ts +1 -1
- package/dist/core/compose/base.d.ts +2 -2
- package/dist/core/compose/base.js +1 -1
- package/dist/core/compose/component.d.ts +13 -4
- package/dist/core/compose/component.js +1 -1
- package/dist/core/compose/features/badge.d.ts +3 -4
- package/dist/core/compose/features/badge.js +1 -1
- package/dist/core/compose/features/checkable.d.ts +3 -4
- package/dist/core/compose/features/debounce.d.ts +2 -3
- package/dist/core/compose/features/disabled.d.ts +1 -2
- package/dist/core/compose/features/events.d.ts +4 -3
- package/dist/core/compose/features/icon.d.ts +1 -5
- package/dist/core/compose/features/input.d.ts +2 -3
- package/dist/core/compose/features/lifecycle.d.ts +2 -2
- package/dist/core/compose/features/lifecycle.js +3 -3
- package/dist/core/compose/features/position.d.ts +1 -2
- package/dist/core/compose/features/ripple.d.ts +1 -2
- package/dist/core/compose/features/size.d.ts +1 -2
- package/dist/core/compose/features/style.d.ts +1 -2
- package/dist/core/compose/features/text.d.ts +1 -5
- package/dist/core/compose/features/textinput.d.ts +2 -3
- package/dist/core/compose/features/textlabel.d.ts +1 -2
- package/dist/core/compose/features/throttle.d.ts +1 -2
- package/dist/core/compose/features/track.d.ts +0 -1
- package/dist/core/compose/features/variant.d.ts +1 -2
- package/dist/core/compose/index.d.ts +1 -1
- package/dist/core/compose/pipe.d.ts +43 -3
- package/dist/core/compose/pipe.js +6 -2
- package/dist/core/compose/utils/type-guards.d.ts +4 -4
- package/dist/core/compose/utils/type-guards.js +1 -1
- package/dist/core/config/component.d.ts +12 -9
- package/dist/core/config/global.d.ts +12 -8
- package/dist/core/config.d.ts +1 -1
- package/dist/core/dom/attributes.d.ts +6 -6
- package/dist/core/dom/attributes.js +8 -5
- package/dist/core/dom/create.d.ts +27 -10
- package/dist/core/dom/create.js +5 -26
- package/dist/core/dom/utils.d.ts +1 -1
- package/dist/core/dom/utils.js +4 -1
- package/dist/core/state/emitter.d.ts +2 -2
- package/dist/core/state/events.d.ts +3 -3
- package/dist/core/state/lifecycle.d.ts +0 -1
- package/dist/core/state/store.d.ts +3 -3
- package/dist/core/utils/index.d.ts +1 -0
- package/dist/core/utils/index.js +1 -0
- package/dist/core/utils/object.d.ts +2 -2
- package/dist/core/utils/performance.d.ts +3 -3
- package/dist/core/utils/url.d.ts +20 -0
- package/dist/core/utils/url.js +0 -0
- package/dist/core/utils/validate.d.ts +6 -6
- package/dist/core/utils/validate.js +13 -12
- package/dist/index.cjs +0 -0
- package/dist/package.json +1 -1
- package/dist/styles/badge.css +2 -2
- package/dist/styles/base.css +2 -2
- package/dist/styles/bottom-app-bar.css +2 -2
- package/dist/styles/bottom-sheet.css +2 -2
- package/dist/styles/button-group.css +2 -2
- package/dist/styles/button.css +2 -2
- package/dist/styles/card.css +2 -2
- package/dist/styles/carousel.css +2 -2
- package/dist/styles/checkbox.css +2 -2
- package/dist/styles/chips.css +2 -2
- package/dist/styles/dialog.css +2 -2
- package/dist/styles/divider.css +2 -2
- package/dist/styles/drawer.css +2 -2
- package/dist/styles/extended-fab.css +2 -2
- package/dist/styles/fab.css +2 -2
- package/dist/styles/icon-button.css +2 -2
- package/dist/styles/list.css +2 -2
- package/dist/styles/loading-indicator.css +2 -2
- package/dist/styles/menu.css +2 -2
- package/dist/styles/navigation-rail.css +2 -2
- package/dist/styles/navigation.css +2 -2
- package/dist/styles/progress.css +2 -2
- package/dist/styles/radios.css +2 -2
- package/dist/styles/search.css +2 -2
- package/dist/styles/segmented-button.css +2 -2
- package/dist/styles/select.css +2 -2
- package/dist/styles/side-sheet.css +2 -2
- package/dist/styles/slider.css +2 -2
- package/dist/styles/snackbar.css +2 -2
- package/dist/styles/split-button.css +2 -2
- package/dist/styles/switch.css +2 -2
- package/dist/styles/tabs.css +2 -2
- package/dist/styles/textfield.css +2 -2
- package/dist/styles/timepicker.css +2 -2
- package/dist/styles/tooltip.css +2 -0
- package/dist/styles/tooltip.d.ts +1 -0
- package/dist/styles/tooltip.js +2 -0
- package/dist/styles/top-app-bar.css +2 -2
- package/dist/styles/utilities.css +2 -2
- package/dist/styles.css +2 -2
- package/dist/themes/autumn.css +1 -1
- package/dist/themes/baseline.css +1 -1
- package/dist/themes/brownbeige.css +1 -1
- package/dist/themes/browngreen.css +1 -1
- package/dist/themes/desert.css +1 -1
- package/dist/themes/forest.css +1 -1
- package/dist/themes/highcontrast.css +1 -1
- package/dist/themes/legacy.css +1 -1
- package/dist/themes/material.css +1 -1
- package/dist/themes/ocean.css +1 -1
- package/dist/themes/sageivory.css +1 -1
- package/dist/themes/spring.css +1 -1
- package/dist/themes/summer.css +1 -1
- package/dist/themes/sunset.css +1 -1
- package/dist/themes/tealcaramel.css +1 -1
- package/dist/themes/winter.css +1 -1
- package/package.json +2 -2
- package/src/styles/abstract/_mixins.scss +5 -1
- package/src/styles/components/_checkbox.scss +27 -7
- package/src/styles/components/_chips.scss +13 -13
- package/src/styles/components/_datepicker.scss +5 -5
- package/src/styles/components/_dialog.scss +2 -2
- package/src/styles/components/_radios.scss +30 -30
- package/src/styles/components/_switch.scss +36 -26
- package/src/styles/components/_tabs.scss +59 -58
- package/src/styles/components/_timepicker.scss +3 -3
- 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?:
|
|
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
|
|
81
|
+
onCreate?(element: HTMLElement, context?: ElementContext): void;
|
|
63
82
|
/** Component context */
|
|
64
|
-
context?:
|
|
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
|
|
90
|
+
onCreate?(element: SVGElement, context?: ElementContext): void;
|
|
74
91
|
}
|
|
75
92
|
/**
|
|
76
93
|
* Event handler storage
|
package/dist/core/dom/create.js
CHANGED
|
@@ -1,29 +1,7 @@
|
|
|
1
1
|
import { setAttributes } from "./attributes.js";
|
|
2
2
|
import { addClass } from "./classes.js";
|
|
3
|
-
|
|
4
|
-
|
|
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
|
-
|
|
165
|
+
const text = String(value);
|
|
166
|
+
element.setAttribute(key, URL_ATTRIBUTES.has(key.toLowerCase()) ? safeUrl(text) : text);
|
|
188
167
|
}
|
|
189
168
|
}
|
|
190
169
|
}
|
package/dist/core/dom/utils.d.ts
CHANGED
|
@@ -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,
|
|
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
|
*
|
package/dist/core/dom/utils.js
CHANGED
|
@@ -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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
27
|
+
getHandlers: () => Map<(...args: never[]) => void, string>;
|
|
28
28
|
}
|
|
29
29
|
/**
|
|
30
30
|
* Creates an event manager for a component
|
|
@@ -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
|
|
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
|
|
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:
|
|
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
|
package/dist/core/utils/index.js
CHANGED
|
@@ -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,
|
|
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
|
|
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:
|
|
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:
|
|
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:
|
|
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?:
|
|
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?:
|
|
40
|
+
default?: unknown;
|
|
41
41
|
/**
|
|
42
42
|
* Custom validator function
|
|
43
43
|
*/
|
|
44
|
-
validator
|
|
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:
|
|
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:
|
|
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
|
|
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 &&
|
|
5
|
+
if (rule.required && values[key] === undefined) {
|
|
5
6
|
errors.push(`Missing required field: ${key}`);
|
|
6
7
|
}
|
|
7
|
-
if (
|
|
8
|
+
if (values[key] !== undefined) {
|
|
8
9
|
if (rule.type) {
|
|
9
|
-
const actualType = typeof
|
|
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
|
|
15
|
-
if (rule.minimum !== undefined &&
|
|
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 &&
|
|
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
|
|
23
|
-
if (rule.minLength !== undefined &&
|
|
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 &&
|
|
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(
|
|
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(
|
|
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(
|
|
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
package/dist/styles/badge.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! mtrl v0.
|
|
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}}
|
package/dist/styles/base.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/*! mtrl v0.
|
|
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.
|
|
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.
|
|
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}}}
|