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

package/dist/collection/components/dialog-body/vds-dialog-body.css

@@ -1,4 +1,3 @@
-@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;
@@ -481,6 +480,13 @@
   --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;
@@ -733,7 +739,15 @@
   --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);

package/dist/collection/components/dialog-body/vds-dialog-body.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class VdsDialogBody {
     render() {
-        return (h(Host, { key: 'f8801559a7f690dc19e87149b8335a9c8fadf81f' }, h("div", { key: '3dba6041087861465d7d56aa31a5ccd0baf58542', class: "vds__dialog--body" }, h("slot", { key: '207860b82505fef19b358d5eb5c5edddbb0938b5' }))));
+        return (h(Host, { key: '28c7cb0505ab49c6fef1f5b8304af8214ef747e5' }, h("div", { key: 'd41d19b71a1a46cb7d0dfbeea5c35e960deba9d9', class: "vds__dialog--body" }, h("slot", { key: '88ba5c39550fcb15bc187d5c7db8cce28500484a' }))));
     }
     static get is() { return "vds-dialog-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dialog-header/vds-dialog-header.css

@@ -1,4 +1,3 @@
-@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;
@@ -481,6 +480,13 @@
   --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;
@@ -733,7 +739,15 @@
   --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);

package/dist/collection/components/dialog-header/vds-dialog-header.js

@@ -5,7 +5,7 @@ export class VdsDialogHeader {
         this.showCloseButton = true;
     }
     render() {
-        return (h(Host, { key: 'fef77b86be1fa3e445af1811b00df0e644f5e866' }, h("div", { key: '0cc546ff6b2b994bf1580d9cc5c5b7e658bbd42d', class: "vds__dialog__header" }, h("div", { key: '54cde5951899fc7472863e05a82a2c1cb643a1e8', class: "vds__dialog__header--text" }, h("slot", { key: 'bd293f68255b6a443c12b608c6f6573c0c15833e' })), this.showCloseButton && h("vds-icon-button", { key: '427cded39ebe173ded2bcaba351743d4f751ca82', variant: "secondary", icon: "close", onClick: () => this.closeButton.emit() }))));
+        return (h(Host, { key: '80aa0b0ead2829f73fc9008fd197a5606c8c5173' }, h("div", { key: '4872fe04123cf913aa5269bc147552dd6fc3b743', class: "vds__dialog__header" }, h("div", { key: '18c40f159d3fdf9077f81ddc5efda55d7820b0f1', class: "vds__dialog__header--text" }, h("slot", { key: 'ecf551fc10290b6bbfbdf277a14369194567f07c' })), this.showCloseButton && h("vds-icon-button", { key: 'f9d775ea8b6a52354009ac418c20db573109d5ab', variant: "secondary", icon: "close", onClick: () => this.closeButton.emit() }))));
     }
     static get is() { return "vds-dialog-header"; }
     static get encapsulation() { return "shadow"; }
@@ -23,7 +23,6 @@ export class VdsDialogHeader {
         return {
             "showCloseButton": {
                 "type": "boolean",
-                "attribute": "show-close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -39,6 +38,7 @@ export class VdsDialogHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-close-button",
                 "defaultValue": "true"
             }
         };

package/dist/collection/components/dialog-modal/vds-dialog-modal.css

@@ -1,4 +1,3 @@
-@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;
@@ -481,6 +480,13 @@
   --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;
@@ -733,7 +739,15 @@
   --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);
@@ -903,4 +917,5 @@
 :host(.vds__dialog__modal--container) {
   width: 100%;
   height: 100%;
+  position: relative;
 }

package/dist/collection/components/dialog-modal/vds-dialog-modal.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class VdsDialogModal {
     render() {
-        return (h(Host, { key: '2e648c7e8f51063011ac1d15d8f6084ace1c72bb', class: "vds__dialog__modal--container" }, h("div", { key: 'e657655af79ee939a9c93e608c2e5ac59dd5b8bb', class: "vds__dialog__modal" }, h("slot", { key: '458bac395485ed95772c5a93878a4cf7ffe1b1bf', name: "header" }), h("slot", { key: '0794777e3adc31032dcc5c8a4e13bbc174a38845' }), h("slot", { key: '4369497486e80675ec74d9ee58179c52b8969eaa', name: "body" }), h("slot", { key: 'f697338c38432cb317952803371e4f33f3485595', name: "footer" }))));
+        return (h(Host, { key: '835fba201d44bff8f4734df815ee18dc855bc385', class: "vds__dialog__modal--container" }, h("div", { key: '9619d1b2ac4a2d7ad6b1e2ea2a2085087056310d', class: "vds__dialog__modal" }, h("slot", { key: '6502a0107d3566ce241f3e74d66246fb5f1f260a', name: "header" }), h("slot", { key: 'a118b815045b6065ec7c88438bb3945f2598e8d6' }), h("slot", { key: 'dec95e3cef28a069579243b0249ea8ca52cd96c5', name: "body" }), h("slot", { key: '37c833c80c6580b02199b2ba99506f023e0e22bb', name: "footer" }))));
     }
     static get is() { return "vds-dialog-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/vds-divider.css

@@ -1,4 +1,3 @@
-@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;
@@ -481,6 +480,13 @@
   --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;
@@ -733,7 +739,15 @@
   --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);
@@ -902,13 +916,17 @@
 
 :host {
   display: block;
+  --vds-divider-padding-top: var(--spacing-03);
+  --vds-divider-padding-bottom: var(--spacing-03);
+  --vds-divider-padding-left: var(--spacing-03);
+  --vds-divider-padding-right: var(--spacing-03);
 }
 :host .vds__divider--container-horizontal {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: var(--spacing-03);
-  padding-bottom: var(--spacing-03);
+  padding-top: var(--vds-divider-padding-top);
+  padding-bottom: var(--vds-divider-padding-bottom);
   overflow: hidden;
   height: fit-content;
 }
@@ -916,8 +934,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: var(--spacing-03);
-  padding-right: var(--spacing-03);
+  padding-left: var(--vds-divider-padding-left);
+  padding-right: var(--vds-divider-padding-right);
   overflow: hidden;
   width: fit-content;
   height: 100%;

package/dist/collection/components/divider/vds-divider.js

@@ -19,7 +19,7 @@ export class VdsDivider {
         };
     }
     render() {
-        return (h(Host, { key: 'ae5793caf1da21832dff21a666b8c1ababb380c1', class: combineClasses(this.orientation), style: this.setDividerStyle() }, h("div", { key: '1c28ffae0ebc63b1e03881c34260cfc00f3f7a07', class: combineClasses('vds__divider--container-' + this.orientation) }, h("div", { key: '4c47e86d424355379e8deb834f489264ba7989f1', class: combineClasses('vds__divider--line', 'vds__divider--orientation-' + this.orientation) }))));
+        return (h(Host, { key: 'e47997c6997829e2e5fb04c608536fd121e72185', class: combineClasses(this.orientation), style: this.setDividerStyle() }, h("div", { key: 'bc89cd5d81c970de09c2796fc5838546898e70a2', class: combineClasses('vds__divider--container-' + this.orientation) }, h("div", { key: '2c1382b8490529807d666c73585a1f4a3c69b1f8', class: combineClasses('vds__divider--line', 'vds__divider--orientation-' + this.orientation) }))));
     }
     static get is() { return "vds-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -37,7 +37,6 @@ export class VdsDivider {
         return {
             "padding": {
                 "type": "string",
-                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "Spacing",
@@ -59,11 +58,11 @@ export class VdsDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "padding",
                 "defaultValue": "'spacing-03'"
             },
             "orientation": {
                 "type": "string",
-                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical'",
@@ -79,20 +78,30 @@ export class VdsDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "'horizontal'"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
-                    "original": "BorderColors",
-                    "resolved": "\"color-border-high\" | \"color-border-medium\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-disabled\" | \"color-border-danger\" | \"color-border-healthy\" | \"color-border-caution\" | \"color-border-warning\" | \"color-border-information\" | \"color-border-general\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-white-high\" | \"color-border-white-medium\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\"",
+                    "original": "BorderColors | StaticGlobal | Palettes",
+                    "resolved": "\"color-border-high\" | \"color-border-medium\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-disabled\" | \"color-border-danger\" | \"color-border-healthy\" | \"color-border-caution\" | \"color-border-warning\" | \"color-border-information\" | \"color-border-general\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-white-high\" | \"color-border-white-medium\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"static-brand-50\" | \"static-brand-100\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-500\" | \"static-brand-main\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-1000\" | \"static-brand-1000-medium\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-green-50\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-500\" | \"static-green-main\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-grey-50\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-500\" | \"static-grey-main\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-neutral-50\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-500\" | \"static-neutral-main\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-400-medium\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-800-medium\" | \"static-neutral-800-low\" | \"static-orange-50\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-500\" | \"static-orange-main\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-red-50\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-500\" | \"static-red-main\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-yellow-50\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-500\" | \"static-yellow-main\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-white\" | \"static-white-medium\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-black\" | \"static-black-medium\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\"",
                     "references": {
                         "BorderColors": {
                             "location": "import",
                             "path": "../../definitions/colors",
                             "id": "src/definitions/colors.ts::BorderColors"
+                        },
+                        "StaticGlobal": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::StaticGlobal"
+                        },
+                        "Palettes": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Palettes"
                         }
                     }
                 },
@@ -105,11 +114,11 @@ export class VdsDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "'color-border-low'"
             },
             "thickness": {
                 "type": "string",
-                "attribute": "thickness",
                 "mutable": false,
                 "complexType": {
                     "original": "BorderThickness",
@@ -131,6 +140,7 @@ export class VdsDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "thickness",
                 "defaultValue": "'border-thickness-01'"
             }
         };

package/dist/collection/components/divider/vds-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-divider.js","sourceRoot":"","sources":["../../../src/components/divider/vds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,MAAM,OAAO,UAAU;IALvB;QAME,sDAAsD;QAC9C,YAAO,GAAY,YAAY,CAAC;QACxC,wDAAwD;QAChD,gBAAW,GAA8B,YAAY,CAAC;QAC9D,iCAAiC;QACzB,UAAK,GAAiB,kBAAkB,CAAC;QACjD,qCAAqC;QAC7B,cAAS,GAAoB,qBAAqB,CAAC;KAyB5D;IAvBS,eAAe;QACrB,OAAO;YACL,mBAAmB,EAAE,SAAS,IAAI,CAAC,OAAO,GAAG;YAC7C,wBAAwB,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG;YAChD,wBAAwB,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;SACrD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE;YAC1E,4DAAK,KAAK,EAAE,cAAc,CACxB,0BAA0B,GAAG,IAAI,CAAC,WAAW,CAC1C;gBACH,4DAAK,KAAK,EAAE,cAAc,CACxB,oBAAoB,EACpB,4BAA4B,GAAG,IAAI,CAAC,WAAW,CAC9C,GACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { Spacing } from '../../definitions/spacing';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { BorderColors } from '../../definitions/colors';\nimport { BorderThickness } from '../../definitions/thickness';\n\n@Component({\n  tag: 'vds-divider',\n  styleUrl: 'vds-divider.scss',\n  shadow: true,\n})\nexport class VdsDivider {\n  /** Define divider padding using our spacing system */\n  @Prop() padding: Spacing = 'spacing-03';\n  /** Define divider orientation horizontal or vertical */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n  /** Set the divider line color */\n  @Prop() color: BorderColors = 'color-border-low';\n  /** Set the divider line thickness */\n  @Prop() thickness: BorderThickness = 'border-thickness-01';\n\n  private setDividerStyle() {\n    return {\n      '--divider-padding': `var(--${this.padding})`,\n      '--divider-border-color': `var(--${this.color})`,\n      '--divider-border-width': `var(--${this.thickness})`,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={combineClasses(this.orientation)} style={this.setDividerStyle()}>\n        <div class={combineClasses(\n          'vds__divider--container-' + this.orientation\n            )}>\n          <div class={combineClasses(\n            'vds__divider--line',\n            'vds__divider--orientation-' + this.orientation\n            )}>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-divider.js","sourceRoot":"","sources":["../../../src/components/divider/vds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAS7D,MAAM,OAAO,UAAU;IALvB;QAME,sDAAsD;QAC9C,YAAO,GAAY,YAAY,CAAC;QACxC,wDAAwD;QAChD,gBAAW,GAA8B,YAAY,CAAC;QAC9D,iCAAiC;QACzB,UAAK,GAA2C,kBAAkB,CAAC;QAC3E,qCAAqC;QAC7B,cAAS,GAAoB,qBAAqB,CAAC;KAyB5D;IAvBS,eAAe;QACrB,OAAO;YACL,mBAAmB,EAAE,SAAS,IAAI,CAAC,OAAO,GAAG;YAC7C,wBAAwB,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG;YAChD,wBAAwB,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;SACrD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE;YAC1E,4DAAK,KAAK,EAAE,cAAc,CACxB,0BAA0B,GAAG,IAAI,CAAC,WAAW,CAC1C;gBACH,4DAAK,KAAK,EAAE,cAAc,CACxB,oBAAoB,EACpB,4BAA4B,GAAG,IAAI,CAAC,WAAW,CAC9C,GACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { Spacing } from '../../definitions/spacing';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { BorderColors, Palettes, StaticGlobal } from '../../definitions/colors';\nimport { BorderThickness } from '../../definitions/thickness';\n\n@Component({\n  tag: 'vds-divider',\n  styleUrl: 'vds-divider.scss',\n  shadow: true,\n})\nexport class VdsDivider {\n  /** Define divider padding using our spacing system */\n  @Prop() padding: Spacing = 'spacing-03';\n  /** Define divider orientation horizontal or vertical */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n  /** Set the divider line color */\n  @Prop() color: BorderColors | StaticGlobal | Palettes = 'color-border-low';\n  /** Set the divider line thickness */\n  @Prop() thickness: BorderThickness = 'border-thickness-01';\n\n  private setDividerStyle() {\n    return {\n      '--divider-padding': `var(--${this.padding})`,\n      '--divider-border-color': `var(--${this.color})`,\n      '--divider-border-width': `var(--${this.thickness})`,\n    };\n  }\n\n  render() {\n    return (\n      <Host class={combineClasses(this.orientation)} style={this.setDividerStyle()}>\n        <div class={combineClasses(\n          'vds__divider--container-' + this.orientation\n            )}>\n          <div class={combineClasses(\n            'vds__divider--line',\n            'vds__divider--orientation-' + this.orientation\n            )}>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/drawer/vds-drawer.css

@@ -1,4 +1,3 @@
-@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;
@@ -481,6 +480,13 @@
   --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;
@@ -733,7 +739,15 @@
   --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);
@@ -894,6 +908,7 @@
   display: block;
   height: 100vh;
   width: 100%;
+  --vds-drawer-display-opened: block;
   --vds-drawer-background-color: var(--surface-medium);
   --vds-drawer-border-color: var(--color-border-lowest);
   --vds-drawer-backdrop-background-color: var(--color-interaction-black-lower);
@@ -912,7 +927,7 @@
   justify-content: end;
 }
 :host .volt__drawer.volt__drawer--opened {
-  display: block;
+  display: var(--vds-drawer-display-opened, block);
 }
 :host .volt__drawer.padding__spacing-00 {
   padding: var(--spacing-00);

package/dist/collection/components/drawer/vds-drawer.js

@@ -54,7 +54,7 @@ export class VdsDrawer {
             }, variant: 'secondary', icon: "close", disabled: this.disableClose, size: "large" }));
     }
     render() {
-        return (h(Host, { key: 'baf8f2318888b313b47494136874f43efd858f13', class: combineClasses(`vds-drawer__${this.mode}`, `vds-drawer__${this.position}`, this.isAdaptable ? 'vds-drawer--adaptable' : '') }, h("div", { key: '63adf4e51f55d4b8aa6316625937a86e2b6f08b6', class: combineClasses('volt__drawer', `padding__${this.padding}`, this.opened ? 'volt__drawer--opened' : '', `volt__drawer__element--position-${this.position}`, this.showShadow ? `vds-drawer__shadow--${this.position}` : '', this.showBorder ? `vds-drawer__border--${this.position}` : '', this.dropdownIsOpened ? "vds-drawer__dropdown-is-opened" : "") }, h("div", { key: 'c8c23dbc0e8232251b67c95443483e03e069eff7', class: `volt__drawer--content` }, h("div", { key: '21bee6d81a221e2ab3cdf52853b2002b9ed069cf', class: `volt__drawer--header ${this.showCloseButton ? "volt__drawer--header-close-icon" : ""}` }, h("div", { key: '957f5f65a26e0c0cdeb32c86f61233e732de4718', class: "volt__drawer--header-content" }, h("slot", { key: 'bfaae560a91eea57122662bcbbd5435c4d4ccf9c', name: "header" })), this.showCloseButton && this.renderCloseIcon()), h("div", { key: '88a0e15bd3e65f482c7653fa2ce0a355d908fcbc', class: `volt-drawer__body` }, h("slot", { key: '6effb9ba49419e3401bd93b277d858a9fed9aea8', name: "drawer" })), h("slot", { key: 'd9322d3e18b63ef96d42e261077d96e325233cdd', name: "footer" }))), h("div", { key: '9d8304e945b37fd25c871c3e4a897118c23fc331', class: 'volt__drawer__container' }, this.backdrop && this.opened ? this.renderBackdrop() : '', h("slot", { key: '093a01ed757443981d825dffd16ff25e963ba85c', name: "container" }))));
+        return (h(Host, { key: '04a0ae5396f135a3f705da5b2bc95b4526746c83', class: combineClasses(`vds-drawer__${this.mode}`, `vds-drawer__${this.position}`, this.isAdaptable ? 'vds-drawer--adaptable' : '') }, h("div", { key: '2277cf42ad559236e3465fa677e620328a81f4b0', class: combineClasses('volt__drawer', `padding__${this.padding}`, this.opened ? 'volt__drawer--opened' : '', `volt__drawer__element--position-${this.position}`, this.showShadow ? `vds-drawer__shadow--${this.position}` : '', this.showBorder ? `vds-drawer__border--${this.position}` : '', this.dropdownIsOpened ? "vds-drawer__dropdown-is-opened" : "") }, h("div", { key: '426287a215506b507f63dadd08af2821754ea21f', class: `volt__drawer--content` }, h("div", { key: 'ae7358588fa5443c0980a42fc9ee041aa1ae07ff', class: `volt__drawer--header ${this.showCloseButton ? "volt__drawer--header-close-icon" : ""}` }, h("div", { key: '62dc06dae100c113442c5f8e8fed39baca68c0a4', class: "volt__drawer--header-content" }, h("slot", { key: '9980201d3707f32fafad442041bad3aa89688cec', name: "header" })), this.showCloseButton && this.renderCloseIcon()), h("div", { key: '61dbabf20c2b6cc8f1b5377498ab37436cf0f1cc', class: `volt-drawer__body` }, h("slot", { key: '70e974cf002905462fa5e38877d821cf4167a7d4', name: "drawer" })), h("slot", { key: '65484691baee2f614e4d47e1b3becbbc77f26152', name: "footer" }))), h("div", { key: 'f3ea19cec4e4570e3d4bb3f850b86253537765aa', class: 'volt__drawer__container' }, this.backdrop && this.opened ? this.renderBackdrop() : '', h("slot", { key: '0569939d8ca916c80d9a7c77e9351990b6ec2eab', name: "container" }))));
     }
     static get is() { return "vds-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -72,7 +72,6 @@ export class VdsDrawer {
         return {
             "opened": {
                 "type": "boolean",
-                "attribute": "opened",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -87,11 +86,11 @@ export class VdsDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "opened"
             },
             "showCloseButton": {
                 "type": "boolean",
-                "attribute": "show-close-button",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -106,11 +105,11 @@ export class VdsDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "show-close-button"
             },
             "disableClose": {
                 "type": "boolean",
-                "attribute": "disable-close",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -125,11 +124,11 @@ export class VdsDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "disable-close"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -145,11 +144,11 @@ export class VdsDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "'left'"
             },
             "backdrop": {
                 "type": "boolean",
-                "attribute": "backdrop",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -164,11 +163,11 @@ export class VdsDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "backdrop"
             },
             "padding": {
                 "type": "string",
-                "attribute": "padding",
                 "mutable": true,
                 "complexType": {
                     "original": "Spacing",
@@ -189,11 +188,11 @@ export class VdsDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "padding"
             },
             "mode": {
                 "type": "string",
-                "attribute": "mode",
                 "mutable": true,
                 "complexType": {
                     "original": "'over' | 'side'",
@@ -209,11 +208,11 @@ export class VdsDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "mode",
                 "defaultValue": "'over'"
             },
             "isAdaptable": {
                 "type": "boolean",
-                "attribute": "is-adaptable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -229,11 +228,11 @@ export class VdsDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-adaptable",
                 "defaultValue": "false"
             },
             "showShadow": {
                 "type": "boolean",
-                "attribute": "show-shadow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -249,11 +248,11 @@ export class VdsDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-shadow",
                 "defaultValue": "true"
             },
             "showBorder": {
                 "type": "boolean",
-                "attribute": "show-border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -269,6 +268,7 @@ export class VdsDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-border",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/dropdown-group-header/vds-dropdown-group-header.css

@@ -1,4 +1,3 @@
-@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;
@@ -481,6 +480,13 @@
   --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;
@@ -733,7 +739,15 @@
   --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);

package/dist/collection/components/dropdown-group-header/vds-dropdown-group-header.js

@@ -6,7 +6,7 @@ export class VdsDropdownGroupHeader {
         this.size = 'medium';
     }
     render() {
-        return (h(Host, { key: '75593f8e1532e716734ae6ee39cc988d4b6d9e40' }, generateGroupHeaderContainer(this.size)));
+        return (h(Host, { key: 'bf177d4cf6a3ee77fbb11b459940e9923cd47157' }, generateGroupHeaderContainer(this.size)));
     }
     static get is() { return "vds-dropdown-group-header"; }
     static get encapsulation() { return "shadow"; }
@@ -24,7 +24,6 @@ export class VdsDropdownGroupHeader {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "GroupHeaderSize",
@@ -46,6 +45,7 @@ export class VdsDropdownGroupHeader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             }
         };

package/dist/collection/components/dropdown-item/vds-dropdown-item.css

@@ -1,4 +1,3 @@
-@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;
@@ -481,6 +480,13 @@
   --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;
@@ -733,7 +739,15 @@
   --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);