monphind-ui/dist/page.js

A reactive component library built on top of the Web Components API

import { useElement } from "./core/element";
const name = 'm-page';
const style = `
:host::-webkit-scrollbar {
    display: none;
}
:host::selection {
    background-color: var(--m-selection-backgroundColor);
    color: var(--m-selection-textColor);
}
:host:not(:defined){
    display: none;
}
:host{
    display: block;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--m-backgroundColor);
    color: var(--m-textColor);
    --m-theme-color: ${"#2EA2F9"};
    --m-translucency-theme-color: ${"#2ea1f9d6"};
    --m-selection-backgroundColor: var(--m-translucency-theme-color);
    --m-selection-textColor: ${"white"};
    --m-backgroundColor: ${"#f6f6f6"};
    --m-textColor: ${"black"};
    --m-button-default-textColor: ${"black"};
    --m-button-default-backgroundColor: ${"white"};
    --m-button-default-hover-boxShadowColor: ${"rgba(70,70,70,0.237)"};
    --m-button-default-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-button-default-active-backgroundColor: var(--m-theme-color);
    --m-button-default-active-textColor: ${"white"};
    --m-button-default-disabled-backgroundColor: ${"#EFEFEF"};
    --m-button-default-disabled-textColor: ${"#BABABA"};
    --m-button-outlined-textColor: var(--m-theme-color);
    --m-button-outlined-borderColor: var(--m-theme-color);
    --m-button-outlined-hover-backgroundColor: var(--m-theme-color);
    --m-button-outlined-hover-textColor: ${"white"};
    --m-button-outlined-disabled-borderColor: ${"#EFEFEF"};
    --m-button-outlined-disabled-textColor: ${"#BABABA"};
    --m-button-text-textColor: ${"black"};
    --m-button-text-hover-backgroundColor: ${"#EFEFEF"};
    --m-button-text-active-backgroundColor: var(--m-theme-color);
    --m-button-filled-backgroundColor: var(--m-theme-color);
    --m-button-filled-textColor: ${"white"};
    --m-button-filled-disabled-backgroundColor: ${"#EFEFEF"};
    --m-button-filled-disabled-textColor: ${"#BABABA"};
    --m-icon-button-default-backgroundColor: ${"white"};
    --m-icon-button-default-hover-boxShadowColor: ${"rgba(70,70,70,0.237)"};
    --m-icon-button-default-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-icon-button-default-active-backgroundColor: var(--m-theme-color);
    --m-icon-button-default-active-textColor: ${"white"};
    --m-icon-button-default-disabled-backgroundColor: ${"#EFEFEF"};
    --m-icon-button-default-disabled-textColor: ${"#BABABA"};
    --m-icon-button-outlined-borderColor: var(--m-theme-color);
    --m-icon-button-outlined-hover-backgroundColor: var(--m-theme-color);
    --m-icon-button-outlined-hover-textColor: ${"white"};
    --m-icon-button-outlined-disabled-borderColor: ${"#EFEFEF"};
    --m-icon-button-outlined-disabled-textColor: ${"#BABABA"};
    --m-icon-button-outlined-color: var(--m-theme-color);
    --m-icon-button-text-hover-backgroundColor: ${"#EFEFEF"};
    --m-icon-button-text-active-backgroundColor: var(--m-theme-color);
    --m-icon-button-filled-backgroundColor: var(--m-theme-color);
    --m-icon-button-filled-textColor: ${"white"};
    --m-icon-button-filled-disabled-backgroundColor: ${"#EFEFEF"};
    --m-icon-button-filled-disabled-textColor: ${"#BABABA"};
    --m-fab-backgroundColor: ${"white"};
    --m-fab-hover-boxShadowColor: ${"rgba(70,70,70,0.237)"};
    --m-fab-hover-backgroundColor: ${"rgb(247,247,247)"};
    --m-fab-active-backgroundColor: var(--m-theme-color);
    --m-fab-active-color: ${"white"};
    --m-fab-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-fab-disabled-backgroundColor: ${"#EFEFEF"};
    --m-fab-disabled-textColor: ${"#BABABA"};
    --m-checkbox-borderColor: ${"black"};
    --m-checkbox-checked-color: var(--m-theme-color);
    --m-checkbox-checked-svg-color: ${"white"};
    --m-checkbox-disabled-color: ${"#BABABA"};
    --m-checkbox-checked-indeterminate-color: ${"rgb(131,130,130)"};
    --m-radio-borderColor: ${"black"};
    --m-radio-checked-color: var(--m-theme-color);
    --m-radio-disabled-color: ${"#BABABA"};
    --m-slider-backgroundColor: ${"#EFEFEF"};
    --m-slider-slider-backgroundColor: var(--m-theme-color);
    --m-slider-hiddenlabel-color: ${"gray"};
    --m-slider-label-color: ${"rgb(255,255,255)"};
    --m-segmented-button-backgroundColor: ${"white"};
    --m-segmented-button-slider-backgroundColor: var(--m-theme-color);
    --m-segmented-button-slider-hover-boxShadowColor: var(--m-translucency-theme-color);
    --m-segmented-button-item-hover-backgroundColor: ${"#F2F2F2"};
    --m-segmented-button-item-active-backgroundColor: ${"#e2e2e2"};
    --m-linear-progress-thumb-color: ${"#EFEFEF"};
    --m-linear-progress-value-color: var(--m-theme-color);
    --m-circular-progress-fillColor: var(--m-theme-color);
    --m-switch-trigger-backgroundColor: ${"white"};
    --m-switch-checked-backgroundColor: var(--m-theme-color);
    --m-switch-checked-foreColor: var(--m-theme-color);
    --m-switch-backgroundColor: ${"#EFEFEF"};
    --m-switch-disabled-backgroundColor: ${"#EBEBEB"};
    --m-switch-disabled-trigger-foreColor: ${"white"};
    --m-switch-disabled-trigger-backgroundColor: ${"#BABABA"};
    --m-input-backgroundColor: ${"white"};
    --m-input-selection-backgroundColor: var(--m-selection-backgroundColor);
    --m-input-selection-textColor: var(--m-selection-textColor);
    --m-input-default-label-color: ${"rgb(178,178,178)"};
    --m-input-focused-label-color: var(--m-theme-color);
    --m-input-focused-icon-color: var(--m-theme-color);
    --m-input-focused-outline-color: var(--m-translucency-theme-color);
    --m-input-disabled-label-color: ${"rgb(178,178,178)"};
    --m-input-disabled-backgroundColor: ${"#EFEFEF"};
    --m-input-disabled-color: ${"rgb(178,178,178)"};
    --m-input-readonly-color: ${"rgb(178,178,178)"};
    --m-input-error-outline-color: ${"rgba(255,0,0,0.507)"};
    --m-input-error-label-color: ${"rgba(255,0,0,0.507)"};
    --m-input-textColor:${"black"};
    --m-textarea-default-backgroundColor:${"white"};
    --m-textarea-textColor:${"black"};
    --m-textarea-default-label-color: ${"rgb(178,178,178)"};
    --m-textarea-focused-label-color: var(--m-theme-color);
    --m-textarea-focused-outline-color: var(--m-translucency-theme-color);
    --m-textarea-disabled-backgroundColor: ${"#EFEFEF"};
    --m-textarea-disabled-label-color: ${"rgb(178,178,178)"};
    --m-textarea-readonly-color: ${"rgb(178,178,178)"};
    --m-textarea-error-outline-color: ${"rgba(255,0,0,0.507)"};
    --m-textarea-error-label-color: ${"rgba(255,0,0,0.507)"};
    --m-picker-default-view-backgroundColor: ${"white"};
    --m-picker-default-label-color: ${"rgb(178,178,178)"};
    --m-picker-default-text-color: ${"black"};
    --m-picker-default-icon-color: ${"black"};
    --m-picker-focused-label-color: var(--m-theme-color);
    --m-picker-focused-outline-color: var(--m-translucency-theme-color);
    --m-picker-default-options-backgroundColor: ${"white"};
    --m-picker-default-options-boxShadow-color: ${"rgba(89,89,89,0.122)"};
    --m-picker-item-backgroundColor: ${"white"};
    --m-picker-item-color: ${"black"};
    --m-picker-item-selected-backgroundColor: var(--m-theme-color);
    --m-picker-item-selected-color: ${"white"};
    --m-picker-item-disabled-backgroundColor: ${"white"};
    --m-picker-item-disabled-color: ${"gray"};
    --m-picker-disabled-view-backgroundColor: ${"#EFEFEF"};
    --m-picker-disabled-view-color: ${"#BABABA"};
    --m-dark-theme-color: ${"#0076d1"};
    --m-dark-translucency-theme-color: ${"#0069b9d6"};
    --m-dark-selection-backgroundColor: var(--m-translucency-theme-color);
    --m-dark-selection-textColor: ${"white"};
    --m-dark-backgroundColor: ${"#171717"};
    --m-dark-textColor: ${"rgb(255,255,255)"};
    --m-dark-button-default-textColor: ${"rgb(255,255,255)"};
    --m-dark-button-default-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-button-default-hover-boxShadowColor: ${"rgba(70,70,70,0)"};
    --m-dark-button-default-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-dark-button-default-active-backgroundColor: var(--m-theme-color);
    --m-dark-button-default-active-textColor: ${"white"};
    --m-dark-button-default-disabled-backgroundColor: ${"#242424"};
    --m-dark-button-default-disabled-textColor: ${"#BABABA"};
    --m-dark-button-outlined-textColor: var(--m-theme-color);
    --m-dark-button-outlined-borderColor: var(--m-theme-color);
    --m-dark-button-outlined-hover-backgroundColor: var(--m-theme-color);
    --m-dark-button-outlined-hover-textColor: ${"white"};
    --m-dark-button-outlined-disabled-borderColor: ${"#242424"};
    --m-dark-button-outlined-disabled-textColor: ${"#242424"};
    --m-dark-button-text-textColor: ${"rgb(255,255,255)"};
    --m-dark-button-text-hover-backgroundColor: ${"#1b1b1b"};
    --m-dark-button-text-active-backgroundColor: var(--m-theme-color);
    --m-dark-button-filled-backgroundColor: var(--m-theme-color);
    --m-dark-button-filled-textColor: ${"white"};
    --m-dark-button-filled-disabled-backgroundColor: ${"#242424"};
    --m-dark-button-filled-disabled-textColor: ${"#BABABA"};
    --m-dark-icon-button-default-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-icon-button-default-hover-boxShadowColor: ${"rgba(70,70,70,0)"};
    --m-dark-icon-button-default-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-dark-icon-button-default-active-backgroundColor: var(--m-theme-color);
    --m-dark-icon-button-default-active-textColor: ${"white"};
    --m-dark-icon-button-default-disabled-backgroundColor: ${"#242424"};
    --m-dark-icon-button-default-disabled-textColor: ${"#BABABA"};
    --m-dark-icon-button-outlined-borderColor: var(--m-theme-color);
    --m-dark-icon-button-outlined-hover-backgroundColor: var(--m-theme-color);
    --m-dark-icon-button-outlined-hover-textColor: ${"white"};
    --m-dark-icon-button-outlined-disabled-borderColor: ${"#242424"};
    --m-dark-icon-button-outlined-disabled-textColor: ${"#242424"};
    --m-dark-icon-button-outlined-color: var(--m-theme-color);
    --m-dark-icon-button-text-hover-backgroundColor: ${"#1b1b1b"};
    --m-dark-icon-button-text-active-backgroundColor: var(--m-theme-color);
    --m-dark-icon-button-filled-backgroundColor: var(--m-theme-color);
    --m-dark-icon-button-filled-textColor: ${"white"};
    --m-dark-icon-button-filled-disabled-backgroundColor: ${"#242424"};
    --m-dark-icon-button-filled-disabled-textColor: ${"#BABABA"};
    --m-dark-fab-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-fab-hover-boxShadowColor: ${"rgba(70,70,70,0)"};
    --m-dark-fab-hover-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-fab-active-backgroundColor: var(--m-theme-color);
    --m-dark-fab-active-color: ${"white"};
    --m-dark-fab-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-dark-fab-disabled-backgroundColor: ${"#242424"};
    --m-dark-fab-disabled-textColor: ${"#BABABA"};
    --m-dark-checkbox-borderColor: ${"rgb(255,255,255)"};
    --m-dark-checkbox-checked-color: var(--m-theme-color);
    --m-dark-checkbox-checked-svg-color: ${"white"};
    --m-dark-checkbox-disabled-color: ${"#242424"};
    --m-dark-checkbox-checked-indeterminate-color: ${"rgb(87,87,87)"};
    --m-dark-radio-borderColor: ${"rgb(255,255,255)"};
    --m-dark-radio-checked-color: var(--m-theme-color);
    --m-dark-radio-disabled-color: ${"#BABABA"};
    --m-dark-slider-backgroundColor: ${"#000000"};
    --m-dark-slider-slider-backgroundColor: var(--m-theme-color);
    --m-dark-slider-hiddenlabel-color: ${"gray"};
    --m-dark-slider-label-color: ${"rgb(255,255,255)"};
    --m-dark-segmented-button-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-segmented-button-slider-backgroundColor: var(--m-theme-color);
    --m-dark-segmented-button-slider-hover-boxShadowColor: var(--m-translucency-theme-color);
    --m-dark-segmented-button-item-hover-backgroundColor: ${"#111111"};
    --m-dark-segmented-button-item-active-backgroundColor: ${"#1a1a1a"};
    --m-dark-linear-progress-thumb-color: ${"#000000"};
    --m-dark-linear-progress-value-color: var(--m-theme-color);
    --m-dark-circular-progress-fillColor: var(--m-theme-color);
    --m-dark-switch-trigger-backgroundColor: ${"rgb(255,255,255)"};
    --m-dark-switch-checked-backgroundColor: var(--m-theme-color);
    --m-dark-switch-checked-foreColor: var(--m-theme-color);
    --m-dark-switch-backgroundColor: ${"#3b3b3b"};
    --m-dark-switch-disabled-backgroundColor: ${"#242424"};
    --m-dark-switch-disabled-trigger-foreColor: ${"white"};
    --m-dark-switch-disabled-trigger-backgroundColor: ${"#7c7c7c"};
    --m-dark-input-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-input-selection-backgroundColor: var(--m-selection-backgroundColor);
    --m-dark-input-selection-textColor: var(--m-selection-textColor);
    --m-dark-input-default-label-color: ${"rgb(178,178,178)"};
    --m-dark-input-focused-label-color: var(--m-theme-color);
    --m-dark-input-focused-icon-color: var(--m-theme-color);
    --m-dark-input-focused-outline-color: var(--m-translucency-theme-color);
    --m-dark-input-disabled-label-color: ${"rgb(178,178,178)"};
    --m-dark-input-disabled-backgroundColor: ${"#121212"};
    --m-dark-input-disabled-color: ${"rgb(178,178,178)"};
    --m-dark-input-readonly-color: ${"rgb(178,178,178)"};
    --m-dark-input-error-outline-color: ${"rgba(255,0,0,0.507)"};
    --m-dark-input-error-label-color: ${"rgba(255,0,0,0.507)"};
    --m-dark-input-textColor:${"white"};
    --m-dark-textarea-default-backgroundColor:${"rgb(0,0,0)"};
    --m-dark-textarea-textColor:${"white"};
    --m-dark-textarea-default-label-color: ${"rgb(178,178,178)"};
    --m-dark-textarea-focused-label-color: var(--m-theme-color);
    --m-dark-textarea-focused-outline-color: var(--m-translucency-theme-color);
    --m-dark-textarea-disabled-backgroundColor: ${"#121212"};
    --m-dark-textarea-disabled-label-color: ${"rgb(178,178,178)"};
    --m-dark-textarea-readonly-color: ${"rgb(178,178,178)"};
    --m-dark-textarea-error-outline-color: ${"rgba(255,0,0,0.507)"};
    --m-dark-textarea-error-label-color: ${"rgba(255,0,0,0.507)"};
    --m-dark-picker-default-view-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-picker-default-label-color: ${"rgb(178,178,178)"};
    --m-dark-picker-default-text-color: ${"rgb(255,255,255)"};
    --m-dark-picker-default-icon-color: ${"rgb(255,255,255)"};
    --m-dark-picker-focused-label-color: var(--m-theme-color);
    --m-dark-picker-focused-outline-color: var(--m-translucency-theme-color);
    --m-dark-picker-default-options-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-picker-default-options-boxShadow-color: ${"rgba(89,89,89,0)"};
    --m-dark-picker-item-backgroundColor: ${"rgb(0,0,0)"};
    --m-dark-picker-item-color: ${"rgb(255,255,255)"};
    --m-dark-picker-item-selected-backgroundColor: var(--m-theme-color);
    --m-dark-picker-item-selected-color: ${"white"};
    --m-dark-picker-item-disabled-backgroundColor: ${"#121212"};
    --m-dark-picker-item-disabled-color: ${"gray"};
    --m-dark-picker-disabled-view-backgroundColor: ${"#121212"};
    --m-dark-picker-disabled-view-color: ${"#BABABA"};
}

:host([theme=night]){
    --m-theme-color: var(--m-dark-theme-color);
    --m-translucency-theme-color: var(--m-dark-translucency-theme-color);
    --m-selection-backgroundColor: var(--m-translucency-theme-color);
    --m-selection-textColor: var(--m-dark-selection-textColor);
    --m-backgroundColor: var(--m-dark-backgroundColor);
    --m-textColor: var(--m-dark-textColor);
    --m-button-default-textColor: var(--m-dark-button-default-textColor);
    --m-button-default-backgroundColor: var(--m-dark-button-default-backgroundColor);
    --m-button-default-hover-boxShadowColor: var(--m-dark-button-default-hover-boxShadowColor);
    --m-button-default-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-button-default-active-backgroundColor: var(--m-theme-color);
    --m-button-default-active-textColor: var(--m-dark-button-default-active-textColor);
    --m-button-default-disabled-backgroundColor: var(--m-dark-button-default-disabled-backgroundColor);
    --m-button-default-disabled-textColor: var(--m-dark-button-default-disabled-textColor);
    --m-button-outlined-textColor: var(--m-theme-color);
    --m-button-outlined-borderColor: var(--m-theme-color);
    --m-button-outlined-hover-backgroundColor: var(--m-theme-color);
    --m-button-outlined-hover-textColor: var(--m-dark-button-outlined-hover-textColor);
    --m-button-outlined-disabled-borderColor: var(--m-dark-button-outlined-disabled-borderColor);
    --m-button-outlined-disabled-textColor: var(--m-dark-button-outlined-disabled-textColor);
    --m-button-text-textColor: var(--m-dark-button-text-textColor);
    --m-button-text-hover-backgroundColor: var(--m-dark-button-text-hover-backgroundColor);
    --m-button-text-active-backgroundColor: var(--m-theme-color);
    --m-button-filled-backgroundColor: var(--m-theme-color);
    --m-button-filled-textColor: var(--m-dark-button-filled-textColor);
    --m-button-filled-disabled-backgroundColor: var(--m-dark-button-filled-disabled-backgroundColor);
    --m-button-filled-disabled-textColor: var(--m-dark-button-filled-disabled-textColor);
    --m-icon-button-default-backgroundColor: var(--m-dark-icon-button-default-backgroundColor);
    --m-icon-button-default-hover-boxShadowColor: var(--m-dark-icon-button-default-hover-boxShadowColor);
    --m-icon-button-default-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-icon-button-default-active-backgroundColor: var(--m-theme-color);
    --m-icon-button-default-active-textColor: var(--m-dark-icon-button-default-active-textColor);
    --m-icon-button-default-disabled-backgroundColor: var(--m-dark-icon-button-default-disabled-backgroundColor);
    --m-icon-button-default-disabled-textColor: var(--m-dark-icon-button-default-disabled-textColor);
    --m-icon-button-outlined-borderColor: var(--m-theme-color);
    --m-icon-button-outlined-hover-backgroundColor: var(--m-theme-color);
    --m-icon-button-outlined-hover-textColor: var(--m-dark-icon-button-outlined-hover-textColor);
    --m-icon-button-outlined-disabled-borderColor: var(--m-dark-icon-button-outlined-disabled-borderColor);
    --m-icon-button-outlined-disabled-textColor: var(--m-dark-icon-button-outlined-disabled-textColor);
    --m-icon-button-outlined-color: var(--m-theme-color);
    --m-icon-button-text-hover-backgroundColor: var(--m-dark-icon-button-text-hover-backgroundColor);
    --m-icon-button-text-active-backgroundColor: var(--m-theme-color);
    --m-icon-button-filled-backgroundColor: var(--m-theme-color);
    --m-icon-button-filled-textColor: var(--m-dark-icon-button-filled-textColor);
    --m-icon-button-filled-disabled-backgroundColor: var(--m-dark-icon-button-filled-disabled-backgroundColor);
    --m-icon-button-filled-disabled-textColor: var(--m-dark-icon-button-filled-disabled-textColor);
    --m-fab-backgroundColor: var(--m-dark-fab-backgroundColor);
    --m-fab-hover-boxShadowColor: var(--m-dark-fab-hover-boxShadowColor);
    --m-fab-hover-backgroundColor: var(--m-dark-fab-hover-backgroundColor);
    --m-fab-active-backgroundColor: var(--m-theme-color);
    --m-fab-active-color: var(--m-dark-fab-active-color);
    --m-fab-active-boxShadowColor: var(--m-translucency-theme-color);
    --m-fab-disabled-backgroundColor: var(--m-dark-fab-disabled-backgroundColor);
    --m-fab-disabled-textColor: var(--m-dark-fab-disabled-textColor);
    --m-checkbox-borderColor: var(--m-dark-checkbox-borderColor);
    --m-checkbox-checked-color: var(--m-theme-color);
    --m-checkbox-checked-svg-color: var(--m-dark-checkbox-checked-svg-color);
    --m-checkbox-disabled-color: var(--m-dark-checkbox-disabled-color);
    --m-checkbox-checked-indeterminate-color: var(--m-dark-checkbox-checked-indeterminate-color);
    --m-radio-borderColor: var(--m-dark-radio-borderColor);
    --m-radio-checked-color: var(--m-theme-color);
    --m-radio-disabled-color: var(--m-dark-radio-disabled-color);
    --m-slider-backgroundColor: var(--m-dark-slider-backgroundColor);
    --m-slider-slider-backgroundColor: var(--m-theme-color);
    --m-slider-hiddenlabel-color: var(--m-dark-slider-hiddenlabel-color);
    --m-slider-label-color: var(--m-dark-slider-label-color);
    --m-segmented-button-backgroundColor: var(--m-dark-segmented-button-backgroundColor);
    --m-segmented-button-slider-backgroundColor: var(--m-theme-color);
    --m-segmented-button-slider-hover-boxShadowColor: var(--m-translucency-theme-color);
    --m-segmented-button-item-hover-backgroundColor: var(--m-dark-segmented-button-item-hover-backgroundColor);
    --m-segmented-button-item-active-backgroundColor: var(--m-dark-segmented-button-item-active-backgroundColor);
    --m-linear-progress-thumb-color: var(--m-dark-linear-progress-thumb-color);
    --m-linear-progress-value-color: var(--m-theme-color);
    --m-circular-progress-fillColor: var(--m-theme-color);
    --m-switch-trigger-backgroundColor: var(--m-dark-switch-trigger-backgroundColor);
    --m-switch-checked-backgroundColor: var(--m-theme-color);
    --m-switch-checked-foreColor: var(--m-theme-color);
    --m-switch-backgroundColor: var(--m-dark-switch-backgroundColor);
    --m-switch-disabled-backgroundColor: var(--m-dark-switch-disabled-backgroundColor);
    --m-switch-disabled-trigger-foreColor: var(--m-dark-switch-disabled-trigger-foreColor);
    --m-switch-disabled-trigger-backgroundColor: var(--m-dark-switch-disabled-trigger-backgroundColor);
    --m-input-backgroundColor: var(--m-dark-input-backgroundColor);
    --m-input-selection-backgroundColor: var(--m-selection-backgroundColor);
    --m-input-selection-textColor: var(--m-selection-textColor);
    --m-input-default-label-color: var(--m-dark-input-default-label-color);
    --m-input-focused-label-color: var(--m-theme-color);
    --m-input-focused-icon-color: var(--m-theme-color);
    --m-input-focused-outline-color: var(--m-translucency-theme-color);
    --m-input-disabled-label-color: var(--m-dark-input-disabled-label-color);
    --m-input-disabled-backgroundColor: var(--m-dark-input-disabled-backgroundColor);
    --m-input-disabled-color: var(--m-dark-input-disabled-color);
    --m-input-readonly-color: var(--m-dark-input-readonly-color);
    --m-input-error-outline-color: var(--m-dark-input-error-outline-color);
    --m-input-error-label-color: var(--m-dark-input-error-label-color);
    --m-input-textColor: var(--m-dark-input-textColor);
    --m-textarea-default-backgroundColor: var(--m-dark-textarea-default-backgroundColor);
    --m-textarea-textColor: var(--m-dark-textarea-textColor);
    --m-textarea-default-label-color: var(--m-dark-textarea-default-label-color);
    --m-textarea-focused-label-color: var(--m-theme-color);
    --m-textarea-focused-outline-color: var(--m-translucency-theme-color);
    --m-textarea-disabled-backgroundColor: var(--m-dark-textarea-disabled-backgroundColor);
    --m-textarea-disabled-label-color: var(--m-dark-textarea-disabled-label-color);
    --m-textarea-readonly-color: var(--m-dark-textarea-readonly-color);
    --m-textarea-error-outline-color: var(--m-dark-textarea-error-outline-color);
    --m-textarea-error-label-color: var(--m-dark-textarea-error-label-color);
    --m-picker-default-view-backgroundColor: var(--m-dark-picker-default-view-backgroundColor);
    --m-picker-default-label-color: var(--m-dark-picker-default-label-color);
    --m-picker-default-text-color: var(--m-dark-picker-default-text-color);
    --m-picker-default-icon-color: var(--m-dark-picker-default-icon-color);
    --m-picker-focused-label-color: var(--m-theme-color);
    --m-picker-focused-outline-color: var(--m-translucency-theme-color);
    --m-picker-default-options-backgroundColor: var(--m-dark-picker-default-options-backgroundColor);
    --m-picker-default-options-boxShadow-color: var(--m-dark-picker-default-options-boxShadow-color);
    --m-picker-item-backgroundColor: var(--m-dark-picker-item-backgroundColor);
    --m-picker-item-color: var(--m-dark-picker-item-color);
    --m-picker-item-selected-backgroundColor: var(--m-theme-color);
    --m-picker-item-selected-color: var(--m-dark-picker-item-selected-color);
    --m-picker-item-disabled-backgroundColor: var(--m-dark-picker-item-disabled-backgroundColor);
    --m-picker-item-disabled-color: var(--m-dark-picker-item-disabled-color);
    --m-picker-disabled-view-backgroundColor: var(--m-dark-picker-disabled-view-backgroundColor);
    --m-picker-disabled-view-color: var(--m-dark-picker-disabled-view-color);
}
`;
const template = `<slot></slot>`;
const props = {
    theme: "light"
};
export class Page extends useElement({
    name,
    style,
    template,
    props,
    syncProps: ["theme"]
}) {
}
Page.defineElement();
import 'vue';