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

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

@@ -107,7 +107,7 @@ export class VdsBasicCheckbox {
     }
     render() {
         var _a;
-        return (h(Host, { key: '158a1cbb863a187b74fb8204a3442c4b09a9f47d', state: this.state }, h("div", { key: '05070e9ca5dcb87e504788916612836172a23f44', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds__checkbox__container", `vds__checkbox__container--size-${this.size}`, this.checked && !this.indeterminate ? "vds__checkbox--checked" : "", this.indeterminate ? "vds__checkbox--indeterminate" : "", this.disabled ? "vds__checkbox--disabled" : "", this.error ? "vds__checkbox--error" : "") }, h("div", { key: 'f795947b47273c5d8c36df25930d244094f42760', class: "vds__checkbox" }, h("input", { key: 'fba6450c787d038173300e57fe38b06690f0974e', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderCheckbox()), this.labelValue && this.renderLabel())));
+        return (h(Host, { key: 'b9cb49f14833104b646f379f2724a4df07a576e7', state: this.state }, h("div", { key: '5b4dc6536b46a28648955985debd88e806272b02', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds__checkbox__container", `vds__checkbox__container--size-${this.size}`, this.checked && !this.indeterminate ? "vds__checkbox--checked" : "", this.indeterminate ? "vds__checkbox--indeterminate" : "", this.disabled ? "vds__checkbox--disabled" : "", this.error ? "vds__checkbox--error" : "") }, h("div", { key: 'e4ddf360caaa127f801fd54110e54694d2c48ac7', class: "vds__checkbox" }, h("input", { key: 'd6f26b4bd829916b6f69de8428d99545a5a1288a', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderCheckbox()), this.labelValue && this.renderLabel())));
     }
     static get is() { return "vds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -126,7 +126,6 @@ export class VdsBasicCheckbox {
         return {
             "labelValue": {
                 "type": "string",
-                "attribute": "label-value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -141,11 +140,11 @@ export class VdsBasicCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label-value"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -161,11 +160,11 @@ export class VdsBasicCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "indeterminate": {
                 "type": "boolean",
-                "attribute": "indeterminate",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -181,11 +180,11 @@ export class VdsBasicCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "indeterminate",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -201,11 +200,11 @@ export class VdsBasicCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -221,11 +220,11 @@ export class VdsBasicCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "error",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"medium\" | \"large\"",
@@ -241,11 +240,11 @@ export class VdsBasicCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "isRequired": {
                 "type": "boolean",
-                "attribute": "is-required",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -261,11 +260,11 @@ export class VdsBasicCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-required",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -280,7 +279,8 @@ export class VdsBasicCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"vds-checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/vds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Method, Event, EventEmitter, Element, AttachInternals, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { CheckboxEvent } from \"./vds-checkbox.utils\";\n@Component({\n  tag: \"vds-checkbox\",\n  styleUrl: \"vds-checkbox.scss\",\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicCheckbox {\n  /** Sets the text to be shown in the checkbox */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n  /** Sets the checkbox in checked state */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /** Sets the checkbodx in indeterminate state */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /** Sets the checkbox in disabled state */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  /** Sets the checkbox in error state */\n  @Prop({ reflect: true, mutable: true }) error: boolean = false;\n  /** Sets the checkbox's size */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false;\n  /** Sets the value in the input. Usually uses checked prop as string. \n   *  Used to manage Reactive forms and other native functionality */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n /**\n  * Event which is triggered when checkbox state changes. This event also captures if\n  * any of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\n  * changed. Use CheckboxEvent.isChecked() or\n  * checkbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n  *\t\tif(event.detail == true) {\n  *\t\t\tconsole.log('Checked');\n  * \t\t}\n  * console.log(event.detail.altKey);\n  * console.log(event.detail.shiftKey);\n  * console.log(event.detail.ctrlKey);\n  * })\n  *\n  */\n  @Event() checkboxChange: EventEmitter<CheckboxEvent>;\n  /** Makes a custom change to target property using checked and indeterminate (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n\n  private state: \"checked\" | \"unchecked\" | \"indeterminate\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setCheckboxState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets indeterminate value to false in order to guarantee a change in value.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    this.indeterminate = false;\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the checkbox is being click.\n   * Executes toggleCheck method.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(event: MouseEvent): void {\n\t\tthis.toggleCheck(event);\n\t}\n\n   /**\n   * Toggles checkbox value.\n   * Emits checkboxChange event with CheckboxEvent value.\n   * Emits check event with checked value.\n   *\n   * @param evt - KeyboardEvent | MouseEvent\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(evt?: KeyboardEvent | MouseEvent): Promise<void> {\n    if (!this.disabled) {\n      const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n      this.value = this.checked.toString();\n\t\t\tthis.indeterminate = false;\n\t\t\tthis.checkboxChange.emit(\n\t\t\t\tnew CheckboxEvent(\n\t\t\t\t\tthis.checked,\n\t\t\t\t\tevt?.altKey,\n\t\t\t\t\tevt?.ctrlKey,\n\t\t\t\t\tevt?.metaKey,\n\t\t\t\t\tevt?.shiftKey\n\t\t\t\t)\n\t\t\t);\n\t\t\tthis.check.emit(this.checked);\n      this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Determine state of the checkbox based on the indeterminate and checked properties.\n   * When indetermanate is true, state is indeterminate.\n   * When indetermanate is false and checked is true, state is checked.\n   * When indetermanate is false and checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setCheckboxState(): void {\n    this.state = this.indeterminate ? \"indeterminate\" : this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderCheckbox(): HTMLStencilElement {\n    const size = this.size === \"large\" ? \"1.5rem\" : \"1.25rem\";\n    const disabledClass = this.disabled ? \"checkbox-icon-disabled\" : \"\";\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class={`checkbox-icon checkbox-icon-checked ${disabledClass}`} svgIcon={`checked`} size={size}></vds-icon>;\n      case \"indeterminate\":\n        return <vds-icon class={`checkbox-icon checkbox-icon-indeterminate ${disabledClass}`} svgIcon={`indeterminate`} size={size}></vds-icon>\n      default:\n        return <vds-icon class={`checkbox-icon ${disabledClass}`} svgIcon={`unchecked`} size={size}></vds-icon>;; \n    }\n  }\n\n   /**\n   * Returns the vds-label for the checkbox when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label class={\"checkbox-label\"} labelValue={this.labelValue} required={this.isRequired} size={this.size} disabled={this.disabled}></vds-label>\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host state={this.state}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds__checkbox__container\",\n            `vds__checkbox__container--size-${this.size}`,\n            this.checked && !this.indeterminate ? \"vds__checkbox--checked\" : \"\",\n            this.indeterminate ? \"vds__checkbox--indeterminate\" : \"\",\n            this.disabled ? \"vds__checkbox--disabled\" : \"\",\n            this.error ? \"vds__checkbox--error\" : \"\",\n          )}\n        >\n          <div class=\"vds__checkbox\">\n            <input\n              type={\"checkbox\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderCheckbox()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/vds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from \"@stencil/core\";\nimport { HTMLStencilElement, Prop, Method, Event, EventEmitter, Element, AttachInternals, Watch } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { CheckboxEvent } from \"./vds-checkbox.utils\";\n\n@Component({\n  tag: \"vds-checkbox\",\n  styleUrl: \"vds-checkbox.scss\",\n  shadow: true,\n  formAssociated: true\n})\nexport class VdsBasicCheckbox {\n  /** Sets the text to be shown in the checkbox */\n  @Prop({ reflect: true, mutable: true }) labelValue: string;\n  /** Sets the checkbox in checked state */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /** Sets the checkbodx in indeterminate state */\n  @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n  /** Sets the checkbox in disabled state */\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  /** Sets the checkbox in error state */\n  @Prop({ reflect: true, mutable: true }) error: boolean = false;\n  /** Sets the checkbox's size */\n  @Prop({ mutable: true }) size: \"medium\" | \"large\" = \"medium\";\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false;\n  /** Sets the value in the input. Usually uses checked prop as string. \n   *  Used to manage Reactive forms and other native functionality */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  @Element() hostEl: HTMLElement;\n\n  @AttachInternals() internals: ElementInternals;\n\n /**\n  * Event which is triggered when checkbox state changes. This event also captures if\n  * any of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\n  * changed. Use CheckboxEvent.isChecked() or\n  * checkbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n  *\t\tif(event.detail == true) {\n  *\t\t\tconsole.log('Checked');\n  * \t\t}\n  * console.log(event.detail.altKey);\n  * console.log(event.detail.shiftKey);\n  * console.log(event.detail.ctrlKey);\n  * })\n  *\n  */\n  @Event() checkboxChange: EventEmitter<CheckboxEvent>;\n  /** Makes a custom change to target property using checked and indeterminate (use for React components) */\n  @Event() check: EventEmitter<boolean>;\n\n  private state: \"checked\" | \"unchecked\" | \"indeterminate\" = \"unchecked\";\n\n  componentWillRender(): void {\n    this.setCheckboxState();\n  }\n\n  componentDidLoad(): void {\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time checked value changes.\n   * Sets indeterminate value to false in order to guarantee a change in value.\n   * Sets form value in order to work properly with native forms\n   *\n   * @returns void\n   */\n  @Watch(\"checked\")\n  setCheckedStates(): void {\n    this.indeterminate = false;\n    if (this.internals && !!this.internals.setFormValue) {\n      this.internals.setFormValue(this.checked.toString());\n    }\n  }\n\n  /**\n   * Executes every time the checkbox is being click.\n   * Executes toggleCheck method.\n   *\n   * @param event - MouseEvent\n   * @returns void\n   */\n\thandleClick(event: MouseEvent): void {\n\t\tthis.toggleCheck(event);\n\t}\n\n   /**\n   * Toggles checkbox value.\n   * Emits checkboxChange event with CheckboxEvent value.\n   * Emits check event with checked value.\n   *\n   * @param evt - KeyboardEvent | MouseEvent\n   * @returns Promise<void>\n   */\n  @Method()\n  toggleCheck(evt?: KeyboardEvent | MouseEvent): Promise<void> {\n    if (!this.disabled) {\n      const inputEvent = new InputEvent(\"input\");\n\t\t\tthis.checked = !this.checked;\n      this.value = this.checked.toString();\n\t\t\tthis.indeterminate = false;\n\t\t\tthis.checkboxChange.emit(\n\t\t\t\tnew CheckboxEvent(\n\t\t\t\t\tthis.checked,\n\t\t\t\t\tevt?.altKey,\n\t\t\t\t\tevt?.ctrlKey,\n\t\t\t\t\tevt?.metaKey,\n\t\t\t\t\tevt?.shiftKey\n\t\t\t\t)\n\t\t\t);\n\t\t\tthis.check.emit(this.checked);\n      this.hostEl.dispatchEvent(inputEvent);\n\t\t}\n    return Promise.resolve();\n  }\n\n  /**\n   * Determine state of the checkbox based on the indeterminate and checked properties.\n   * When indetermanate is true, state is indeterminate.\n   * When indetermanate is false and checked is true, state is checked.\n   * When indetermanate is false and checked is false, state is unchecked.\n   *\n   * @returns void\n   */\n  private setCheckboxState(): void {\n    this.state = this.indeterminate ? \"indeterminate\" : this.checked ? \"checked\" : \"unchecked\";\n  }\n\n  /**\n   * Returns the icon prop based on the state and calculate the size.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderCheckbox(): HTMLStencilElement {\n    const size = this.size === \"large\" ? \"1.5rem\" : \"1.25rem\";\n    const disabledClass = this.disabled ? \"checkbox-icon-disabled\" : \"\";\n    switch(this.state) {\n      case \"checked\":\n        return <vds-icon class={`checkbox-icon checkbox-icon-checked ${disabledClass}`} svgIcon={`checked`} size={size}></vds-icon>;\n      case \"indeterminate\":\n        return <vds-icon class={`checkbox-icon checkbox-icon-indeterminate ${disabledClass}`} svgIcon={`indeterminate`} size={size}></vds-icon>\n      default:\n        return <vds-icon class={`checkbox-icon ${disabledClass}`} svgIcon={`unchecked`} size={size}></vds-icon>;; \n    }\n  }\n\n   /**\n   * Returns the vds-label for the checkbox when there is a label provided.\n   *\n   * @returns HTMLStencilElement\n   */\n  private renderLabel(): HTMLStencilElement {\n    return <vds-label class={\"checkbox-label\"} labelValue={this.labelValue} required={this.isRequired} size={this.size} disabled={this.disabled}></vds-label>\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host state={this.state}>\n        <div\n          onClick={(evt): void => {this.handleClick(evt)}}\n          class={combineClasses(\n            \"vds__checkbox__container\",\n            `vds__checkbox__container--size-${this.size}`,\n            this.checked && !this.indeterminate ? \"vds__checkbox--checked\" : \"\",\n            this.indeterminate ? \"vds__checkbox--indeterminate\" : \"\",\n            this.disabled ? \"vds__checkbox--disabled\" : \"\",\n            this.error ? \"vds__checkbox--error\" : \"\",\n          )}\n        >\n          <div class=\"vds__checkbox\">\n            <input\n              type={\"checkbox\"}\n              checked={this.checked}\n              value={this.value}\n              id={this.hostEl?.id}\n              disabled={this.disabled} />\n            {this.renderCheckbox()}\n          </div>\n          {this.labelValue && this.renderLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/chip/vds-chip.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);
@@ -968,6 +982,13 @@
 :host .vds__chip__container.vds__chip__container--active:active, :host .vds__chip__container.vds__chip__container--active :active:hover {
   background-color: var(--color-background-brand-press);
 }
+:host .vds__chip__container .vds-chip__icon {
+  cursor: pointer;
+}
+:host .vds__chip__container vds-divider {
+  --vds-divider-padding-left: var(--spacing-00);
+  --vds-divider-padding-right: var(--spacing-00);
+}
 
 :host-context(.vds-chip--disabled) {
   pointer-events: none;

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

@@ -22,6 +22,7 @@ export class VdsChip {
         this.setChipIconsColor();
         this.setChipIconsSize();
         this.setInformativeIcon();
+        this.setDividerColor();
     }
     /**
      * Dismiss/Hide the chip.
@@ -73,7 +74,7 @@ export class VdsChip {
                 this.iconColor = "color-icon-disabled";
                 break;
             case "active":
-                this.iconColor = "white";
+                this.iconColor = "static-white";
                 break;
             default:
                 this.iconColor = "color-icon-brand-default";
@@ -106,8 +107,25 @@ export class VdsChip {
         this.setInformativeIcon();
         this.selected.emit();
     }
+    setDividerColor() {
+        const state = this.disabled && this.active ? "disabled-active" : this.disabled ? "disabled" : this.active ? "active" : "default";
+        switch (state) {
+            case "disabled-active":
+                this.dividerColor = "static-white-low";
+                break;
+            case "disabled":
+                this.dividerColor = "color-border-disabled";
+                break;
+            case "active":
+                this.dividerColor = "static-white-low";
+                break;
+            default:
+                this.dividerColor = "color-border-brand";
+                break;
+        }
+    }
     render() {
-        return (h(Host, { key: '2732921366a0c736df94a71974c84fcb8f616ffa', class: this.disabled ? "vds-chip--disabled" : "" }, h("button", { key: 'ef876c2bb49009ec6a8806d40ad2aa3cf3063446', onClick: () => this.handleChipClick(), class: combineClasses("vds__chip__container", `vds__chip__container--size-${this.size}`, this.toggle && "vds__chip__container--toggleable", this.disabled && "vds__chip__container--disabled", this.active && "vds__chip__container--active"), disabled: this.disabled }, this._informativeIcon && h("vds-icon", { key: 'b386f36a68c3795afa509136c17b5e514ea037e9', svgIcon: this._informativeIcon, color: this.iconColor, size: this.iconSize }), this.value, this.menu && h("vds-icon", { key: 'd191286f48c23c52f289575c20acba03b4c7d5c8', onClick: () => this.emitMenuClicked(), svgIcon: "chevron-down", color: this.iconColor, size: this.iconSize }), this.close && h("vds-icon", { key: 'd482c0a359f7e9ec475b6db12e3be91b7fa8c724', onClick: () => this.dismiss(), "aria-label": this.closeAriaLabel, svgIcon: "close", color: this.iconColor, size: this.iconSize }))));
+        return (h(Host, { key: '5b401a1b9d16c9dc2dfd3cb00d74ba64de865bb1', class: this.disabled ? "vds-chip--disabled" : "" }, h("button", { key: 'd6c30dbbe03e3bb6df05218e9c2da6b02f36e558', onClick: () => this.handleChipClick(), class: combineClasses("vds__chip__container", `vds__chip__container--size-${this.size}`, this.toggle && "vds__chip__container--toggleable", this.disabled && "vds__chip__container--disabled", this.active && "vds__chip__container--active"), disabled: this.disabled }, this._informativeIcon && h("vds-icon", { key: 'c4b5a03f5c7d6d78398f1816511112a167918fdc', svgIcon: this._informativeIcon, color: this.iconColor, size: this.iconSize }), this.value, this.menu && h("vds-icon", { key: 'f5b9e3f665ce42c7100bfc9c24578652274c1455', class: "vds-chip__icon", onClick: () => this.emitMenuClicked(), svgIcon: this.active ? "chevron-up" : "chevron-down", color: this.iconColor, size: this.iconSize }), this.close && h("vds-divider", { key: '1dc431c960eb0c0d18d517fd645d76aa4c1afa7a', orientation: "vertical", padding: "spacing-00", color: this.dividerColor }), this.close && h("vds-icon", { key: '237c9890965cbbebe3a2d72df161a4ca0925557b', class: "vds-chip__icon", onClick: () => this.dismiss(), "aria-label": this.closeAriaLabel, svgIcon: "close", color: this.iconColor, size: this.iconSize }))));
     }
     static get is() { return "vds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -125,7 +143,6 @@ export class VdsChip {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -140,11 +157,11 @@ export class VdsChip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "close": {
                 "type": "boolean",
-                "attribute": "close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -159,11 +176,11 @@ export class VdsChip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "close"
             },
             "menu": {
                 "type": "boolean",
-                "attribute": "menu",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -178,11 +195,11 @@ export class VdsChip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "menu"
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -197,11 +214,11 @@ export class VdsChip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "active"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -216,11 +233,11 @@ export class VdsChip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "disabled"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -236,11 +253,11 @@ export class VdsChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "closeAriaLabel": {
                 "type": "string",
-                "attribute": "close-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -255,11 +272,11 @@ export class VdsChip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "close-aria-label"
             },
             "toggle": {
                 "type": "boolean",
-                "attribute": "toggle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -275,11 +292,11 @@ export class VdsChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "toggle",
                 "defaultValue": "false"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -294,11 +311,11 @@ export class VdsChip {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "removeOnClose": {
                 "type": "boolean",
-                "attribute": "remove-on-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -314,6 +331,7 @@ export class VdsChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "remove-on-close",
                 "defaultValue": "true"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"vds-chip.js","sourceRoot":"","sources":["../../../src/components/chip/vds-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State } from '@stencil/core/internal';\nimport { IconColors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { ICON_SIZE } from '../icon-button/vds-icon-button.utils';\n\n@Component({\n  tag: 'vds-chip',\n  styleUrl: 'vds-chip.scss',\n  shadow: true,\n})\nexport class VdsChip {\n  /** Sets chips content value */\n  @Prop({ reflect: true, mutable: true}) value: string;\n  /** Displays close icon */\n  @Prop() close: boolean;\n  /** Displays menu (chevron-down) icon */\n  @Prop() menu: boolean;\n  /** Displays chip in active state */\n  @Prop({ reflect: true, mutable: true}) active: boolean;\n  /** Sets chip to disabled */\n  @Prop() disabled: boolean;\n  /** Sets content size  */\n  @Prop() size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Defines the aria label on the close button  */\n  @Prop({ reflect: true }) closeAriaLabel: string;\n  /** They turn active on/off when clicking the chip */\n  @Prop() toggle: boolean = false;\n  /** Receives the icon name to be shown in the left side */\n  @Prop() informativeIcon: string;\n  /** When close button is clicked, the element is removed from the DOM */\n  @Prop() removeOnClose: boolean = true;\n\n  /** Fires after chip dismiss and hide */\n  @Event() afterClosed: EventEmitter<void>;\n  /** Fires when chip is selected (only works when toggle is enabled) */\n  @Event() selected: EventEmitter<void>;\n  /** Fires when menu-icon is clicked */\n  @Event() menuClick: EventEmitter<void>;\n\n  @Element() hostEl: HTMLVdsChipElement;\n\n  @State() _informativeIcon: string = undefined;\n\n  private iconColor: IconColors = \"color-icon-brand-default\";\n  private iconSize: string = ICON_SIZE[\"small\"];\n\n  /**\n   * Executes before every render cycle.\n   *\n   * @returns void\n   */\n  componentWillRender(): void {\n    this.setChipIconsColor();\n    this.setChipIconsSize();\n    this.setInformativeIcon();\n  }\n\n  /** \n   * Dismiss/Hide the chip.\n   * Emits afterClosed event\n   * \n   * @Returns Promise<void>\n   */\n  @Method()\n  dismiss(): Promise<void> {\n    return new Promise(resolve => {\n      this.afterClosed.emit();\n      if (this.removeOnClose) {\n        this.hostEl && this.hostEl.remove();\n      }\n      resolve();\n    });\n  }\n\n  /** \n   * Emits event when menu-icon is clicked\n   * \n   * @Returns void\n   */\n  private emitMenuClicked(): void {\n    this.menuClick.emit();\n  }\n\n  /** \n   * Sets informative icon based on the following herarchy\n   * When informativeIcon prop is provided it will always display.\n   * When Chip is toggle and active it will set informativeIcon to checkMarck (good)\n   * Otherwise it'll not be display.\n   * \n   * @Returns void\n   */\n  private setInformativeIcon(): void {\n    this._informativeIcon = this.informativeIcon ? this.informativeIcon : this.active && this.toggle ? \"good\" : undefined;\n  }\n\n  /**\n   * Sets the color for the icons inside the chip.\n   * Sets the chip's vds-icon colors\n   *\n   * @returns void\n   */\n  private setChipIconsColor(): void {\n    const state = this.disabled && this.active ? \"disabled-active\" : this.disabled ? \"disabled\" : this.active ? \"active\" : \"default\";\n    switch(state) {\n      case \"disabled-active\":\n        this.iconColor = \"color-icon-white-high\";\n        break;\n      case \"disabled\":\n        this.iconColor = \"color-icon-disabled\";\n        break;\n      case \"active\":\n        this.iconColor = \"white\";\n        break;\n      default:\n        this.iconColor = \"color-icon-brand-default\";\n        break;\n    }\n  }\n\n  private setChipIconsSize(): void {\n    switch(this.size) {\n      case \"small\": \n        this.iconSize = ICON_SIZE[\"extra-small\"];\n        break;\n      case \"medium\": \n        this.iconSize = ICON_SIZE[\"small\"];\n        break;\n      case \"large\": \n        this.iconSize = ICON_SIZE[\"medium\"];\n        break;\n    }\n  }\n\n  /**\n   * Changes the chip active state when toggle option is enabled.\n   * Add checks icon when informativeIcon is not provided\n   *\n   * @returns void\n   */\n  private handleChipClick(): void {\n    if (!this.toggle) return;\n    \n    this.active = !this.active;\n\n    this.setInformativeIcon();\n\n    this.selected.emit();\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-chip--disabled\" : \"\"}>\n        <button\n          onClick={() => this.handleChipClick()}\n          class={\n            combineClasses(\n              \"vds__chip__container\",\n              `vds__chip__container--size-${this.size}`,\n              this.toggle && \"vds__chip__container--toggleable\",\n              this.disabled && \"vds__chip__container--disabled\",\n              this.active && \"vds__chip__container--active\",\n            )\n          }\n          disabled={ this.disabled }\n        >\n          {this._informativeIcon && <vds-icon svgIcon={this._informativeIcon} color={this.iconColor} size={this.iconSize}></vds-icon>}\n          {this.value}\n          {this.menu && <vds-icon onClick={() => this.emitMenuClicked()} svgIcon={\"chevron-down\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n          {this.close && <vds-icon onClick={() => this.dismiss()} aria-label={this.closeAriaLabel} svgIcon={\"close\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-chip.js","sourceRoot":"","sources":["../../../src/components/chip/vds-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Method, Element, State } from '@stencil/core/internal';\nimport { BorderColors, IconColors, StaticGlobal } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { ICON_SIZE } from '../icon-button/vds-icon-button.utils';\n\n@Component({\n  tag: 'vds-chip',\n  styleUrl: 'vds-chip.scss',\n  shadow: true,\n})\nexport class VdsChip {\n  /** Sets chips content value */\n  @Prop({ reflect: true, mutable: true}) value: string;\n  /** Displays close icon */\n  @Prop() close: boolean;\n  /** Displays menu (chevron-down) icon */\n  @Prop() menu: boolean;\n  /** Displays chip in active state */\n  @Prop({ reflect: true, mutable: true}) active: boolean;\n  /** Sets chip to disabled */\n  @Prop() disabled: boolean;\n  /** Sets content size  */\n  @Prop() size: \"small\" | \"medium\" | \"large\" = \"medium\";\n  /** Defines the aria label on the close button  */\n  @Prop({ reflect: true }) closeAriaLabel: string;\n  /** They turn active on/off when clicking the chip */\n  @Prop() toggle: boolean = false;\n  /** Receives the icon name to be shown in the left side */\n  @Prop() informativeIcon: string;\n  /** When close button is clicked, the element is removed from the DOM */\n  @Prop() removeOnClose: boolean = true;\n\n  /** Fires after chip dismiss and hide */\n  @Event() afterClosed: EventEmitter<void>;\n  /** Fires when chip is selected (only works when toggle is enabled) */\n  @Event() selected: EventEmitter<void>;\n  /** Fires when menu-icon is clicked */\n  @Event() menuClick: EventEmitter<void>;\n\n  @Element() hostEl: HTMLVdsChipElement;\n\n  @State() _informativeIcon: string = undefined;\n\n  private iconColor: IconColors = \"color-icon-brand-default\";\n  private iconSize: string = ICON_SIZE[\"small\"];\n\n  private dividerColor: BorderColors | StaticGlobal;\n\n  /**\n   * Executes before every render cycle.\n   *\n   * @returns void\n   */\n  componentWillRender(): void {\n    this.setChipIconsColor();\n    this.setChipIconsSize();\n    this.setInformativeIcon();\n    this.setDividerColor();\n  }\n\n  /** \n   * Dismiss/Hide the chip.\n   * Emits afterClosed event\n   * \n   * @Returns Promise<void>\n   */\n  @Method()\n  dismiss(): Promise<void> {\n    return new Promise(resolve => {\n      this.afterClosed.emit();\n      if (this.removeOnClose) {\n        this.hostEl && this.hostEl.remove();\n      }\n      resolve();\n    });\n  }\n\n  /** \n   * Emits event when menu-icon is clicked\n   * \n   * @Returns void\n   */\n  private emitMenuClicked(): void {\n    this.menuClick.emit();\n  }\n\n  /** \n   * Sets informative icon based on the following herarchy\n   * When informativeIcon prop is provided it will always display.\n   * When Chip is toggle and active it will set informativeIcon to checkMarck (good)\n   * Otherwise it'll not be display.\n   * \n   * @Returns void\n   */\n  private setInformativeIcon(): void {\n    this._informativeIcon = this.informativeIcon ? this.informativeIcon : this.active && this.toggle ? \"good\" : undefined;\n  }\n\n  /**\n   * Sets the color for the icons inside the chip.\n   * Sets the chip's vds-icon colors\n   *\n   * @returns void\n   */\n  private setChipIconsColor(): void {\n    const state = this.disabled && this.active ? \"disabled-active\" : this.disabled ? \"disabled\" : this.active ? \"active\" : \"default\";\n    switch(state) {\n      case \"disabled-active\":\n        this.iconColor = \"color-icon-white-high\";\n        break;\n      case \"disabled\":\n        this.iconColor = \"color-icon-disabled\";\n        break;\n      case \"active\":\n        this.iconColor = \"static-white\";\n        break;\n      default:\n        this.iconColor = \"color-icon-brand-default\";\n        break;\n    }\n  }\n\n  private setChipIconsSize(): void {\n    switch(this.size) {\n      case \"small\": \n        this.iconSize = ICON_SIZE[\"extra-small\"];\n        break;\n      case \"medium\": \n        this.iconSize = ICON_SIZE[\"small\"];\n        break;\n      case \"large\": \n        this.iconSize = ICON_SIZE[\"medium\"];\n        break;\n    }\n  }\n\n  /**\n   * Changes the chip active state when toggle option is enabled.\n   * Add checks icon when informativeIcon is not provided\n   *\n   * @returns void\n   */\n  private handleChipClick(): void {\n    if (!this.toggle) return;\n    \n    this.active = !this.active;\n\n    this.setInformativeIcon();\n\n    this.selected.emit();\n  }\n\n  private setDividerColor(): void {\n    const state = this.disabled && this.active ? \"disabled-active\" : this.disabled ? \"disabled\" : this.active ? \"active\" : \"default\";\n    switch(state) {\n      case \"disabled-active\":\n        this.dividerColor = \"static-white-low\";\n        break;\n      case \"disabled\":\n        this.dividerColor = \"color-border-disabled\";\n        break;\n      case \"active\":\n        this.dividerColor = \"static-white-low\";\n        break;\n      default:\n        this.dividerColor = \"color-border-brand\";\n        break;\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? \"vds-chip--disabled\" : \"\"}>\n        <button\n          onClick={() => this.handleChipClick()}\n          class={\n            combineClasses(\n              \"vds__chip__container\",\n              `vds__chip__container--size-${this.size}`,\n              this.toggle && \"vds__chip__container--toggleable\",\n              this.disabled && \"vds__chip__container--disabled\",\n              this.active && \"vds__chip__container--active\",\n            )\n          }\n          disabled={ this.disabled }\n        >\n          {this._informativeIcon && <vds-icon svgIcon={this._informativeIcon} color={this.iconColor} size={this.iconSize}></vds-icon>}\n          {this.value}\n          {this.menu && <vds-icon class=\"vds-chip__icon\" onClick={() => this.emitMenuClicked()} svgIcon={this.active ? \"chevron-up\" : \"chevron-down\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n          {this.close && <vds-divider orientation=\"vertical\" padding=\"spacing-00\" color={this.dividerColor}></vds-divider>}\n          {this.close && <vds-icon class=\"vds-chip__icon\" onClick={() => this.dismiss()} aria-label={this.closeAriaLabel} svgIcon={\"close\"} color={this.iconColor} size={this.iconSize}></vds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dialog/vds-dialog.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/vds-dialog.js

@@ -117,15 +117,15 @@ export class VdsDialog {
         this.dialog.addEventListener("click", this.handleClose.bind(this));
     }
     render() {
-        return (h(Host, { key: '04b4e2d5ce614e2c8dd142b4b5750e069121852c' }, h("div", { key: '256f8d4e321e02dd34e15ceadd293644a41b7bab', ref: (el) => {
+        return (h(Host, { key: '0848b15e9aafc4677acca9403e92849599b56a9d' }, h("div", { key: 'c2a2fbc50d75428c419fe962d9fcfc4595deec8f', ref: (el) => {
                 if (el) {
                     this.trigger = el;
                 }
-            }, class: "vds__dialog__trigger" }, h("slot", { key: '42d011981b7b59d1c467e704d197b4061317f3f4', name: "dialog-trigger" })), h("dialog", { key: 'e9569e21e82c7c4ca1ba3ec585eb4208e634eed8', ref: (el) => {
+            }, class: "vds__dialog__trigger" }, h("slot", { key: 'bfaffe8f5f98845ac457210e63a5bfc1baead9a4', name: "dialog-trigger" })), h("dialog", { key: 'b594f5eb23b7eb87dcc03daf628268005c2a8ab2', ref: (el) => {
                 if (el) {
                     this.dialog = el;
                 }
-            }, style: { maxWidth: this.maxWidth }, class: combineClasses("vds__dialog", this.backdrop ? "vds__dialog--backdrop" : "vds__dialog--no-backdrop", this.isOpen ? "vds__dialog__container--open" : "") }, h("div", { key: '338c421bb6a1e6c968cd2d0d6644b89cea89e435', class: combineClasses("vds__dialog__container", `vds__dialog__spacing--${this.padding}`), style: this.setStyles() }, h("slot", { key: '5d2cd3cd168906a34abe7bebf59a5ff87c409c47' })))));
+            }, style: { maxWidth: this.maxWidth }, class: combineClasses("vds__dialog", this.backdrop ? "vds__dialog--backdrop" : "vds__dialog--no-backdrop", this.isOpen ? "vds__dialog__container--open" : "") }, h("div", { key: 'd4efb30daa301be0e8eb731429b951e9e8767c1f', class: combineClasses("vds__dialog__container", `vds__dialog__spacing--${this.padding}`), style: this.setStyles() }, h("slot", { key: 'a5df7d035f03913f0e9780acabc5699bf6d614d1' })))));
     }
     static get is() { return "vds-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +143,6 @@ export class VdsDialog {
         return {
             "padding": {
                 "type": "string",
-                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "Spacing",
@@ -165,11 +164,11 @@ export class VdsDialog {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "padding",
                 "defaultValue": "\"spacing-07\""
             },
             "backdrop": {
                 "type": "boolean",
-                "attribute": "backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -185,11 +184,11 @@ export class VdsDialog {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop",
                 "defaultValue": "true"
             },
             "width": {
                 "type": "string",
-                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -205,11 +204,11 @@ export class VdsDialog {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "width",
                 "defaultValue": "\"37.5rem\""
             },
             "minWidth": {
                 "type": "string",
-                "attribute": "min-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,11 +224,11 @@ export class VdsDialog {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "min-width",
                 "defaultValue": "\"20rem\""
             },
             "maxWidth": {
                 "type": "string",
-                "attribute": "max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -245,11 +244,11 @@ export class VdsDialog {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max-width",
                 "defaultValue": "\"80%\""
             },
             "preventOutsideClose": {
                 "type": "boolean",
-                "attribute": "prevent-outside-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -265,6 +264,7 @@ export class VdsDialog {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "prevent-outside-close",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/dialog-action-footer/vds-dialog-action-footer.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-action-footer/vds-dialog-action-footer.js

@@ -18,7 +18,7 @@ export class VdsDialogActionFooter {
         });
     }
     render() {
-        return (h(Host, { key: 'ad1e3e70e5bccc3011971f56c884cff468c56daf' }, h("slot", { key: 'e9c21925b3a5a2c8174ecce42d9e8422de6fb03b' })));
+        return (h(Host, { key: '2ed8e6439bf111522aa780ffb79b3fccc7033092' }, h("slot", { key: 'fd8577b02e836d25d633932877d9a74c52a04976' })));
     }
     static get is() { return "vds-dialog-action-footer"; }
     static get encapsulation() { return "shadow"; }