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

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

@@ -63,7 +63,7 @@ export class VdsDropdownItem {
         return this.setAriaLabel ? this.setAriaLabel : this.label ? this.label : this.value;
     }
     render() {
-        return (h(Host, { key: '519cb276a848fcc963e701a9aaa0e1c0a26c4a5a', class: this.disabled ? 'vds-dropdown-item--disabled' : '' }, h("button", { key: '7e28909ddd31c2175ffdd20effc47e2a044379c5', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
+        return (h(Host, { key: '0161c2c36ca4c3c08af0020ed3d4ea3bc3c556a7', class: this.disabled ? 'vds-dropdown-item--disabled' : '' }, h("button", { key: '5582f2f3c35be1855156a2398f3c8cc827e7127b', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
                 if (this.disabled) {
                     evt.stopPropagation();
                     evt.preventDefault();
@@ -71,7 +71,7 @@ export class VdsDropdownItem {
                 else {
                     this.handleClick(evt);
                 }
-            }, class: combineClasses('vds-dropdown-item', `vds-dropdown-item--size-${this.size}`, this.disabled ? 'vds-dropdown-item--disabled' : '', this.isActive || this.isSelected ? 'vds-dropdown-item--active' : '', this.danger ? 'vds-dropdown-item--danger' : '', `vds-dropdown-item__alignment-${this.checkmarkAlignment}`) }, h("div", { key: 'f398ae5de09a326ed964d16dab1bb9590b951709', class: "vds-dropdown-item__content" }, this.checkmarkAlignment === 'start' && this.hasCheckmark
+            }, class: combineClasses('vds-dropdown-item', `vds-dropdown-item--size-${this.size}`, this.disabled ? 'vds-dropdown-item--disabled' : '', this.isActive || this.isSelected ? 'vds-dropdown-item--active' : '', this.danger ? 'vds-dropdown-item--danger' : '', `vds-dropdown-item__alignment-${this.checkmarkAlignment}`) }, h("div", { key: 'a9f2dc0e6fca2fc14b36f11c0ddbcbc186e316bd', class: "vds-dropdown-item__content" }, this.checkmarkAlignment === 'start' && this.hasCheckmark
             ? this.checkmarkVariant === 'checkmark'
                 ? this.generateCheckmarkIconButton()
                 : this.generateCheckbox()
@@ -93,7 +93,6 @@ export class VdsDropdownItem {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -109,11 +108,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -128,11 +127,11 @@ export class VdsDropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "isActive": {
                 "type": "boolean",
-                "attribute": "is-active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -148,11 +147,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-active",
                 "defaultValue": "false"
             },
             "linkHref": {
                 "type": "string",
-                "attribute": "link-href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -168,11 +167,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "link-href",
                 "defaultValue": "null"
             },
             "linkTarget": {
                 "type": "string",
-                "attribute": "link-target",
                 "mutable": true,
                 "complexType": {
                     "original": "'_self' | '_blank' | '_parent' | '_top'",
@@ -188,11 +187,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "link-target",
                 "defaultValue": "'_self'"
             },
             "linkRel": {
                 "type": "string",
-                "attribute": "link-rel",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -208,11 +207,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "link-rel",
                 "defaultValue": "null"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -227,11 +226,11 @@ export class VdsDropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -246,11 +245,11 @@ export class VdsDropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -265,11 +264,11 @@ export class VdsDropdownItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "set-aria-label"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -285,11 +284,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "hasCheckmark": {
                 "type": "boolean",
-                "attribute": "has-checkmark",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -305,11 +304,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "has-checkmark",
                 "defaultValue": "false"
             },
             "isSelected": {
                 "type": "boolean",
-                "attribute": "is-selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -325,11 +324,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "is-selected",
                 "defaultValue": "false"
             },
             "checkmarkVariant": {
                 "type": "string",
-                "attribute": "checkmark-variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'checkbox' | 'checkmark'",
@@ -345,11 +344,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "checkmark-variant",
                 "defaultValue": "'checkmark'"
             },
             "checkmarkAlignment": {
                 "type": "string",
-                "attribute": "checkmark-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end'",
@@ -365,11 +364,11 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "checkmark-alignment",
                 "defaultValue": "'start'"
             },
             "danger": {
                 "type": "boolean",
-                "attribute": "danger",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -385,6 +384,7 @@ export class VdsDropdownItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "danger",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.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);
@@ -947,17 +961,6 @@
   line-height: 1.5rem;
   letter-spacing: normal;
 }
-:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled {
-  pointer-events: none;
-  color: var(--color-text-disabled);
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);
-}
-:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled .vds-dropdown-multiselect__label--value {
-  color: var(--color-text-disabled);
-}
-:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled .vds-dropdown-multiselect__label--placeholder {
-  color: var(--color-text-disabled);
-}
 :host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--error {
   box-shadow: 0 0 0 0.0625rem inset var(--color-border-danger);
 }
@@ -967,9 +970,7 @@
 :host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly {
   pointer-events: none;
   box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);
-}
-:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:focus, :host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:active, :host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:hover {
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);
+  background: var(--color-interaction-black-lowest);
 }
 :host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly:focus-visible {
   outline: none;
@@ -977,6 +978,18 @@
 :host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--readonly .vds-dropdown-multiselect__label--value {
   color: var(--color-text-medium);
 }
+:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled {
+  pointer-events: none;
+  color: var(--color-text-disabled);
+  box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);
+  background: var(--surface-medium);
+}
+:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled .vds-dropdown-multiselect__label--value {
+  color: var(--color-text-disabled);
+}
+:host .vds-dropdown-multiselect___trigger.vds-dropdown-multiselect___trigger--disabled .vds-dropdown-multiselect__label--placeholder {
+  color: var(--color-text-disabled);
+}
 :host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__label {
   display: block;
   text-align: left;
@@ -994,15 +1007,7 @@
 :host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__trigger-icons {
   display: flex;
   align-items: center;
-}
-:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__trigger-icons vds-icon {
-  margin-left: var(--spacing-02);
-  cursor: pointer;
-  padding: 0.125rem;
-}
-:host .vds-dropdown-multiselect___trigger .vds-dropdown-multiselect__trigger-icons vds-icon:hover {
-  background: var(--color-interaction-black-lowest);
-  border-radius: var(--radius-medium);
+  gap: var(--spacing-02);
 }
 :host .vds-dropdown-multiselect__content {
   display: none;

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
-import { getIconSize, getIconColor } from "../../utils/icon-attr.utils";
+import { getIconSize, getIconColor, getActionIconButtonSize } from "../../utils/icon-attr.utils";
 import { updateFloatingBoxPosition } from "../../utils/floating-engine-utils";
 import { emitNativeInputEvent, getSelectedItemsText, getValidOptions, selectSelectedItems, setDropdownStyles, toggleContainerDisplay, unselectAllItems, unselectNonSelectedItems, updateContainerWidth } from "../basic-dropdown/vds-basic-dropdown.utils";
 import { arrayIsEqual } from "../../utils/array-utils";
@@ -194,30 +194,33 @@ export class VdsBasicDropdownMultiselect {
         }
         return this.hasValue() ? getSelectedItemsText(this.dropdownContent, this.value).join(", ") : this.placeholder;
     }
+    getIconColor() {
+        return getIconColor(this.disabled, this.isReadonly);
+    }
     renderInformativeIcon() {
-        return h("vds-icon", { svgIcon: this.informativeIcon, color: getIconColor(this.disabled), size: getIconSize(this.size) });
+        return h("vds-icon", { svgIcon: this.informativeIcon, color: this.getIconColor(), size: getIconSize(this.size) });
     }
     renderClearIcon() {
-        return h("vds-icon-button", { icon: "close", variant: "secondary", size: this.size, onClick: (evt) => {
+        return (h("vds-icon-button", { icon: "close", variant: "secondary", size: getActionIconButtonSize(this.size), onClick: evt => {
                 this.clearIconClick(evt);
-            }, disabled: this.disabled, setAriaLabel: "clear" });
+            }, disabled: this.disabled || this.isReadonly, setAriaLabel: "clear" }));
     }
     renderDropdownIcon() {
-        return h("vds-icon", { svgIcon: this.isOpened ? "chevron-up" : "chevron-down", color: getIconColor(this.disabled), size: getIconSize(this.size) });
+        return h("vds-icon", { svgIcon: this.isOpened ? 'chevron-up' : 'chevron-down', color: this.getIconColor(), size: getIconSize(this.size) });
     }
     hasValue() {
         return Array.isArray(this.value) && this.value && this.value.length > 0;
     }
     render() {
-        return (h(Host, { key: '3fd565dcb815b39f8fd788b29876436817c7f322', class: combineClasses(this.disabled ? "vds-basic-dropdown-multiselect--disabled" : ""), title: this.getTextValue() }, h("div", { key: 'b0726a7feaa942de1b108be126235c5c4d7b2f16', class: "vds-dropdown-multiselect__container" }, h("button", { key: '21eeb4220d3468de485db8558527997cf726fe7a', disabled: this.disabled, ref: (el) => {
+        return (h(Host, { key: '85fcf956865de41a71a6a9cc7838cb50515dfa4a', class: combineClasses(this.disabled ? "vds-basic-dropdown-multiselect--disabled" : ""), title: this.getTextValue() }, h("div", { key: 'e1d9b79ccbafb6891a9ce8ae7a6252287c074964', class: "vds-dropdown-multiselect__container" }, h("button", { key: '0c9d1d45a68d45f8f6448831ed5c72382dc2d6e7', disabled: this.disabled, ref: (el) => {
                 if (el)
                     this.dropdownTrigger = el;
             }, class: combineClasses("vds-dropdown-multiselect___trigger", `vds-dropdown-multiselect___trigger--size-${this.size}`, this.disabled ? "vds-dropdown-multiselect___trigger--disabled" : "", this.isReadonly ? "vds-dropdown-multiselect___trigger--readonly" : "", this.error ? "vds-dropdown-multiselect___trigger--error" : ""), onClick: (evt) => {
                 this.handleClick(evt);
-            } }, this.informativeIcon && this.renderInformativeIcon(), this.renderLabelValue(), h("div", { key: 'bd72c134929ca8af2df97ba4b7015f9bd862f7a3', class: "vds-dropdown-multiselect__trigger-icons" }, this.hasValue() && this.showClearButton && this.renderClearIcon(), this.renderDropdownIcon())), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: 'c1af10efe4fa450dbb91520b0eb10ef36c87bd11', ref: (el) => {
+            } }, this.informativeIcon && this.renderInformativeIcon(), this.renderLabelValue(), h("div", { key: '38315d863f7e52d8287c468683b67278dc111ddc', class: "vds-dropdown-multiselect__trigger-icons" }, this.hasValue() && this.showClearButton && this.renderClearIcon(), this.renderDropdownIcon())), this.backdrop && this.isOpened ? h("div", { class: "vds-floating-backdrop", onClick: this.close.bind(this) }) : '', h("div", { key: '60c860938493b6fa6c940ae449a5e672520c85a0', ref: (el) => {
                 if (el)
                     this.dropdownContent = el;
-            }, class: combineClasses("vds-dropdown-multiselect__content", this.maxHeight ? "has-scroll" : "", this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '8e8d60d2e410b3aa221543bc4ddc6e65bcb15d64', class: combineClasses('vds-dropdown-multiselect__content-options', (this.maxHeight ? 'scrollable' : '')), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: '4022c802efa4d0d68024317905f538940b8eddb9' }))))));
+            }, class: combineClasses("vds-dropdown-multiselect__content", this.maxHeight ? "has-scroll" : "", this.options.length === 0 ? "no-shadow" : "") }, h("div", { key: '2285dd57fea471099951445dbc29caee1fbc8cf9', class: combineClasses('vds-dropdown-multiselect__content-options', (this.maxHeight ? 'scrollable' : '')), style: setDropdownStyles(this.maxHeight) }, h("slot", { key: 'fd4eb53d5636a3d4675b5c3e637327a7d0f27275' }))))));
     }
     static get is() { return "vds-basic-dropdown-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -236,7 +239,6 @@ export class VdsBasicDropdownMultiselect {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -252,11 +254,11 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string[] | string",
@@ -272,11 +274,11 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "[]"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -291,11 +293,11 @@ export class VdsBasicDropdownMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -310,11 +312,11 @@ export class VdsBasicDropdownMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -329,11 +331,11 @@ export class VdsBasicDropdownMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "disabled"
             },
             "isReadonly": {
                 "type": "boolean",
-                "attribute": "is-readonly",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -348,11 +350,11 @@ export class VdsBasicDropdownMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "is-readonly"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -367,11 +369,11 @@ export class VdsBasicDropdownMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "error"
             },
             "event": {
                 "type": "string",
-                "attribute": "event",
                 "mutable": true,
                 "complexType": {
                     "original": "\"click\"",
@@ -387,11 +389,11 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "event",
                 "defaultValue": "\"click\""
             },
             "displaySelectionLimit": {
                 "type": "number",
-                "attribute": "display-selection-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -406,11 +408,11 @@ export class VdsBasicDropdownMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "display-selection-limit"
             },
             "displaySelectionLimitText": {
                 "type": "string",
-                "attribute": "display-selection-limit-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -426,11 +428,11 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-selection-limit-text",
                 "defaultValue": "\"Items selected\""
             },
             "showClearButton": {
                 "type": "boolean",
-                "attribute": "show-clear-button",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -446,11 +448,11 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-clear-button",
                 "defaultValue": "true"
             },
             "maxHeight": {
                 "type": "string",
-                "attribute": "max-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -465,11 +467,11 @@ export class VdsBasicDropdownMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-height"
             },
             "matchWidth": {
                 "type": "boolean",
-                "attribute": "match-width",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -485,11 +487,11 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "match-width",
                 "defaultValue": "false"
             },
             "autoPosition": {
                 "type": "boolean",
-                "attribute": "auto-position",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -505,11 +507,11 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "auto-position",
                 "defaultValue": "false"
             },
             "backdrop": {
                 "type": "boolean",
-                "attribute": "backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -525,6 +527,7 @@ export class VdsBasicDropdownMultiselect {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop",
                 "defaultValue": "false"
             }
         };