wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

package/dist/components/vds-basic-textarea.js

@@ -1,24 +1,29 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, transformTag } from '@stencil/core/internal/client';
 import { t as toggleFocusClass, s as setDirtyClass, m as maskInput, a as setInputStyles, b as setTouchedClass } from './vds-basic-input.utils.js';
 import { c as combineClasses } from './combine-classes.js';
 import { c as cloneAttributes } from './clone-attributes.js';
+import { e as emitInputEvent } from './form.js';
 
 var spacingVars = {
     "spacing-02": "0.25rem",
     "spacing-03": "0.5rem",
     "spacing-04": "0.75rem"};
 
-const vdsBasicTextareaCss = "@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}:host .vds__textarea__container{display:flex;align-items:start;flex-shrink:0;box-sizing:border-box;border-radius:var(--radius-medium);border:var(--border-thickness-01) solid var(--color-border-low);background:var(--surface-medium)}:host .vds__textarea__container:hover{border-color:var(--color-border-brand);outline:var(--border-thickness-05) solid var(--color-interaction-brand-low)}:host .vds__textarea__container.vds__textarea__container--focus{border-color:var(--color-border-brand)}:host .vds__textarea__container.vds__textarea__container--error{border-color:var(--color-border-danger);outline-color:var(--color-interaction-danger-medium)}:host .vds__textarea__container.vds__textarea__container--error .vds__textarea{color:var(--color-text-danger-medium)}:host .vds__textarea__container.vds__textarea__container--readonly{border-color:var(--color-border-low);outline:none;background-color:var(--color-interaction-black-lowest)}:host .vds__textarea__container.vds__textarea__container--readonly .vds__textarea{color:var(--color-text-medium)}:host .vds__textarea__container.vds__textarea__container--disabled{border-color:var(--color-border-disabled);outline:none;background-color:var(--surface-medium)}:host .vds__textarea__container.vds__textarea__container--disabled .vds__textarea{color:var(--color-text-disabled)}:host .vds__textarea__container.vds__textarea__container--disabled .vds__textarea::placeholder{color:var(--color-text-disabled)}:host .vds__textarea__container.vds__textarea--size-small{gap:var(--spacing-02);padding:var(--spacing-02) var(--spacing-03);min-height:3rem}:host .vds__textarea__container.vds__textarea--size-small .vds__textarea{min-width:5.5rem;min-height:3rem;font-family:\"Roboto Flex\", sans-serif;font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}:host .vds__textarea__container.vds__textarea--size-medium{gap:var(--spacing-02);padding:var(--spacing-03) var(--spacing-04);min-height:4.5rem}:host .vds__textarea__container.vds__textarea--size-medium .vds__textarea{min-width:7.5rem;min-height:4.5rem;font-family:\"Roboto Flex\", sans-serif;font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:host .vds__textarea__container.vds__textarea--size-large{gap:var(--spacing-03);padding:var(--spacing-04) var(--spacing-05);min-height:6rem}:host .vds__textarea__container.vds__textarea--size-large .vds__textarea{min-width:9.25rem;min-height:6rem;font-family:\"Roboto Flex\", sans-serif;font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:host .vds__textarea__container .vds__textarea{flex-grow:1;border:none;background:transparent;padding:0;resize:none;overflow:hidden;color:var(--color-text-high);font-feature-settings:\"clig\" off, \"liga\" off;text-overflow:ellipsis;font-style:normal}:host .vds__textarea__container .vds__textarea::placeholder{color:var(--color-text-medium)}:host .vds__textarea__container .vds__textarea:hover,:host .vds__textarea__container .vds__textarea:focus{border:none;outline:none}:host-context(.vds-basic-textarea--disabled){pointer-events:none}";
+const vdsBasicTextareaCss = () => `: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}@font-face{font-family:"Roboto Flex";src:url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");font-weight:100 1000;font-stretch:25% 151%;font-style:normal}: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-white-medium:rgba(255, 255, 255, 0.6392156863);--static-white-low:rgba(255, 255, 255, 0.3215686275);--static-white-lower:rgba(255, 255, 255, 0.1607843137);--static-white-lowest:rgba(255, 255, 255, 0.1215686275);--static-black:#000000;--static-black-medium:rgba(0, 0, 0, 0.6392156863);--static-black-low:rgba(0, 0, 0, 0.3215686275);--static-black-lower:rgba(0, 0, 0, 0.1607843137);--static-black-lowest:rgba(0, 0, 0, 0.1215686275);--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}:host .vds__textarea__container{display:flex;align-items:start;flex-shrink:0;box-sizing:border-box;border-radius:var(--radius-medium);border:var(--border-thickness-01) solid var(--color-border-low);background:var(--surface-medium)}:host .vds__textarea__container:hover{border-color:var(--color-border-brand);outline:var(--border-thickness-05) solid var(--color-interaction-brand-low)}:host .vds__textarea__container.vds__textarea__container--focus{border-color:var(--color-border-brand)}:host .vds__textarea__container.vds__textarea__container--error{border-color:var(--color-border-danger);outline-color:var(--color-interaction-danger-medium)}:host .vds__textarea__container.vds__textarea__container--error .vds__textarea{color:var(--color-text-danger-medium)}:host .vds__textarea__container.vds__textarea__container--readonly{border-color:var(--color-border-low);outline:none;background-color:var(--color-interaction-black-lowest)}:host .vds__textarea__container.vds__textarea__container--readonly .vds__textarea{color:var(--color-text-medium)}:host .vds__textarea__container.vds__textarea__container--disabled{border-color:var(--color-border-disabled);outline:none;background-color:var(--surface-medium)}:host .vds__textarea__container.vds__textarea__container--disabled .vds__textarea{color:var(--color-text-disabled)}:host .vds__textarea__container.vds__textarea__container--disabled .vds__textarea::placeholder{color:var(--color-text-disabled)}:host .vds__textarea__container.vds__textarea--size-small{gap:var(--spacing-02);padding:var(--spacing-02) var(--spacing-03);min-height:3rem}:host .vds__textarea__container.vds__textarea--size-small .vds__textarea{min-width:5.5rem;min-height:3rem;font-family:"Roboto Flex", sans-serif;font-size:0.75rem;font-weight:300;line-height:1rem;letter-spacing:normal}:host .vds__textarea__container.vds__textarea--size-medium{gap:var(--spacing-02);padding:var(--spacing-03) var(--spacing-04);min-height:4.5rem}:host .vds__textarea__container.vds__textarea--size-medium .vds__textarea{min-width:7.5rem;min-height:4.5rem;font-family:"Roboto Flex", sans-serif;font-size:0.875rem;font-weight:300;line-height:1.25rem;letter-spacing:normal}:host .vds__textarea__container.vds__textarea--size-large{gap:var(--spacing-03);padding:var(--spacing-04) var(--spacing-05);min-height:6rem}:host .vds__textarea__container.vds__textarea--size-large .vds__textarea{min-width:9.25rem;min-height:6rem;font-family:"Roboto Flex", sans-serif;font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:host .vds__textarea__container .vds__textarea{flex-grow:1;border:none;background:transparent;padding:0;resize:none;overflow:hidden;color:var(--color-text-high);font-feature-settings:"clig" off, "liga" off;text-overflow:ellipsis;font-style:normal}:host .vds__textarea__container .vds__textarea::placeholder{color:var(--color-text-medium)}:host .vds__textarea__container .vds__textarea:hover,:host .vds__textarea__container .vds__textarea:focus{border:none;outline:none}:host-context(.vds-basic-textarea--disabled){pointer-events:none}`;
 
 const VdsBasicTextarea$1 = /*@__PURE__*/ proxyCustomElement(class VdsBasicTextarea extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.changeInput = createEvent(this, "changeInput", 7);
         this.internals = this.attachInternals();
         /** Sets the textarea's size. */
         this.size = "medium";
+        /** Sets the textarea's value. */
+        this.value = "";
         /** Toggles the required sign in the field */
         this.isRequired = false;
         /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */
@@ -46,6 +51,7 @@ const VdsBasicTextarea$1 = /*@__PURE__*/ proxyCustomElement(class VdsBasicTextar
         this.setFormValue();
     }
     setFormValue() {
+        emitInputEvent(this.hostEl, this.value);
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(this.value);
         }
@@ -154,22 +160,34 @@ const VdsBasicTextarea$1 = /*@__PURE__*/ proxyCustomElement(class VdsBasicTextar
             resolve(this.value);
         });
     }
+    /**
+     * Clears value prop from the vds-basic-textarea element.
+     *
+     * @returns Promise<void>
+     */
+    clear() {
+        return new Promise((resolve) => {
+            this.value = "";
+            this.textAreaEl.value = "";
+            resolve();
+        });
+    }
     render() {
-        return (h(Host, { key: '400f6c0345910e2ee8dda5bc426fb7a8675803d9', class: this.disabled ? "vds-basic-textarea--disabled" : "" }, h("div", { key: 'd667d3160bbf7bde2ecc649ecf084fadf6009720', ref: (el) => {
+        return (h(Host, { key: 'ce0880d208505fd7ce98188e0b42710c3fd0d901', class: this.disabled ? "vds-basic-textarea--disabled" : "" }, h("div", { key: '691447f20944dba91cde04da18c1700f5577dacc', ref: (el) => {
                 if (el)
                     this.textareaContainerRef = el;
-            }, class: combineClasses("vds__textarea__container", `vds__textarea--size-${this.size}`, this.error && "vds__textarea__container--error", this.isReadonly && "vds__textarea__container--readonly", this.disabled && "vds__textarea__container--disabled"), style: this.setSizesStyles() }, h("textarea", Object.assign({ key: '25f193b360c92400f4802ec6adb046bf032575af', ref: (el) => {
+            }, class: combineClasses("vds__textarea__container", `vds__textarea--size-${this.size}`, this.error && "vds__textarea__container--error", this.isReadonly && "vds__textarea__container--readonly", this.disabled && "vds__textarea__container--disabled"), style: this.setSizesStyles() }, h("textarea", Object.assign({ key: '2231289858287d7fa6ed08490b98d70e1e385a65', ref: (el) => {
                 if (el)
                     this.textAreaEl = el;
-            }, class: "vds__textarea", value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, style: this.setTextareaStyles(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style"))), h("slot", { key: 'eeeb73ebb6e3c030f5b5d46db9b28b62365b33ed', name: "secondaryActionIcon" }), h("slot", { key: '046a986270f73211b97cfc009e90dd043e142849', name: "primaryActionIcon" }))));
+            }, class: "vds__textarea", value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.isRequired, readOnly: this.isReadonly, style: this.setTextareaStyles(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.toggleFocusClass(), onBlur: () => this.toggleFocusClass() }, cloneAttributes(this.hostEl, "class", "value", "disabled", "placeholder", "label", "style"))), h("slot", { key: 'ba2ed5615fadab6c503c7a43b49dd90dcb18d40c', name: "secondaryActionIcon" }), h("slot", { key: '6b28d89f56daeb3260e05ec4bd4cb9af4f700e7a', name: "primaryActionIcon" }))));
     }
     static get formAssociated() { return true; }
     get hostEl() { return this; }
     static get watchers() { return {
         "value": ["setFormValue"]
     }; }
-    static get style() { return vdsBasicTextareaCss; }
-}, [65, "vds-basic-textarea", {
+    static get style() { return vdsBasicTextareaCss(); }
+}, [321, "vds-basic-textarea", {
         "size": [1025],
         "value": [1025],
         "placeholder": [1025],
@@ -178,14 +196,15 @@ const VdsBasicTextarea$1 = /*@__PURE__*/ proxyCustomElement(class VdsBasicTextar
         "error": [1540],
         "isRequired": [1540, "is-required"],
         "formatter": [1040],
-        "allowedStyles": [1040, "allowed-styles"],
+        "allowedStyles": [1040],
         "width": [1025],
         "height": [1025],
         "minHeight": [1025, "min-height"],
         "maxHeight": [1025, "max-height"],
         "autogrow": [1028],
         "setFocus": [64],
-        "getValue": [64]
+        "getValue": [64],
+        "clear": [64]
     }, [[0, "focus", "handleFocus"]], {
         "value": ["setFormValue"]
     }]);
@@ -196,8 +215,8 @@ function defineCustomElement$1() {
     const components = ["vds-basic-textarea"];
     components.forEach(tagName => { switch (tagName) {
         case "vds-basic-textarea":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VdsBasicTextarea$1);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), VdsBasicTextarea$1);
             }
             break;
     } });

package/dist/components/vds-basic-textarea.js.map

@@ -1 +1 @@
-{"file":"vds-basic-textarea.js","mappings":";;;;;AAAA,kBAAe;AACd,IAEA,YAAY,EAAE,SAAS;AACvB,IAAA,YAAY,EAAE,QAAQ;AACtB,IAAA,YAAY,EAAE,UAiBd;;ACtBD,MAAM,mBAAmB,GAAG,wrjCAAwrjC;;MC4BvsjCA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAA,WAAA,CAAA;AAN7B,IAAA,WAAA,GAAA;;;;;;;AAQ2B,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAY9B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAI1C,QAAA,IAAa,CAAA,aAAA,GAAgC,EAAE;AAKxE;;;;;;AAME;AACuB,QAAA,IAAS,CAAA,SAAA,GAAW,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,MAAM,GAAG,QAAQ;AACvH;;;;;;AAME;AACuB,QAAA,IAAA,CAAA,SAAS,GAAW,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,OAAO,GAAG,UAAU;;AAEhE,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AA+LlD;IAnLC,gBAAgB,GAAA;QACd,IAAI,CAAC,YAAY,EAAE;;IAIrB,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;YACnD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;;AAI3C;;;;AAIG;IACK,gBAAgB,GAAA;QACtB,IAAI,CAAC,oBAAoB,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;;AAGtF;;;;;;;AAOG;AACK,IAAA,WAAW,CAAC,GAAe,EAAA;QACjC,GAAG,CAAC,eAAe,EAAE;AACrB,QAAA,MAAM,MAAM,GAAG,GAAG,CAAC,MAA6B;AAChD,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC;AAC1C,QAAA,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;AAE1B,QAAA,IAAG,IAAI,CAAC,SAAS,EAAE;YACjB,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC;AAC5F,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;aACjB;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;;QAG3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,QAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC;;AAIrC;;;;;AAKG;IACO,iBAAiB,GAAA;AACvB,QAAA,MAAM,aAAa,qBAAO,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAE;AAE9D,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,aAAa,CAAC,WAAW,GAAG,SAAS;;QAGvC,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI,EAAE;AACvD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,GAAG,WAAW,CAAC,YAAY,CAAC;QAEvJ,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnC,MAAM,CAAC,MAAM,GAAG,CAAQ,KAAA,EAAA,MAAM,CAAC,MAAM,CAAA,GAAA,EAAM,aAAa,CAAA,KAAA,CAAO;;AAGjE,QAAA,IAAI,MAAM,CAAC,SAAS,EAAE;YACpB,MAAM,CAAC,SAAS,GAAG,CAAQ,KAAA,EAAA,MAAM,CAAC,SAAS,CAAA,GAAA,EAAM,aAAa,CAAA,KAAA,CAAO;;AAGvE,QAAA,IAAI,MAAM,CAAC,SAAS,EAAE;YACpB,MAAM,CAAC,SAAS,GAAG,CAAQ,KAAA,EAAA,MAAM,CAAC,SAAS,CAAA,GAAA,EAAM,aAAa,CAAA,KAAA,CAAO;;AAGvE,QAAA,OAAO,MAAM;;AAGf;;;;AAIG;IACK,cAAc,CAAC,SAAoC,EAAE,EAAA;AAC3D,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;AAG3B,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,YAAA,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM;;AAG7B,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;;AAGnC,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;;AAGnC,QAAA,OAAO,MAAM;;AAGjB;;;;AAIE;IAEH,WAAW,GAAA;AACR,QAAA,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;;AAG9B;;;;AAIE;IAEH,QAAQ,GAAA;AACL,QAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AAC7B,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACvB,YAAA,OAAO,EAAE;AACX,SAAC,CAAC;;AAGJ;;;;AAIE;IAEH,QAAQ,GAAA;AACL,QAAA,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AAC7B,YAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACrB,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,8BAA8B,GAAG,EAAE,EAAA,EAC5D,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAU;AAAG,gBAAA,IAAG,EAAE;AAAE,oBAAA,IAAI,CAAC,oBAAoB,GAAG,EAAE;aAAC,EAC3D,KAAK,EAAE,cAAc,CACnB,0BAA0B,EAC1B,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,EAClC,IAAI,CAAC,KAAK,IAAI,iCAAiC,EAC/C,IAAI,CAAC,UAAU,IAAI,oCAAoC,EACvD,IAAI,CAAC,QAAQ,IAAI,oCAAoC,CACtD,EACD,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAA,EAE5B,CACE,CAAA,UAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAU;AAAG,gBAAA,IAAG,EAAE;AAAE,oBAAA,IAAI,CAAC,UAAU,GAAG,EAAE;AAAA,aAAC,EACjD,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAC/B,OAAO,EAAE,CAAC,GAAG,KAAW,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,MAAY,IAAI,CAAC,gBAAgB,EAAE,EAC5C,MAAM,EAAE,MAAY,IAAI,CAAC,gBAAgB,EAAE,IACvC,eAAe,CACjB,IAAI,CAAC,MAAM,EACX,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,OAAO,CACR,CACS,CAAA,EACZ,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,qBAAqB,EAAG,CAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,mBAAmB,GAAG,CAC7B,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VdsBasicTextarea","__stencil_proxyCustomElement"],"sources":["src/constants/spacing-vars.ts","src/components/textarea/vds-basic-textarea.scss?tag=vds-basic-textarea&encapsulation=shadow","src/components/textarea/vds-basic-textarea.tsx"],"sourcesContent":["export default {\n\t\"spacing-00\": \"0rem\",\n\t\"spacing-01\": \"0.125rem\",\n\t\"spacing-02\": \"0.25rem\",\n\t\"spacing-03\": \"0.5rem\",\n\t\"spacing-04\": \"0.75rem\",\n\t\"spacing-05\": \"1rem\",\n\t\"spacing-06\": \"1.25rem\",\n\t\"spacing-07\": \"1.5rem\",\n\t\"spacing-08\": \"1.75rem\",\n\t\"spacing-09\": \"2rem\",\n\t\"spacing-10\": \"2.25rem\",\n\t\"spacing-11\": \"2.5rem\",\n\t\"spacing-12\": \"2.75rem\",\n\t\"spacing-13\": \"3rem\",\n\t\"spacing-14\": \"3.25rem\",\n\t\"spacing-15\": \"3.5rem\",\n\t\"spacing-16\": \"3.75rem\",\n\t\"spacing-17\": \"4rem\",\n\t\"spacing-18\": \"4.25rem\",\n\t\"spacing-19\": \"4.5rem\",\n\t\"spacing-20\": \"4.75rem\",\n};","@import '~@volt/volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: block;\n  .vds__textarea__container {\n    display: flex;\n    align-items: start;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: var(--radius-medium);\n    border: var(--border-thickness-01) solid var(--color-border-low);\n    background: var(--surface-medium);\n\n    &:hover {\n      border-color: var(--color-border-brand);\n      outline: var(--border-thickness-05) solid var(--color-interaction-brand-low);\n    }\n\n    &.vds__textarea__container--focus {\n      border-color: var(--color-border-brand);\n    }\n\n    &.vds__textarea__container--error {\n      border-color: var(--color-border-danger);\n      outline-color: var(--color-interaction-danger-medium);\n      .vds__textarea {\n        color: var(--color-text-danger-medium);\n      }\n    }\n    &.vds__textarea__container--readonly {\n      border-color: var(--color-border-low);\n      outline: none;\n      background-color: var(--color-interaction-black-lowest);\n      .vds__textarea {\n        color: var(--color-text-medium);\n      }\n    }\n    &.vds__textarea__container--disabled {\n      border-color: var(--color-border-disabled);\n      outline: none;\n      background-color: var(--surface-medium);\n      .vds__textarea {\n        color: var(--color-text-disabled);\n        &::placeholder {\n          color: var(--color-text-disabled);\n        }\n      }\n    }\n\n    &.vds__textarea--size-small {\n      gap: var(--spacing-02);\n      padding: var(--spacing-02) var(--spacing-03);\n      min-height: 3rem;\n      .vds__textarea {\n        min-width: 5.5rem;\n        min-height: 3rem;\n        @include font-style(body, small);\n      }\n    }\n\n    &.vds__textarea--size-medium {\n      gap: var(--spacing-02);\n      padding: var(--spacing-03) var(--spacing-04);\n      min-height: 4.5rem;\n      .vds__textarea {\n        min-width: 7.5rem;\n        min-height: 4.5rem;\n        @include font-style(body, medium);\n      }\n    }\n    &.vds__textarea--size-large {\n      gap: var(--spacing-03);\n      padding: var(--spacing-04) var(--spacing-05);\n      min-height: 6rem;\n      .vds__textarea {\n        min-width: 9.25rem;\n        min-height: 6rem;\n        @include font-style(body, large);\n      }\n    }\n\n    .vds__textarea {\n      flex-grow: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      resize: none;\n      overflow: hidden;\n      color: var(--color-text-high);\n      font-feature-settings: 'clig' off, 'liga' off;\n      text-overflow: ellipsis;\n      font-style: normal;\n      &::placeholder {\n        color: var(--color-text-medium);\n      }\n      &:hover,\n      &:focus {\n        border: none;\n        outline: none;\n      }\n    }\n  }\n}\n\n:host-context(.vds-basic-textarea--disabled){\n  pointer-events: none;\n}","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from '@stencil/core';\nimport {\n  toggleFocusClass,\n  setTouchedClass,\n  setDirtyClass, \n  maskInput,\n  setInputStyles\n} from '../input/vds-basic-input.utils';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { AttachInternals, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport spacingVars from '../../constants/spacing-vars';\n\n@Component({\n  tag: 'vds-basic-textarea',\n  styleUrl: 'vds-basic-textarea.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicTextarea {\n  /** Sets the textarea's size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets the textarea's value. */\n  @Prop({ mutable: true }) value: string;\n  /** Sets the textarea's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the textarea in disabled state. */\n  @Prop({ mutable: true }) disabled: boolean;\n  /** Sets the textarea in readonly state. */\n  @Prop({ mutable: true }) isReadonly: boolean;\n  /** Sets the textarea in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true, reflect: true }) isRequired: boolean = false \n  /** Sets character formatting for user inputs. Useful for adding a mask to the textarea. */\n  @Prop({ mutable: true }) formatter: Function;\n  /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n  /** Sets the width of the textarea. */\n  @Prop({ mutable: true }) width: string;\n  /** Sets the height of the textarea. This prop not works combining with autogrow=true. */\n  @Prop({ mutable: true }) height: string;\n  /** Sets the min-height for the textarea. This property works combining with autogrow=true only. \n   * - Default for medium: '4.5rem'\n   * - Default for large: '6rem'\n   * \n   * This value is automatically adjusted according to the 'size' property.\n   * @default '4.5rem' (when size is 'medium')\n  */\n  @Prop({ mutable: true }) minHeight: string = this.size === \"large\" ? \"6rem\" : this.size === \"small\" ? \"3rem\" : \"4.5rem\";\n  /** Sets the max-height for the textarea. This property works combining with autogrow=true only. \n   * - Default for medium: '12.15rem'\n   * - Default for large: '18rem'\n   * \n   * This value is automatically adjusted according to the 'size' property.\n   * @default '12.15rem' (when size is 'medium')\n  */\n  @Prop({ mutable: true }) maxHeight: string = this.size === \"large\" ? \"18rem\" : \"12.15rem\";\n  /** Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined. */\n  @Prop({ mutable: true }) autogrow: boolean = true;\n\n  @Element() hostEl: HTMLVdsBasicTextareaElement;    \n\n\t/**  Emits updated textarea value */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private textareaContainerRef: HTMLDivElement;\n  private textAreaEl: HTMLTextAreaElement;\n\n  componentDidLoad(): void {\n    this.setFormValue();\n  }\n\n  @Watch(\"value\")\n  setFormValue(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /**\n   * Toggle class vds__textarea__container--focus in focus/blur textarea's event\n   *\n   * @returns void\n   */\n  private toggleFocusClass(): void {\n    this.textareaContainerRef && toggleFocusClass(this.textareaContainerRef, \"textarea\");\n  }\n\n  /**\n   * Sets value from textarea's event target.\n   * Emits change, input and changeInput events.\n   * Sets textarea as dirty when textarea's event is triggered.\n   * Executes formatter prop function on every inputed value.\n   *\n   * @returns void\n   */\n  private handleInput(evt: InputEvent): void {\n    evt.stopPropagation();\n    const target = evt.target as HTMLTextAreaElement; \n    const inputEvent = new InputEvent(\"input\");\n    setDirtyClass(this.hostEl);\n\n    if(this.formatter) {\n      const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n      this.value = maskValue;\n    } else {\n      this.value = target.value;\n    }\n\n    this.changeInput.emit(this.value);\n\t\tthis.hostEl.dispatchEvent(inputEvent);\n  }\n\n\n  /**\n   * Sets textarea inline styles for the allowedStyle, height and width\n   * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n   *\n   * @returns { [key: string]: string }\n   */\n    private setTextareaStyles(): { [key: string]: string } {\n      const inputedStyles = {...setInputStyles(this.allowedStyles) };\n\n      if (this.autogrow) {\n        inputedStyles.fieldSizing = \"content\";\n      }\n\n      const styles = this.setSizesStyles(inputedStyles) || {};\n      const paddingOffset = this.size === \"large\" ? spacingVars[\"spacing-04\"] : this.size === \"small\" ? spacingVars[\"spacing-02\"] : spacingVars[\"spacing-03\"]\n\n      if (styles.height && !this.autogrow) {\n        styles.height = `calc(${styles.height} - ${paddingOffset} * 2)`;\n      }\n\n      if (styles.minHeight) {\n        styles.minHeight = `calc(${styles.minHeight} - ${paddingOffset} * 2)`;\n      }\n\n      if (styles.maxHeight) {\n        styles.maxHeight = `calc(${styles.maxHeight} - ${paddingOffset} * 2)`;\n      }\n      \n      return styles;\n    }\n\n    /**\n     * Sets textarea inline styles for the height and width\n     *\n     * @returns { [key: string]: string }\n     */\n    private setSizesStyles(styles: { [key: string]: string } = {}): { [key: string]: string } {\n      if (this.width) {\n        styles.width = this.width;\n      }\n\n      if (this.height) {\n        styles.height = this.height;\n      }\n\n      if (this.maxHeight) {\n        styles.maxHeight = this.maxHeight;\n      }\n\n      if (this.minHeight) {\n        styles.minHeight = this.minHeight;\n      }\n\n      return styles;\n    }\n\n  /**\n\t * Executes method when vds-textarea gets focus.\n\t *\n\t * @returns void\n\t */\n\t@Listen(\"focus\")\n\thandleFocus(): void {\n    setTouchedClass(this.hostEl);\n\t}\n\n  /**\n\t * Sets focus on the vds-textarea element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return new Promise((resolve) => {\n      this.textAreaEl.focus();\n      resolve();\n    });\n\t}\n\n  /**\n\t * Gets value prop from the vds-textarea element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n    return new Promise((resolve) => {\n      resolve(this.value);\n    });\n\t}\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-basic-textarea--disabled\" : \"\"}>\n          <div\n            ref={(el): void => { if(el) this.textareaContainerRef = el} }\n            class={combineClasses(\n              \"vds__textarea__container\",\n              `vds__textarea--size-${this.size}`,\n              this.error && \"vds__textarea__container--error\",\n              this.isReadonly && \"vds__textarea__container--readonly\",\n              this.disabled && \"vds__textarea__container--disabled\"\n            )}\n            style={this.setSizesStyles()}\n          >\n            <textarea\n              ref={(el): void => { if(el) this.textAreaEl = el} }\n              class={\"vds__textarea\"}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.isRequired}\n              readOnly={this.isReadonly}\n              style={this.setTextareaStyles()}\n              onInput={(evt): void => this.handleInput(evt)}\n              onFocus={(): void => this.toggleFocusClass()}\n              onBlur={(): void => this.toggleFocusClass()}\n              {...cloneAttributes(\n                this.hostEl,\n                \"class\",\n                \"value\",\n                \"disabled\",\n                \"placeholder\",\n                \"label\",\n                \"style\"\n              )}\n            ></textarea>\n            <slot name=\"secondaryActionIcon\" />\n            <slot name=\"primaryActionIcon\" />\n          </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"vds-basic-textarea.js","mappings":"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","names":["VdsBasicTextarea","__stencil_proxyCustomElement"],"sources":["src/constants/spacing-vars.ts","src/components/textarea/vds-basic-textarea.scss?tag=vds-basic-textarea&encapsulation=shadow","src/components/textarea/vds-basic-textarea.tsx"],"sourcesContent":["export default {\n\t\"spacing-00\": \"0rem\",\n\t\"spacing-01\": \"0.125rem\",\n\t\"spacing-02\": \"0.25rem\",\n\t\"spacing-03\": \"0.5rem\",\n\t\"spacing-04\": \"0.75rem\",\n\t\"spacing-05\": \"1rem\",\n\t\"spacing-06\": \"1.25rem\",\n\t\"spacing-07\": \"1.5rem\",\n\t\"spacing-08\": \"1.75rem\",\n\t\"spacing-09\": \"2rem\",\n\t\"spacing-10\": \"2.25rem\",\n\t\"spacing-11\": \"2.5rem\",\n\t\"spacing-12\": \"2.75rem\",\n\t\"spacing-13\": \"3rem\",\n\t\"spacing-14\": \"3.25rem\",\n\t\"spacing-15\": \"3.5rem\",\n\t\"spacing-16\": \"3.75rem\",\n\t\"spacing-17\": \"4rem\",\n\t\"spacing-18\": \"4.25rem\",\n\t\"spacing-19\": \"4.5rem\",\n\t\"spacing-20\": \"4.75rem\",\n};","@import '~wabtec-internal-volt-foundations/dist/volt-foundations/volt-foundations';\n\n:host {\n  display: block;\n  .vds__textarea__container {\n    display: flex;\n    align-items: start;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: var(--radius-medium);\n    border: var(--border-thickness-01) solid var(--color-border-low);\n    background: var(--surface-medium);\n\n    &:hover {\n      border-color: var(--color-border-brand);\n      outline: var(--border-thickness-05) solid var(--color-interaction-brand-low);\n    }\n\n    &.vds__textarea__container--focus {\n      border-color: var(--color-border-brand);\n    }\n\n    &.vds__textarea__container--error {\n      border-color: var(--color-border-danger);\n      outline-color: var(--color-interaction-danger-medium);\n      .vds__textarea {\n        color: var(--color-text-danger-medium);\n      }\n    }\n    &.vds__textarea__container--readonly {\n      border-color: var(--color-border-low);\n      outline: none;\n      background-color: var(--color-interaction-black-lowest);\n      .vds__textarea {\n        color: var(--color-text-medium);\n      }\n    }\n    &.vds__textarea__container--disabled {\n      border-color: var(--color-border-disabled);\n      outline: none;\n      background-color: var(--surface-medium);\n      .vds__textarea {\n        color: var(--color-text-disabled);\n        &::placeholder {\n          color: var(--color-text-disabled);\n        }\n      }\n    }\n\n    &.vds__textarea--size-small {\n      gap: var(--spacing-02);\n      padding: var(--spacing-02) var(--spacing-03);\n      min-height: 3rem;\n      .vds__textarea {\n        min-width: 5.5rem;\n        min-height: 3rem;\n        @include font-style(body, small);\n      }\n    }\n\n    &.vds__textarea--size-medium {\n      gap: var(--spacing-02);\n      padding: var(--spacing-03) var(--spacing-04);\n      min-height: 4.5rem;\n      .vds__textarea {\n        min-width: 7.5rem;\n        min-height: 4.5rem;\n        @include font-style(body, medium);\n      }\n    }\n    &.vds__textarea--size-large {\n      gap: var(--spacing-03);\n      padding: var(--spacing-04) var(--spacing-05);\n      min-height: 6rem;\n      .vds__textarea {\n        min-width: 9.25rem;\n        min-height: 6rem;\n        @include font-style(body, large);\n      }\n    }\n\n    .vds__textarea {\n      flex-grow: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      resize: none;\n      overflow: hidden;\n      color: var(--color-text-high);\n      font-feature-settings: 'clig' off, 'liga' off;\n      text-overflow: ellipsis;\n      font-style: normal;\n      &::placeholder {\n        color: var(--color-text-medium);\n      }\n      &:hover,\n      &:focus {\n        border: none;\n        outline: none;\n      }\n    }\n  }\n}\n\n:host-context(.vds-basic-textarea--disabled){\n  pointer-events: none;\n}","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from '@stencil/core';\nimport {\n  toggleFocusClass,\n  setTouchedClass,\n  setDirtyClass, \n  maskInput,\n  setInputStyles\n} from '../input/vds-basic-input.utils';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { AttachInternals, HTMLStencilElement, Listen, Watch } from '@stencil/core/internal';\nimport spacingVars from '../../constants/spacing-vars';\nimport { emitInputEvent } from '../../utils/form';\n\n@Component({\n  tag: 'vds-basic-textarea',\n  styleUrl: 'vds-basic-textarea.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicTextarea {\n  /** Sets the textarea's size. */\n  @Prop({ mutable: true }) size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Sets the textarea's value. */\n  @Prop({ mutable: true }) value: string = \"\";\n  /** Sets the textarea's placeholder. */\n  @Prop({ mutable: true }) placeholder: string;\n  /** Sets the textarea in disabled state. */\n  @Prop({ mutable: true }) disabled: boolean;\n  /** Sets the textarea in readonly state. */\n  @Prop({ mutable: true }) isReadonly: boolean;\n  /** Sets the textarea in error state. */\n  @Prop({ mutable: true, reflect: true }) error: boolean;\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true, reflect: true }) isRequired: boolean = false \n  /** Sets character formatting for user inputs. Useful for adding a mask to the textarea. */\n  @Prop({ mutable: true }) formatter: Function;\n  /** Sets custom allowed styles to textarea (text-align, text-transform, unicode-bidi, direction) */\n  @Prop({ mutable: true }) allowedStyles: { [key: string]: string }[] = [];\n  /** Sets the width of the textarea. */\n  @Prop({ mutable: true }) width: string;\n  /** Sets the height of the textarea. This prop not works combining with autogrow=true. */\n  @Prop({ mutable: true }) height: string;\n  /** Sets the min-height for the textarea. This property works combining with autogrow=true only. \n   * - Default for medium: '4.5rem'\n   * - Default for large: '6rem'\n   * \n   * This value is automatically adjusted according to the 'size' property.\n   * @default '4.5rem' (when size is 'medium')\n  */\n  @Prop({ mutable: true }) minHeight: string = this.size === \"large\" ? \"6rem\" : this.size === \"small\" ? \"3rem\" : \"4.5rem\";\n  /** Sets the max-height for the textarea. This property works combining with autogrow=true only. \n   * - Default for medium: '12.15rem'\n   * - Default for large: '18rem'\n   * \n   * This value is automatically adjusted according to the 'size' property.\n   * @default '12.15rem' (when size is 'medium')\n  */\n  @Prop({ mutable: true }) maxHeight: string = this.size === \"large\" ? \"18rem\" : \"12.15rem\";\n  /** Makes the textarea grows with its content. This property works combining with maxHeight and minHeight. This prop not works combining with property height defined. */\n  @Prop({ mutable: true }) autogrow: boolean = true;\n\n  @Element() hostEl: HTMLVdsBasicTextareaElement;    \n\n\t/**  Emits updated textarea value */\n\t@Event() changeInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private textareaContainerRef: HTMLDivElement;\n  private textAreaEl: HTMLTextAreaElement;\n\n  componentDidLoad(): void {\n    this.setFormValue();\n  }\n\n  @Watch(\"value\")\n  setFormValue(): void {\n    emitInputEvent(this.hostEl, this.value);\n\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.value);\n    }\n  }\n\n  /**\n   * Toggle class vds__textarea__container--focus in focus/blur textarea's event\n   *\n   * @returns void\n   */\n  private toggleFocusClass(): void {\n    this.textareaContainerRef && toggleFocusClass(this.textareaContainerRef, \"textarea\");\n  }\n\n  /**\n   * Sets value from textarea's event target.\n   * Emits change, input and changeInput events.\n   * Sets textarea as dirty when textarea's event is triggered.\n   * Executes formatter prop function on every inputed value.\n   *\n   * @returns void\n   */\n  private handleInput(evt: InputEvent): void {\n    evt.stopPropagation();\n    const target = evt.target as HTMLTextAreaElement; \n    const inputEvent = new InputEvent(\"input\");\n    setDirtyClass(this.hostEl);\n\n    if(this.formatter) {\n      const maskValue = maskInput(this.formatter, target.value, this.value, evt.data, target, evt);\n      this.value = maskValue;\n    } else {\n      this.value = target.value;\n    }\n\n    this.changeInput.emit(this.value);\n\t\tthis.hostEl.dispatchEvent(inputEvent);\n  }\n\n\n  /**\n   * Sets textarea inline styles for the allowedStyle, height and width\n   * [direction, text-align, textAlign, text-transform, textTransform, unicode-bidi, unicodeBidi]\n   *\n   * @returns { [key: string]: string }\n   */\n    private setTextareaStyles(): { [key: string]: string } {\n      const inputedStyles = {...setInputStyles(this.allowedStyles) };\n\n      if (this.autogrow) {\n        inputedStyles.fieldSizing = \"content\";\n      }\n\n      const styles = this.setSizesStyles(inputedStyles) || {};\n      const paddingOffset = this.size === \"large\" ? spacingVars[\"spacing-04\"] : this.size === \"small\" ? spacingVars[\"spacing-02\"] : spacingVars[\"spacing-03\"]\n\n      if (styles.height && !this.autogrow) {\n        styles.height = `calc(${styles.height} - ${paddingOffset} * 2)`;\n      }\n\n      if (styles.minHeight) {\n        styles.minHeight = `calc(${styles.minHeight} - ${paddingOffset} * 2)`;\n      }\n\n      if (styles.maxHeight) {\n        styles.maxHeight = `calc(${styles.maxHeight} - ${paddingOffset} * 2)`;\n      }\n      \n      return styles;\n    }\n\n    /**\n     * Sets textarea inline styles for the height and width\n     *\n     * @returns { [key: string]: string }\n     */\n    private setSizesStyles(styles: { [key: string]: string } = {}): { [key: string]: string } {\n      if (this.width) {\n        styles.width = this.width;\n      }\n\n      if (this.height) {\n        styles.height = this.height;\n      }\n\n      if (this.maxHeight) {\n        styles.maxHeight = this.maxHeight;\n      }\n\n      if (this.minHeight) {\n        styles.minHeight = this.minHeight;\n      }\n\n      return styles;\n    }\n\n  /**\n\t * Executes method when vds-textarea gets focus.\n\t *\n\t * @returns void\n\t */\n\t@Listen(\"focus\")\n\thandleFocus(): void {\n    setTouchedClass(this.hostEl);\n\t}\n\n  /**\n\t * Sets focus on the vds-textarea element.\n\t *\n\t * @returns Promise<void>\n\t */\n\t@Method()\n\tsetFocus(): Promise<void> {\n    return new Promise((resolve) => {\n      this.textAreaEl.focus();\n      resolve();\n    });\n\t}\n\n  /**\n\t * Gets value prop from the vds-textarea element.\n\t *\n\t * @returns Promise<string>\n\t */\n\t@Method()\n\tgetValue(): Promise<string> {\n    return new Promise((resolve) => {\n      resolve(this.value);\n    });\n\t}\n\n  /**\n   * Clears value prop from the vds-basic-textarea element.\n   *\n   * @returns Promise<void>\n   */\n  @Method()\n  clear(): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = \"\";\n      this.textAreaEl.value = \"\";\n      resolve();\n    });\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-basic-textarea--disabled\" : \"\"}>\n          <div\n            ref={(el): void => { if(el) this.textareaContainerRef = el} }\n            class={combineClasses(\n              \"vds__textarea__container\",\n              `vds__textarea--size-${this.size}`,\n              this.error && \"vds__textarea__container--error\",\n              this.isReadonly && \"vds__textarea__container--readonly\",\n              this.disabled && \"vds__textarea__container--disabled\"\n            )}\n            style={this.setSizesStyles()}\n          >\n            <textarea\n              ref={(el): void => { if(el) this.textAreaEl = el} }\n              class={\"vds__textarea\"}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.isRequired}\n              readOnly={this.isReadonly}\n              style={this.setTextareaStyles()}\n              onInput={(evt): void => this.handleInput(evt)}\n              onFocus={(): void => this.toggleFocusClass()}\n              onBlur={(): void => this.toggleFocusClass()}\n              {...cloneAttributes(\n                this.hostEl,\n                \"class\",\n                \"value\",\n                \"disabled\",\n                \"placeholder\",\n                \"label\",\n                \"style\"\n              )}\n            ></textarea>\n            <slot name=\"secondaryActionIcon\" />\n            <slot name=\"primaryActionIcon\" />\n          </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/vds-breadcrumbs-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VdsBreadcrumbsItem extends Components.VdsBreadcrumbsItem, HTMLElement {}
+export const VdsBreadcrumbsItem: {
+    prototype: VdsBreadcrumbsItem;
+    new (): VdsBreadcrumbsItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/vds-breadcrumbs-item.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host, transformTag } from '@stencil/core/internal/client';
+import { c as combineClasses } from './combine-classes.js';
+
+const vdsBreadcrumbsItemCss = () => `: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}@font-face{font-family:"Roboto Flex";src:url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");font-weight:100 1000;font-stretch:25% 151%;font-style:normal}: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-white-medium:rgba(255, 255, 255, 0.6392156863);--static-white-low:rgba(255, 255, 255, 0.3215686275);--static-white-lower:rgba(255, 255, 255, 0.1607843137);--static-white-lowest:rgba(255, 255, 255, 0.1215686275);--static-black:#000000;--static-black-medium:rgba(0, 0, 0, 0.6392156863);--static-black-low:rgba(0, 0, 0, 0.3215686275);--static-black-lower:rgba(0, 0, 0, 0.1607843137);--static-black-lowest:rgba(0, 0, 0, 0.1215686275);--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 .vds-breadcrumbs-item{display:flex;border:var(--spacing-01) solid transparent;justify-content:center;align-items:center;box-sizing:border-box}:host .vds-breadcrumbs-item ::slotted(a){text-decoration:none;background:none;border:none;outline:none;height:var(--spacing-09);padding:0 var(--spacing-03);box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:var(--color-text-medium);font-feature-settings:"liga" off, "clig" off;font-family:"Roboto Flex", sans-serif;font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal}:host .vds-breadcrumbs-item.vds-breadcrumbs-item--active ::slotted(a){font-family:"Roboto Flex", sans-serif;font-size:1rem;font-weight:600;line-height:1.5rem;letter-spacing:normal;color:var(--color-text-high)}:host .vds-breadcrumbs-item.vds-breadcrumbs-item--disabled{pointer-events:none}:host .vds-breadcrumbs-item.vds-breadcrumbs-item--disabled ::slotted(a){font-family:"Roboto Flex", sans-serif;font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:normal;color:var(--color-text-disabled)}:host .vds-breadcrumbs-item:hover ::slotted(a),:host .vds-breadcrumbs-item:focus ::slotted(a),:host .vds-breadcrumbs-item:focus-within ::slotted(a){color:var(--color-text-high);text-decoration:underline;outline:none;background:none;text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host .vds-breadcrumbs-item:focus,:host .vds-breadcrumbs-item:focus-within{border-radius:var(--spacing-02);border-color:var(--color-border-focus-2)}:host .vds-breadcrumbs-item:active ::slotted(a){color:var(--color-text-high);text-decoration:underline;background:none}:host .vds-breadcrumbs-item:visited ::slotted(a){color:var(--color-text-medium)}:host-context(.vds-breadcrumbs-item--disabled){pointer-events:none}:host-context(.truncate-menu) .vds-breadcrumbs-item{padding:0 var(--spacing-03)}`;
+
+const VdsBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class VdsBreadcrumbItem extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Sets the breacrumb item in disabled state */
+        this.disabled = false;
+        /** Sets the breacrumb item in active state */
+        this.isActive = false;
+    }
+    render() {
+        return (h(Host, { key: '63c8e06e2604f7521dc427e05138737d2e7ef1aa' }, h("div", { key: '5639c2421ccad343e57b6c9bb00bd760b188ecde', class: combineClasses("vds-breadcrumbs-item", this.disabled ? "vds-breadcrumbs-item--disabled" : "", this.isActive ? "vds-breadcrumbs-item--active" : "") }, h("slot", { key: '969475359db6669f0b797ec7c76f92d5c6c55d1c' }))));
+    }
+    static get style() { return vdsBreadcrumbsItemCss(); }
+}, [257, "vds-breadcrumbs-item", {
+        "disabled": [4],
+        "isActive": [4, "is-active"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["vds-breadcrumbs-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "vds-breadcrumbs-item":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), VdsBreadcrumbItem);
+            }
+            break;
+    } });
+}
+
+const VdsBreadcrumbsItem = VdsBreadcrumbItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { VdsBreadcrumbsItem, defineCustomElement };
+//# sourceMappingURL=vds-breadcrumbs-item.js.map
+
+//# sourceMappingURL=vds-breadcrumbs-item.js.map

package/dist/components/vds-breadcrumbs-item.js.map

@@ -0,0 +1 @@
+{"file":"vds-breadcrumbs-item.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,MAAM,CAAC,4piCAA4piC,CAAC;;MCQrriC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAA,WAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,CACxB,sBAAsB,EACtB,IAAI,CAAC,QAAQ,GAAG,gCAAgC,GAAG,EAAE,EACrD,IAAI,CAAC,QAAQ,GAAG,8BAA8B,GAAG,EAAE,CACpD,EAAA,EACC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/breadcrumb-item/vds-breadcrumbs-item.scss?tag=vds-breadcrumbs-item&encapsulation=shadow","src/components/breadcrumb-item/vds-breadcrumbs-item.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  .vds-breadcrumbs-item {\n    display: flex;\n    border: var(--spacing-01) solid transparent;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n\n    ::slotted(a) {\n      text-decoration: none;\n      background: none;\n      border: none;\n      outline: none;\n      height: var(--spacing-09);\n      padding: 0 var(--spacing-03);\n      box-sizing: border-box;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      color: var(--color-text-medium);\n      font-feature-settings: 'liga' off, 'clig' off;\n      @include font-style(body, large);\n    }\n\n    &.vds-breadcrumbs-item--active {\n      ::slotted(a) {\n        @include font-style(title, medium);\n        color: var(--color-text-high);\n      }\n    }\n\n    &.vds-breadcrumbs-item--disabled {\n      pointer-events: none;\n      ::slotted(a) {\n        @include font-style(body, large);\n        color: var(--color-text-disabled);\n      }\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-within {\n      ::slotted(a) {\n      color: var(--color-text-high);\n      text-decoration: underline;\n      outline: none;\n      background: none;\n\n      text-decoration-line: underline;\n      text-decoration-style: solid;\n      text-decoration-skip-ink: auto;\n      text-decoration-thickness: auto;\n      text-underline-offset: auto;\n      text-underline-position: from-font;\n      }\n    }\n    \n    &:focus,\n    &:focus-within {\n      border-radius: var(--spacing-02);\n      border-color: var(--color-border-focus-2);\n    }\n\n    &:active {\n      ::slotted(a) {\n        color: var(--color-text-high);\n        text-decoration: underline;\n        background: none;\n      }\n    }\n\n    &:visited {\n      ::slotted(a) {\n        color: var(--color-text-medium);\n      }\n    }\n  }\n}\n\n:host-context(.vds-breadcrumbs-item--disabled) {\n  pointer-events: none;\n}\n\n:host-context(.truncate-menu) {\n  .vds-breadcrumbs-item {\n    padding: 0 var(--spacing-03);\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-breadcrumbs-item',\n  styleUrl: 'vds-breadcrumbs-item.scss',\n  shadow: true,\n})\nexport class VdsBreadcrumbItem {\n  /** Sets the breacrumb item in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Sets the breacrumb item in active state */\n  @Prop() isActive: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={combineClasses(\n          \"vds-breadcrumbs-item\",\n          this.disabled ? \"vds-breadcrumbs-item--disabled\" : \"\",\n          this.isActive ? \"vds-breadcrumbs-item--active\" : \"\"\n        )}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}