material 3.2.6 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/badge/badge.d.ts +0 -59
- package/dist/components/badge/constants.d.ts +0 -15
- package/dist/components/badge/index.d.ts +0 -6
- package/dist/components/badge/types.d.ts +0 -244
- package/dist/components/bottom-app-bar/bottom-app-bar.d.ts +0 -10
- package/dist/components/bottom-app-bar/constants.d.ts +0 -9
- package/dist/components/bottom-app-bar/index.d.ts +0 -4
- package/dist/components/bottom-app-bar/types.d.ts +0 -76
- package/dist/components/bottom-sheet/bottom-sheet.d.ts +0 -21
- package/dist/components/bottom-sheet/constants.d.ts +0 -29
- package/dist/components/bottom-sheet/types.d.ts +0 -89
- package/dist/components/button/button.d.ts +0 -62
- package/dist/components/button/constants.d.ts +0 -41
- package/dist/components/button/index.d.ts +0 -4
- package/dist/components/button/types.d.ts +0 -347
- package/dist/components/button-group/button-group.d.ts +0 -51
- package/dist/components/button-group/constants.d.ts +0 -83
- package/dist/components/button-group/index.d.ts +0 -10
- package/dist/components/button-group/types.d.ts +0 -234
- package/dist/components/card/card.d.ts +0 -64
- package/dist/components/card/constants.d.ts +0 -33
- package/dist/components/card/content.d.ts +0 -86
- package/dist/components/card/index.d.ts +0 -66
- package/dist/components/card/types.d.ts +0 -366
- package/dist/components/carousel/carousel.d.ts +0 -22
- package/dist/components/carousel/constants.d.ts +0 -16
- package/dist/components/carousel/types.d.ts +0 -29
- package/dist/components/checkbox/checkbox.d.ts +0 -61
- package/dist/components/checkbox/constants.d.ts +0 -33
- package/dist/components/checkbox/index.d.ts +0 -25
- package/dist/components/checkbox/types.d.ts +0 -206
- package/dist/components/chips/chips.d.ts +0 -14
- package/dist/components/chips/constants.d.ts +0 -1
- package/dist/components/chips/factories.d.ts +0 -4
- package/dist/components/chips/types.d.ts +0 -278
- package/dist/components/datepicker/constants.d.ts +0 -56
- package/dist/components/datepicker/datepicker.d.ts +0 -5
- package/dist/components/datepicker/types.d.ts +12 -257
- package/dist/components/dialog/constants.d.ts +0 -65
- package/dist/components/dialog/dialog.d.ts +0 -86
- package/dist/components/dialog/index.d.ts +0 -12
- package/dist/components/dialog/types.d.ts +0 -511
- package/dist/components/divider/config.d.ts +0 -130
- package/dist/components/divider/constants.d.ts +0 -27
- package/dist/components/divider/divider.d.ts +0 -36
- package/dist/components/divider/index.d.ts +0 -29
- package/dist/components/divider/types.d.ts +0 -126
- package/dist/components/drawer/constants.d.ts +0 -53
- package/dist/components/drawer/drawer.d.ts +0 -56
- package/dist/components/drawer/index.d.ts +0 -4
- package/dist/components/drawer/types.d.ts +0 -200
- package/dist/components/extended-fab/config.js +3 -2
- package/dist/components/extended-fab/constants.d.ts +0 -46
- package/dist/components/extended-fab/extended-fab.d.ts +0 -58
- package/dist/components/extended-fab/index.d.ts +1 -35
- package/dist/components/extended-fab/types.d.ts +2 -654
- package/dist/components/fab/config.js +3 -2
- package/dist/components/fab/constants.d.ts +0 -40
- package/dist/components/fab/fab.d.ts +0 -42
- package/dist/components/fab/index.d.ts +1 -34
- package/dist/components/fab/types.d.ts +2 -543
- package/dist/components/fab-menu/constants.d.ts +0 -22
- package/dist/components/fab-menu/fab-menu.d.ts +0 -36
- package/dist/components/fab-menu/types.d.ts +0 -80
- package/dist/components/icon-button/constants.d.ts +0 -90
- package/dist/components/icon-button/icon-button.d.ts +0 -83
- package/dist/components/icon-button/index.d.ts +0 -44
- package/dist/components/icon-button/types.d.ts +0 -314
- package/dist/components/index.d.ts +0 -9
- package/dist/components/list/constants.d.ts +0 -47
- package/dist/components/list/index.d.ts +0 -1
- package/dist/components/list/list.d.ts +0 -26
- package/dist/components/list/types.d.ts +0 -263
- package/dist/components/loading-indicator/constants.d.ts +0 -35
- package/dist/components/loading-indicator/features/renderer.d.ts +0 -14
- package/dist/components/loading-indicator/loading-indicator.d.ts +0 -6
- package/dist/components/loading-indicator/types.d.ts +0 -35
- package/dist/components/menu/constants.d.ts +0 -79
- package/dist/components/menu/index.d.ts +0 -25
- package/dist/components/menu/inner.d.ts +0 -3
- package/dist/components/menu/menu.d.ts +0 -26
- package/dist/components/menu/types.d.ts +0 -423
- package/dist/components/navigation-bar/navigation-bar.d.ts +0 -7
- package/dist/components/navigation-bar/types.d.ts +0 -25
- package/dist/components/navigation-rail/constants.d.ts +0 -2
- package/dist/components/navigation-rail/navigation-rail.d.ts +0 -5
- package/dist/components/navigation-rail/types.d.ts +0 -22
- package/dist/components/progress/constants.d.ts +24 -56
- package/dist/components/progress/progress.d.ts +0 -21
- package/dist/components/progress/types.d.ts +0 -251
- package/dist/components/radios/constants.d.ts +0 -22
- package/dist/components/radios/radios.d.ts +0 -5
- package/dist/components/radios/types.d.ts +0 -142
- package/dist/components/search/constants.d.ts +0 -59
- package/dist/components/search/search.d.ts +0 -32
- package/dist/components/search/types.d.ts +0 -159
- package/dist/components/select/constants.d.ts +0 -60
- package/dist/components/select/index.d.ts +0 -22
- package/dist/components/select/select.d.ts +0 -33
- package/dist/components/select/types.d.ts +0 -241
- package/dist/components/side-sheet/constants.d.ts +0 -28
- package/dist/components/side-sheet/side-sheet.d.ts +0 -21
- package/dist/components/side-sheet/types.d.ts +0 -82
- package/dist/components/slider/constants.d.ts +0 -86
- package/dist/components/slider/slider.d.ts +0 -16
- package/dist/components/slider/types.d.ts +0 -184
- package/dist/components/snackbar/constants.d.ts +0 -73
- package/dist/components/snackbar/snackbar.d.ts +0 -13
- package/dist/components/snackbar/types.d.ts +0 -147
- package/dist/components/split-button/constants.d.ts +0 -33
- package/dist/components/split-button/split-button.d.ts +0 -21
- package/dist/components/split-button/types.d.ts +0 -81
- package/dist/components/switch/constants.d.ts +0 -49
- package/dist/components/switch/switch.d.ts +0 -5
- package/dist/components/switch/types.d.ts +0 -80
- package/dist/components/tabs/constants.d.ts +0 -76
- package/dist/components/tabs/indicator.d.ts +0 -27
- package/dist/components/tabs/responsive.d.ts +0 -30
- package/dist/components/tabs/tab.d.ts +0 -13
- package/dist/components/tabs/tabs.d.ts +0 -24
- package/dist/components/tabs/types.d.ts +0 -335
- package/dist/components/tabs/utils.d.ts +0 -66
- package/dist/components/text-field/constants.d.ts +0 -82
- package/dist/components/text-field/features/trailing-icon.d.ts +0 -61
- package/dist/components/text-field/text-field.d.ts +0 -33
- package/dist/components/text-field/types.d.ts +0 -123
- package/dist/components/timepicker/constants.d.ts +0 -88
- package/dist/components/timepicker/types.d.ts +0 -268
- package/dist/components/toolbar/constants.d.ts +0 -27
- package/dist/components/toolbar/toolbar.d.ts +0 -25
- package/dist/components/toolbar/types.d.ts +0 -102
- package/dist/components/tooltip/constants.d.ts +0 -58
- package/dist/components/tooltip/tooltip.d.ts +0 -5
- package/dist/components/tooltip/types.d.ts +0 -140
- package/dist/components/top-app-bar/constants.d.ts +0 -41
- package/dist/components/top-app-bar/index.d.ts +0 -4
- package/dist/components/top-app-bar/top-app-bar.d.ts +0 -10
- package/dist/components/top-app-bar/types.d.ts +0 -94
- package/dist/core/canvas/animation.d.ts +0 -13
- package/dist/core/canvas/drawing.d.ts +18 -55
- package/dist/core/canvas/index.d.ts +0 -4
- package/dist/core/canvas/resize.d.ts +0 -13
- package/dist/core/canvas/utils.d.ts +0 -62
- package/dist/core/compose/base.d.ts +0 -22
- package/dist/core/compose/cleanup.d.ts +0 -2
- package/dist/core/compose/component.d.ts +0 -31
- package/dist/core/compose/features/badge.d.ts +0 -25
- package/dist/core/compose/features/checkable.d.ts +0 -36
- package/dist/core/compose/features/debounce.d.ts +0 -57
- package/dist/core/compose/features/disabled.d.ts +0 -31
- package/dist/core/compose/features/events.d.ts +0 -38
- package/dist/core/compose/features/icon.d.ts +0 -49
- package/dist/core/compose/features/input.d.ts +0 -82
- package/dist/core/compose/features/lifecycle.d.ts +0 -36
- package/dist/core/compose/features/position.d.ts +0 -27
- package/dist/core/compose/features/ripple.d.ts +0 -29
- package/dist/core/compose/features/size.d.ts +0 -9
- package/dist/core/compose/features/style.d.ts +0 -9
- package/dist/core/compose/features/text.d.ts +0 -45
- package/dist/core/compose/features/textinput.d.ts +0 -88
- package/dist/core/compose/features/textlabel.d.ts +0 -44
- package/dist/core/compose/features/throttle.d.ts +0 -54
- package/dist/core/compose/features/track.d.ts +0 -34
- package/dist/core/compose/features/variant.d.ts +0 -9
- package/dist/core/compose/features/withEvents.d.ts +0 -30
- package/dist/core/compose/index.d.ts +0 -4
- package/dist/core/compose/pipe.d.ts +0 -55
- package/dist/core/compose/utils/type-guards.d.ts +0 -15
- package/dist/core/config/component.d.ts +0 -45
- package/dist/core/config/global.d.ts +0 -43
- package/dist/core/config.d.ts +0 -59
- package/dist/core/dom/attributes.d.ts +0 -41
- package/dist/core/dom/classes.d.ts +0 -49
- package/dist/core/dom/create.d.ts +0 -98
- package/dist/core/dom/events.d.ts +0 -52
- package/dist/core/dom/focus.d.ts +0 -32
- package/dist/core/dom/html.d.ts +0 -24
- package/dist/core/dom/layer.d.ts +0 -98
- package/dist/core/dom/roving.d.ts +0 -19
- package/dist/core/index.d.ts +0 -9
- package/dist/core/navigation/destinations.d.ts +0 -23
- package/dist/core/shapes/cubic.d.ts +24 -19
- package/dist/core/shapes/material.d.ts +0 -64
- package/dist/core/shapes/polygon.d.ts +6 -16
- package/dist/core/state/emitter.d.ts +0 -36
- package/dist/core/state/events.d.ts +0 -29
- package/dist/core/state/store.d.ts +0 -70
- package/dist/core/theme/index.d.ts +0 -3
- package/dist/core/theme/shape.d.ts +0 -7
- package/dist/core/theme/tokens.d.ts +48 -32
- package/dist/core/utils/background.d.ts +0 -29
- package/dist/core/utils/color.d.ts +0 -13
- package/dist/core/utils/index.d.ts +0 -11
- package/dist/core/utils/mobile.d.ts +0 -31
- package/dist/core/utils/object.d.ts +0 -11
- package/dist/core/utils/performance.d.ts +0 -70
- package/dist/core/utils/theme.d.ts +0 -36
- package/dist/core/utils/url.d.ts +0 -17
- package/dist/elements/adapter.d.ts +13 -62
- package/dist/elements/badge.d.ts +0 -17
- package/dist/elements/bottom-app-bar.d.ts +7 -17
- package/dist/elements/bottom-sheet.d.ts +9 -38
- package/dist/elements/button-group.d.ts +0 -31
- package/dist/elements/button.d.ts +24 -18
- package/dist/elements/button.js +12 -0
- package/dist/elements/card.d.ts +12 -24
- package/dist/elements/card.js +3 -2
- package/dist/elements/carousel.d.ts +5 -29
- package/dist/elements/checkbox.d.ts +5 -15
- package/dist/elements/chips.d.ts +0 -33
- package/dist/elements/css/extended-fab.css +1 -1
- package/dist/elements/css/extended-fab.js +1 -1
- package/dist/elements/css/fab-menu.css +1 -1
- package/dist/elements/css/fab-menu.js +1 -1
- package/dist/elements/css/fab.css +1 -1
- package/dist/elements/css/fab.js +1 -1
- package/dist/elements/css/hosts/extended-fab.css +1 -1
- package/dist/elements/css/hosts/fab.css +1 -1
- package/dist/elements/datepicker.d.ts +4 -48
- package/dist/elements/define.d.ts +3 -161
- package/dist/elements/dialog.d.ts +8 -39
- package/dist/elements/divider.d.ts +0 -14
- package/dist/elements/drawer.d.ts +0 -35
- package/dist/elements/extended-fab.d.ts +10 -18
- package/dist/elements/extended-fab.js +3 -1
- package/dist/elements/fab-menu.d.ts +5 -30
- package/dist/elements/fab.d.ts +8 -17
- package/dist/elements/fab.js +3 -1
- package/dist/elements/floating-placement.js +1 -0
- package/dist/elements/icon-button.d.ts +5 -26
- package/dist/elements/index.d.ts +0 -16
- package/dist/elements/list.d.ts +0 -34
- package/dist/elements/loading-indicator.d.ts +4 -13
- package/dist/elements/menu.d.ts +5 -51
- package/dist/elements/navigation-bar.d.ts +4 -29
- package/dist/elements/navigation-rail.d.ts +8 -49
- package/dist/elements/preupgrade/badge.css +1 -1
- package/dist/elements/preupgrade/bottom-app-bar.css +1 -1
- package/dist/elements/preupgrade/bottom-sheet.css +1 -1
- package/dist/elements/preupgrade/button-group.css +1 -1
- package/dist/elements/preupgrade/button.css +2 -2
- package/dist/elements/preupgrade/card.css +2 -2
- package/dist/elements/preupgrade/carousel.css +1 -1
- package/dist/elements/preupgrade/checkbox.css +1 -1
- package/dist/elements/preupgrade/chips.css +1 -1
- package/dist/elements/preupgrade/datepicker.css +1 -1
- package/dist/elements/preupgrade/dialog.css +1 -1
- package/dist/elements/preupgrade/divider.css +1 -1
- package/dist/elements/preupgrade/drawer.css +1 -1
- package/dist/elements/preupgrade/extended-fab.css +2 -2
- package/dist/elements/preupgrade/fab-menu.css +1 -1
- package/dist/elements/preupgrade/fab.css +2 -2
- package/dist/elements/preupgrade/icon-button.css +1 -1
- package/dist/elements/preupgrade/list.css +1 -1
- package/dist/elements/preupgrade/loading-indicator.css +1 -1
- package/dist/elements/preupgrade/menu.css +1 -1
- package/dist/elements/preupgrade/navigation-bar.css +1 -1
- package/dist/elements/preupgrade/navigation-rail.css +1 -1
- package/dist/elements/preupgrade/progress.css +1 -1
- package/dist/elements/preupgrade/radios.css +1 -1
- package/dist/elements/preupgrade/search.css +1 -1
- package/dist/elements/preupgrade/select.css +1 -1
- package/dist/elements/preupgrade/side-sheet.css +1 -1
- package/dist/elements/preupgrade/slider.css +1 -1
- package/dist/elements/preupgrade/snackbar.css +1 -1
- package/dist/elements/preupgrade/split-button.css +1 -1
- package/dist/elements/preupgrade/switch.css +1 -1
- package/dist/elements/preupgrade/tabs.css +1 -1
- package/dist/elements/preupgrade/text-field.css +1 -1
- package/dist/elements/preupgrade/timepicker.css +1 -1
- package/dist/elements/preupgrade/toolbar.css +1 -1
- package/dist/elements/preupgrade/tooltip.css +1 -1
- package/dist/elements/preupgrade/top-app-bar.css +1 -1
- package/dist/elements/preupgrade.css +2 -2
- package/dist/elements/preupgrade.d.ts +0 -1
- package/dist/elements/preupgrade.js +1 -1
- package/dist/elements/progress.d.ts +0 -15
- package/dist/elements/radios.d.ts +0 -22
- package/dist/elements/search.d.ts +5 -53
- package/dist/elements/select.d.ts +0 -31
- package/dist/elements/side-sheet.d.ts +7 -29
- package/dist/elements/slider.d.ts +3 -22
- package/dist/elements/snackbar.d.ts +4 -28
- package/dist/elements/split-button.d.ts +0 -30
- package/dist/elements/styles.d.ts +0 -63
- package/dist/elements/switch.d.ts +5 -17
- package/dist/elements/tabs.d.ts +0 -22
- package/dist/elements/text-field.d.ts +4 -38
- package/dist/elements/timepicker.d.ts +4 -44
- package/dist/elements/toolbar.d.ts +8 -25
- package/dist/elements/tooltip.d.ts +4 -30
- package/dist/elements/top-app-bar.d.ts +7 -23
- package/dist/index.d.ts +0 -11
- package/dist/package.json +1 -1
- package/dist/react/create.d.ts +0 -42
- package/dist/react/index.d.ts +0 -6
- package/dist/react/jsx.d.ts +0 -13
- package/dist/solid/create.d.ts +0 -48
- package/dist/solid/index.d.ts +0 -6
- package/dist/solid/jsx.d.ts +1 -10
- package/dist/ssr/index.d.ts +0 -49
- package/dist/ssr/solid.d.ts +0 -4
- package/dist/ssr/svelte.d.ts +0 -4
- package/dist/ssr/vue.d.ts +0 -4
- package/dist/styles/badge.css +1 -1
- package/dist/styles/base.css +1 -1
- package/dist/styles/bottom-app-bar.css +1 -1
- package/dist/styles/bottom-sheet.css +1 -1
- package/dist/styles/button-group.css +1 -1
- package/dist/styles/button.css +1 -1
- package/dist/styles/card.css +1 -1
- package/dist/styles/carousel.css +1 -1
- package/dist/styles/checkbox.css +1 -1
- package/dist/styles/chips.css +1 -1
- package/dist/styles/contrast.css +1 -1
- package/dist/styles/datepicker.css +1 -1
- package/dist/styles/dialog.css +1 -1
- package/dist/styles/divider.css +1 -1
- package/dist/styles/drawer.css +1 -1
- package/dist/styles/extended-fab.css +2 -2
- package/dist/styles/fab-menu.css +2 -2
- package/dist/styles/fab.css +2 -2
- package/dist/styles/icon-button.css +1 -1
- package/dist/styles/list.css +1 -1
- package/dist/styles/loading-indicator.css +1 -1
- package/dist/styles/menu.css +1 -1
- package/dist/styles/navigation-bar.css +1 -1
- package/dist/styles/navigation-rail.css +1 -1
- package/dist/styles/progress.css +1 -1
- package/dist/styles/radios.css +1 -1
- package/dist/styles/search.css +1 -1
- package/dist/styles/select.css +1 -1
- package/dist/styles/side-sheet.css +1 -1
- package/dist/styles/slider.css +1 -1
- package/dist/styles/snackbar.css +1 -1
- package/dist/styles/split-button.css +1 -1
- package/dist/styles/switch.css +1 -1
- package/dist/styles/tabs.css +1 -1
- package/dist/styles/text-field.css +1 -1
- package/dist/styles/timepicker.css +1 -1
- package/dist/styles/toolbar.css +1 -1
- package/dist/styles/tooltip.css +1 -1
- package/dist/styles/top-app-bar.css +1 -1
- package/dist/styles/typography.css +1 -1
- package/dist/styles/utilities.css +1 -1
- package/dist/styles.css +2 -2
- package/dist/svelte/Button.svelte +5 -4
- package/dist/svelte/runtime.d.ts +8 -62
- package/dist/themes/autumn-contrast.css +1 -1
- package/dist/themes/autumn.css +1 -1
- package/dist/themes/baseline-contrast.css +1 -1
- package/dist/themes/baseline.css +1 -1
- package/dist/themes/brownbeige-contrast.css +1 -1
- package/dist/themes/brownbeige.css +1 -1
- package/dist/themes/content-contrast.css +1 -1
- package/dist/themes/content.css +1 -1
- package/dist/themes/desert-contrast.css +1 -1
- package/dist/themes/desert.css +1 -1
- package/dist/themes/expressive-contrast.css +1 -1
- package/dist/themes/expressive.css +1 -1
- package/dist/themes/fidelity-contrast.css +1 -1
- package/dist/themes/fidelity.css +1 -1
- package/dist/themes/forest-contrast.css +1 -1
- package/dist/themes/forest.css +1 -1
- package/dist/themes/fruit-salad-contrast.css +1 -1
- package/dist/themes/fruit-salad.css +1 -1
- package/dist/themes/highcontrast-contrast.css +1 -1
- package/dist/themes/highcontrast.css +1 -1
- package/dist/themes/monochrome-contrast.css +1 -1
- package/dist/themes/monochrome.css +1 -1
- package/dist/themes/neutral-contrast.css +1 -1
- package/dist/themes/neutral.css +1 -1
- package/dist/themes/ocean-contrast.css +1 -1
- package/dist/themes/ocean.css +1 -1
- package/dist/themes/rainbow-contrast.css +1 -1
- package/dist/themes/rainbow.css +1 -1
- package/dist/themes/sageivory-contrast.css +1 -1
- package/dist/themes/sageivory.css +1 -1
- package/dist/themes/spring-contrast.css +1 -1
- package/dist/themes/spring.css +1 -1
- package/dist/themes/summer-contrast.css +1 -1
- package/dist/themes/summer.css +1 -1
- package/dist/themes/sunset-contrast.css +1 -1
- package/dist/themes/sunset.css +1 -1
- package/dist/themes/tealcaramel-contrast.css +1 -1
- package/dist/themes/tealcaramel.css +1 -1
- package/dist/themes/vibrant-contrast.css +1 -1
- package/dist/themes/vibrant.css +1 -1
- package/dist/vue/create.d.ts +15 -58
- package/dist/vue/index.d.ts +0 -6
- package/package.json +1 -1
- package/src/styles/abstract/_floating-placement.scss +12 -0
- package/src/styles/components/_extended-fab.scss +34 -8
- package/src/styles/components/_fab-menu.scss +58 -8
- package/src/styles/components/_fab.scss +34 -8
- package/src/styles/elements/_button.scss +27 -5
- package/src/styles/elements/_card.scss +14 -0
- package/src/styles/elements/_extended-fab.scss +2 -0
- package/src/styles/elements/_fab.scss +2 -0
- package/dist/components/badge/api.d.ts +0 -41
- package/dist/components/badge/config.d.ts +0 -631
- package/dist/components/badge/features.d.ts +0 -38
- package/dist/components/bottom-app-bar/config.d.ts +0 -16
- package/dist/components/bottom-sheet/api.d.ts +0 -44
- package/dist/components/bottom-sheet/config.d.ts +0 -547
- package/dist/components/bottom-sheet/features/drag.d.ts +0 -35
- package/dist/components/bottom-sheet/features/index.d.ts +0 -3
- package/dist/components/bottom-sheet/features/state.d.ts +0 -31
- package/dist/components/bottom-sheet/features/structure.d.ts +0 -26
- package/dist/components/button/api.d.ts +0 -68
- package/dist/components/button/config.d.ts +0 -594
- package/dist/components/button/features/progress.d.ts +0 -43
- package/dist/components/button/features/toggle.d.ts +0 -43
- package/dist/components/button-group/config.d.ts +0 -147
- package/dist/components/card/api.d.ts +0 -24
- package/dist/components/card/config.d.ts +0 -635
- package/dist/components/card/features.d.ts +0 -124
- package/dist/components/carousel/api.d.ts +0 -20
- package/dist/components/carousel/arrangement.d.ts +0 -23
- package/dist/components/carousel/config.d.ts +0 -540
- package/dist/components/carousel/features/index.d.ts +0 -2
- package/dist/components/carousel/features/scroll.d.ts +0 -20
- package/dist/components/carousel/features/slides.d.ts +0 -18
- package/dist/components/carousel/keylines.d.ts +0 -68
- package/dist/components/carousel/strategy.d.ts +0 -36
- package/dist/components/checkbox/api.d.ts +0 -7
- package/dist/components/checkbox/config.d.ts +0 -568
- package/dist/components/chips/api.d.ts +0 -62
- package/dist/components/chips/chip/chip.d.ts +0 -4
- package/dist/components/chips/chip/constants.d.ts +0 -38
- package/dist/components/chips/chip/index.d.ts +0 -1
- package/dist/components/chips/config.d.ts +0 -583
- package/dist/components/chips/features/chip-items.d.ts +0 -39
- package/dist/components/chips/features/container.d.ts +0 -75
- package/dist/components/chips/features/controller.d.ts +0 -61
- package/dist/components/chips/features/dom.d.ts +0 -24
- package/dist/components/chips/features/index.d.ts +0 -4
- package/dist/components/chips/schema.d.ts +0 -35
- package/dist/components/datepicker/api.d.ts +0 -7
- package/dist/components/datepicker/config.d.ts +0 -542
- package/dist/components/datepicker/render.d.ts +0 -3
- package/dist/components/datepicker/utils.d.ts +0 -84
- package/dist/components/dialog/api.d.ts +0 -66
- package/dist/components/dialog/config.d.ts +0 -583
- package/dist/components/dialog/features.d.ts +0 -42
- package/dist/components/divider/features.d.ts +0 -6
- package/dist/components/drawer/api.d.ts +0 -55
- package/dist/components/drawer/config.d.ts +0 -620
- package/dist/components/drawer/features/headline.d.ts +0 -27
- package/dist/components/drawer/features/index.d.ts +0 -3
- package/dist/components/drawer/features/items.d.ts +0 -32
- package/dist/components/drawer/features/state.d.ts +0 -22
- package/dist/components/extended-fab/api.d.ts +0 -96
- package/dist/components/extended-fab/config.d.ts +0 -600
- package/dist/components/fab/api.d.ts +0 -74
- package/dist/components/fab/config.d.ts +0 -596
- package/dist/components/fab-menu/config.d.ts +0 -11
- package/dist/components/fab-menu/stagger.d.ts +0 -10
- package/dist/components/icon-button/api.d.ts +0 -84
- package/dist/components/icon-button/config.d.ts +0 -624
- package/dist/components/icon-button/features/toggle.d.ts +0 -133
- package/dist/components/list/api.d.ts +0 -156
- package/dist/components/list/config.d.ts +0 -625
- package/dist/components/list/features/anatomy.d.ts +0 -6
- package/dist/components/list/features/index.d.ts +0 -2
- package/dist/components/list/features/renderer.d.ts +0 -8
- package/dist/components/list/features/selection.d.ts +0 -3
- package/dist/components/loading-indicator/api.d.ts +0 -14
- package/dist/components/loading-indicator/config.d.ts +0 -557
- package/dist/components/loading-indicator/features/motion.d.ts +0 -22
- package/dist/components/menu/api.d.ts +0 -63
- package/dist/components/menu/config.d.ts +0 -576
- package/dist/components/menu/features/controller.d.ts +0 -15
- package/dist/components/menu/features/index.d.ts +0 -5
- package/dist/components/menu/features/keyboard.d.ts +0 -23
- package/dist/components/menu/features/layer.d.ts +0 -15
- package/dist/components/menu/features/loader.d.ts +0 -35
- package/dist/components/menu/features/opener.d.ts +0 -16
- package/dist/components/menu/features/position.d.ts +0 -18
- package/dist/components/menu/features/registry.d.ts +0 -37
- package/dist/components/menu/features/submenu.d.ts +0 -28
- package/dist/components/menu/features/tasks.d.ts +0 -9
- package/dist/components/navigation-bar/config.d.ts +0 -2
- package/dist/components/navigation-rail/config.d.ts +0 -2
- package/dist/components/progress/api.d.ts +0 -81
- package/dist/components/progress/config.d.ts +0 -620
- package/dist/components/progress/features/canvas.d.ts +0 -60
- package/dist/components/progress/features/circular.d.ts +0 -19
- package/dist/components/progress/features/colors.d.ts +0 -17
- package/dist/components/progress/features/index.d.ts +0 -8
- package/dist/components/progress/features/linear.d.ts +0 -25
- package/dist/components/progress/features/motion.d.ts +0 -43
- package/dist/components/progress/features/resize-observer.d.ts +0 -5
- package/dist/components/progress/features/state.d.ts +0 -44
- package/dist/components/radios/api.d.ts +0 -37
- package/dist/components/radios/config.d.ts +0 -568
- package/dist/components/radios/radio.d.ts +0 -26
- package/dist/components/search/api.d.ts +0 -63
- package/dist/components/search/config.d.ts +0 -657
- package/dist/components/search/features/index.d.ts +0 -4
- package/dist/components/search/features/input.d.ts +0 -93
- package/dist/components/search/features/states.d.ts +0 -111
- package/dist/components/search/features/structure.d.ts +0 -16
- package/dist/components/search/features/suggestions.d.ts +0 -60
- package/dist/components/select/api.d.ts +0 -8
- package/dist/components/select/config.d.ts +0 -18
- package/dist/components/select/features.d.ts +0 -14
- package/dist/components/side-sheet/api.d.ts +0 -34
- package/dist/components/side-sheet/config.d.ts +0 -547
- package/dist/components/side-sheet/features/index.d.ts +0 -2
- package/dist/components/side-sheet/features/state.d.ts +0 -28
- package/dist/components/side-sheet/features/structure.d.ts +0 -21
- package/dist/components/slider/api.d.ts +0 -65
- package/dist/components/slider/config.d.ts +0 -605
- package/dist/components/slider/features/axis.d.ts +0 -42
- package/dist/components/slider/features/controller.d.ts +0 -528
- package/dist/components/slider/features/dom.d.ts +0 -22
- package/dist/components/slider/features/handlers.d.ts +0 -16
- package/dist/components/slider/features/index.d.ts +0 -5
- package/dist/components/slider/features/range.d.ts +0 -14
- package/dist/components/slider/features/states.d.ts +0 -76
- package/dist/components/slider/features/tracks.d.ts +0 -50
- package/dist/components/snackbar/api.d.ts +0 -7
- package/dist/components/snackbar/config.d.ts +0 -596
- package/dist/components/snackbar/features.d.ts +0 -26
- package/dist/components/snackbar/layer.d.ts +0 -23
- package/dist/components/snackbar/position.d.ts +0 -16
- package/dist/components/snackbar/queue.d.ts +0 -15
- package/dist/components/split-button/api.d.ts +0 -14
- package/dist/components/split-button/config.d.ts +0 -553
- package/dist/components/split-button/features/buttons.d.ts +0 -8
- package/dist/components/split-button/features/menu.d.ts +0 -10
- package/dist/components/switch/api.d.ts +0 -7
- package/dist/components/switch/config.d.ts +0 -558
- package/dist/components/switch/features.d.ts +0 -63
- package/dist/components/tabs/api.d.ts +0 -54
- package/dist/components/tabs/config.d.ts +0 -31
- package/dist/components/tabs/features.d.ts +0 -131
- package/dist/components/tabs/scroll-indicators.d.ts +0 -18
- package/dist/components/tabs/state.d.ts +0 -48
- package/dist/components/text-field/api.d.ts +0 -29
- package/dist/components/text-field/config.d.ts +0 -560
- package/dist/components/text-field/features/counter.d.ts +0 -29
- package/dist/components/text-field/features/density.d.ts +0 -28
- package/dist/components/text-field/features/error.d.ts +0 -55
- package/dist/components/text-field/features/field.d.ts +0 -37
- package/dist/components/text-field/features/index.d.ts +0 -20
- package/dist/components/text-field/features/leading-icon.d.ts +0 -68
- package/dist/components/text-field/features/placement.d.ts +0 -30
- package/dist/components/text-field/features/prefix-text.d.ts +0 -67
- package/dist/components/text-field/features/required.d.ts +0 -33
- package/dist/components/text-field/features/suffix-text.d.ts +0 -67
- package/dist/components/text-field/features/supporting-text.d.ts +0 -59
- package/dist/components/timepicker/api.d.ts +0 -26
- package/dist/components/timepicker/config.d.ts +0 -570
- package/dist/components/timepicker/dial.d.ts +0 -35
- package/dist/components/timepicker/render.d.ts +0 -9
- package/dist/components/timepicker/utils.d.ts +0 -55
- package/dist/components/toolbar/config.d.ts +0 -19
- package/dist/components/tooltip/api.d.ts +0 -18
- package/dist/components/tooltip/config.d.ts +0 -563
- package/dist/components/top-app-bar/config.d.ts +0 -16
- package/dist/core/compose/features/constants.d.ts +0 -8
- package/dist/core/dom/direction.d.ts +0 -16
- package/dist/core/dom/form-value.d.ts +0 -24
- package/dist/core/dom/utils.d.ts +0 -33
- package/dist/core/navigation/ripple.d.ts +0 -2
- package/dist/core/utils/attributes.d.ts +0 -29
- package/dist/core/utils/validate.d.ts +0 -73
- package/dist/core/utils/warn.d.ts +0 -16
- package/dist/elements/form-button.d.ts +0 -29
- package/dist/elements/lifecycle.d.ts +0 -4
- package/dist/elements/sheet.d.ts +0 -44
- package/dist/react/shadow.d.ts +0 -2
- package/dist/solid/shadow.d.ts +0 -3
- package/dist/vue/shadow.d.ts +0 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DEFAULT_PREFIX, preupgradeSheet } from "./styles.js";
|
|
2
|
-
const css = "m-button:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;box-sizing:border-box;min-width:58px;white-space:nowrap;background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary);height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[icon]::before{width:20px;height:20px}m-button:not(:defined)[size=xs]{height:32px;padding:0 12px;gap:4px;border-radius:16px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=xs][icon]::before{width:20px;height:20px}m-button:not(:defined)[size=s]{height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=s][icon]::before{width:20px;height:20px}m-button:not(:defined)[size=m]{height:56px;padding:0 24px;gap:8px;border-radius:28px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}m-button:not(:defined)[size=m][icon]::before{width:24px;height:24px}m-button:not(:defined)[size=l]{height:96px;padding:0 48px;gap:12px;border-radius:48px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=l][icon]::before{width:32px;height:32px}m-button:not(:defined)[size=xl]{height:136px;padding:0 64px;gap:16px;border-radius:68px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=xl][icon]::before{width:40px;height:40px}m-button:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}m-button:not(:defined)[variant=elevated]{background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=tonal]{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}m-button:not(:defined)[variant=outlined]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant)}m-button:not(:defined)[variant=text]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant)}m-button:not(:defined)[variant=text]{padding:0 12px}m-button:not(:defined)[icon]::before{content:\"\";flex:none}m-button:not(:defined)[icon]:not([size]),m-button:not(:defined)[icon][size=s]{padding-inline-start:12px}m-button:not(:defined)[variant=text][icon]:not([size]),m-button:not(:defined)[variant=text][icon][size=xs],m-button:not(:defined)[variant=text][icon][size=s]{padding-inline:12px 16px}m-button:not(:defined)[variant=text][icon][size=m]{padding:0 24px}m-button:not(:defined)[variant=text][icon][size=l]{padding:0 48px}m-button:not(:defined)[variant=text][icon][size=xl]{padding:0 64px}m-switch:not(:defined){display:inline-grid;grid-template-columns:auto auto;align-content:center;align-items:center;column-gap:12px;box-sizing:border-box;min-height:56px;padding:4px 0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-switch:not(:defined)::after{content:\"\";grid-column:2;grid-row:1;box-sizing:border-box;width:52px;height:32px;border:2px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:radial-gradient(circle at 14px 50%, var(--mtrl-sys-color-outline) 8px, transparent 8.5px) var(--mtrl-sys-color-surface-container-highest)}m-switch:not(:defined)[checked]::after{border-color:var(--mtrl-sys-color-primary);background:radial-gradient(circle at calc(100% - 14px) 50%, var(--mtrl-sys-color-on-primary) 12px, transparent 12.5px) var(--mtrl-sys-color-primary)}m-switch:not(:defined)[supporting-text]::after{grid-row:1/span 2}m-switch:not(:defined)[supporting-text]::before{content:attr(supporting-text);grid-column:1;grid-row:2;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-switch:not(:defined):empty:is(:not([label]),[label=\"\"])[supporting-text]:not([supporting-text=\"\"])::after{grid-row:2}m-switch:not(:defined):empty:is(:not([label]),[label=\"\"]):is(:not([supporting-text]),[supporting-text=\"\"]){column-gap:0;min-height:48px}m-switch:not(:defined):empty:is(:not([label]),[label=\"\"]):is(:not([supporting-text]),[supporting-text=\"\"])::before{content:\"\";grid-column:1;grid-row:1/span 2}m-tabs:not(:defined){display:block;box-sizing:border-box;height:48px;overflow:hidden;border-bottom:1px solid var(--mtrl-sys-color-outline-variant)}m-tabs:not(:defined):has(>[icon]){height:64px}m-tabs:not(:defined)>*{visibility:hidden;display:none}m-progress:not(:defined){display:block;box-sizing:border-box;height:4px;padding:0 4px;overflow:hidden;color:rgba(0,0,0,0);background:var(--mtrl-sys-color-secondary-container) content-box}m-progress:not(:defined)[variant=circular]{display:inline-flex;vertical-align:middle;width:40px;height:40px;padding:0;background:none}m-loading-indicator:not(:defined){display:inline-flex;vertical-align:middle;width:48px;height:48px;overflow:hidden;color:rgba(0,0,0,0)}m-badge:not(:defined){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;overflow:hidden;height:16px;min-width:16px;max-width:34px;padding:0 4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-weight:500;font-size:11px;line-height:16px;background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}m-badge:not(:defined)[color=primary]{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}m-badge:not(:defined)[color=secondary]{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}m-badge:not(:defined)[color=tertiary]{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}m-badge:not(:defined)[color=success]{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}m-badge:not(:defined)[color=warning]{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}m-badge:not(:defined)[color=info]{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}m-badge:not(:defined):empty[label]:not([label=\"\"])::before{content:attr(label)}m-badge:not(:defined):not([variant=small]):is(:empty:not([label]),[label=\"\"],[label=\"0\"]){width:0;height:0;min-width:0;max-width:none;padding:0;font-size:0;background-color:rgba(0,0,0,0)}m-badge:not(:defined)[variant=small]{width:6px;height:6px;min-width:6px;max-width:none;padding:0;font-size:0}m-divider:not(:defined){display:block;height:1px;overflow:hidden;color:rgba(0,0,0,0);background-color:var(--mtrl-sys-color-outline-variant)}m-divider:not(:defined)[orientation=vertical]{display:inline-block;align-self:stretch;width:1px;height:auto}m-icon-button:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,0);height:40px;width:40px;border-radius:20px}m-icon-button:not(:defined)[size=xs]{height:32px;width:32px;border-radius:16px}m-icon-button:not(:defined)[size=xs][width=narrow]{height:32px;width:28px;border-radius:16px}m-icon-button:not(:defined)[size=xs][width=wide]{height:32px;width:40px;border-radius:16px}m-icon-button:not(:defined)[width=narrow]{height:40px;width:32px;border-radius:20px}m-icon-button:not(:defined)[width=wide]{height:40px;width:52px;border-radius:20px}m-icon-button:not(:defined)[size=m]{height:56px;width:56px;border-radius:28px}m-icon-button:not(:defined)[size=m][width=narrow]{height:56px;width:48px;border-radius:28px}m-icon-button:not(:defined)[size=m][width=wide]{height:56px;width:72px;border-radius:28px}m-icon-button:not(:defined)[size=l]{height:96px;width:96px;border-radius:48px}m-icon-button:not(:defined)[size=l][width=narrow]{height:96px;width:64px;border-radius:48px}m-icon-button:not(:defined)[size=l][width=wide]{height:96px;width:128px;border-radius:48px}m-icon-button:not(:defined)[size=xl]{height:136px;width:136px;border-radius:68px}m-icon-button:not(:defined)[size=xl][width=narrow]{height:136px;width:104px;border-radius:68px}m-icon-button:not(:defined)[size=xl][width=wide]{height:136px;width:184px;border-radius:68px}m-icon-button:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-primary)}m-icon-button:not(:defined)[variant=tonal]{background-color:var(--mtrl-sys-color-secondary-container)}m-icon-button:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant)}m-fab:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,0);background-color:var(--mtrl-sys-color-primary-container);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab:not(:defined)[size=default]{width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab:not(:defined)[size=medium]{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}m-fab:not(:defined)[size=large]{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}m-extended-fab:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);height:56px;min-width:56px;padding:0 16px;gap:8px;border-radius:var(--mtrl-sys-shape-corner-large, 16px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}m-extended-fab:not(:defined)[icon]::before{width:24px;height:24px}m-extended-fab:not(:defined)[icon]::before{content:\"\";flex:none}m-extended-fab:not(:defined)[icon-position=end]::before{order:1}m-extended-fab:not(:defined)[size=medium]{height:80px;min-width:80px;padding:0 26px;gap:16px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-extended-fab:not(:defined)[size=medium][icon]::before{width:28px;height:28px}m-extended-fab:not(:defined)[size=large]{height:96px;min-width:96px;padding:0 28px;gap:20px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-extended-fab:not(:defined)[size=large][icon]::before{width:32px;height:32px}m-checkbox:not(:defined){display:inline-flex;align-items:center;box-sizing:border-box;min-height:48px;padding:4px 0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-checkbox:not(:defined)::before{content:\"\";flex:none;box-sizing:border-box;width:18px;height:18px;margin-inline-end:12px;border:2px solid var(--mtrl-sys-color-on-surface-variant);border-radius:2px}m-checkbox:not(:defined)[checked]::before{border-color:var(--mtrl-sys-color-primary);background-color:var(--mtrl-sys-color-primary)}m-checkbox:not(:defined)[label-position=start]::before{order:1;margin-inline:12px 0}m-checkbox:not(:defined):empty:is(:not([label]),[label=\"\"]){min-width:48px;justify-content:center}m-checkbox:not(:defined):empty:is(:not([label]),[label=\"\"])::before{margin-inline:0}m-slider:not(:defined){display:block;height:48px;overflow:hidden;color:rgba(0,0,0,0)}m-slider:not(:defined)[label]:not([label=\"\"]){height:76px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=xs i]{height:48px}m-slider:not(:defined)[label]:not([label=\"\"])[size=xs i]{height:76px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=s i]{height:48px}m-slider:not(:defined)[label]:not([label=\"\"])[size=s i]{height:76px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=m i]{height:52px}m-slider:not(:defined)[label]:not([label=\"\"])[size=m i]{height:80px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=l i]{height:68px}m-slider:not(:defined)[label]:not([label=\"\"])[size=l i]{height:96px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=xl i]{height:108px}m-slider:not(:defined)[label]:not([label=\"\"])[size=xl i]{height:136px}m-text-field:not(:defined){display:inline-block;position:relative;width:280px}m-text-field:not(:defined)::before{content:attr(value) \" \";display:inline-block;box-sizing:border-box;width:100%;height:56px;padding:24.5px 16px 0;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) 0 0;border-bottom:1px solid var(--mtrl-sys-color-on-surface-variant);background-color:var(--mtrl-sys-color-surface-container-highest);color:var(--mtrl-sys-color-on-surface);white-space:pre;overflow:clip;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-text-field:not(:defined):not([label])::before{padding-top:16.5px}m-text-field:not(:defined)[variant=outlined]::before{padding-top:15.5px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:none}m-text-field:not(:defined)[density=compact]::before{height:40px;padding-top:13.5px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-text-field:not(:defined)[density=compact]:not([label])::before{padding-top:10px}m-text-field:not(:defined)[density=compact][variant=outlined]::before{padding-top:9px}m-text-field:not(:defined)[supporting-text]:not([supporting-text=\"\"])::before,m-text-field:not(:defined)[maxlength]::before{height:calc(56px + 20px);border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;background-image:linear-gradient(to top, var(--mtrl-sys-color-on-surface-variant) 1px, transparent 1px)}m-text-field:not(:defined)[supporting-text]:not([supporting-text=\"\"])[variant=outlined]::before,m-text-field:not(:defined)[maxlength][variant=outlined]::before{padding-top:calc(15.5px + 1px);padding-left:calc(16px + 1px);border-width:0 0 20px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px)/var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px);background-image:none;box-shadow:inset 0 0 0 1px var(--mtrl-sys-color-outline)}m-text-field:not(:defined)[supporting-text]:not([supporting-text=\"\"])[density=compact]::before,m-text-field:not(:defined)[maxlength][density=compact]::before{height:calc(40px + 20px)}m-text-field:not(:defined)[label]::after{content:attr(label);white-space:nowrap;position:absolute;top:16px;left:16px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-text-field:not(:defined)[label][value]:not([value=\"\"])::after{top:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-text-field:not(:defined)[variant=outlined][label][value]:not([value=\"\"])::after{top:-8px;padding:0 4px;left:12px}m-text-field:not(:defined)[density=compact]::after{top:10px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-text-field:not(:defined)[type=multiline]::before{height:100px;padding-top:16px}m-text-field:not(:defined)[type=multiline][label]::before{padding-top:24px}m-text-field:not(:defined)[type=multiline][variant=outlined]::before{padding-top:calc(16px - 1px)}m-text-field:not(:defined)[type=multiline][density=compact]::before{height:40px;padding-top:10px}m-text-field:not(:defined)[type=multiline][density=compact][label]::before{padding-top:14px}m-text-field:not(:defined)[type=multiline][density=compact][variant=outlined]::before{padding-top:calc(10px - 1px)}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])::before,m-text-field:not(:defined)[type=multiline][maxlength]::before{height:calc(100px + 20px)}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])[variant=outlined]::before,m-text-field:not(:defined)[type=multiline][maxlength][variant=outlined]::before{padding-top:16px}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])[density=compact]::before,m-text-field:not(:defined)[type=multiline][maxlength][density=compact]::before{height:calc(40px + 20px)}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])[density=compact][variant=outlined]::before,m-text-field:not(:defined)[type=multiline][maxlength][density=compact][variant=outlined]::before{padding-top:10px}m-text-field:not(:defined)[type=password i]::before,m-text-field:not(:defined)[type=hidden i]::before{content:\" \"}m-text-field:not(:defined)[type=hidden i]{display:none}m-text-field:not(:defined)>*{display:none}m-radios:not(:defined){display:flex;flex-direction:column;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-radios:not(:defined)[direction=horizontal]{flex-direction:row;flex-wrap:wrap}m-radios:not(:defined)[direction=horizontal]>m-radio{margin-inline-end:16px}m-radios:not(:defined)[direction=horizontal]>m-radio:last-of-type{margin-inline-end:0}m-radios:not(:defined):has(>m-radio)::before{content:\"\";flex:none;height:34px;margin-block-end:-34px}m-radios:not(:defined)>*{visibility:hidden;display:flex;align-items:center;box-sizing:border-box;min-height:48px;padding-inline-start:48px}m-navigation-bar:not(:defined){display:block;box-sizing:border-box;block-size:calc(64px + env(safe-area-inset-bottom, 0px));background:var(--mtrl-sys-color-surface-container)}m-navigation-bar:not(:defined)>*{visibility:hidden;display:none}m-navigation-rail:not(:defined){display:block;box-sizing:border-box;padding:132px 0 16px;background:linear-gradient(var(--mtrl-sys-color-surface), var(--mtrl-sys-color-surface)) no-repeat 0 0/96px 100%}m-navigation-rail:not(:defined)>*{visibility:hidden;display:block;height:64px;overflow:hidden}m-navigation-rail:not(:defined)>*+*{margin-top:4px}m-drawer:not(:defined){display:block;flex-shrink:0;padding:12px 0}m-drawer:not(:defined)[open]{background-color:var(--mtrl-sys-color-surface)}m-drawer:not(:defined)>*{visibility:hidden;display:block;height:56px;overflow:hidden}m-top-app-bar:not(:defined){position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;box-sizing:border-box;height:64px;padding:0 12px 0 28px;background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);white-space:nowrap;overflow:hidden;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)[type=center]{justify-content:center}m-top-app-bar:not(:defined)[type=medium],m-top-app-bar:not(:defined)[type=large]{align-items:flex-end;padding-left:44px;padding-bottom:24px;height:112px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)[type=large]{padding-bottom:28px;height:152px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:28px;line-height:36px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)>[slot=leading]{order:-1}m-top-app-bar:not(:defined)>[slot=trailing]{order:1;margin-left:auto}m-bottom-app-bar:not(:defined){position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:4px;box-sizing:border-box;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container)}m-bottom-app-bar:not(:defined)>[slot=fab]{margin-left:auto}m-button-group:not(:defined){display:inline-flex;vertical-align:baseline;gap:12px;white-space:nowrap}m-button-group:not(:defined)::before{width:0;height:32px;margin-inline-end:-12px;align-self:flex-start}m-button-group:not(:defined):has(>[icon]:empty:first-child){align-items:center}m-button-group:not(:defined):has(>[icon]:empty:first-child)::before{content:\"\"}m-button-group:not(:defined)[size=xs]{gap:18px}m-button-group:not(:defined):is([size=m],[size=l],[size=xl]){gap:8px}m-button-group:not(:defined)[density=comfortable]>*{height:36px}m-button-group:not(:defined)[density=compact]>*{height:32px}m-button-group:not(:defined)[size=xs]>*{height:32px;padding:0 13px}m-button-group:not(:defined)[size=xs][density=comfortable]>*{height:28px}m-button-group:not(:defined)[size=xs][density=compact]>*{height:24px}m-button-group:not(:defined)[size=xs]::before{height:26px;margin-inline-end:-18px}m-button-group:not(:defined)[size=m]>*{height:56px;padding:0 25px;font-size:16px;line-height:24px;letter-spacing:.15px}m-button-group:not(:defined)[size=m][density=comfortable]>*{height:52px}m-button-group:not(:defined)[size=m][density=compact]>*{height:48px}m-button-group:not(:defined)[size=m]::before{height:40px}m-button-group:not(:defined)[size=l]>*{height:96px;padding:0 50px;font-size:24px;line-height:32px}m-button-group:not(:defined)[size=l][density=comfortable]>*{height:92px}m-button-group:not(:defined)[size=l][density=compact]>*{height:88px}m-button-group:not(:defined)[size=l]::before{height:64px}m-button-group:not(:defined)[size=xl]>*{height:136px;padding:0 67px;font-size:32px;line-height:40px}m-button-group:not(:defined)[size=xl][density=comfortable]>*{height:132px}m-button-group:not(:defined)[size=xl][density=compact]>*{height:128px}m-button-group:not(:defined)[size=xl]::before{height:88px}m-button-group:not(:defined):is([size=m],[size=l],[size=xl])::before{margin-inline-end:-8px}m-button-group:not(:defined):is([size=l],[size=xl])>*{letter-spacing:0;font-weight:400}m-button-group:not(:defined)[density=comfortable]::before{margin-block-start:-2px}m-button-group:not(:defined)[density=compact]::before{margin-block-start:-4px}m-button-group:not(:defined)>*{visibility:hidden;display:inline-flex;align-items:center;flex:none;min-width:58px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);height:40px;padding:0 17px;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button-group:not(:defined)>*[icon]:empty{min-width:0;padding:0;aspect-ratio:1}m-button-group:not(:defined)[kind=connected]{gap:2px}m-button-group:not(:defined)[kind=connected]::before{margin-inline-end:-2px}m-button-group:not(:defined):is(:not([size]),[size=xs],[size=s])[kind=connected]>*{min-width:48px}m-chips:not(:defined){display:flex;flex-wrap:wrap;gap:8px}m-chips:not(:defined)[vertical]{flex-direction:column;align-items:flex-start}m-chips:not(:defined)[scrollable]{flex-wrap:nowrap;overflow:hidden}m-chips:not(:defined)>*{visibility:hidden;display:inline-flex;align-items:center;box-sizing:border-box;height:32px;padding:0 16px;white-space:nowrap;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-list:not(:defined){display:block;padding:8px 0;background-color:var(--mtrl-sys-color-surface);border-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}m-list:not(:defined)>*{visibility:hidden;display:block;height:56px;overflow:hidden}m-list:not(:defined)>*[supporting-text],m-list:not(:defined)>*[overline]{height:72px}m-list:not(:defined)>*[kind=divider]{height:1px}m-list:not(:defined)>*[kind=subheader]{height:auto;padding:16px 16px 8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-card:not(:defined){display:flex;flex-direction:column;box-sizing:border-box;padding:16px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-card:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-surface-container-highest)}m-card:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant);background-color:var(--mtrl-sys-color-surface)}m-card:not(:defined)[headline]::before{content:attr(headline);order:-2;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-card:not(:defined)[subhead]::after{content:attr(subhead);order:-1;color:var(--mtrl-sys-color-on-surface-variant)}m-card:not(:defined)[headline]:not([subhead])::before,m-card:not(:defined)[subhead]::after{margin-bottom:16px}m-card:not(:defined)>[slot=headline]{order:-2;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-card:not(:defined)>[slot=subhead]{order:-1;color:var(--mtrl-sys-color-on-surface-variant)}m-carousel:not(:defined){display:block}m-carousel:not(:defined)>*{visibility:hidden;display:none}m-menu:not(:defined){display:none}m-fab-menu:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;background-color:var(--mtrl-sys-color-primary-container);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab-menu:not(:defined)[size=default]{width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab-menu:not(:defined)[size=medium]{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}m-fab-menu:not(:defined)[size=large]{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}m-fab-menu:not(:defined)[color=secondary]{background-color:var(--mtrl-sys-color-secondary-container)}m-fab-menu:not(:defined)[color=tertiary]{background-color:var(--mtrl-sys-color-tertiary-container)}m-fab-menu:not(:defined)>*{visibility:hidden;display:none}m-select:not(:defined){display:inline-block;position:relative;box-sizing:border-box;width:280px;height:56px;padding:24.5px 52px 0 16px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) 0 0;border-bottom:1px solid var(--mtrl-sys-color-on-surface-variant);background-color:var(--mtrl-sys-color-surface-container-highest);color:var(--mtrl-sys-color-on-surface);white-space:nowrap;overflow:clip;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-select:not(:defined)::before{content:attr(value) \" \";white-space:pre}m-select:not(:defined)[label]::after{content:attr(label);position:absolute;top:16px;left:16px;color:var(--mtrl-sys-color-on-surface-variant)}m-select:not(:defined)[label][value]:not([value=\"\"])::after{top:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-select:not(:defined):not([label]){padding-top:16.5px}m-select:not(:defined)[variant=outlined]{padding-top:15.5px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:none}m-select:not(:defined)[variant=outlined][label][value]:not([value=\"\"])::after{top:-8px;padding:0 4px;left:12px}m-select:not(:defined)[density=compact]{height:40px;padding-top:13.5px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-select:not(:defined)[density=compact]::after{top:10px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-select:not(:defined)[density=compact]:not([label]){padding-top:10px}m-select:not(:defined)[density=compact][variant=outlined]{padding-top:9px}m-select:not(:defined)[supporting-text]:not([supporting-text=\"\"]),m-select:not(:defined)[maxlength]{height:calc(56px + 20px);border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;background-image:linear-gradient(to top, var(--mtrl-sys-color-on-surface-variant) 1px, transparent 1px)}m-select:not(:defined)[supporting-text]:not([supporting-text=\"\"])[variant=outlined],m-select:not(:defined)[maxlength][variant=outlined]{padding-top:calc(15.5px + 1px);padding-left:calc(16px + 1px);border-width:0 0 20px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px)/var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px);background-image:none;box-shadow:inset 0 0 0 1px var(--mtrl-sys-color-outline)}m-select:not(:defined)[supporting-text]:not([supporting-text=\"\"])[density=compact],m-select:not(:defined)[maxlength][density=compact]{height:calc(40px + 20px)}m-select:not(:defined)>*{display:none}m-select:not(:defined)::before{content:\" \"}m-split-button:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;position:relative;z-index:0;box-sizing:border-box;height:40px;padding:0 calc(12px + 50px) 0 16px;color:var(--mtrl-sys-color-on-primary);white-space:nowrap;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-split-button:not(:defined)::before,m-split-button:not(:defined)::after{content:\"\";position:absolute;z-index:-1;top:0;bottom:0;background-color:var(--mtrl-sys-color-primary)}m-split-button:not(:defined)::before{left:0;right:50px;border-radius:20px 4px 4px 20px}m-split-button:not(:defined)::after{right:0;width:48px;border-radius:4px 20px 20px 4px}m-split-button:not(:defined)>*{display:none}m-tooltip:not(:defined){display:none}m-toolbar:not(:defined){display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;min-height:64px;padding-inline:16px;background-color:var(--mtrl-sys-color-surface-container)}m-toolbar:not(:defined)[arrangement=center]{justify-content:center;gap:32px}m-toolbar:not(:defined)[variant=floating]{width:fit-content;justify-content:center;gap:4px;padding:8px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px)}m-toolbar:not(:defined)[variant=floating]:not([flat]){box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}m-toolbar:not(:defined)[variant=floating][orientation=vertical]{flex-direction:column;min-height:0;min-width:64px}m-toolbar:not(:defined)[color=vibrant]{background-color:var(--mtrl-sys-color-primary-container)}m-snackbar:not(:defined){display:none}m-dialog:not(:defined){display:none}m-bottom-sheet:not(:defined){display:none}m-side-sheet:not(:defined){display:none}m-datepicker:not(:defined){display:inline-flex;box-sizing:border-box;width:280px;vertical-align:baseline;white-space:nowrap}m-datepicker:not(:defined)::before{content:attr(label) \" \";white-space:pre;display:inline-block;width:100%;padding-bottom:80px;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-datepicker:not(:defined)>*{display:none}m-timepicker:not(:defined){display:none}m-search:not(:defined){display:flex;align-items:center;box-sizing:border-box;height:56px;padding:0 56px 0 60px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-search:not(:defined)::before{content:attr(placeholder)}m-search:not(:defined)[value]:not([value=\"\"])::before{content:attr(value);color:var(--mtrl-sys-color-on-surface)}m-search:not(:defined)>*{visibility:hidden;display:none}";
|
|
2
|
+
const css = "m-button:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;box-sizing:border-box;min-width:58px;white-space:nowrap;background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary);height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[icon]::before,m-button:not(:defined)[icon][icon-position=end]::after{width:20px;height:20px}m-button:not(:defined)[size=xs]{height:32px;padding:0 12px;gap:4px;border-radius:16px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=xs][icon]::before,m-button:not(:defined)[size=xs][icon][icon-position=end]::after{width:20px;height:20px}m-button:not(:defined)[size=s]{height:40px;padding:0 16px;gap:8px;border-radius:20px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button:not(:defined)[size=s][icon]::before,m-button:not(:defined)[size=s][icon][icon-position=end]::after{width:20px;height:20px}m-button:not(:defined)[size=m]{height:56px;padding:0 24px;gap:8px;border-radius:28px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}m-button:not(:defined)[size=m][icon]::before,m-button:not(:defined)[size=m][icon][icon-position=end]::after{width:24px;height:24px}m-button:not(:defined)[size=l]{height:96px;padding:0 48px;gap:12px;border-radius:48px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=l][icon]::before,m-button:not(:defined)[size=l][icon][icon-position=end]::after{width:32px;height:32px}m-button:not(:defined)[size=xl]{height:136px;padding:0 64px;gap:16px;border-radius:68px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:32px;line-height:40px;letter-spacing:0;font-weight:400}m-button:not(:defined)[size=xl][icon]::before,m-button:not(:defined)[size=xl][icon][icon-position=end]::after{width:40px;height:40px}m-button:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}m-button:not(:defined)[variant=elevated]{background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=tonal]{background-color:var(--mtrl-sys-color-secondary-container);color:var(--mtrl-sys-color-on-secondary-container)}m-button:not(:defined)[variant=outlined]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-on-surface-variant)}m-button:not(:defined)[variant=text]{background-color:rgba(0,0,0,0);color:var(--mtrl-sys-color-primary)}m-button:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant)}m-button:not(:defined)[variant=text]{padding:0 12px}m-button:not(:defined)[icon]::before,m-button:not(:defined)[icon][icon-position=end]::after{content:\"\";flex:none}m-button:not(:defined)[icon][icon-position=end]::before{content:none}m-button:not(:defined)[icon]:not([size]),m-button:not(:defined)[icon][size=s]{padding-inline-start:12px}m-button:not(:defined)[icon]:not([size])[icon-position=end],m-button:not(:defined)[icon][size=s][icon-position=end]{padding-inline-start:16px;padding-inline-end:12px}m-button:not(:defined)[variant=text][icon]:not([size]),m-button:not(:defined)[variant=text][icon][size=xs],m-button:not(:defined)[variant=text][icon][size=s]{padding-inline:12px 16px}m-button:not(:defined)[variant=text][icon]:not([size])[icon-position=end],m-button:not(:defined)[variant=text][icon][size=xs][icon-position=end],m-button:not(:defined)[variant=text][icon][size=s][icon-position=end]{padding-inline:16px 12px}m-button:not(:defined)[variant=text][icon][size=m]{padding:0 24px}m-button:not(:defined)[variant=text][icon][size=l]{padding:0 48px}m-button:not(:defined)[variant=text][icon][size=xl]{padding:0 64px}m-switch:not(:defined){display:inline-grid;grid-template-columns:auto auto;align-content:center;align-items:center;column-gap:12px;box-sizing:border-box;min-height:56px;padding:4px 0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-switch:not(:defined)::after{content:\"\";grid-column:2;grid-row:1;box-sizing:border-box;width:52px;height:32px;border:2px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background:radial-gradient(circle at 14px 50%, var(--mtrl-sys-color-outline) 8px, transparent 8.5px) var(--mtrl-sys-color-surface-container-highest)}m-switch:not(:defined)[checked]::after{border-color:var(--mtrl-sys-color-primary);background:radial-gradient(circle at calc(100% - 14px) 50%, var(--mtrl-sys-color-on-primary) 12px, transparent 12.5px) var(--mtrl-sys-color-primary)}m-switch:not(:defined)[supporting-text]::after{grid-row:1/span 2}m-switch:not(:defined)[supporting-text]::before{content:attr(supporting-text);grid-column:1;grid-row:2;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-switch:not(:defined):empty:is(:not([label]),[label=\"\"])[supporting-text]:not([supporting-text=\"\"])::after{grid-row:2}m-switch:not(:defined):empty:is(:not([label]),[label=\"\"]):is(:not([supporting-text]),[supporting-text=\"\"]){column-gap:0;min-height:48px}m-switch:not(:defined):empty:is(:not([label]),[label=\"\"]):is(:not([supporting-text]),[supporting-text=\"\"])::before{content:\"\";grid-column:1;grid-row:1/span 2}m-tabs:not(:defined){display:block;box-sizing:border-box;height:48px;overflow:hidden;border-bottom:1px solid var(--mtrl-sys-color-outline-variant)}m-tabs:not(:defined):has(>[icon]){height:64px}m-tabs:not(:defined)>*{visibility:hidden;display:none}m-progress:not(:defined){display:block;box-sizing:border-box;height:4px;padding:0 4px;overflow:hidden;color:rgba(0,0,0,0);background:var(--mtrl-sys-color-secondary-container) content-box}m-progress:not(:defined)[variant=circular]{display:inline-flex;vertical-align:middle;width:40px;height:40px;padding:0;background:none}m-loading-indicator:not(:defined){display:inline-flex;vertical-align:middle;width:48px;height:48px;overflow:hidden;color:rgba(0,0,0,0)}m-badge:not(:defined){display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;overflow:hidden;height:16px;min-width:16px;max-width:34px;padding:0 4px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);font-weight:500;font-size:11px;line-height:16px;background-color:var(--mtrl-sys-color-error);color:var(--mtrl-sys-color-on-error)}m-badge:not(:defined)[color=primary]{background-color:var(--mtrl-sys-color-primary);color:var(--mtrl-sys-color-on-primary)}m-badge:not(:defined)[color=secondary]{background-color:var(--mtrl-sys-color-secondary);color:var(--mtrl-sys-color-on-secondary)}m-badge:not(:defined)[color=tertiary]{background-color:var(--mtrl-sys-color-tertiary);color:var(--mtrl-sys-color-on-tertiary)}m-badge:not(:defined)[color=success]{background-color:var(--mtrl-sys-color-success);color:var(--mtrl-sys-color-on-success)}m-badge:not(:defined)[color=warning]{background-color:var(--mtrl-sys-color-warning);color:var(--mtrl-sys-color-on-warning)}m-badge:not(:defined)[color=info]{background-color:var(--mtrl-sys-color-info);color:var(--mtrl-sys-color-on-info)}m-badge:not(:defined):empty[label]:not([label=\"\"])::before{content:attr(label)}m-badge:not(:defined):not([variant=small]):is(:empty:not([label]),[label=\"\"],[label=\"0\"]){width:0;height:0;min-width:0;max-width:none;padding:0;font-size:0;background-color:rgba(0,0,0,0)}m-badge:not(:defined)[variant=small]{width:6px;height:6px;min-width:6px;max-width:none;padding:0;font-size:0}m-divider:not(:defined){display:block;height:1px;overflow:hidden;color:rgba(0,0,0,0);background-color:var(--mtrl-sys-color-outline-variant)}m-divider:not(:defined)[orientation=vertical]{display:inline-block;align-self:stretch;width:1px;height:auto}m-icon-button:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,0);height:40px;width:40px;border-radius:20px}m-icon-button:not(:defined)[size=xs]{height:32px;width:32px;border-radius:16px}m-icon-button:not(:defined)[size=xs][width=narrow]{height:32px;width:28px;border-radius:16px}m-icon-button:not(:defined)[size=xs][width=wide]{height:32px;width:40px;border-radius:16px}m-icon-button:not(:defined)[width=narrow]{height:40px;width:32px;border-radius:20px}m-icon-button:not(:defined)[width=wide]{height:40px;width:52px;border-radius:20px}m-icon-button:not(:defined)[size=m]{height:56px;width:56px;border-radius:28px}m-icon-button:not(:defined)[size=m][width=narrow]{height:56px;width:48px;border-radius:28px}m-icon-button:not(:defined)[size=m][width=wide]{height:56px;width:72px;border-radius:28px}m-icon-button:not(:defined)[size=l]{height:96px;width:96px;border-radius:48px}m-icon-button:not(:defined)[size=l][width=narrow]{height:96px;width:64px;border-radius:48px}m-icon-button:not(:defined)[size=l][width=wide]{height:96px;width:128px;border-radius:48px}m-icon-button:not(:defined)[size=xl]{height:136px;width:136px;border-radius:68px}m-icon-button:not(:defined)[size=xl][width=narrow]{height:136px;width:104px;border-radius:68px}m-icon-button:not(:defined)[size=xl][width=wide]{height:136px;width:184px;border-radius:68px}m-icon-button:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-primary)}m-icon-button:not(:defined)[variant=tonal]{background-color:var(--mtrl-sys-color-secondary-container)}m-icon-button:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant)}m-fab:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;color:rgba(0,0,0,0);background-color:var(--mtrl-sys-color-primary-container);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab:not(:defined)[placement=top-start]{position:fixed;top:16px;inset-inline-start:16px}m-fab:not(:defined)[placement=top-end]{position:fixed;top:16px;inset-inline-end:16px}m-fab:not(:defined)[placement=bottom-start]{position:fixed;bottom:16px;inset-inline-start:16px}m-fab:not(:defined)[placement=bottom-end]{position:fixed;bottom:16px;inset-inline-end:16px}m-fab:not(:defined)[size=default]{width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab:not(:defined)[size=medium]{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}m-fab:not(:defined)[size=large]{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}m-extended-fab:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;background-color:var(--mtrl-sys-color-primary-container);color:var(--mtrl-sys-color-on-primary-container);height:56px;min-width:56px;padding:0 16px;gap:8px;border-radius:var(--mtrl-sys-shape-corner-large, 16px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.15px;font-weight:500}m-extended-fab:not(:defined)[placement=top-start]{position:fixed;top:16px;inset-inline-start:16px}m-extended-fab:not(:defined)[placement=top-end]{position:fixed;top:16px;inset-inline-end:16px}m-extended-fab:not(:defined)[placement=bottom-start]{position:fixed;bottom:16px;inset-inline-start:16px}m-extended-fab:not(:defined)[placement=bottom-end]{position:fixed;bottom:16px;inset-inline-end:16px}m-extended-fab:not(:defined)[icon]::before{width:24px;height:24px}m-extended-fab:not(:defined)[icon]::before{content:\"\";flex:none}m-extended-fab:not(:defined)[icon-position=end]::before{order:1}m-extended-fab:not(:defined)[size=medium]{height:80px;min-width:80px;padding:0 26px;gap:16px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-extended-fab:not(:defined)[size=medium][icon]::before{width:28px;height:28px}m-extended-fab:not(:defined)[size=large]{height:96px;min-width:96px;padding:0 28px;gap:20px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px);font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-extended-fab:not(:defined)[size=large][icon]::before{width:32px;height:32px}m-checkbox:not(:defined){display:inline-flex;align-items:center;box-sizing:border-box;min-height:48px;padding:4px 0;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-checkbox:not(:defined)::before{content:\"\";flex:none;box-sizing:border-box;width:18px;height:18px;margin-inline-end:12px;border:2px solid var(--mtrl-sys-color-on-surface-variant);border-radius:2px}m-checkbox:not(:defined)[checked]::before{border-color:var(--mtrl-sys-color-primary);background-color:var(--mtrl-sys-color-primary)}m-checkbox:not(:defined)[label-position=start]::before{order:1;margin-inline:12px 0}m-checkbox:not(:defined):empty:is(:not([label]),[label=\"\"]){min-width:48px;justify-content:center}m-checkbox:not(:defined):empty:is(:not([label]),[label=\"\"])::before{margin-inline:0}m-slider:not(:defined){display:block;height:48px;overflow:hidden;color:rgba(0,0,0,0)}m-slider:not(:defined)[label]:not([label=\"\"]){height:76px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=xs i]{height:48px}m-slider:not(:defined)[label]:not([label=\"\"])[size=xs i]{height:76px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=s i]{height:48px}m-slider:not(:defined)[label]:not([label=\"\"])[size=s i]{height:76px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=m i]{height:52px}m-slider:not(:defined)[label]:not([label=\"\"])[size=m i]{height:80px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=l i]{height:68px}m-slider:not(:defined)[label]:not([label=\"\"])[size=l i]{height:96px}m-slider:not(:defined):is(:not([label]),[label=\"\"])[size=xl i]{height:108px}m-slider:not(:defined)[label]:not([label=\"\"])[size=xl i]{height:136px}m-text-field:not(:defined){display:inline-block;position:relative;width:280px}m-text-field:not(:defined)::before{content:attr(value) \" \";display:inline-block;box-sizing:border-box;width:100%;height:56px;padding:24.5px 16px 0;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) 0 0;border-bottom:1px solid var(--mtrl-sys-color-on-surface-variant);background-color:var(--mtrl-sys-color-surface-container-highest);color:var(--mtrl-sys-color-on-surface);white-space:pre;overflow:clip;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-text-field:not(:defined):not([label])::before{padding-top:16.5px}m-text-field:not(:defined)[variant=outlined]::before{padding-top:15.5px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:none}m-text-field:not(:defined)[density=compact]::before{height:40px;padding-top:13.5px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-text-field:not(:defined)[density=compact]:not([label])::before{padding-top:10px}m-text-field:not(:defined)[density=compact][variant=outlined]::before{padding-top:9px}m-text-field:not(:defined)[supporting-text]:not([supporting-text=\"\"])::before,m-text-field:not(:defined)[maxlength]::before{height:calc(56px + 20px);border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;background-image:linear-gradient(to top, var(--mtrl-sys-color-on-surface-variant) 1px, transparent 1px)}m-text-field:not(:defined)[supporting-text]:not([supporting-text=\"\"])[variant=outlined]::before,m-text-field:not(:defined)[maxlength][variant=outlined]::before{padding-top:calc(15.5px + 1px);padding-left:calc(16px + 1px);border-width:0 0 20px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px)/var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px);background-image:none;box-shadow:inset 0 0 0 1px var(--mtrl-sys-color-outline)}m-text-field:not(:defined)[supporting-text]:not([supporting-text=\"\"])[density=compact]::before,m-text-field:not(:defined)[maxlength][density=compact]::before{height:calc(40px + 20px)}m-text-field:not(:defined)[label]::after{content:attr(label);white-space:nowrap;position:absolute;top:16px;left:16px;color:var(--mtrl-sys-color-on-surface-variant);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-text-field:not(:defined)[label][value]:not([value=\"\"])::after{top:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-text-field:not(:defined)[variant=outlined][label][value]:not([value=\"\"])::after{top:-8px;padding:0 4px;left:12px}m-text-field:not(:defined)[density=compact]::after{top:10px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-text-field:not(:defined)[type=multiline]::before{height:100px;padding-top:16px}m-text-field:not(:defined)[type=multiline][label]::before{padding-top:24px}m-text-field:not(:defined)[type=multiline][variant=outlined]::before{padding-top:calc(16px - 1px)}m-text-field:not(:defined)[type=multiline][density=compact]::before{height:40px;padding-top:10px}m-text-field:not(:defined)[type=multiline][density=compact][label]::before{padding-top:14px}m-text-field:not(:defined)[type=multiline][density=compact][variant=outlined]::before{padding-top:calc(10px - 1px)}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])::before,m-text-field:not(:defined)[type=multiline][maxlength]::before{height:calc(100px + 20px)}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])[variant=outlined]::before,m-text-field:not(:defined)[type=multiline][maxlength][variant=outlined]::before{padding-top:16px}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])[density=compact]::before,m-text-field:not(:defined)[type=multiline][maxlength][density=compact]::before{height:calc(40px + 20px)}m-text-field:not(:defined)[type=multiline][supporting-text]:not([supporting-text=\"\"])[density=compact][variant=outlined]::before,m-text-field:not(:defined)[type=multiline][maxlength][density=compact][variant=outlined]::before{padding-top:10px}m-text-field:not(:defined)[type=password i]::before,m-text-field:not(:defined)[type=hidden i]::before{content:\" \"}m-text-field:not(:defined)[type=hidden i]{display:none}m-text-field:not(:defined)>*{display:none}m-radios:not(:defined){display:flex;flex-direction:column;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-radios:not(:defined)[direction=horizontal]{flex-direction:row;flex-wrap:wrap}m-radios:not(:defined)[direction=horizontal]>m-radio{margin-inline-end:16px}m-radios:not(:defined)[direction=horizontal]>m-radio:last-of-type{margin-inline-end:0}m-radios:not(:defined):has(>m-radio)::before{content:\"\";flex:none;height:34px;margin-block-end:-34px}m-radios:not(:defined)>*{visibility:hidden;display:flex;align-items:center;box-sizing:border-box;min-height:48px;padding-inline-start:48px}m-navigation-bar:not(:defined){display:block;box-sizing:border-box;block-size:calc(64px + env(safe-area-inset-bottom, 0px));background:var(--mtrl-sys-color-surface-container)}m-navigation-bar:not(:defined)>*{visibility:hidden;display:none}m-navigation-rail:not(:defined){display:block;box-sizing:border-box;padding:132px 0 16px;background:linear-gradient(var(--mtrl-sys-color-surface), var(--mtrl-sys-color-surface)) no-repeat 0 0/96px 100%}m-navigation-rail:not(:defined)>*{visibility:hidden;display:block;height:64px;overflow:hidden}m-navigation-rail:not(:defined)>*+*{margin-top:4px}m-drawer:not(:defined){display:block;flex-shrink:0;padding:12px 0}m-drawer:not(:defined)[open]{background-color:var(--mtrl-sys-color-surface)}m-drawer:not(:defined)>*{visibility:hidden;display:block;height:56px;overflow:hidden}m-top-app-bar:not(:defined){position:absolute;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;box-sizing:border-box;height:64px;padding:0 12px 0 28px;background-color:var(--mtrl-sys-color-surface);color:var(--mtrl-sys-color-on-surface);white-space:nowrap;overflow:hidden;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)[type=center]{justify-content:center}m-top-app-bar:not(:defined)[type=medium],m-top-app-bar:not(:defined)[type=large]{align-items:flex-end;padding-left:44px;padding-bottom:24px;height:112px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:24px;line-height:32px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)[type=large]{padding-bottom:28px;height:152px;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:28px;line-height:36px;letter-spacing:0;font-weight:400}m-top-app-bar:not(:defined)>[slot=leading]{order:-1}m-top-app-bar:not(:defined)>[slot=trailing]{order:1;margin-left:auto}m-bottom-app-bar:not(:defined){position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:4px;box-sizing:border-box;height:80px;padding:12px 16px 12px 4px;background-color:var(--mtrl-sys-color-surface-container)}m-bottom-app-bar:not(:defined)>[slot=fab]{margin-left:auto}m-button-group:not(:defined){display:inline-flex;vertical-align:baseline;gap:12px;white-space:nowrap}m-button-group:not(:defined)::before{width:0;height:32px;margin-inline-end:-12px;align-self:flex-start}m-button-group:not(:defined):has(>[icon]:empty:first-child){align-items:center}m-button-group:not(:defined):has(>[icon]:empty:first-child)::before{content:\"\"}m-button-group:not(:defined)[size=xs]{gap:18px}m-button-group:not(:defined):is([size=m],[size=l],[size=xl]){gap:8px}m-button-group:not(:defined)[density=comfortable]>*{height:36px}m-button-group:not(:defined)[density=compact]>*{height:32px}m-button-group:not(:defined)[size=xs]>*{height:32px;padding:0 13px}m-button-group:not(:defined)[size=xs][density=comfortable]>*{height:28px}m-button-group:not(:defined)[size=xs][density=compact]>*{height:24px}m-button-group:not(:defined)[size=xs]::before{height:26px;margin-inline-end:-18px}m-button-group:not(:defined)[size=m]>*{height:56px;padding:0 25px;font-size:16px;line-height:24px;letter-spacing:.15px}m-button-group:not(:defined)[size=m][density=comfortable]>*{height:52px}m-button-group:not(:defined)[size=m][density=compact]>*{height:48px}m-button-group:not(:defined)[size=m]::before{height:40px}m-button-group:not(:defined)[size=l]>*{height:96px;padding:0 50px;font-size:24px;line-height:32px}m-button-group:not(:defined)[size=l][density=comfortable]>*{height:92px}m-button-group:not(:defined)[size=l][density=compact]>*{height:88px}m-button-group:not(:defined)[size=l]::before{height:64px}m-button-group:not(:defined)[size=xl]>*{height:136px;padding:0 67px;font-size:32px;line-height:40px}m-button-group:not(:defined)[size=xl][density=comfortable]>*{height:132px}m-button-group:not(:defined)[size=xl][density=compact]>*{height:128px}m-button-group:not(:defined)[size=xl]::before{height:88px}m-button-group:not(:defined):is([size=m],[size=l],[size=xl])::before{margin-inline-end:-8px}m-button-group:not(:defined):is([size=l],[size=xl])>*{letter-spacing:0;font-weight:400}m-button-group:not(:defined)[density=comfortable]::before{margin-block-start:-2px}m-button-group:not(:defined)[density=compact]::before{margin-block-start:-4px}m-button-group:not(:defined)>*{visibility:hidden;display:inline-flex;align-items:center;flex:none;min-width:58px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);height:40px;padding:0 17px;font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-button-group:not(:defined)>*[icon]:empty{min-width:0;padding:0;aspect-ratio:1}m-button-group:not(:defined)[kind=connected]{gap:2px}m-button-group:not(:defined)[kind=connected]::before{margin-inline-end:-2px}m-button-group:not(:defined):is(:not([size]),[size=xs],[size=s])[kind=connected]>*{min-width:48px}m-chips:not(:defined){display:flex;flex-wrap:wrap;gap:8px}m-chips:not(:defined)[vertical]{flex-direction:column;align-items:flex-start}m-chips:not(:defined)[scrollable]{flex-wrap:nowrap;overflow:hidden}m-chips:not(:defined)>*{visibility:hidden;display:inline-flex;align-items:center;box-sizing:border-box;height:32px;padding:0 16px;white-space:nowrap;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-list:not(:defined){display:block;padding:8px 0;background-color:var(--mtrl-sys-color-surface);border-radius:var(--mtrl-list-item-shape-outer, var(--mtrl-sys-shape-corner-large, 16px))}m-list:not(:defined)>*{visibility:hidden;display:block;height:56px;overflow:hidden}m-list:not(:defined)>*[supporting-text],m-list:not(:defined)>*[overline]{height:72px}m-list:not(:defined)>*[kind=divider]{height:1px}m-list:not(:defined)>*[kind=subheader]{height:auto;padding:16px 16px 8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-card:not(:defined){display:flex;flex-direction:column;box-sizing:border-box;padding:16px;border-radius:var(--mtrl-sys-shape-corner-medium, 12px);background-color:var(--mtrl-sys-color-surface-container-low);color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-card:not(:defined)[variant=filled]{background-color:var(--mtrl-sys-color-surface-container-highest)}m-card:not(:defined)[variant=outlined]{border:1px solid var(--mtrl-sys-color-outline-variant);background-color:var(--mtrl-sys-color-surface)}m-card:not(:defined)[headline]::before{content:attr(headline);order:-2;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-card:not(:defined)[subhead]::after{content:attr(subhead);order:-1;color:var(--mtrl-sys-color-on-surface-variant)}m-card:not(:defined)[headline]:not([subhead])::before,m-card:not(:defined)[subhead]::after{margin-bottom:16px}m-card:not(:defined)>[slot=headline]{order:-2;font-family:var(--mtrl-ref-typeface-brand, Roboto, sans-serif);font-size:22px;line-height:28px;letter-spacing:0;font-weight:400}m-card:not(:defined)>[slot=subhead]{order:-1;color:var(--mtrl-sys-color-on-surface-variant)}m-card:not(:defined):not(:has(>[slot=actions]~[slot=actions]))>[slot=actions]{align-self:flex-end;margin-block:24px -8px;margin-inline:-8px}m-card:not(:defined):not(:has(>[slot=actions]~[slot=actions]))[actions-align=start]>[slot=actions],m-card:not(:defined):not(:has(>[slot=actions]~[slot=actions]))[actions-align=space-between]>[slot=actions]{align-self:flex-start}m-card:not(:defined):not(:has(>[slot=actions]~[slot=actions]))[actions-align=center]>[slot=actions]{align-self:center}m-carousel:not(:defined){display:block}m-carousel:not(:defined)>*{visibility:hidden;display:none}m-menu:not(:defined){display:none}m-fab-menu:not(:defined){display:inline-block;vertical-align:middle;box-sizing:border-box;overflow:hidden;background-color:var(--mtrl-sys-color-primary-container);width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab-menu:not(:defined)[size=default]{width:56px;height:56px;border-radius:var(--mtrl-sys-shape-corner-large, 16px)}m-fab-menu:not(:defined)[size=medium]{width:80px;height:80px;border-radius:var(--mtrl-sys-shape-corner-large-increased, 20px)}m-fab-menu:not(:defined)[size=large]{width:96px;height:96px;border-radius:var(--mtrl-sys-shape-corner-extra-large, 28px)}m-fab-menu:not(:defined)[color=secondary]{background-color:var(--mtrl-sys-color-secondary-container)}m-fab-menu:not(:defined)[color=tertiary]{background-color:var(--mtrl-sys-color-tertiary-container)}m-fab-menu:not(:defined)>*{visibility:hidden;display:none}m-select:not(:defined){display:inline-block;position:relative;box-sizing:border-box;width:280px;height:56px;padding:24.5px 52px 0 16px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) 0 0;border-bottom:1px solid var(--mtrl-sys-color-on-surface-variant);background-color:var(--mtrl-sys-color-surface-container-highest);color:var(--mtrl-sys-color-on-surface);white-space:nowrap;overflow:clip;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-select:not(:defined)::before{content:attr(value) \" \";white-space:pre}m-select:not(:defined)[label]::after{content:attr(label);position:absolute;top:16px;left:16px;color:var(--mtrl-sys-color-on-surface-variant)}m-select:not(:defined)[label][value]:not([value=\"\"])::after{top:8px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-select:not(:defined):not([label]){padding-top:16.5px}m-select:not(:defined)[variant=outlined]{padding-top:15.5px;border:1px solid var(--mtrl-sys-color-outline);border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px);background:none}m-select:not(:defined)[variant=outlined][label][value]:not([value=\"\"])::after{top:-8px;padding:0 4px;left:12px}m-select:not(:defined)[density=compact]{height:40px;padding-top:13.5px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-select:not(:defined)[density=compact]::after{top:10px;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.25px;font-weight:400}m-select:not(:defined)[density=compact]:not([label]){padding-top:10px}m-select:not(:defined)[density=compact][variant=outlined]{padding-top:9px}m-select:not(:defined)[supporting-text]:not([supporting-text=\"\"]),m-select:not(:defined)[maxlength]{height:calc(56px + 20px);border-bottom:20px solid rgba(0,0,0,0);background-clip:padding-box;background-image:linear-gradient(to top, var(--mtrl-sys-color-on-surface-variant) 1px, transparent 1px)}m-select:not(:defined)[supporting-text]:not([supporting-text=\"\"])[variant=outlined],m-select:not(:defined)[maxlength][variant=outlined]{padding-top:calc(15.5px + 1px);padding-left:calc(16px + 1px);border-width:0 0 20px;border-radius:var(--mtrl-sys-shape-corner-extra-small, 4px)/var(--mtrl-sys-shape-corner-extra-small, 4px) var(--mtrl-sys-shape-corner-extra-small, 4px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px) calc(var(--mtrl-sys-shape-corner-extra-small, 4px) + 20px);background-image:none;box-shadow:inset 0 0 0 1px var(--mtrl-sys-color-outline)}m-select:not(:defined)[supporting-text]:not([supporting-text=\"\"])[density=compact],m-select:not(:defined)[maxlength][density=compact]{height:calc(40px + 20px)}m-select:not(:defined)>*{display:none}m-select:not(:defined)::before{content:\" \"}m-split-button:not(:defined){display:inline-flex;vertical-align:middle;align-items:center;position:relative;z-index:0;box-sizing:border-box;height:40px;padding:0 calc(12px + 50px) 0 16px;color:var(--mtrl-sys-color-on-primary);white-space:nowrap;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:14px;line-height:20px;letter-spacing:.1px;font-weight:500}m-split-button:not(:defined)::before,m-split-button:not(:defined)::after{content:\"\";position:absolute;z-index:-1;top:0;bottom:0;background-color:var(--mtrl-sys-color-primary)}m-split-button:not(:defined)::before{left:0;right:50px;border-radius:20px 4px 4px 20px}m-split-button:not(:defined)::after{right:0;width:48px;border-radius:4px 20px 20px 4px}m-split-button:not(:defined)>*{display:none}m-tooltip:not(:defined){display:none}m-toolbar:not(:defined){display:flex;align-items:center;justify-content:space-between;gap:8px;box-sizing:border-box;min-height:64px;padding-inline:16px;background-color:var(--mtrl-sys-color-surface-container)}m-toolbar:not(:defined)[arrangement=center]{justify-content:center;gap:32px}m-toolbar:not(:defined)[variant=floating]{width:fit-content;justify-content:center;gap:4px;padding:8px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px)}m-toolbar:not(:defined)[variant=floating]:not([flat]){box-shadow:0px 1px 2px rgba(0,0,0,.3),0px 1px 3px 1px rgba(0,0,0,.15)}m-toolbar:not(:defined)[variant=floating][orientation=vertical]{flex-direction:column;min-height:0;min-width:64px}m-toolbar:not(:defined)[color=vibrant]{background-color:var(--mtrl-sys-color-primary-container)}m-snackbar:not(:defined){display:none}m-dialog:not(:defined){display:none}m-bottom-sheet:not(:defined){display:none}m-side-sheet:not(:defined){display:none}m-datepicker:not(:defined){display:inline-flex;box-sizing:border-box;width:280px;vertical-align:baseline;white-space:nowrap}m-datepicker:not(:defined)::before{content:attr(label) \" \";white-space:pre;display:inline-block;width:100%;padding-bottom:80px;color:var(--mtrl-sys-color-on-surface);font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:12px;line-height:16px;letter-spacing:.4px;font-weight:400}m-datepicker:not(:defined)>*{display:none}m-timepicker:not(:defined){display:none}m-search:not(:defined){display:flex;align-items:center;box-sizing:border-box;height:56px;padding:0 56px 0 60px;border-radius:var(--mtrl-sys-shape-corner-full, 9999px);background-color:var(--mtrl-sys-color-surface-container-high);color:var(--mtrl-sys-color-on-surface-variant);white-space:nowrap;overflow:hidden;font-family:var(--mtrl-ref-typeface-plain, Roboto, sans-serif);font-size:16px;line-height:24px;letter-spacing:.5px;font-weight:400}m-search:not(:defined)::before{content:attr(placeholder)}m-search:not(:defined)[value]:not([value=\"\"])::before{content:attr(value);color:var(--mtrl-sys-color-on-surface)}m-search:not(:defined)>*{visibility:hidden;display:none}";
|
|
3
3
|
/** The pre-upgrade stylesheet (elements/preupgrade.css) for a tag prefix, default "m". */
|
|
4
4
|
export const preupgradeStyles = (prefix = DEFAULT_PREFIX) => preupgradeSheet(css, [prefix]);
|
|
@@ -1,15 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-progress>`: the linear or circular progress indicator as a custom
|
|
3
|
-
* element.
|
|
4
|
-
*
|
|
5
|
-
* The `value` and `indeterminate` attributes are the initial state; the
|
|
6
|
-
* properties of the same names are the live one. Progress is output, so the
|
|
7
|
-
* element dispatches no events. `aria-label` names what is loading.
|
|
8
|
-
*
|
|
9
|
-
* Parts: `progress`, `canvas`.
|
|
10
|
-
*
|
|
11
|
-
* @module elements
|
|
12
|
-
*/
|
|
13
1
|
import type { ProgressComponent } from "../components/progress/types.js";
|
|
14
2
|
import { type DefineOptions, type ElementInstance } from "./define.js";
|
|
15
3
|
declare const progressSpec: {
|
|
@@ -85,12 +73,9 @@ declare const progressSpec: {
|
|
|
85
73
|
};
|
|
86
74
|
export declare const progressElement: import("./define.js").ElementDefinition<ProgressComponent>;
|
|
87
75
|
export type ProgressSpec = typeof progressSpec;
|
|
88
|
-
/** `<m-progress>` as a ref or a query returns it. */
|
|
89
76
|
export type ProgressElement = ElementInstance<ProgressSpec, ProgressComponent>;
|
|
90
|
-
/** Registers `<m-progress>` (or `<prefix-progress>`). */
|
|
91
77
|
export declare const defineProgress: (options?: DefineOptions) => string;
|
|
92
78
|
declare global {
|
|
93
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
94
79
|
interface HTMLElementTagNameMap {
|
|
95
80
|
"m-progress": ProgressElement;
|
|
96
81
|
}
|
|
@@ -1,18 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-radios>` with `<m-radio>` children: the radio group as a form-associated
|
|
3
|
-
* custom element.
|
|
4
|
-
*
|
|
5
|
-
* Each `<m-radio>` declares one option (`value`, `disabled`, and its text as
|
|
6
|
-
* the label). The group reads them into the factory's config and updates in
|
|
7
|
-
* place when they change; the children stay where the framework put them.
|
|
8
|
-
* `value` on `<m-radios>` is the default selection, which moves the live one
|
|
9
|
-
* until the user or script changes it and which a form reset returns to; the
|
|
10
|
-
* `value` property is the live one.
|
|
11
|
-
*
|
|
12
|
-
* Parts: `radios`, `item`, `input`, `label`, `control`, `circle`, `text`, `ripple`.
|
|
13
|
-
*
|
|
14
|
-
* @module elements
|
|
15
|
-
*/
|
|
16
1
|
import type { RadiosComponent } from "../components/radios/types.js";
|
|
17
2
|
import { type Config, type DefineOptions, type ElementAttributes, type ElementHost, type ElementInstance } from "./define.js";
|
|
18
3
|
declare const radiosSpec: {
|
|
@@ -75,12 +60,7 @@ declare const radiosSpec: {
|
|
|
75
60
|
};
|
|
76
61
|
export declare const radiosElement: import("./define.js").ElementDefinition<RadiosComponent>;
|
|
77
62
|
export type RadiosSpec = typeof radiosSpec;
|
|
78
|
-
/** `<m-radios>` as a ref or a query returns it. */
|
|
79
63
|
export type RadiosElement = ElementInstance<RadiosSpec, RadiosComponent>;
|
|
80
|
-
/**
|
|
81
|
-
* `<m-radio>` declares one radio and renders nothing. Its text content is the
|
|
82
|
-
* label unless `label` is set.
|
|
83
|
-
*/
|
|
84
64
|
export declare const radioDeclaration: {
|
|
85
65
|
readonly name: "radio";
|
|
86
66
|
readonly attributes: {
|
|
@@ -96,10 +76,8 @@ export declare const radioDeclaration: {
|
|
|
96
76
|
};
|
|
97
77
|
};
|
|
98
78
|
export type RadioAttributes = ElementAttributes<typeof radioDeclaration>;
|
|
99
|
-
/** Registers `<m-radios>` and `<m-radio>` (or with another prefix). */
|
|
100
79
|
export declare const defineRadios: (options?: DefineOptions) => string;
|
|
101
80
|
declare global {
|
|
102
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
103
81
|
interface HTMLElementTagNameMap {
|
|
104
82
|
"m-radios": RadiosElement;
|
|
105
83
|
"m-radio": HTMLElement & RadioAttributes;
|
|
@@ -1,57 +1,16 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-search>` with `<m-search-suggestion>` children: the search as a
|
|
3
|
-
* form-associated custom element.
|
|
4
|
-
*
|
|
5
|
-
* Each `<m-search-suggestion>` declares one suggestion: `value`, its text (or
|
|
6
|
-
* `label`), `icon` and `group` (a divider separates groups). The search reads
|
|
7
|
-
* them into the factory's suggestions and redraws the list in place when they
|
|
8
|
-
* change, in one pass per batch of changes: an app replacing them as the user
|
|
9
|
-
* types gets one redraw, and none when they come back the same.
|
|
10
|
-
*
|
|
11
|
-
* The `value` attribute is the default query and the `value` property the
|
|
12
|
-
* live one, as on a native input: the attribute moves the value until the
|
|
13
|
-
* user or script changes it, and a form reset returns to it. The value is
|
|
14
|
-
* submitted under the host's `name`.
|
|
15
|
-
*
|
|
16
|
-
* Events: `input` as the query changes (typing, and the clear button or
|
|
17
|
-
* Escape emptying it), `change` when it is submitted (Enter), `select` when a
|
|
18
|
-
* suggestion is chosen, `open` and `close` as the view opens and closes, and
|
|
19
|
-
* `action` on a click of the trailing icon or the avatar. Enter on a
|
|
20
|
-
* highlighted suggestion is the selection only.
|
|
21
|
-
*
|
|
22
|
-
* The open view is the factory's: in the top layer, docked (a popover over a
|
|
23
|
-
* scrim) or full screen (a modal dialog), inside the element's shadow root.
|
|
24
|
-
* `open` shows it and reflects its state; `show()` and `close()` are its
|
|
25
|
-
* methods, as on `<m-dialog>`. `focus()` focuses the input, which opens the
|
|
26
|
-
* view as a click does.
|
|
27
|
-
*
|
|
28
|
-
* `leading-icon`, `trailing-icon`, `avatar` and their labels have no setter
|
|
29
|
-
* on the search: changing one recreates it, keeping the value.
|
|
30
|
-
*
|
|
31
|
-
* Parts: `search`, `surface`, `container`, `leading-icon`, `input`, `clear-button`, `trailing`,
|
|
32
|
-
* `divider`, `content`, `suggestions`, `status`, among others.
|
|
33
|
-
*
|
|
34
|
-
* @module elements
|
|
35
|
-
*/
|
|
36
1
|
import type { SearchComponent, SearchEvents } from "../components/search/types.js";
|
|
37
2
|
import { type AttributeValue, type Config, type DefineOptions, type ElementAttributes, type ElementInstance } from "./define.js";
|
|
38
|
-
/** The factory's events, and the element's own names for four of them. */
|
|
39
3
|
export interface SearchElementEvents extends SearchEvents {
|
|
40
4
|
change: SearchEvents["submit"];
|
|
41
5
|
select: SearchEvents["suggestionSelect"];
|
|
42
6
|
open: SearchEvents["expand"];
|
|
43
7
|
close: SearchEvents["collapse"];
|
|
44
8
|
}
|
|
45
|
-
/** The search, with the element's events, methods and input. */
|
|
46
9
|
export interface SearchElementComponent extends Omit<SearchComponent, "on" | "off"> {
|
|
47
|
-
/** Subscribes by the element's event names (`open`, `select`…) as well as the factory's. */
|
|
48
10
|
on: <K extends keyof SearchElementEvents>(event: K, handler: SearchElementEvents[K]) => SearchElementComponent;
|
|
49
11
|
off: <K extends keyof SearchElementEvents>(event: K, handler: SearchElementEvents[K]) => SearchElementComponent;
|
|
50
|
-
/** Opens the view. */
|
|
51
12
|
show: () => SearchElementComponent;
|
|
52
|
-
/** Closes the view. */
|
|
53
13
|
close: () => SearchElementComponent;
|
|
54
|
-
/** The combobox. */
|
|
55
14
|
input: HTMLInputElement;
|
|
56
15
|
}
|
|
57
16
|
declare const searchSpec: {
|
|
@@ -107,12 +66,10 @@ declare const searchSpec: {
|
|
|
107
66
|
config: string;
|
|
108
67
|
update: (c: SearchElementComponent, v: AttributeValue) => undefined;
|
|
109
68
|
};
|
|
110
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
|
|
111
69
|
"leading-icon": {
|
|
112
70
|
type: "string";
|
|
113
71
|
config: string;
|
|
114
72
|
};
|
|
115
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
|
|
116
73
|
"trailing-icon": {
|
|
117
74
|
type: "string";
|
|
118
75
|
config: string;
|
|
@@ -121,7 +78,6 @@ declare const searchSpec: {
|
|
|
121
78
|
type: "string";
|
|
122
79
|
config: string;
|
|
123
80
|
};
|
|
124
|
-
/** Markup (HTML), not a person's name or an image URL. Not sanitized by default: see Markup and sanitizing. */
|
|
125
81
|
avatar: {
|
|
126
82
|
type: "string";
|
|
127
83
|
config: string;
|
|
@@ -152,7 +108,11 @@ declare const searchSpec: {
|
|
|
152
108
|
set: (c: SearchElementComponent, value: unknown) => void;
|
|
153
109
|
};
|
|
154
110
|
};
|
|
155
|
-
methods: readonly [
|
|
111
|
+
methods: readonly [
|
|
112
|
+
"show",
|
|
113
|
+
"close",
|
|
114
|
+
"focus"
|
|
115
|
+
];
|
|
156
116
|
model: "value";
|
|
157
117
|
events: {
|
|
158
118
|
input: {
|
|
@@ -198,12 +158,7 @@ declare const searchSpec: {
|
|
|
198
158
|
};
|
|
199
159
|
export declare const searchElement: import("./define.js").ElementDefinition<SearchElementComponent>;
|
|
200
160
|
export type SearchSpec = typeof searchSpec;
|
|
201
|
-
/** `<m-search>` as a ref or a query returns it. */
|
|
202
161
|
export type SearchElement = ElementInstance<SearchSpec, SearchElementComponent>;
|
|
203
|
-
/**
|
|
204
|
-
* `<m-search-suggestion>` declares one suggestion and renders nothing. Its
|
|
205
|
-
* text is the label unless `label` is set; `value` defaults to the label.
|
|
206
|
-
*/
|
|
207
162
|
export declare const searchSuggestionDeclaration: {
|
|
208
163
|
readonly name: "search-suggestion";
|
|
209
164
|
readonly attributes: {
|
|
@@ -213,7 +168,6 @@ export declare const searchSuggestionDeclaration: {
|
|
|
213
168
|
readonly label: {
|
|
214
169
|
readonly type: "string";
|
|
215
170
|
};
|
|
216
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
|
|
217
171
|
readonly icon: {
|
|
218
172
|
readonly type: "string";
|
|
219
173
|
};
|
|
@@ -223,10 +177,8 @@ export declare const searchSuggestionDeclaration: {
|
|
|
223
177
|
};
|
|
224
178
|
};
|
|
225
179
|
export type SearchSuggestionAttributes = ElementAttributes<typeof searchSuggestionDeclaration>;
|
|
226
|
-
/** Registers `<m-search>` and `<m-search-suggestion>` (or with another prefix). */
|
|
227
180
|
export declare const defineSearch: (options?: DefineOptions) => string;
|
|
228
181
|
declare global {
|
|
229
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
230
182
|
interface HTMLElementTagNameMap {
|
|
231
183
|
"m-search": SearchElement;
|
|
232
184
|
"m-search-suggestion": HTMLElement & SearchSuggestionAttributes;
|
|
@@ -1,26 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-select>` with `<m-select-option>` children: the select as a
|
|
3
|
-
* form-associated custom element.
|
|
4
|
-
*
|
|
5
|
-
* Each `<m-select-option>` declares one option: `value`, its text (or
|
|
6
|
-
* `label`), `disabled` and `icon`. The select reads them into the factory's
|
|
7
|
-
* options and updates in place when they change; the children stay where the
|
|
8
|
-
* framework put them.
|
|
9
|
-
*
|
|
10
|
-
* The `value` attribute is the default selection and the `value` property the
|
|
11
|
-
* live one, as on a native select: the attribute moves the value until the
|
|
12
|
-
* user or script changes it, and a form reset returns to it. Choosing an
|
|
13
|
-
* option dispatches `change` with its value. The listbox opens in the top
|
|
14
|
-
* layer (the factory's `layer: "top"`), inside the element's shadow root.
|
|
15
|
-
*
|
|
16
|
-
* `label` has no setter on the select: changing it recreates it, keeping the
|
|
17
|
-
* value. The field is read-only, which takes it out of constraint validation:
|
|
18
|
-
* the element reports `required` itself, as `valueMissing`.
|
|
19
|
-
*
|
|
20
|
-
* Parts: `select`, `text-field`, `field`, `label`, `input`, `trailing-icon`.
|
|
21
|
-
*
|
|
22
|
-
* @module elements
|
|
23
|
-
*/
|
|
24
1
|
import type { SelectComponent } from "../components/select/types.js";
|
|
25
2
|
import { type AttributeValue, type Config, type DefineOptions, type ElementAttributes, type ElementHost, type ElementInstance } from "./define.js";
|
|
26
3
|
declare const selectSpec: {
|
|
@@ -107,12 +84,7 @@ declare const selectSpec: {
|
|
|
107
84
|
};
|
|
108
85
|
export declare const selectElement: import("./define.js").ElementDefinition<SelectComponent>;
|
|
109
86
|
export type SelectSpec = typeof selectSpec;
|
|
110
|
-
/** `<m-select>` as a ref or a query returns it. */
|
|
111
87
|
export type SelectElement = ElementInstance<SelectSpec, SelectComponent>;
|
|
112
|
-
/**
|
|
113
|
-
* `<m-select-option>` declares one option and renders nothing. Its text is
|
|
114
|
-
* the label unless `label` is set.
|
|
115
|
-
*/
|
|
116
88
|
export declare const selectOptionDeclaration: {
|
|
117
89
|
readonly name: "select-option";
|
|
118
90
|
readonly attributes: {
|
|
@@ -122,7 +94,6 @@ export declare const selectOptionDeclaration: {
|
|
|
122
94
|
readonly label: {
|
|
123
95
|
readonly type: "string";
|
|
124
96
|
};
|
|
125
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
|
|
126
97
|
readonly icon: {
|
|
127
98
|
readonly type: "string";
|
|
128
99
|
};
|
|
@@ -132,10 +103,8 @@ export declare const selectOptionDeclaration: {
|
|
|
132
103
|
};
|
|
133
104
|
};
|
|
134
105
|
export type SelectOptionAttributes = ElementAttributes<typeof selectOptionDeclaration>;
|
|
135
|
-
/** Registers `<m-select>` and `<m-select-option>` (or with another prefix). */
|
|
136
106
|
export declare const defineSelect: (options?: DefineOptions) => string;
|
|
137
107
|
declare global {
|
|
138
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
139
108
|
interface HTMLElementTagNameMap {
|
|
140
109
|
"m-select": SelectElement;
|
|
141
110
|
"m-select-option": HTMLElement & SelectOptionAttributes;
|
|
@@ -1,35 +1,13 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-side-sheet>`: the side sheet as a custom element. Its regions are
|
|
3
|
-
* slots: `headline` (the `headline` attribute is its fallback text), which
|
|
4
|
-
* names the sheet, and the default slot, the content. The header's close
|
|
5
|
-
* button is the factory's; `no-close-button` drops it. `position` is `start`
|
|
6
|
-
* or `end` (the default), logical as on the factory, and `width` its width
|
|
7
|
-
* in pixels (256 by default, up to 400).
|
|
8
|
-
*
|
|
9
|
-
* Standard by default, docked beside the page. `modal` makes it the modal
|
|
10
|
-
* sheet in the factory's top layer (`layer: "top"`): a native `<dialog>` in
|
|
11
|
-
* the element's shadow root, shown with `showModal()`, above every z-index,
|
|
12
|
-
* the page outside inert, the scrim its `::backdrop`; Escape and a click on
|
|
13
|
-
* the backdrop close it, unless `no-close-on-scrim-click` or
|
|
14
|
-
* `no-close-on-escape` says otherwise.
|
|
15
|
-
*
|
|
16
|
-
* `open` shows it and reflects its state, as on `<dialog open>`. `show()` and
|
|
17
|
-
* `close()` are its methods, and `open` and `close` are dispatched as it
|
|
18
|
-
* opens and closes (not when the attribute is what changed).
|
|
19
|
-
*
|
|
20
|
-
* Parts: `side-sheet`, `container`, `header`, `title`, `close`, `content`.
|
|
21
|
-
*
|
|
22
|
-
* @module elements
|
|
23
|
-
*/
|
|
24
1
|
import type { SideSheetComponent } from "../components/side-sheet/types.js";
|
|
25
2
|
import { type DefineOptions, type ElementInstance } from "./define.js";
|
|
26
|
-
/** The sheet with the `show()` the element names after `<dialog>`'s. */
|
|
27
3
|
export interface SideSheetElementComponent extends SideSheetComponent {
|
|
28
4
|
show: () => SideSheetComponent;
|
|
29
5
|
}
|
|
30
6
|
declare const sideSheetSpec: {
|
|
31
7
|
name: string;
|
|
32
|
-
slots: readonly [
|
|
8
|
+
slots: readonly [
|
|
9
|
+
"headline"
|
|
10
|
+
];
|
|
33
11
|
create: (config: import("./define.js").Config) => SideSheetElementComponent;
|
|
34
12
|
styles: string[];
|
|
35
13
|
hostStyles: string;
|
|
@@ -72,7 +50,10 @@ declare const sideSheetSpec: {
|
|
|
72
50
|
update: (c: SideSheetElementComponent, _v: import("./define.js").AttributeValue, host: HTMLElement) => void;
|
|
73
51
|
};
|
|
74
52
|
};
|
|
75
|
-
methods: readonly [
|
|
53
|
+
methods: readonly [
|
|
54
|
+
"show",
|
|
55
|
+
"close"
|
|
56
|
+
];
|
|
76
57
|
events: {
|
|
77
58
|
open: {
|
|
78
59
|
detail: () => null;
|
|
@@ -87,12 +68,9 @@ declare const sideSheetSpec: {
|
|
|
87
68
|
};
|
|
88
69
|
export declare const sideSheetElement: import("./define.js").ElementDefinition<SideSheetElementComponent>;
|
|
89
70
|
export type SideSheetSpec = typeof sideSheetSpec;
|
|
90
|
-
/** `<m-side-sheet>` as a ref or a query returns it. */
|
|
91
71
|
export type SideSheetElement = ElementInstance<SideSheetSpec, SideSheetElementComponent>;
|
|
92
|
-
/** Registers `<m-side-sheet>` (or `<prefix-side-sheet>`). */
|
|
93
72
|
export declare const defineSideSheet: (options?: DefineOptions) => string;
|
|
94
73
|
declare global {
|
|
95
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
96
74
|
interface HTMLElementTagNameMap {
|
|
97
75
|
"m-side-sheet": SideSheetElement;
|
|
98
76
|
}
|
|
@@ -1,18 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-slider>`: the slider as a form-associated custom element.
|
|
3
|
-
*
|
|
4
|
-
* The `value` attribute is the default and the `value` property the live one,
|
|
5
|
-
* as on a native range input: the attribute moves the value until the user or
|
|
6
|
-
* script changes it. `range` adds a second handle, whose `second-value` and
|
|
7
|
-
* `secondValue` work the same way. `input` fires while the
|
|
8
|
-
* value moves and `change` when an interaction ends. `aria-label` names the
|
|
9
|
-
* handles.
|
|
10
|
-
*
|
|
11
|
-
* Parts: `slider`, `container`, `track`, `handle`, `value`, `visual`, `segment`, `ticks`, `dot`,
|
|
12
|
-
* `inset-icon`.
|
|
13
|
-
*
|
|
14
|
-
* @module elements
|
|
15
|
-
*/
|
|
16
1
|
import type { SliderComponent } from "../components/slider/types.js";
|
|
17
2
|
import { type DefineOptions, type ElementInstance } from "./define.js";
|
|
18
3
|
declare const sliderSpec: {
|
|
@@ -95,7 +80,6 @@ declare const sliderSpec: {
|
|
|
95
80
|
type: "string";
|
|
96
81
|
config: string;
|
|
97
82
|
};
|
|
98
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
|
|
99
83
|
icon: {
|
|
100
84
|
type: "string";
|
|
101
85
|
config: string;
|
|
@@ -104,13 +88,11 @@ declare const sliderSpec: {
|
|
|
104
88
|
type: "string";
|
|
105
89
|
config: string;
|
|
106
90
|
};
|
|
107
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. Shown at size M, L or XL. */
|
|
108
91
|
"inset-icon": {
|
|
109
92
|
type: "string";
|
|
110
93
|
config: string;
|
|
111
94
|
update: (c: SliderComponent, _v: import("./define.js").AttributeValue, host: HTMLElement) => undefined;
|
|
112
95
|
};
|
|
113
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. Replaces `inset-icon` while the value is at the minimum. */
|
|
114
96
|
"inset-icon-at-min": {
|
|
115
97
|
type: "string";
|
|
116
98
|
config: string;
|
|
@@ -133,7 +115,9 @@ declare const sliderSpec: {
|
|
|
133
115
|
};
|
|
134
116
|
};
|
|
135
117
|
model: "value";
|
|
136
|
-
defaults: readonly [
|
|
118
|
+
defaults: readonly [
|
|
119
|
+
"secondValue"
|
|
120
|
+
];
|
|
137
121
|
events: {
|
|
138
122
|
input: {
|
|
139
123
|
detail: (payload: unknown) => {
|
|
@@ -159,12 +143,9 @@ declare const sliderSpec: {
|
|
|
159
143
|
};
|
|
160
144
|
export declare const sliderElement: import("./define.js").ElementDefinition<SliderComponent>;
|
|
161
145
|
export type SliderSpec = typeof sliderSpec;
|
|
162
|
-
/** `<m-slider>` as a ref or a query returns it. */
|
|
163
146
|
export type SliderElement = ElementInstance<SliderSpec, SliderComponent>;
|
|
164
|
-
/** Registers `<m-slider>` (or `<prefix-slider>`). */
|
|
165
147
|
export declare const defineSlider: (options?: DefineOptions) => string;
|
|
166
148
|
declare global {
|
|
167
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
168
149
|
interface HTMLElementTagNameMap {
|
|
169
150
|
"m-slider": SliderElement;
|
|
170
151
|
}
|
|
@@ -1,27 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-snackbar>`: a snackbar, in the top layer.
|
|
3
|
-
*
|
|
4
|
-
* The message is the `message` attribute, or the element's text when there
|
|
5
|
-
* is none; it is read rather than slotted, since the snackbar may open inside
|
|
6
|
-
* a modal dialog, away from the host. `action` is the action button's label,
|
|
7
|
-
* `dismissible` adds the close icon, and `duration` is `short`, `long`,
|
|
8
|
-
* `indefinite` or milliseconds (0 for indefinite). The snackbar opens with
|
|
9
|
-
* `show()` or by setting `open`, and dispatches `open`, `action` and `close`
|
|
10
|
-
* (once per close, its `detail.reason` saying why).
|
|
11
|
-
*
|
|
12
|
-
* Snackbars share the factory's queue, elements and factories alike: one
|
|
13
|
-
* shows at a time, the others wait their turn in the order they were shown.
|
|
14
|
-
* `open` is true from `show()` on, while it waits too; the `open` event comes
|
|
15
|
-
* when it is on screen. `queue-behavior="replace"` dismisses the one on screen
|
|
16
|
-
* (its `close` gives `reason: "queue"`) and drops the waiting ones instead.
|
|
17
|
-
*
|
|
18
|
-
* The surface stays in the element's shadow root and opens in the top layer
|
|
19
|
-
* (`layer: "top"`), above modal dialogs.
|
|
20
|
-
*
|
|
21
|
-
* Parts: `snackbar`, `text`.
|
|
22
|
-
*
|
|
23
|
-
* @module elements
|
|
24
|
-
*/
|
|
25
1
|
import type { SnackbarComponent } from "../components/snackbar/types.js";
|
|
26
2
|
import { type DefineOptions, type ElementInstance } from "./define.js";
|
|
27
3
|
declare const snackbarSpec: {
|
|
@@ -68,7 +44,10 @@ declare const snackbarSpec: {
|
|
|
68
44
|
set: (c: SnackbarComponent, v: unknown) => undefined;
|
|
69
45
|
};
|
|
70
46
|
};
|
|
71
|
-
methods: readonly [
|
|
47
|
+
methods: readonly [
|
|
48
|
+
"show",
|
|
49
|
+
"hide"
|
|
50
|
+
];
|
|
72
51
|
events: {
|
|
73
52
|
open: {
|
|
74
53
|
detail: () => null;
|
|
@@ -94,12 +73,9 @@ declare const snackbarSpec: {
|
|
|
94
73
|
};
|
|
95
74
|
export declare const snackbarElement: import("./define.js").ElementDefinition<SnackbarComponent>;
|
|
96
75
|
export type SnackbarSpec = typeof snackbarSpec;
|
|
97
|
-
/** `<m-snackbar>` as a ref or a query returns it. */
|
|
98
76
|
export type SnackbarElement = ElementInstance<SnackbarSpec, SnackbarComponent>;
|
|
99
|
-
/** Registers `<m-snackbar>` (or `<prefix-snackbar>`). */
|
|
100
77
|
export declare const defineSnackbar: (options?: DefineOptions) => string;
|
|
101
78
|
declare global {
|
|
102
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
103
79
|
interface HTMLElementTagNameMap {
|
|
104
80
|
"m-snackbar": SnackbarElement;
|
|
105
81
|
}
|
|
@@ -1,33 +1,7 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<m-split-button>` with `<m-menu-item>` children.
|
|
3
|
-
*
|
|
4
|
-
* The element's text (or `label`) is the leading button's label, and each
|
|
5
|
-
* `<m-menu-item>` child declares one item of the menu the trailing button
|
|
6
|
-
* opens, as in `<m-menu>`. The items are the factory's own menu items, so the
|
|
7
|
-
* menu item declaration is shared rather than a split-button one. The menu
|
|
8
|
-
* opens in the top layer (the factory's `layer: "top"`), inside the element's
|
|
9
|
-
* shadow root.
|
|
10
|
-
*
|
|
11
|
-
* `click` is the native one, for the leading action only: a click on the
|
|
12
|
-
* trailing button or in the menu stops at the shadow root. `open` and `close`
|
|
13
|
-
* are dispatched as the menu opens and closes, and `select` with the item's
|
|
14
|
-
* value when one is chosen.
|
|
15
|
-
*
|
|
16
|
-
* The factory creates its menu only when it has items: going from no items
|
|
17
|
-
* to some, or back, recreates it. `variant`, `size`, `trailing-label` and
|
|
18
|
-
* `group-label` have no setter and recreate it too.
|
|
19
|
-
*
|
|
20
|
-
* Parts: `split-button`, `button`, `leading`, `trailing`, `text`, `icon`, `chevron`, `ripple`.
|
|
21
|
-
*
|
|
22
|
-
* @module elements
|
|
23
|
-
*/
|
|
24
1
|
import type { SplitButtonComponent, SplitButtonEvent, SplitButtonEventType } from "../components/split-button/types.js";
|
|
25
2
|
import { type Config, type DefineOptions, type ElementInstance } from "./define.js";
|
|
26
|
-
/** The factory's events, and the element's own names for two of them. */
|
|
27
3
|
export type SplitButtonElementEventType = SplitButtonEventType | "open" | "close";
|
|
28
|
-
/** The split button, with the element's events. */
|
|
29
4
|
export interface SplitButtonElementComponent extends Omit<SplitButtonComponent, "on" | "off"> {
|
|
30
|
-
/** Subscribes by the element's event names (`open`, `close`) as well as the factory's. */
|
|
31
5
|
on: (event: SplitButtonElementEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonElementComponent;
|
|
32
6
|
off: (event: SplitButtonElementEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonElementComponent;
|
|
33
7
|
}
|
|
@@ -42,7 +16,6 @@ declare const splitButtonSpec: {
|
|
|
42
16
|
type: "string";
|
|
43
17
|
update: (c: SplitButtonElementComponent, _v: import("./define.js").AttributeValue, host: HTMLElement) => undefined;
|
|
44
18
|
};
|
|
45
|
-
/** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
|
|
46
19
|
icon: {
|
|
47
20
|
type: "string";
|
|
48
21
|
config: string;
|
|
@@ -96,12 +69,9 @@ declare const splitButtonSpec: {
|
|
|
96
69
|
};
|
|
97
70
|
export declare const splitButtonElement: import("./define.js").ElementDefinition<SplitButtonElementComponent>;
|
|
98
71
|
export type SplitButtonSpec = typeof splitButtonSpec;
|
|
99
|
-
/** `<m-split-button>` as a ref or a query returns it. */
|
|
100
72
|
export type SplitButtonElement = ElementInstance<SplitButtonSpec, SplitButtonElementComponent>;
|
|
101
|
-
/** Registers `<m-split-button>` and `<m-menu-item>` (or with another prefix). */
|
|
102
73
|
export declare const defineSplitButton: (options?: DefineOptions) => string;
|
|
103
74
|
declare global {
|
|
104
|
-
/** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
|
|
105
75
|
interface HTMLElementTagNameMap {
|
|
106
76
|
"m-split-button": SplitButtonElement;
|
|
107
77
|
}
|