npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 - Mend

wabtec-internal-volt-basic-components 1.0.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.

Files changed (1131) hide show

package/dist/esm/vds-radio-button.entry.js ADDED Viewed

@@ -0,0 +1,142 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DTZC-zXo.js';
+import { g as getIconSize } from './icon-attr.utils-C1rbpvgj.js';
+import { c as combineClasses } from './combine-classes-B23UkaEC.js';
+const vdsRadioButtonCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap\");:root{font-family:\"Roboto Flex\", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-black:#000000;--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:inline-block}:host input{outline:none;border:0;appearance:none;margin:0;padding:0}:host label{cursor:pointer}:host .vds-radio-button__container{display:flex;align-items:center;cursor:pointer;box-sizing:content-box;border:var(--spacing-01) solid transparent;appearance:none}:host .vds-radio-button__container .radio-button-label::part(label){cursor:pointer}:host .vds-radio-button__container .vds-radio-button{display:flex}:host .vds-radio-button__container:focus-within{outline:none;border-radius:var(--spacing-02);border:var(--spacing-01) solid var(--color-border-brand)}:host .vds-radio-button__container.vds-radio-button__container--label-alignment-start{flex-direction:row-reverse}:host .vds-radio-button__container.vds-radio-button__container--label-alignment-end{flex-direction:row}:host .vds-radio-button__container.vds-radio-button__container--size-medium{gap:var(--spacing-03);padding:calc(var(--spacing-03) - 0.125rem)}:host .vds-radio-button__container.vds-radio-button__container--size-large{gap:var(--spacing-04);padding:calc(var(--spacing-04) - 0.125rem)}:host .vds-radio-button__container.vds-radio-button--error .radio-button-icon::part(svg-icon){color:var(--color-icon-danger);fill:var(--color-icon-danger)}:host .vds-radio-button__container.vds-radio-button--disabled{pointer-events:none}:host .vds-radio-button__container.vds-radio-button--disabled .radio-button-icon::part(svg-icon){color:var(--color-icon-general);fill:var(--color-icon-general)}:host-context(.vds-radio-button--disabled){pointer-events:none}";
+const VdsRadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.check = createEvent(this, "check");
+        this.radioCheck = createEvent(this, "radioCheck");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        /** Defines the size of the radio */
+        this.size = "medium";
+        /** Sets the radio in checked state */
+        this.checked = false;
+        /** Sets the radio in disabled state */
+        this.disabled = false;
+        /** Sets the radio in error state */
+        this.error = false;
+        /** Aligns the label in relation to the radio-button*/
+        this.labelAlignment = "end";
+        this.state = "unchecked";
+    }
+    componentWillRender() {
+        this.setRadioState();
+    }
+    componentDidLoad() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.checked.toString());
+        }
+    }
+    /**
+     * Executes every time checked value changes.
+     * Sets form value in order to work properly with native forms
+     *
+     * @returns void
+     */
+    setCheckedStates() {
+        if (this.internals && !!this.internals.setFormValue) {
+            this.internals.setFormValue(this.checked.toString());
+        }
+    }
+    /**
+     * Executes every time the radio-button is being click.
+     *
+     * @param event - MouseEvent
+     * @returns void
+     */
+    handleClick(_) {
+        if (!this.disabled) {
+            this.checked = true;
+            this.emitValues();
+        }
+    }
+    /**
+    * Toggles radio-button value.
+    * When parameter is not provided, if true get set to false. When false get set to true.
+    * Emits check event with checked value.
+    *
+    * @param checked - Boolean (Optional)
+    * @returns Promise<void>
+    */
+    toggleCheck(checked = undefined) {
+        if (!this.disabled) {
+            this.checked = checked === undefined ? !this.checked : checked;
+            this.emitValues();
+        }
+        return Promise.resolve();
+    }
+    /**
+     * Emits event values when radio button state changed.
+     * Emits check event with checked prop.
+     * Emits input event with value prop.
+     *
+     * @returns void
+     */
+    emitValues() {
+        const inputEvent = new InputEvent("input");
+        this.value = this.value ? this.value : this.checked.toString();
+        this.check.emit(this.checked);
+        this.radioCheck.emit({
+            checked: this.checked,
+            value: this.value,
+            element: this.hostEl
+        });
+        this.hostEl.dispatchEvent(inputEvent);
+    }
+    /**
+     * Determine state of the radio based on the checked property.
+     * When checked is true, state is checked.
+     * When checked is false, state is unchecked.
+     *
+     * @returns void
+     */
+    setRadioState() {
+        this.state = this.checked ? "checked" : "unchecked";
+    }
+    /**
+     * Returns the icon prop based on the state and calculate the size.
+     *
+     * @returns HTMLStencilElement
+     */
+    renderRadioButton() {
+        const size = getIconSize(this.size);
+        switch (this.state) {
+            case "checked":
+                return h("vds-icon", { class: "radio-button-icon radio-button-icon-checked", svgIcon: `radio-checked`, size: size });
+            default:
+                return h("vds-icon", { class: "radio-button-icon", svgIcon: `radio-unchecked`, size: size });
+        }
+    }
+    /**
+    * Returns the vds-label for the radio-button when there is a label provided.
+    *
+    * @returns HTMLStencilElement
+    */
+    renderLabel() {
+        return h("vds-label", { class: "radio-button-label", labelValue: this.labelValue, size: this.size, disabled: this.disabled });
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '301fe21bdd8c41ac010dee0dc79421494ce21ddf', state: this.state, class: this.disabled ? "vds-radio-button--disabled" : "" }, h("div", { key: '314329a23fb040bfc155b4e5212e6a0b706030fe', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-radio-button__container", `vds-radio-button__container--size-${this.size}`, `vds-radio-button__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-radio-button--checked" : "", this.disabled ? "vds-radio-button--disabled" : "", this.error ? "vds-radio-button--error" : "") }, h("div", { key: '8943a2759b06f8d02ad2ee42e4fffb30d2024b36', class: "vds-radio-button" }, h("input", { key: 'de670feeedf20951f7e337eb2e5a5296a38cf63a', type: "radio", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderRadioButton()), this.labelValue && this.renderLabel())));
+    }
+    static get formAssociated() { return true; }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["setCheckedStates"]
+    }; }
+};
+VdsRadioButton.style = vdsRadioButtonCss;
+export { VdsRadioButton as vds_radio_button };
+//# sourceMappingURL=vds-radio-button.entry.js.map
+//# sourceMappingURL=vds-radio-button.entry.js.map

package/dist/esm/vds-radio-button.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-radio-button.entry.js","sources":["src/components/radio-button/vds-radio-button.scss?tag=vds-radio-button&encapsulation=shadow","src/components/radio-button/vds-radio-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n input {\n outline: none;\n border: 0;\n appearance: none;\n margin: 0;\n padding: 0;\n }\n label {\n cursor: pointer;\n }\n\n .vds-radio-button__container {\n display: flex;\n align-items: center;\n cursor: pointer;\n box-sizing: content-box;\n border: var(--spacing-01) solid transparent;\n appearance: none;\n\n .radio-button-label::part(label) {\n cursor: pointer;\n }\n\n .vds-radio-button {\n display: flex;\n }\n \n &:focus-within {\n outline: none;\n border-radius: var(--spacing-02);\n border: var(--spacing-01) solid var(--color-border-brand);\n }\n\n &.vds-radio-button__container--label-alignment-start {\n flex-direction: row-reverse;\n }\n\n &.vds-radio-button__container--label-alignment-end {\n flex-direction: row;\n }\n\n &.vds-radio-button__container--size-medium {\n gap: var(--spacing-03);\n padding: calc(var(--spacing-03) - 0.125rem);\n }\n &.vds-radio-button__container--size-large {\n gap: var(--spacing-04);\n padding: calc(var(--spacing-04) - 0.125rem);\n }\n\n &.vds-radio-button--error {\n .radio-button-icon::part(svg-icon) {\n color: var(--color-icon-danger);\n fill: var(--color-icon-danger);\n }\n }\n &.vds-radio-button--disabled {\n pointer-events: none;\n .radio-button-icon::part(svg-icon) {\n color: var(--color-icon-general);\n fill: var(--color-icon-general);\n }\n }\n }\n} \n\n:host-context(.vds-radio-button--disabled) {\n pointer-events: none;\n}","import { Component, Host, Prop, h, Element, AttachInternals, EventEmitter, Event, Watch, Method } from '@stencil/core';\nimport { getIconSize } from '../../utils/icon-attr.utils';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { RadioButtonChecked } from './vds-radio-button.utils';\n\n@Component({\n tag: 'vds-radio-button',\n styleUrl: 'vds-radio-button.scss',\n shadow: true,\n formAssociated: true\n})\nexport class VdsRadioButton {\n\n /** Defines the size of the radio */ \n @Prop({ mutable: true, reflect: true }) size: \"large\" | \"medium\" = \"medium\";\n /** Sets the radio in checked state */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n /** Sets the radio in disabled state */\n @Prop({ mutable: true }) disabled: boolean = false;\n /** Sets the radio in error state */\n @Prop({ mutable: true, reflect: true }) error: boolean = false;\n /** It’s useful for identifying in a radio group */\n @Prop({ mutable: true, reflect: true }) value: string;\n /** Aligns the label in relation to the radio-button*/\n @Prop() labelAlignment: \"start\" | \"end\" = \"end\";\n /** Sets the text to be shown in the radio-button */\n @Prop({ reflect: true, mutable: true }) labelValue: string;\n\n @Element() hostEl: HTMLElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /** Makes a custom change to target property using checked (use for React components) */\n @Event() check: EventEmitter<boolean>;\n /** Emits radio button checked value */\n @Event() radioCheck: EventEmitter<RadioButtonChecked>;\n\n private state: \"checked\" | \"unchecked\" = \"unchecked\";\n\n componentWillRender(): void {\n this.setRadioState();\n }\n\n componentDidLoad(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /**\n * Executes every time checked value changes.\n * Sets form value in order to work properly with native forms\n *\n * @returns void\n */\n @Watch(\"checked\")\n setCheckedStates(): void {\n if (this.internals && !!this.internals.setFormValue) {\n this.internals.setFormValue(this.checked.toString());\n }\n }\n\n /**\n * Executes every time the radio-button is being click.\n *\n * @param event - MouseEvent\n * @returns void\n */\n\thandleClick(_: MouseEvent): void {\n if (!this.disabled) {\n this.checked = true;\n this.emitValues();\n }\n\t}\n\n /**\n * Toggles radio-button value. \n * When parameter is not provided, if true get set to false. When false get set to true.\n * Emits check event with checked value.\n *\n * @param checked - Boolean (Optional)\n * @returns Promise<void>\n */\n @Method()\n toggleCheck(checked: boolean = undefined): Promise<void> {\n if (!this.disabled) {\n\t\t\tthis.checked = checked === undefined ? !this.checked : checked;\n this.emitValues()\n\t\t}\n return Promise.resolve();\n }\n\n /**\n * Emits event values when radio button state changed.\n * Emits check event with checked prop.\n * Emits input event with value prop.\n *\n * @returns void\n */\n private emitValues(): void {\n const inputEvent = new InputEvent(\"input\");\n this.value = this.value ? this.value : this.checked.toString();\n this.check.emit(this.checked);\n this.radioCheck.emit({\n checked: this.checked,\n value: this.value,\n element: this.hostEl as HTMLVdsRadioButtonElement\n });\n this.hostEl.dispatchEvent(inputEvent);\n }\n\n /**\n * Determine state of the radio based on the checked property.\n * When checked is true, state is checked.\n * When checked is false, state is unchecked.\n *\n * @returns void\n */\n private setRadioState(): void {\n this.state = this.checked ? \"checked\" : \"unchecked\";\n }\n\n /**\n * Returns the icon prop based on the state and calculate the size.\n *\n * @returns HTMLStencilElement\n */\n private renderRadioButton(): HTMLStencilElement {\n const size = getIconSize(this.size);\n switch(this.state) {\n case \"checked\":\n return <vds-icon class=\"radio-button-icon radio-button-icon-checked\" svgIcon={`radio-checked`} size={size}></vds-icon>;\n default:\n return <vds-icon class=\"radio-button-icon\" svgIcon={`radio-unchecked`} size={size}></vds-icon>;\n }\n }\n\n /**\n * Returns the vds-label for the radio-button when there is a label provided.\n *\n * @returns HTMLStencilElement\n */\n private renderLabel(): HTMLStencilElement {\n return <vds-label\n class={\"radio-button-label\"}\n labelValue={this.labelValue}\n size={this.size}\n disabled={this.disabled}></vds-label>\n }\n\n render() {\n return (\n <Host state={this.state} class={this.disabled ? \"vds-radio-button--disabled\" : \"\"}>\n <div\n onClick={(evt): void => {this.handleClick(evt)}}\n class={combineClasses(\n \"vds-radio-button__container\",\n `vds-radio-button__container--size-${this.size}`,\n `vds-radio-button__container--label-alignment-${this.labelAlignment}`,\n this.checked ? \"vds-radio-button--checked\" : \"\",\n this.disabled ? \"vds-radio-button--disabled\" : \"\",\n this.error ? \"vds-radio-button--error\" : \"\"\n )}\n >\n <div class=\"vds-radio-button\">\n <input\n type={\"radio\"}\n checked={this.checked}\n value={this.value}\n id={this.hostEl?.id}\n disabled={this.disabled} />\n {this.renderRadioButton()}\n </div>\n {this.labelValue && this.renderLabel()}\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,wqgCAAwqgC;;MCYrrgC,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;;;AAS0C,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;;AAEnC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAEvC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEV,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAItD,QAAA,IAAc,CAAA,cAAA,GAAoB,KAAK;AAavC,QAAA,IAAK,CAAA,KAAA,GAA4B,WAAW;AA6IrD;IA3IC,mBAAmB,GAAA;QACjB,IAAI,CAAC,aAAa,EAAE;;IAGtB,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;;;AAIxD;;;;;AAKG;IAEH,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACnD,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;;;AAIxD;;;;;AAKG;AACJ,IAAA,WAAW,CAAC,CAAa,EAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,UAAU,EAAE;;;AAIpB;;;;;;;AAOE;IAEH,WAAW,CAAC,UAAmB,SAAS,EAAA;AACtC,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,OAAO,KAAK,SAAS,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,OAAO;YAC3D,IAAI,CAAC,UAAU,EAAE;;AAEnB,QAAA,OAAO,OAAO,CAAC,OAAO,EAAE;;AAG1B;;;;;;AAMG;IACK,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC;QAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;QAC9D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAC7B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC;;AAGvC;;;;;;AAMG;IACK,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW;;AAGrD;;;;AAIG;IACK,iBAAiB,GAAA;QACvB,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,QAAO,IAAI,CAAC,KAAK;AACf,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,6CAA6C,EAAC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,GAAa;AACxH,YAAA;AACE,gBAAA,OAAO,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAa;;;AAInG;;;;AAIE;IACK,WAAW,GAAA;AACjB,QAAA,OAAO,CAAA,CAAA,WAAA,EAAA,EACL,KAAK,EAAE,oBAAoB,EAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAc;;IAGzC,MAAM,GAAA;;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,4BAA4B,GAAG,EAAE,EAAA,EAC/E,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,CAAC,GAAG,KAAY,EAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAA,EAAC,EAC/C,KAAK,EAAE,cAAc,CACnB,6BAA6B,EAC7B,qCAAqC,IAAI,CAAC,IAAI,CAAE,CAAA,EAChD,gDAAgD,IAAI,CAAC,cAAc,CAAA,CAAE,EACrE,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,EAAE,EAC/C,IAAI,CAAC,QAAQ,GAAG,4BAA4B,GAAG,EAAE,EACjD,IAAI,CAAC,KAAK,GAAG,yBAAyB,GAAG,EAAE,CAC5C,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,EAAE,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAI,CAAA,EAC5B,IAAI,CAAC,iBAAiB,EAAE,CACrB,EACL,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAClC,CACD;;;;;;;;;;;;"}

package/dist/esm/vds-segmented-button.entry.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DTZC-zXo.js';
+import { c as combineClasses } from './combine-classes-B23UkaEC.js';
+const vdsSegmentedButtonCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap\");:root{font-family:\"Roboto Flex\", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-black:#000000;--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{display:block;width:fit-content;--vds-segmented-button-background:var(--transparent, transparent);--vds-segmented-button-border:var(--radius-medium);--vds-segmented-button-text-color:var(--color-link-default);--vds-segmented-button-icon-color:var(--color-icon-brand-default);--vds-segmented-button-disabled-background:var(--transparent, transparent);--vds-segmented-button-disabled-border:var(--radius-medium);--vds-segmented-button-disabled-text-color:var(--color-text-disabled);--vds-segmented-button-disabled-icon-color:var(--color-icon-disabled);--vds-segmented-button-active-background:var(--color-interaction-brand-lower);--vds-segmented-button-active-border:var(--radius-medium);--vds-segmented-button-active-text-color:var(--color-link-press);--vds-segmented-button-active-icon-color:var(--color-icon-brand-press);--vds-segmented-button-hover-background:var(--color-interaction-brand-lowest);--vds-segmented-button-hover-border:var(--radius-medium);--vds-segmented-button-hover-text-color:var(--color-link-hover);--vds-segmented-button-hover-icon-color:var(--color-icon-brand-hover);--vds-segmented-button-focus-background:transparent;--vds-segmented-button-focus-border:var(--radius-medium);--vds-segmented-button-focus-text-color:var(--color-link-default);--vds-segmented-button-focus-icon-color:var(--color-icon-brand-default)}:host button{border:none;box-sizing:border-box;box-shadow:none;cursor:pointer}:host .vds-segmented-button{border:none;box-sizing:border-box;box-shadow:none;width:fit-content;background:var(--vds-segmented-button-background);height:var(--spacing-08);display:flex;padding:var(--spacing-02) var(--spacing-03);justify-content:center;align-items:center;gap:var(--spacing-02);border-radius:var(--vds-segmented-button-border)}:host .vds-segmented-button .vds-segmented-button__text{color:var(--vds-segmented-button-text-color);font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal;text-align:center;font-feature-settings:\"liga\" off, \"clig\" off}:host .vds-segmented-button .vds-segmented-button__informative-icon,:host .vds-segmented-button ::slotted(vds-icon){color:var(--vds-segmented-button-icon-color);fill:var(--vds-segmented-button-icon-color)}:host .vds-segmented-button:hover{background-color:var(--vds-segmented-button-hover-background);border-radius:var(--vds-segmented-button-hover-border)}:host .vds-segmented-button:hover .vds-segmented-button__text{color:var(--vds-segmented-button-hover-text-color)}:host .vds-segmented-button:hover .vds-segmented-button__informative-icon,:host .vds-segmented-button:hover ::slotted(vds-icon){color:var(--vds-segmented-button-hover-icon-color);fill:var(--vds-segmented-button-hover-icon-color)}:host .vds-segmented-button:focus-visible{background-color:var(--vds-segmented-button-focus-background);border-radius:var(--vds-segmented-button-focus-border);outline:0.125rem solid var(--color-border-focus-2);outline-offset:0.125rem}:host .vds-segmented-button:focus-visible .vds-segmented-button__text{color:var(--vds-segmented-button-focus-text-color)}:host .vds-segmented-button:focus-visible .vds-segmented-button__informative-icon,:host .vds-segmented-button:focus-visible ::slotted(vds-icon){color:var(--vds-segmented-button-focus-icon-color);fill:var(--vds-segmented-button-focus-icon-color)}:host .vds-segmented-button.vds-segmented-button--active{background-color:var(--vds-segmented-button-active-background);border-radius:var(--vds-segmented-button-active-border)}:host .vds-segmented-button.vds-segmented-button--active .vds-segmented-button__text{color:var(--vds-segmented-button-active-text-color)}:host .vds-segmented-button.vds-segmented-button--active .vds-segmented-button__informative-icon,:host .vds-segmented-button.vds-segmented-button--active ::slotted(vds-icon){color:var(--vds-segmented-button-active-icon-color);fill:var(--vds-segmented-button-active-icon-color)}:host .vds-segmented-button.vds-segmented-button--disabled{pointer-events:none;background-color:var(--vds-segmented-button-disabled-background);border-radius:var(--vds-segmented-button-disabled-border)}:host .vds-segmented-button.vds-segmented-button--disabled .vds-segmented-button__text{color:var(--vds-segmented-button-disabled-text-color)}:host .vds-segmented-button.vds-segmented-button--disabled .vds-segmented-button__informative-icon,:host .vds-segmented-button.vds-segmented-button--disabled ::slotted(vds-icon){color:var(--vds-segmented-button-disabled-icon-color);fill:var(--vds-segmented-button-disabled-icon-color)}:host(.vds-segmented-button--full-width){width:100%}:host(.vds-segmented-button--full-width) .vds-segmented-button{width:100%}:host(.vds-segmented-button--disabled){pointer-events:none}";
+const VdsSegmentedButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.segmentedButtonClicked = createEvent(this, "segmentedButtonClicked");
+        this.selected = createEvent(this, "selected");
+        this.deselected = createEvent(this, "deselected");
+        /** Sets the segment button in active state */
+        this.isActive = false;
+        /** When is-active is true, shows checkmark */
+        this.hasCheckmark = false;
+        /** Set the segmented-button to disabled state */
+        this.disabled = false;
+        /** Allows the component to be adaptable to the container available horizontal space */
+        this.fullWidth = false;
+    }
+    setActiveProp() {
+        if (this.isActive) {
+            this.selected.emit();
+        }
+        else {
+            this.deselected.emit();
+        }
+    }
+    handleClick(evt) {
+        evt.preventDefault();
+        this.segmentedButtonClicked.emit({
+            value: this.value,
+            selected: this.isActive
+        });
+    }
+    generateInformativeIcon() {
+        return (h("vds-icon", { class: "vds-segmented-button__informative-icon", "svg-icon": this.isActive && this.hasCheckmark ? "good" : this.informativeIcon, size: "1.25rem", alt: this.value }));
+    }
+    render() {
+        return (h(Host, { key: '667325f36f9bba31175f0a52c36a33c42981ec77', class: combineClasses(this.disabled ? "vds-segmented-button--disabled" : "", this.fullWidth ? "vds-segmented-button--full-width" : "") }, h("button", { key: 'c25d9d7e9db5b638d01bc0f2bb70ca44ce2726f6', class: combineClasses("vds-segmented-button", this.disabled ? "vds-segmented-button--disabled" : "", this.isActive ? "vds-segmented-button--active" : ""), title: this.value, disabled: this.disabled, onClick: (evt) => this.handleClick(evt) }, (this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon(), h("span", { key: '50258b210cb86e63c866f1daba637c929f6a77be', class: "vds-segmented-button__text" }, h("slot", { key: '14997013726895ef2d96694845f5beac14381e8d' })))));
+    }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "isActive": ["setActiveProp"]
+    }; }
+};
+VdsSegmentedButton.style = vdsSegmentedButtonCss;
+export { VdsSegmentedButton as vds_segmented_button };
+//# sourceMappingURL=vds-segmented-button.entry.js.map
+//# sourceMappingURL=vds-segmented-button.entry.js.map

package/dist/esm/vds-segmented-button.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-segmented-button.entry.js","sources":["src/components/segmented-button/vds-segmented-button.scss?tag=vds-segmented-button&encapsulation=shadow","src/components/segmented-button/vds-segmented-button.tsx"],"sourcesContent":[":host {\n display: block;\n width: fit-content;\n\n --vds-segmented-button-background: var(--transparent, transparent);\n --vds-segmented-button-border: var(--radius-medium);\n --vds-segmented-button-text-color: var(--color-link-default);\n --vds-segmented-button-icon-color: var(--color-icon-brand-default);\n\n --vds-segmented-button-disabled-background: var(--transparent, transparent);\n --vds-segmented-button-disabled-border: var(--radius-medium);\n --vds-segmented-button-disabled-text-color: var(--color-text-disabled);\n --vds-segmented-button-disabled-icon-color: var(--color-icon-disabled);\n\n --vds-segmented-button-active-background: var(--color-interaction-brand-lower);\n --vds-segmented-button-active-border: var(--radius-medium);\n --vds-segmented-button-active-text-color: var(--color-link-press);\n --vds-segmented-button-active-icon-color: var(--color-icon-brand-press);\n\n --vds-segmented-button-hover-background: var(--color-interaction-brand-lowest);\n --vds-segmented-button-hover-border: var(--radius-medium);\n --vds-segmented-button-hover-text-color: var(--color-link-hover);\n --vds-segmented-button-hover-icon-color: var(--color-icon-brand-hover);\n\n --vds-segmented-button-focus-background: transparent;\n --vds-segmented-button-focus-border: var(--radius-medium);\n --vds-segmented-button-focus-text-color: var(--color-link-default);\n --vds-segmented-button-focus-icon-color: var(--color-icon-brand-default);\n\n button {\n border: none;\n box-sizing: border-box;\n box-shadow: none;\n cursor: pointer;\n }\n .vds-segmented-button {\n border: none;\n box-sizing: border-box;\n box-shadow: none;\n width: fit-content;\n \n background: var(--vds-segmented-button-background);\n height: var(--spacing-08);\n\n display: flex;\n padding: var(--spacing-02) var(--spacing-03);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-02);\n\n border-radius: var(--vds-segmented-button-border);\n\n .vds-segmented-button__text {\n color: var(--vds-segmented-button-text-color);\n @include font-style(title, small);\n text-align: center;\n font-feature-settings: 'liga' off, 'clig' off;\n }\n\n .vds-segmented-button__informative-icon,\n ::slotted(vds-icon) {\n color: var(--vds-segmented-button-icon-color);\n fill: var(--vds-segmented-button-icon-color);\n }\n\n &:hover {\n background-color: var(--vds-segmented-button-hover-background);\n border-radius: var(--vds-segmented-button-hover-border);\n .vds-segmented-button__text {\n color: var(--vds-segmented-button-hover-text-color);\n }\n .vds-segmented-button__informative-icon,\n ::slotted(vds-icon) {\n color: var(--vds-segmented-button-hover-icon-color);\n fill: var(--vds-segmented-button-hover-icon-color);\n }\n }\n\n &:focus-visible {\n background-color: var(--vds-segmented-button-focus-background);\n border-radius: var(--vds-segmented-button-focus-border);\n outline: 0.125rem solid var(--color-border-focus-2);\n outline-offset: 0.125rem;\n .vds-segmented-button__text {\n color: var(--vds-segmented-button-focus-text-color);\n }\n .vds-segmented-button__informative-icon,\n ::slotted(vds-icon) {\n color: var(--vds-segmented-button-focus-icon-color);\n fill: var(--vds-segmented-button-focus-icon-color);\n }\n }\n\n &.vds-segmented-button--active {\n background-color: var(--vds-segmented-button-active-background);\n border-radius: var(--vds-segmented-button-active-border);\n .vds-segmented-button__text {\n color: var(--vds-segmented-button-active-text-color);\n }\n .vds-segmented-button__informative-icon,\n ::slotted(vds-icon) {\n color: var(--vds-segmented-button-active-icon-color);\n fill: var(--vds-segmented-button-active-icon-color);\n }\n }\n\n &.vds-segmented-button--disabled {\n pointer-events: none;\n background-color: var(--vds-segmented-button-disabled-background);\n border-radius: var(--vds-segmented-button-disabled-border);\n .vds-segmented-button__text {\n color: var(--vds-segmented-button-disabled-text-color);\n }\n .vds-segmented-button__informative-icon,\n ::slotted(vds-icon) {\n color: var(--vds-segmented-button-disabled-icon-color);\n fill: var(--vds-segmented-button-disabled-icon-color);\n }\n }\n }\n}\n\n:host(.vds-segmented-button--full-width) {\n width: 100%;\n .vds-segmented-button {\n width: 100%;\n }\n}\n\n:host(.vds-segmented-button--disabled) {\n pointer-events: none;\n}\n","import { Component, Host, Prop, h, Event, EventEmitter, Element, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'vds-segmented-button',\n styleUrl: 'vds-segmented-button.scss',\n shadow: true,\n})\nexport class VdsSegmentedButton {\n /** Sets the icon at the left of the segment button */\n @Prop() informativeIcon: string\n /** Sets the segment button in active state */\n @Prop({ reflect: true }) isActive: boolean = false;\n /** When is-active is true, shows checkmark */\n @Prop() hasCheckmark: boolean = false;\n /** Set the segmented-button to disabled state */\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Set the segmented-button value */\n @Prop({ reflect: true }) value: string;\n /** Allows the component to be adaptable to the container available horizontal space */\n @Prop() fullWidth: boolean = false\n\n /** Emits event when item gets clicked */\n @Event() segmentedButtonClicked: EventEmitter<{ value: string, selected: boolean }>;\n /** Emits event when item is selected */\n @Event() selected: EventEmitter<void>;\n /** Emits event when item is deselected */\n @Event() deselected: EventEmitter<void>;\n\n @Element() hostEl: HTMLElement;\n\n @Watch(\"isActive\")\n setActiveProp(): void {\n if (this.isActive) {\n this.selected.emit();\n } else {\n this.deselected.emit();\n }\n }\n\n handleClick(evt: MouseEvent): void {\n evt.preventDefault();\n\n this.segmentedButtonClicked.emit({\n value: this.value,\n selected: this.isActive\n })\n }\n\n generateInformativeIcon(): HTMLStencilElement {\n return (\n <vds-icon\n class={\"vds-segmented-button__informative-icon\"}\n svg-icon={this.isActive && this.hasCheckmark ? \"good\" : this.informativeIcon}\n size={\"1.25rem\"}\n alt={this.value}\n />\n )\n }\n\n render() {\n return (\n <Host\n class={combineClasses(\n this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n this.fullWidth ? \"vds-segmented-button--full-width\" : \"\",\n )}\n >\n <button\n class={combineClasses(\n \"vds-segmented-button\",\n this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n this.isActive ? \"vds-segmented-button--active\" : \"\",\n )}\n title={this.value}\n disabled={this.disabled}\n onClick={(evt): void => this.handleClick(evt)}\n >\n {(this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon()}\n <span class={\"vds-segmented-button__text\"}>{<slot></slot>}</span>\n </button>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,qBAAqB,GAAG,8ymCAA8ymC;;MCS/zmC,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;AAS2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAE1C,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAEZ,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAI1C,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAgEnC;IApDC,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;aACf;AACL,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;;AAI1B,IAAA,WAAW,CAAC,GAAe,EAAA;QACzB,GAAG,CAAC,cAAc,EAAE;AAEpB,QAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC;AAChB,SAAA,CAAC;;IAGJ,uBAAuB,GAAA;AACrB,QAAA,QACE,CAAA,CAAA,UAAA,EAAA,EACE,KAAK,EAAE,wCAAwC,EACrC,UAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,IAAI,CAAC,eAAe,EAC5E,IAAI,EAAE,SAAS,EACf,GAAG,EAAE,IAAI,CAAC,KAAK,EAAA,CACf;;IAIN,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,cAAc,CACnB,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EACrD,IAAI,CAAC,SAAS,GAAG,kCAAkC,GAAG,EAAE,CACzD,EAAA,EAED,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,CACnB,sBAAsB,EACtB,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EACrD,IAAI,CAAC,QAAQ,GAAG,8BAA8B,GAAG,EAAE,CACpD,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,GAAG,KAAW,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAA,EAE5C,CAAC,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC,uBAAuB,EAAE,EACjG,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,4BAA4B,EAAA,EAAG,8DAAa,CAAQ,CAC1D,CACJ;;;;;;;;;;;"}

package/dist/esm/vds-sheet.entry.js ADDED Viewed

@@ -0,0 +1,150 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DTZC-zXo.js';
+import { c as combineClasses } from './combine-classes-B23UkaEC.js';
+const vdsSheetCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap\");:root{font-family:\"Roboto Flex\", sans-serif, sans-serif;box-sizing:border-box}:root body{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-light{--color-background-disabled:rgba(33, 49, 66, 0.3215686275);--color-background-brand-default:#007DBA;--color-background-brand-hover:#056CA0;--color-background-brand-press:#095B87;--color-background-caution-default:#D0A60B;--color-background-caution-lowest-default:#FFF9E5;--color-background-caution-lowest-hover:#FEF3CC;--color-background-caution-lowest-press:#FEE899;--color-background-danger-default:#F34336;--color-background-danger-high-default:#F34336;--color-background-danger-high-hover:#C83E38;--color-background-danger-high-press:#9D3A3A;--color-background-danger-lowest-default:#FEECEB;--color-background-danger-lowest-hover:#FCD9D6;--color-background-danger-lowest-press:#FAB3AE;--color-background-general-default:#8F9295;--color-background-general-lowest-default:#f7f7f7;--color-background-general-lowest-hover:#EEEEEE;--color-background-general-lowest-press:#DEDEDE;--color-background-healthy-default:#7FAE1B;--color-background-healthy-lowest-default:#F2F7E8;--color-background-healthy-lowest-hover:#E5EED1;--color-background-healthy-lowest-press:#CBDEA3;--color-background-information-default:#056CA0;--color-background-information-lowest-default:#E6F2F8;--color-background-information-lowest-hover:#CCE5F1;--color-background-information-lowest-press:#99CBE3;--color-background-neutral-default:#E8E9EB;--color-background-neutral-hover:#CFD3D7;--color-background-neutral-press:#C4C8CE;--color-background-neutral-lowest-default:#F9FAFA;--color-background-neutral-lowest-hover:#E8E9EB;--color-background-neutral-lowest-press:#CFD3D7;--color-background-warning-default:#D17739;--color-background-warning-lowest-default:#FFF3EB;--color-background-warning-lowest-hover:#FFE7D7;--color-background-warning-lowest-press:#FFD0B0;--color-border-high:#041821;--color-border-medium:rgba(4, 24, 33, 0.6392156863);--color-border-low:rgba(4, 24, 33, 0.3215686275);--color-border-lower:rgba(4, 24, 33, 0.1607843137);--color-border-lowest:rgba(4, 24, 33, 0.0784313725);--color-border-brand:#007DBA;--color-border-brand-hover:#CCE5F1;--color-border-disabled:rgba(33, 49, 66, 0.3215686275);--color-border-danger:#C83E38;--color-border-healthy:#6B9321;--color-border-caution:#D0A60B;--color-border-warning:#D17739;--color-border-information:#056CA0;--color-border-general:#8F9295;--color-border-focus-1:#ffffff;--color-border-focus-2:#133953;--color-border-white-high:#ffffff;--color-border-white-medium:rgba(255, 255, 255, 0.6392156863);--color-border-white-low:rgba(255, 255, 255, 0.3215686275);--color-border-white-lower:rgba(255, 255, 255, 0.1607843137);--color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-icon-high:#041821;--color-icon-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-low:rgba(4, 24, 33, 0.3215686275);--color-icon-disabled:rgba(33, 49, 66, 0.3215686275);--color-icon-healthy:#6B9321;--color-icon-caution:#D0A60B;--color-icon-warning:#D17739;--color-icon-danger:#C83E38;--color-icon-information:#056CA0;--color-icon-general:#8F9295;--color-icon-brand-default:#007DBA;--color-icon-brand-hover:#056CA0;--color-icon-brand-press:#095B87;--color-icon-white-high:#ffffff;--color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);--color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);--color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);--color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);--color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);--color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);--color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);--color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);--color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);--color-link-default:#007DBA;--color-link-hover:#056CA0;--color-link-press:#095B87;--color-text-high:#041821;--color-text-medium:rgba(4, 24, 33, 0.6392156863);--color-text-low:rgba(4, 24, 33, 0.3215686275);--color-text-disabled:rgba(33, 49, 66, 0.3215686275);--color-text-brand:#007DBA;--color-text-caution-high:#46482E;--color-text-caution-medium:#D0A60B;--color-text-danger-high:#47323D;--color-text-danger-medium:#C83E38;--color-text-general-high:#364351;--color-text-general-medium:#8F9295;--color-text-healthy-high:#2C4333;--color-text-healthy-medium:#6B9321;--color-text-information-high:#133953;--color-text-information-medium:#056CA0;--color-text-warning-high:#463C3A;--color-text-warning-medium:#D17739;--color-text-white-high:#ffffff;--color-text-white-medium:rgba(255, 255, 255, 0.6392156863);--color-text-white-low:rgba(255, 255, 255, 0.3215686275);--surface-higher:#ffffff;--surface-high:#ffffff;--surface-medium:#ffffff;--surface-low:#FBFBFB;--surface-lower:#F2F3F5;--surface-neutral-default:#ffffff;--surface-neutral-hover:#E8E9EB;--surface-neutral-press:#CFD3D7;--surface-overlay-default:#213142;--surface-overlay-hover:#334152;--surface-overlay-press:#6F7986;--surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);--surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);--surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);--surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);--box-shadow-color-01:rgba(0, 0, 0, 0.12);--box-shadow-color-02:rgba(0, 0, 0, 0.14);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root .theme-dark{--color-background-disabled:rgba(161, 167, 176, 0.3215686275);--color-background-brand-default:#056CA0;--color-background-brand-hover:#095B87;--color-background-brand-press:#0E4A6C;--color-background-caution-default:#FED133;--color-background-caution-lowest-default:#2F3834;--color-background-caution-lowest-hover:#46482E;--color-background-caution-lowest-press:#746722;--color-background-danger-default:#C83E38;--color-background-danger-high-default:#C83E38;--color-background-danger-high-hover:#9D3A3A;--color-background-danger-high-press:#72363B;--color-background-danger-lowest-default:#72363B;--color-background-danger-lowest-hover:#47323D;--color-background-danger-lowest-press:#2E2B3A;--color-background-general-default:#BDBDBD;--color-background-general-lowest-default:#273646;--color-background-general-lowest-hover:#364351;--color-background-general-lowest-press:#535D67;--color-background-healthy-default:#B2CE76;--color-background-healthy-lowest-default:#223637;--color-background-healthy-lowest-hover:#2C4333;--color-background-healthy-lowest-press:#415E2D;--color-background-information-default:#3397C7;--color-background-information-lowest-default:#153147;--color-background-information-lowest-hover:#133953;--color-background-information-lowest-press:#0E4A6C;--color-background-neutral-default:#101924;--color-background-neutral-hover:#213142;--color-background-neutral-press:#334152;--color-background-neutral-lowest-default:#0B121A;--color-background-neutral-lowest-hover:#101924;--color-background-neutral-lowest-press:#213142;--color-background-warning-default:#FFA261;--color-background-warning-lowest-default:#2F323A;--color-background-warning-lowest-hover:#463C3A;--color-background-warning-lowest-press:#745039;--color-border-high:#ffffff;--color-border-medium:rgba(255, 255, 255, 0.6392156863);--color-border-low:rgba(255, 255, 255, 0.3215686275);--color-border-lower:rgba(255, 255, 255, 0.1607843137);--color-border-lowest:rgba(255, 255, 255, 0.1215686275);--color-border-brand:#66B1D5;--color-border-brand-hover:#133953;--color-border-disabled:rgba(161, 167, 176, 0.3215686275);--color-border-danger:#F78E86;--color-border-healthy:#98BE48;--color-border-warning:#FFA261;--color-border-caution:#FED133;--color-border-information:#66B1D5;--color-border-general:#CDCDCD;--color-border-focus-1:#041821;--color-border-focus-2:#CCE5F1;--color-border-white-high:#041821;--color-border-white-medium:rgba(4, 24, 33, 0.6392156863);--color-border-white-low:rgba(4, 24, 33, 0.3215686275);--color-border-white-lower:rgba(4, 24, 33, 0.1607843137);--color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);--color-icon-high:#ffffff;--color-icon-medium:rgba(255, 255, 255, 0.6392156863);--color-icon-low:rgba(255, 255, 255, 0.3215686275);--color-icon-disabled:rgba(161, 167, 176, 0.3215686275);--color-icon-healthy:#98BE48;--color-icon-caution:#FED133;--color-icon-warning:#FFA261;--color-icon-danger:#F78E86;--color-icon-information:#66B1D5;--color-icon-general:#CDCDCD;--color-icon-brand-default:#66B1D5;--color-icon-brand-hover:#99CBE3;--color-icon-brand-press:#CCE5F1;--color-icon-white-high:#041821;--color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);--color-icon-white-low:rgba(4, 24, 33, 0.3215686275);--color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);--color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);--color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);--color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);--color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);--color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);--color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);--color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);--color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);--color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);--color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);--color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);--color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);--color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);--color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);--color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);--color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);--color-link-default:#66B1D5;--color-link-hover:#99CBE3;--color-link-press:#CCE5F1;--color-text-high:#ffffff;--color-text-medium:rgba(255, 255, 255, 0.6392156863);--color-text-low:rgba(255, 255, 255, 0.3215686275);--color-text-disabled:rgba(161, 167, 176, 0.6392156863);--color-text-brand:#007DBA;--color-text-caution-high:#FEE899;--color-text-caution-medium:#FEDC66;--color-text-danger-high:#FAB3AE;--color-text-danger-medium:#F78E86;--color-text-general-high:#DEDEDE;--color-text-general-medium:#CDCDCD;--color-text-healthy-high:#CBDEA3;--color-text-healthy-medium:#B2CE76;--color-text-information-high:#99CBE3;--color-text-information-medium:#66B1D5;--color-text-warning-high:#FFD0B0;--color-text-warning-medium:#FFB988;--color-text-white-high:#041821;--color-text-white-medium:rgba(4, 24, 33, 0.6392156863);--color-text-white-low:rgba(4, 24, 33, 0.3215686275);--surface-higher:#192938;--surface-high:#162431;--surface-medium:#0E0E0E;--surface-low:#000000;--surface-lower:#0E0E0E;--surface-neutral-default:#101924;--surface-neutral-hover:#213142;--surface-neutral-press:#6F7986;--surface-overlay-default:#ffffff;--surface-overlay-hover:#E8E9EB;--surface-overlay-press:#CFD3D7;--surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);--surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);--surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);--surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);--box-shadow-color-01:rgba(0, 0, 0, 0.24);--box-shadow-color-02:rgba(0, 0, 0, 0.28);--size-56:3.5rem;--size-44:2.75rem;--size-36:2.25rem;--size-32:2rem;--size-28:1.75rem;--size-24:1.5rem;--size-20:1.25rem;--size-16:1rem;--size-14:0.875rem;--size-12:0.75rem;--size-10:0.625rem;--font-light:300;--font-semibold:600;--font-bold:800;--height-64:4rem;--height-52:3.25rem;--height-44:2.75rem;--height-40:2.5rem;--height-36:2.25rem;--height-32:2rem;--height-28:1.75rem;--height-24:1.5rem;--height-20:1.25rem;--height-16:1rem;--height-12:0.75rem}:root body{--spacing-00:0rem;--spacing-01:0.125rem;--spacing-02:0.25rem;--spacing-03:0.5rem;--spacing-04:0.75rem;--spacing-05:1rem;--spacing-06:1.25rem;--spacing-07:1.5rem;--spacing-08:1.75rem;--spacing-09:2rem;--spacing-10:2.25rem;--spacing-11:2.5rem;--spacing-12:2.75rem;--spacing-13:3rem;--spacing-14:3.25rem;--spacing-15:3.5rem;--spacing-16:3.75rem;--spacing-17:4rem;--spacing-18:4.25rem;--spacing-19:4.5rem;--spacing-20:4.75rem;--opacity-64:0.64;--opacity-32:0.32;--opacity-16:0.16;--opacity-08:0.08;--radius-sharp:var(--spacing-00);--radius-medium:var(--spacing-02);--radius-large:var(--spacing-03);--radius-pill:var(--spacing-16);--radius-circle:50%;--static-brand-0:#ffffff;--static-brand-50:#E6F2F8;--static-brand-100:#CCE5F1;--static-brand-200:#99CBE3;--static-brand-300:#66B1D5;--static-brand-400:#3397C7;--static-brand-500:#007DBA;--static-brand-main:#007DBA;--static-brand-600:#056CA0;--static-brand-700:#095B87;--static-brand-800:#0E4A6C;--static-brand-900:#133953;--static-brand-950:#153147;--static-brand-1000:#041821;--static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);--static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);--static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);--static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);--static-green-0:#ffffff;--static-green-50:#F2F7E8;--static-green-100:#E5EED1;--static-green-200:#CBDEA3;--static-green-300:#B2CE76;--static-green-400:#98BE48;--static-green-500:#7FAE1B;--static-green-main:#7FAE1B;--static-green-600:#6B9321;--static-green-700:#557827;--static-green-800:#415E2D;--static-green-900:#2C4333;--static-green-950:#223637;--static-yellow-0:#ffffff;--static-yellow-50:#FFF9E5;--static-yellow-100:#FEF3CC;--static-yellow-200:#FEE899;--static-yellow-300:#FEDC66;--static-yellow-400:#FED133;--static-yellow-500:#FEC600;--static-yellow-main:#FEC600;--static-yellow-600:#D0A60B;--static-yellow-700:#A18717;--static-yellow-800:#746722;--static-yellow-900:#46482E;--static-yellow-950:#2F3834;--static-red-0:#ffffff;--static-red-50:#FEECEB;--static-red-100:#FCD9D6;--static-red-200:#FAB3AE;--static-red-300:#F78E86;--static-red-400:#F5685E;--static-red-500:#F34336;--static-red-main:#F34336;--static-red-600:#C83E38;--static-red-700:#9D3A3A;--static-red-800:#72363B;--static-red-900:#47323D;--static-red-950:#2E2B3A;--static-grey-0:#ffffff;--static-grey-50:#f7f7f7;--static-grey-100:#EEEEEE;--static-grey-200:#DEDEDE;--static-grey-300:#CDCDCD;--static-grey-400:#BDBDBD;--static-grey-500:#ADADAD;--static-grey-main:#ADADAD;--static-grey-600:#8F9295;--static-grey-700:#71787F;--static-grey-800:#535D67;--static-grey-900:#364351;--static-grey-950:#273646;--static-orange-0:#ffffff;--static-orange-50:#FFF3EB;--static-orange-100:#FFE7D7;--static-orange-200:#FFD0B0;--static-orange-300:#FFB988;--static-orange-400:#FFA261;--static-orange-500:#FF8B3A;--static-orange-main:#FF8B3A;--static-orange-600:#D17739;--static-orange-700:#A2633A;--static-orange-800:#745039;--static-orange-900:#463C3A;--static-orange-950:#2F323A;--static-dataviz-cat-sea-green:#0FB5AE;--static-dataviz-cat-palatinate-blue:#4046CA;--static-dataviz-cat-tangerine:#F68511;--static-dataviz-cat-magenta:#DE3D82;--static-dataviz-cat-tropical-indigo:#7E84FA;--static-dataviz-cat-malachite:#72E06A;--static-dataviz-cat-azure:#147AF3;--static-dataviz-cat-violet:#7326D3;--static-dataviz-cat-yellow:#E8C600;--static-dataviz-cat-alloy-orange:#CB5D00;--static-dataviz-cat-green:#008F5D;--static-dataviz-cat-lime:#BCE931;--static-dataviz-seq-viridis-50:#FDE725;--static-dataviz-seq-viridis-100:#D2E21B;--static-dataviz-seq-viridis-150:#A5DB36;--static-dataviz-seq-viridis-200:#7AD151;--static-dataviz-seq-viridis-250:#54C568;--static-dataviz-seq-viridis-300:#35B779;--static-dataviz-seq-viridis-350:#22A884;--static-dataviz-seq-viridis-400:#1F988B;--static-dataviz-seq-viridis-450:#23888E;--static-dataviz-seq-viridis-500:#2A788E;--static-dataviz-seq-viridis-550:#31688E;--static-dataviz-seq-viridis-600:#39568C;--static-dataviz-seq-viridis-650:#414487;--static-dataviz-seq-viridis-700:#472F7D;--static-dataviz-seq-viridis-750:#481A6C;--static-dataviz-seq-viridis-800:#440154;--static-dataviz-seq-magma-50:#FCFDBF;--static-dataviz-seq-magma-100:#FDDEA0;--static-dataviz-seq-magma-150:#FEBF84;--static-dataviz-seq-magma-200:#FE9F6D;--static-dataviz-seq-magma-250:#FA7F5E;--static-dataviz-seq-magma-300:#F1605D;--static-dataviz-seq-magma-350:#DE4968;--static-dataviz-seq-magma-400:#C43C75;--static-dataviz-seq-magma-450:#A8327D;--static-dataviz-seq-magma-500:#8C2981;--static-dataviz-seq-magma-550:#721F81;--static-dataviz-seq-magma-600:#57157E;--static-dataviz-seq-magma-650:#3B0F70;--static-dataviz-seq-magma-700:#20114B;--static-dataviz-seq-magma-750:#0B0924;--static-dataviz-seq-magma-800:#000004;--static-dataviz-seq-rose-50:#FFF4DE;--static-dataviz-seq-rose-100:#FFDDD8;--static-dataviz-seq-rose-150:#FFC6D2;--static-dataviz-seq-rose-200:#FCAFCB;--static-dataviz-seq-rose-250:#F898C4;--static-dataviz-seq-rose-300:#F380BC;--static-dataviz-seq-rose-350:#ED67B4;--static-dataviz-seq-rose-400:#E64BAC;--static-dataviz-seq-rose-450:#D03EA0;--static-dataviz-seq-rose-500:#B93495;--static-dataviz-seq-rose-550:#A12A8B;--static-dataviz-seq-rose-600:#892282;--static-dataviz-seq-rose-650:#701C7A;--static-dataviz-seq-rose-700:#551672;--static-dataviz-seq-rose-750:#37126C;--static-dataviz-seq-rose-800:#001066;--static-dataviz-seq-forest-50:#FFFFE0;--static-dataviz-seq-forest-100:#E2F5BD;--static-dataviz-seq-forest-150:#C5EA99;--static-dataviz-seq-forest-200:#A6DF73;--static-dataviz-seq-forest-250:#8FD16C;--static-dataviz-seq-forest-300:#79C365;--static-dataviz-seq-forest-350:#62B55E;--static-dataviz-seq-forest-400:#4CA658;--static-dataviz-seq-forest-450:#3B9752;--static-dataviz-seq-forest-500:#31884F;--static-dataviz-seq-forest-550:#28794C;--static-dataviz-seq-forest-600:#1E6A48;--static-dataviz-seq-forest-650:#155B45;--static-dataviz-seq-forest-700:#0E4D41;--static-dataviz-seq-forest-750:#073F3E;--static-dataviz-seq-forest-800:#00313A;--static-dataviz-seq-cerulean-50:#EAFFF1;--static-dataviz-seq-cerulean-100:#C9F1E4;--static-dataviz-seq-cerulean-150:#A7E3D7;--static-dataviz-seq-cerulean-200:#85D5CA;--static-dataviz-seq-cerulean-250:#6CC5C0;--static-dataviz-seq-cerulean-300:#58B4B9;--static-dataviz-seq-cerulean-350:#44A2B1;--static-dataviz-seq-cerulean-400:#3091AA;--static-dataviz-seq-cerulean-450:#2880A0;--static-dataviz-seq-cerulean-500:#246E96;--static-dataviz-seq-cerulean-550:#215D8B;--static-dataviz-seq-cerulean-600:#1D4C81;--static-dataviz-seq-cerulean-650:#1C3B77;--static-dataviz-seq-cerulean-700:#1B296D;--static-dataviz-seq-cerulean-750:#1A1662;--static-dataviz-seq-cerulean-800:#180055;--static-dataviz-div-orange-yellow-seafoam-0:#580000;--static-dataviz-div-orange-yellow-seafoam-50:#79260B;--static-dataviz-div-orange-yellow-seafoam-100:#9C4511;--static-dataviz-div-orange-yellow-seafoam-150:#BD651A;--static-dataviz-div-orange-yellow-seafoam-200:#DD8629;--static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;--static-dataviz-div-orange-yellow-seafoam-300:#FED693;--static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;--static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;--static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;--static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;--static-dataviz-div-orange-yellow-seafoam-550:#208288;--static-dataviz-div-orange-yellow-seafoam-600:#076769;--static-dataviz-div-orange-yellow-seafoam-650:#00494B;--static-dataviz-div-orange-yellow-seafoam-700:#002C2D;--static-dataviz-div-red-yellow-blue-0:#4A001E;--static-dataviz-div-red-yellow-blue-50:#751232;--static-dataviz-div-red-yellow-blue-100:#A52747;--static-dataviz-div-red-yellow-blue-150:#C65154;--static-dataviz-div-red-yellow-blue-200:#E47961;--static-dataviz-div-red-yellow-blue-250:#F0A882;--static-dataviz-div-red-yellow-blue-300:#FAD4AC;--static-dataviz-div-red-yellow-blue-350:#FFFFE0;--static-dataviz-div-red-yellow-blue-400:#BCE2CF;--static-dataviz-div-red-yellow-blue-450:#89C0C4;--static-dataviz-div-red-yellow-blue-500:#579EB9;--static-dataviz-div-red-yellow-blue-550:#397AA8;--static-dataviz-div-red-yellow-blue-600:#1C5796;--static-dataviz-div-red-yellow-blue-650:#163771;--static-dataviz-div-red-yellow-blue-700:#10194D;--static-dataviz-div-red-blue-0:#4A001E;--static-dataviz-div-red-blue-50:#731331;--static-dataviz-div-red-blue-100:#9F2945;--static-dataviz-div-red-blue-150:#CC415A;--static-dataviz-div-red-blue-200:#E06E85;--static-dataviz-div-red-blue-250:#ED9AB0;--static-dataviz-div-red-blue-300:#F8C3D9;--static-dataviz-div-red-blue-350:#FAF0FF;--static-dataviz-div-red-blue-400:#C6D0F2;--static-dataviz-div-red-blue-450:#92B2DE;--static-dataviz-div-red-blue-500:#5D94CB;--static-dataviz-div-red-blue-550:#2F74B3;--static-dataviz-div-red-blue-600:#265191;--static-dataviz-div-red-blue-650:#163670;--static-dataviz-div-red-blue-700:#0B194C;--static-white:#ffffff;--static-black:#000000;--elevation-shadow-0:none;--elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);--elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);--elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);--elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);--elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);--elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);--elevation-layer-0:0;--elevation-layer-1:1;--elevation-layer-2:3;--elevation-layer-3:6;--elevation-layer-4:8;--elevation-layer-5:12;--border-thickness-01:0.0625rem;--border-thickness-02:0.078125rem;--border-thickness-03:0.09375rem;--border-thickness-04:0.109375rem;--border-thickness-05:0.125rem;--border-thickness-06:0.140625rem;--border-thickness-07:0.15625rem;--border-thickness-08:0.171875rem;--border-thickness-09:0.1875rem}:root body .vds-font-display-large{font-size:3.5rem;font-weight:300;line-height:4rem;letter-spacing:normal}:root body .vds-font-display-medium{font-size:2.75rem;font-weight:300;line-height:3.25rem;letter-spacing:normal}:root body .vds-font-display-small{font-size:2.25rem;font-weight:300;line-height:2.75rem;letter-spacing:normal}:root body .vds-font-headline-large{font-size:2rem;font-weight:600;line-height:2.5rem;letter-spacing:normal}:root body .vds-font-headline-medium{font-size:1.75rem;font-weight:600;line-height:2.25rem;letter-spacing:normal}:root body .vds-font-headline-small{font-size:1.5rem;font-weight:600;line-height:2rem;letter-spacing:normal}:root body .vds-font-title-large{font-size:1.25rem;font-weight:600;line-height:1.75rem;letter-spacing:0.00875rem}:root body .vds-font-title-medium{font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-title-small{font-size:0.875rem;font-weight:600;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-title-extra-small{font-size:0.75rem;font-weight:600;line-height:1rem;letter-spacing:0.00875rem}:root body .vds-font-title-2x-small{font-size:0.625rem;font-weight:600;line-height:0.75rem;letter-spacing:0.00875rem}:root body .vds-font-body-large{font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:root body .vds-font-body-medium{font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:root body .vds-font-body-small{font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}.vds__divider{width:0.0625rem;height:1rem;margin:var(--spacing-01);background-color:var(--color-border-low)}.content_divider_vertical{opacity:0.16;background:var(--color-border-high);height:1rem;width:1px}.vds-header_content-section{display:flex;gap:var(--spacing-03)}.vds__menu--backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);backdrop-filter:grayscale(100%) opacity(0.5);pointer-events:auto}:host{--vds-sheet-background-color:var(--surface-medium);--vds-sheet-backdrop-color:var(--color-interaction-black-lower);--vds-sheet-box-shadow:var(--elevation-shadow-1);--vds-sheet-border-radius:28px;--vds-sheet-drag-handle-color:var(--color-icon-high);--vds-sheet-transition-duration:0.3s;position:fixed;bottom:0;left:0;z-index:var(--elevation-layer-5);width:100%;height:fit-content}:host .vds-sheet__backdrop{position:fixed;top:0;left:0;z-index:-1;width:100vw;height:100vh;background-color:var(--vds-sheet-backdrop-color);opacity:0;transition:opacity var(--vds-sheet-transition-duration) ease-out;pointer-events:none}:host .vds-sheet__backdrop.vds-sheet__backdrop--visible{opacity:1;pointer-events:auto}:host .vds-sheet__container{display:flex;flex-direction:column;gap:var(--spacing-05);box-sizing:border-box;width:100%;max-height:80vh;padding:0 var(--spacing-05) var(--spacing-05);background-color:var(--vds-sheet-background-color);border-radius:var(--vds-sheet-border-radius) var(--vds-sheet-border-radius) 0 0;box-shadow:var(--vds-sheet-box-shadow);transform:translateY(100%);transition:transform var(--vds-sheet-transition-duration) ease-out}:host .vds-sheet__container.vds-sheet__container--opened{transform:translateY(0)}:host .vds-sheet__drag-handle{display:flex;justify-content:center;align-items:center;padding:var(--spacing-05);cursor:grab}:host .vds-sheet__drag-handle:active{cursor:grabbing}:host .vds-sheet__drag-handle .vds-sheet__drag-handle-bar{width:2rem;height:0.25rem;background-color:var(--vds-sheet-drag-handle-color);border-radius:var(--radius-medium)}:host(.vds-sheet--closed){visibility:hidden;pointer-events:none}:host(.vds-sheet--opened){visibility:visible;pointer-events:auto}";
+const VdsSheet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bottomsheetOpened = createEvent(this, "bottomsheetOpened");
+        this.bottomsheetClosed = createEvent(this, "bottomsheetClosed");
+        /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */
+        this.backdrop = false;
+        /** Open / Close the bottom sheet. */
+        this.opened = false;
+        /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */
+        this.height = 'auto';
+        /** Allow drag handle interaction to close the bottom sheet. */
+        this.hideDragHandle = false;
+        this.dragStartY = 0;
+        this.isDragging = false;
+        this.dragThreshold = 50; // px threshold to close bottom sheet
+        /**
+         * Handle drag interactions to close the bottom sheet.
+         */
+        this.handleDragStart = (event) => {
+            if (this.hideDragHandle)
+                return;
+            this.isDragging = true;
+            this.dragStartY = this.getClientY(event);
+            if ('touches' in event) {
+                document.addEventListener('touchmove', this.handleDragMove, { passive: false });
+                document.addEventListener('touchend', this.handleDragEnd);
+            }
+            else {
+                document.addEventListener('mousemove', this.handleDragMove);
+                document.addEventListener('mouseup', this.handleDragEnd);
+            }
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        this.handleDragMove = (event) => {
+            var _a;
+            if (!this.isDragging || this.hideDragHandle)
+                return;
+            const currentY = this.getClientY(event);
+            const deltaY = currentY - this.dragStartY;
+            // Only allow dragging downward (positive deltaY)
+            if (deltaY > 0) {
+                const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds-sheet__container');
+                if (container) {
+                    container.style.transform = `translateY(${deltaY}px)`;
+                }
+            }
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+        };
+        this.handleDragEnd = (event) => {
+            var _a;
+            if (!this.isDragging || this.hideDragHandle)
+                return;
+            const currentY = this.getClientY(event);
+            const deltaY = currentY - this.dragStartY;
+            const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.vds-sheet__container');
+            if (container) {
+                container.style.transform = '';
+                if (deltaY > this.dragThreshold) {
+                    this.close();
+                }
+            }
+            document.removeEventListener('touchmove', this.handleDragMove);
+            document.removeEventListener('touchend', this.handleDragEnd);
+            document.removeEventListener('mousemove', this.handleDragMove);
+            document.removeEventListener('mouseup', this.handleDragEnd);
+            this.isDragging = false;
+            this.dragStartY = 0;
+        };
+    }
+    emitValue() {
+        if (this.opened) {
+            this.bottomsheetOpened.emit();
+        }
+        else {
+            this.bottomsheetClosed.emit();
+        }
+    }
+    /** Listen for Escape key to close the bottom sheet */
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.opened) {
+            this.close();
+        }
+    }
+    /**
+     * Trigger open the bottomsheet
+     * @returns Promise that resolves when the bottomsheet is opened
+     */
+    async open() {
+        this.opened = true;
+    }
+    /**
+     * Trigger closes the bottomsheet
+     * @returns Promise that resolves when the bottomsheet is closed
+     */
+    async close() {
+        this.opened = false;
+    }
+    getClientY(event) {
+        if ('touches' in event) {
+            const touch = event.touches[0] || event.changedTouches[0];
+            return touch.clientY;
+        }
+        return event.clientY;
+    }
+    /**
+     * Get the style for the container based on the height prop
+     * If the height is a percentage, it converts it to viewport height.
+     */
+    getContainerStyle() {
+        if (this.height === 'auto') {
+            return {};
+        }
+        if (this.height.includes('%')) {
+            const percentValue = parseFloat(this.height);
+            return { height: `${percentValue}vh` };
+        }
+        return { height: this.height };
+    }
+    renderBackdrop() {
+        return h("div", { class: combineClasses('vds-sheet__backdrop', this.opened ? 'vds-sheet__backdrop--visible' : ''), onClick: () => this.close() });
+    }
+    renderDragHandle() {
+        if (this.hideDragHandle)
+            return null;
+        return (h("div", { class: "vds-sheet__drag-handle", onTouchStart: this.handleDragStart, onMouseDown: this.handleDragStart }, h("div", { class: "vds-sheet__drag-handle-bar" })));
+    }
+    render() {
+        return (h(Host, { key: 'fd605460c0ce83cd58c4ae1b213d783a8b962f6b', role: "dialog", "aria-hidden": !this.opened ? 'true' : 'false', "aria-modal": this.opened ? 'true' : 'false', class: this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed' }, this.backdrop && this.renderBackdrop(), h("div", { key: 'b96170f287ee0e872b2bf06454584c81a257cb46', class: combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : ''), style: this.getContainerStyle() }, this.renderDragHandle(), h("div", { key: '9d5ae9e92e3b1bea23925446f08b60e78bed3626', class: "vds-sheet__content" }, h("slot", { key: '576096ee264c76765010a046651e433a6a4f8b90' })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "opened": ["emitValue"]
+    }; }
+};
+VdsSheet.style = vdsSheetCss;
+export { VdsSheet as vds_sheet };
+//# sourceMappingURL=vds-sheet.entry.js.map
+//# sourceMappingURL=vds-sheet.entry.js.map