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

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

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsBreadcrumbItem {
+    constructor() {
+        /** 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 is() { return "vds-breadcrumbs-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-breadcrumbs-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-breadcrumbs-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the breacrumb item in disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the breacrumb item in active state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-active",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=vds-breadcrumbs-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-breadcrumbs-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/vds-breadcrumbs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAO7D,MAAM,OAAO,iBAAiB;IAL9B;QAME,gDAAgD;QACxC,aAAQ,GAAY,KAAK,CAAC;QAElC,8CAA8C;QACtC,aAAQ,GAAY,KAAK,CAAC;KAenC;IAbC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc,CACxB,sBAAsB,EACtB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EACrD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CACpD;gBACC,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/breadcrumb-item/vds-breadcrumbs-item.stories.js

@@ -0,0 +1,68 @@
+export default {
+    title: 'VDS/Components/Breadcrumbs/BreadcrumbItem',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-125481&focus-id=33183-125481&m=dev"
+        }
+    }
+};
+const style = `
+<style>
+    .container {
+        width: 500px;
+        padding: 10px;
+        margin: auto;
+    }
+</style>
+`;
+const codeTemplate = (args) => {
+    return `
+${style}
+<div class="container">
+    <vds-breadcrumbs-item is-active=${args.isActive} disabled=${args.disabled}>
+        <a href="#">${args.text}</a>
+    </vds-breadcrumbs-item>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    text: 'Horror movies',
+    isActive: false,
+    disabled: false
+};
+const menuTemplate = () => {
+    return `
+${style}
+<div class="container">
+    <vds-breadcrumbs-item class="truncate-menu">
+        <vds-menu>
+          <vds-icon-button class="breadcrumb" slot="menu-trigger" variant="tertiary" icon="more-horizontal"></vds-icon-button>
+          <div slot="menu-content">
+            <vds-menu-list>
+                <vds-menu-item class="breadcrumb">
+                    <a href="google.com">Home</a>
+                </vds-menu-item>
+                <vds-menu-item class="breadcrumb" disabled>
+                    <a href="google.com">Food supply</a>
+                </vds-menu-item>
+                <vds-menu-item class="breadcrumb" danger>
+                    <a href="google.com">Meals</a>
+                </vds-menu-item>
+                <vds-menu-item  class="breadcrumb" is-active>
+                    <a href="#">Food</a>
+                </vds-menu-item>
+            </vds-menu-list>
+          </div>
+        </vds-menu>
+    </vds-breadcrumbs-item>
+</div>
+`;
+};
+export const MenuUsage = menuTemplate.bind({});
+MenuUsage.args = {};
+//# sourceMappingURL=vds-breadcrumbs-item.stories.js.map

package/dist/collection/components/breadcrumb-item/vds-breadcrumbs-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-breadcrumbs-item.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb-item/vds-breadcrumbs-item.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,2CAA2C;IAClD,UAAU,EAAE;QACR,IAAI,EAAE;YACF,GAAG,EAAE,IAAI;SACZ;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,6GAA6G;SACrH;KACJ;CACJ,CAAC;AAEF,MAAM,KAAK,GAAG;;;;;;;;CAQb,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;EACT,KAAK;;sCAE+B,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,QAAQ;sBACvD,IAAI,CAAC,IAAI;;;CAG9B,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAClB,CAAA;AAGD,MAAM,YAAY,GAAG,GAAG,EAAE;IACtB,OAAO;EACT,KAAK;;;;;;;;;;;;;;;;;;;;;;;;CAwBN,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,SAAS,CAAC,IAAI,GAAG,EAChB,CAAA","sourcesContent":["export default {\n    title: 'VDS/Components/Breadcrumbs/BreadcrumbItem',\n    parameters: {\n        docs: {\n            toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?node-id=33183-125481&focus-id=33183-125481&m=dev\"\n        }\n    }\n};\n\nconst style = `\n<style>\n    .container {\n        width: 500px;\n        padding: 10px;\n        margin: auto;\n    }\n</style>\n`\n\nconst codeTemplate = (args) => {\n    return `\n${style}\n<div class=\"container\">\n    <vds-breadcrumbs-item is-active=${args.isActive} disabled=${args.disabled}>\n        <a href=\"#\">${args.text}</a>\n    </vds-breadcrumbs-item>\n</div>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    text: 'Horror movies',\n    isActive: false,\n    disabled: false\n}\n\n\nconst menuTemplate = () => {\n    return `\n${style}\n<div class=\"container\">\n    <vds-breadcrumbs-item class=\"truncate-menu\">\n        <vds-menu>\n          <vds-icon-button class=\"breadcrumb\" slot=\"menu-trigger\" variant=\"tertiary\" icon=\"more-horizontal\"></vds-icon-button>\n          <div slot=\"menu-content\">\n            <vds-menu-list>\n                <vds-menu-item class=\"breadcrumb\">\n                    <a href=\"google.com\">Home</a>\n                </vds-menu-item>\n                <vds-menu-item class=\"breadcrumb\" disabled>\n                    <a href=\"google.com\">Food supply</a>\n                </vds-menu-item>\n                <vds-menu-item class=\"breadcrumb\" danger>\n                    <a href=\"google.com\">Meals</a>\n                </vds-menu-item>\n                <vds-menu-item  class=\"breadcrumb\" is-active>\n                    <a href=\"#\">Food</a>\n                </vds-menu-item>\n            </vds-menu-list>\n          </div>\n        </vds-menu>\n    </vds-breadcrumbs-item>\n</div>\n`;\n}\n\nexport const MenuUsage = menuTemplate.bind({});\n\nMenuUsage.args = {\n}"]}

package/dist/collection/components/button/vds-button.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);
@@ -1029,12 +1043,14 @@
   color: var(--color-text-disabled);
   pointer-events: none;
   box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);
-  box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);
 }
 :host .vds-button__variant--secondary:disabled ::slotted(vds-icon) {
   color: var(--color-icon-disabled);
   fill: var(--color-icon-disabled);
 }
+:host .vds-button__variant--secondary:disabled {
+  box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);
+}
 :host .vds-button__variant--tertiary {
   background-color: var(--surface-medium);
   color: var(--color-text-high);

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

@@ -33,7 +33,7 @@ export class VdsButton {
         shadowSubmitForm(this.hostEl);
     }
     render() {
-        return (h(Host, { key: 'dac867786ec1eea3e08fa680b792c696224801df', class: combineClasses("vds-button", this.isFullWidth ? "vds-button--fullwidth" : "", this.disabled ? "disabled" : "") }, h("button", Object.assign({ key: 'df4252153c3d0b292623710bcc4fcb867055a0f5', onClick: (evt) => this.handleSubmit(evt), class: combineClasses(`vds-button__element`, `vds-button__variant--${this.variant}`, `vds-button__align--${this.textAlignment}`, `vds-button__size--${this.size}`, this.danger ? "vds-button__danger" : "", this.disabled ? "vds-button-disabled" : "", this.isFullWidth ? "vds-button__element_fullwidth" : ""), type: "button", disabled: this.disabled || null }, cloneAttributes(this.hostEl, "disabled", "class", "style")), h("slot", { key: 'e73234af158119b1801bec1059644c9007da3229', name: "icon-left" }), h("slot", { key: '7a3182f7b21887259238ab959561826c0c33f709' }), h("slot", { key: 'dfabfe5fdc62b123ccfdc2234db4d7547285bf95', name: "icon-right" }))));
+        return (h(Host, { key: '55080d07e02cbab1a758132fc873af9b867d1494', class: combineClasses("vds-button", this.isFullWidth ? "vds-button--fullwidth" : "", this.disabled ? "disabled" : "") }, h("button", Object.assign({ key: 'dd35cc50e2e12f8f480749dd6e4d9e09392a1d7e', onClick: (evt) => this.handleSubmit(evt), class: combineClasses(`vds-button__element`, `vds-button__variant--${this.variant}`, `vds-button__align--${this.textAlignment}`, `vds-button__size--${this.size}`, this.danger ? "vds-button__danger" : "", this.disabled ? "vds-button-disabled" : "", this.isFullWidth ? "vds-button__element_fullwidth" : ""), type: "button", disabled: this.disabled || null }, cloneAttributes(this.hostEl, "disabled", "class", "style")), h("slot", { key: 'eeab08fd10da1375e6d34108eb355b18e19e7da2', name: "icon-left" }), h("slot", { key: 'a8d3d2ac1d5673ddd5ed33d7093e9c17a4be8c73' }), h("slot", { key: '6db70ed7a2540775bbdf4c07261ef56c4c1b4cb6', name: "icon-right" }))));
     }
     static get is() { return "vds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -51,7 +51,6 @@ export class VdsButton {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"large\" | \"medium\" | \"small\"",
@@ -67,11 +66,11 @@ export class VdsButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"ghost-alt\"",
@@ -87,11 +86,11 @@ export class VdsButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "\"primary\""
             },
             "textAlignment": {
                 "type": "string",
-                "attribute": "text-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "\"right\" | \"left\" | \"center\"",
@@ -107,11 +106,11 @@ export class VdsButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "text-alignment",
                 "defaultValue": "\"center\""
             },
             "danger": {
                 "type": "boolean",
-                "attribute": "danger",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -127,11 +126,11 @@ export class VdsButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "danger",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -147,11 +146,11 @@ export class VdsButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "isFullWidth": {
                 "type": "boolean",
-                "attribute": "is-full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -167,6 +166,7 @@ export class VdsButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-full-width",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/card/vds-card.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);
@@ -927,6 +941,7 @@
   display: block;
 }
 :host .vds__card {
+  height: 100%;
   border-radius: var(--radius-medium);
   box-sizing: border-box;
   z-index: var(--elevation-layer-0);
@@ -957,7 +972,6 @@
 }
 :host .vds__card.vds__card--primary {
   border: 0.0625rem solid transparent;
-  background-color: var(--vds-card-primary-background-color);
 }
 :host .vds__card.vds__card--primary.vds__card--selectable.vds__card--selected, :host .vds__card.vds__card--primary.vds__card--button.vds__card--selected {
   outline: 0.25rem solid var(--vds-card-primary-selected-border-color);
@@ -968,6 +982,9 @@
 :host .vds__card.vds__card--primary.vds__card--selectable:active:hover, :host .vds__card.vds__card--primary.vds__card--button:active:hover {
   outline: none;
 }
+:host .vds__card.vds__card--primary {
+  background-color: var(--vds-card-primary-background-color);
+}
 :host .vds__card.vds__card--primary.vds__card--selectable.vds__card--selected {
   background-color: var(--vds-card-primary-selected-background-color);
 }
@@ -1009,7 +1026,6 @@
 }
 :host .vds__card.vds__card--danger {
   border: 0.0625rem solid transparent;
-  background-color: var(--vds-card-danger-background-color);
 }
 :host .vds__card.vds__card--danger.vds__card--selectable.vds__card--selected, :host .vds__card.vds__card--danger.vds__card--button.vds__card--selected {
   outline: 0.25rem solid var(--vds-card-danger-selected-border-color);
@@ -1020,6 +1036,9 @@
 :host .vds__card.vds__card--danger.vds__card--selectable:active:hover, :host .vds__card.vds__card--danger.vds__card--button:active:hover {
   outline: none;
 }
+:host .vds__card.vds__card--danger {
+  background-color: var(--vds-card-danger-background-color);
+}
 :host .vds__card.vds__card--danger.vds__card--selectable.vds__card--selected {
   background-color: var(--vds-card-danger-selected-background-color);
 }

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

@@ -64,7 +64,7 @@ export class VdsCard {
         this.handleBehaviorValidation();
     }
     render() {
-        return (h(Host, { key: '19b2be994eeb38dffd4936514b7a208d03ac077d', class: combineClasses(this.disabled ? "vds-card--disabled" : "") }, h("div", { key: '00012b0e02eccb90492ac5711269b1124d091f2f', onClick: (evt) => {
+        return (h(Host, { key: '90ceb9548462381cf636f7ed05bfea0b1cde08ad', class: combineClasses(this.disabled ? "vds-card--disabled" : "") }, h("div", { key: 'a0aaaffd86c6a0d5d68496324773c570834242ab', onClick: (evt) => {
                 this.handleClick(evt);
             }, style: this.setCustomBorderColors(), class: `
             vds__card 
@@ -75,7 +75,7 @@ export class VdsCard {
             ${this.selectable && this.selected ? 'vds__card--selected' : ''}
             ${this.button ? 'vds__card--button' : ''}
             ${this.disabled ? 'vds__card--disabled' : ''}
-          ` }, h("slot", { key: 'c2e5236ebad840fca8114de9fd041f0fc98cbb14' }))));
+          ` }, h("slot", { key: '9d6e9d59f233c109a55d4cd3268da6e61b8f9121' }))));
     }
     static get is() { return "vds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -93,7 +93,6 @@ export class VdsCard {
         return {
             "padding": {
                 "type": "string",
-                "attribute": "padding",
                 "mutable": true,
                 "complexType": {
                     "original": "Spacing",
@@ -115,11 +114,11 @@ export class VdsCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "padding",
                 "defaultValue": "'spacing-05'"
             },
             "selectable": {
                 "type": "boolean",
-                "attribute": "selectable",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -135,11 +134,11 @@ export class VdsCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "selectable",
                 "defaultValue": "false"
             },
             "selected": {
                 "type": "boolean",
-                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -155,11 +154,11 @@ export class VdsCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "button": {
                 "type": "boolean",
-                "attribute": "button",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -175,11 +174,11 @@ export class VdsCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "button",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -195,11 +194,11 @@ export class VdsCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": true,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'danger' | 'default'",
@@ -215,11 +214,11 @@ export class VdsCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'default'"
             },
             "shadowBox": {
                 "type": "string",
-                "attribute": "shadow-box",
                 "mutable": true,
                 "complexType": {
                     "original": "ShadowBox",
@@ -241,15 +240,15 @@ export class VdsCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "shadow-box",
                 "defaultValue": "'elevation-shadow-1'"
             },
             "borderColor": {
                 "type": "string",
-                "attribute": "border-color",
                 "mutable": false,
                 "complexType": {
                     "original": "Colors",
-                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "resolved": "ThemeColors | \"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": {
                         "Colors": {
                             "location": "import",
@@ -269,15 +268,15 @@ export class VdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "border-color"
             },
             "borderHoverColor": {
                 "type": "string",
-                "attribute": "border-hover-color",
                 "mutable": false,
                 "complexType": {
                     "original": "Colors",
-                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "resolved": "ThemeColors | \"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": {
                         "Colors": {
                             "location": "import",
@@ -297,7 +296,8 @@ export class VdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "border-hover-color"
             }
         };
     }

package/dist/collection/components/checkbox/vds-checkbox.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);