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

package/dist/collection/components/avatar/vds-avatar.stories.js

@@ -1,3 +1,5 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
 export default {
     title: 'VDS/Components/Avatar',
     parameters: {
@@ -5,9 +7,15 @@ export default {
             toc: true,
         },
         design: {
-            type: "figma",
-            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29184-58579"
-        }
+            type: 'figma',
+            url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29184-58579',
+        },
+    },
+    argTypes: {
+        overlayIcon: {
+            options: ICON_LIST,
+            control: { type: 'select' },
+        },
     },
 };
 const codeTemplate = args => {
@@ -16,8 +24,9 @@ const codeTemplate = args => {
     <vds-avatar
         size="${args.size || '24px'}"
         value="${args.value || 'User Demo'}"
+        overlay-icon="${args.overlayIcon || ''}"
     >
-    </<vds-avatar>
+    </vds-avatar>
   </div>
     `;
 };
@@ -25,15 +34,24 @@ export const BasicUsage = codeTemplate.bind({});
 BasicUsage.args = {
     size: '28px',
     value: 'User Demo',
+    overlayIcon: '',
 };
 export const ImageUsage = codeTemplate.bind({});
 ImageUsage.args = {
     size: '28px',
     value: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',
+    overlayIcon: '',
 };
 export const AdditionalUsersUsage = codeTemplate.bind({});
 AdditionalUsersUsage.args = {
     size: '28px',
     value: '+42',
+    overlayIcon: '',
+};
+export const OverlayUsage = codeTemplate.bind({});
+OverlayUsage.args = {
+    size: '100px',
+    value: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',
+    overlayIcon: 'edit',
 };
 //# sourceMappingURL=vds-avatar.stories.js.map

package/dist/collection/components/avatar/vds-avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/vds-avatar.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;;gBAGO,IAAI,CAAC,IAAI,IAAI,MAAM;iBAClB,IAAI,CAAC,KAAK,IAAI,WAAW;;;;KAIrC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,uDAAuD;CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,KAAK;CACb,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Avatar',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: \"figma\",\n      url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29184-58579\"\n    }\n  },\n};\n\nconst codeTemplate = args => {\n  return `\n  <div>\n    <vds-avatar\n        size=\"${args.size || '24px'}\"\n        value=\"${args.value || 'User Demo'}\"\n    >\n    </<vds-avatar>\n  </div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  size: '28px',\n  value: 'User Demo',\n};\n\nexport const ImageUsage = codeTemplate.bind({});\n\nImageUsage.args = {\n  size: '28px',\n  value: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',\n};\n\nexport const AdditionalUsersUsage = codeTemplate.bind({});\n\nAdditionalUsersUsage.args = {\n  size: '28px',\n  value: '+42',\n};"]}
+{"version":3,"file":"vds-avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/vds-avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;QACD,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,uFAAuF;SAC7F;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;;gBAGO,IAAI,CAAC,IAAI,IAAI,MAAM;iBAClB,IAAI,CAAC,KAAK,IAAI,WAAW;wBAClB,IAAI,CAAC,WAAW,IAAI,EAAE;;;;KAIzC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,uDAAuD;IAC9D,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElD,YAAY,CAAC,IAAI,GAAG;IAClB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,uDAAuD;IAC9D,WAAW,EAAE,MAAM;CACpB,CAAC","sourcesContent":["import { getIconsFromSpriteFile } from '../../utils/icon-utils';\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n  title: 'VDS/Components/Avatar',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n    design: {\n      type: 'figma',\n      url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=29184-58579',\n    },\n  },\n  argTypes: {\n    overlayIcon: {\n      options: ICON_LIST,\n      control: { type: 'select' },\n    },\n  },\n};\n\nconst codeTemplate = args => {\n  return `\n  <div>\n    <vds-avatar\n        size=\"${args.size || '24px'}\"\n        value=\"${args.value || 'User Demo'}\"\n        overlay-icon=\"${args.overlayIcon || ''}\"\n    >\n    </vds-avatar>\n  </div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  size: '28px',\n  value: 'User Demo',\n  overlayIcon: '',\n};\n\nexport const ImageUsage = codeTemplate.bind({});\n\nImageUsage.args = {\n  size: '28px',\n  value: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',\n  overlayIcon: '',\n};\n\nexport const AdditionalUsersUsage = codeTemplate.bind({});\n\nAdditionalUsersUsage.args = {\n  size: '28px',\n  value: '+42',\n  overlayIcon: '',\n};\n\nexport const OverlayUsage = codeTemplate.bind({});\n\nOverlayUsage.args = {\n  size: '100px',\n  value: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',\n  overlayIcon: 'edit',\n};\n"]}

package/dist/collection/components/badge-dot/vds-badge-dot.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);
@@ -899,6 +913,7 @@
 :host .vds-badge-dot__container .vds-badge-dot__thumb {
   border-radius: var(--spacing-04);
   position: absolute;
+  z-index: var(--elevation-layer-5);
 }
 :host .vds-badge-dot__container .vds-badge-dot__thumb.vds-badge-dot__thumb--size-medium {
   width: var(--spacing-04);

package/dist/collection/components/badge-dot/vds-badge-dot.js

@@ -26,7 +26,7 @@ export class VdsBadgeDot {
         return style;
     }
     render() {
-        return (h(Host, { key: 'de76ac7e9e12e4480987ededeaf22561527ad5f1', "aria-label": this.setAriaLabel }, h("div", { key: '28f648e19c03b19e50b07abedb7dd3d98618aa59', class: combineClasses("vds-badge-dot__container"), "aria-label": this.setAriaLabel }, h("div", { key: '16e6fbfb0b6181f85ddbbdb0e6e9ccb9390d1af9', class: combineClasses("vds-badge-dot__thumb", this.overlap ? "vds-badge-dot__thumb--overlap" : "vds-badge-dot__thumb--no-overlap", `vds-badge-dot__thumb--size-${this.size}`, `vds-badge-dot__thumb--color-${this.statusColor}`, `vds-badge-dot__thumb--position-${this.position}`), style: this.setCustomColorStyle() }), h("slot", { key: '47a7c1bfb988c28d8af3aaac707fa4a92a851f76' }))));
+        return (h(Host, { key: '38b270026a6ce632ba00bc9a2385045aeb7b0487', "aria-label": this.setAriaLabel }, h("div", { key: '9901018db59ce6e1fb807f19c9921c06a80f255c', class: combineClasses("vds-badge-dot__container"), "aria-label": this.setAriaLabel }, h("div", { key: '35d259c8ed350ecfb812b87a2194f6de76cffa98', class: combineClasses("vds-badge-dot__thumb", this.overlap ? "vds-badge-dot__thumb--overlap" : "vds-badge-dot__thumb--no-overlap", `vds-badge-dot__thumb--size-${this.size}`, `vds-badge-dot__thumb--color-${this.statusColor}`, `vds-badge-dot__thumb--position-${this.position}`), style: this.setCustomColorStyle() }), h("slot", { key: 'de145ced521329b9d7b0b8d13fd5c82a298431f6' }))));
     }
     static get is() { return "vds-badge-dot"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,6 @@ export class VdsBadgeDot {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"medium\"",
@@ -60,11 +59,11 @@ export class VdsBadgeDot {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "statusColor": {
                 "type": "string",
-                "attribute": "status-color",
                 "mutable": false,
                 "complexType": {
                     "original": "\"warning\" | \"danger\" | \"healthy\" | \"information\" | \"neutral\" | Colors",
@@ -86,11 +85,11 @@ export class VdsBadgeDot {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "status-color",
                 "defaultValue": "\"neutral\""
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -105,11 +104,11 @@ export class VdsBadgeDot {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "set-aria-label"
             },
             "overlap": {
                 "type": "boolean",
-                "attribute": "overlap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -125,11 +124,11 @@ export class VdsBadgeDot {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "overlap",
                 "defaultValue": "false"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\"",
@@ -145,6 +144,7 @@ export class VdsBadgeDot {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "\"top-right\""
             }
         };

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

@@ -38,7 +38,7 @@ export class VdsBadgePill {
         return h("vds-icon", { svgIcon: this.icon, size: this.getIconSizeUpdated(this.size) });
     }
     render() {
-        return (h(Host, { key: '6f09e4350cfd47a4614c4544979a5b2322577fb9', "aria-label": this.setAriaLabel || this.value }, h("button", { key: '056df9712c4e63002da2ccf6ce2da199dddd43f5', class: combineClasses('vds__badge__pill--container', this.size ? `vds__badge__pill--size-${this.size}` : '', this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom'), style: this.customStyles, title: this.hideTitle ? undefined : this.setAriaLabel || this.value, "aria-label": this.setAriaLabel || this.value }, h("div", { key: '621bab9b8c4eebbade691d2ee9088570bb317649', class: 'vds__badge__pill--content' }, this.icon && this.getIcon(), this.value && h("span", { key: 'ee46139c960f6cf556989cf12d6d0d5f55be0672', class: 'vds__badge__pill--value' }, this.value)))));
+        return (h(Host, { key: '82f19b8b819f07bf11b5b7574a3460e0593dffe9', "aria-label": this.setAriaLabel || this.value }, h("button", { key: 'f0d545252f80be53ea5e5f3b6b7f16d67e29c338', class: combineClasses('vds__badge__pill--container', this.size ? `vds__badge__pill--size-${this.size}` : '', this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom'), style: this.customStyles, title: this.hideTitle ? undefined : this.setAriaLabel || this.value, "aria-label": this.setAriaLabel || this.value }, h("div", { key: '5d6d30e9ce4371cb0cb857a9932d87d38b9443e9', class: 'vds__badge__pill--content' }, this.icon && this.getIcon(), this.value && h("span", { key: 'c67f19eaf65c869b4473aeeed63d260a5e1e7657', class: 'vds__badge__pill--value' }, this.value)))));
     }
     static get is() { return "vds-badge-pill"; }
     static get encapsulation() { return "shadow"; }
@@ -56,7 +56,6 @@ export class VdsBadgePill {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'2x-small' | 'extra-small' | 'small' | 'medium' | 'large'",
@@ -72,16 +71,22 @@ export class VdsBadgePill {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "statusColor": {
                 "type": "string",
-                "attribute": "status-color",
                 "mutable": false,
                 "complexType": {
-                    "original": "'warning' | 'danger' | 'healthy' | 'information' | 'neutral'",
-                    "resolved": "\"danger\" | \"healthy\" | \"information\" | \"neutral\" | \"warning\"",
-                    "references": {}
+                    "original": "'warning' | 'danger' | 'healthy' | 'information' | 'neutral' | Colors",
+                    "resolved": "Colors | \"information\" | \"healthy\" | \"danger\" | \"warning\" | \"neutral\"",
+                    "references": {
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Colors"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -92,11 +97,11 @@ export class VdsBadgePill {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "status-color",
                 "defaultValue": "'neutral'"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -111,11 +116,11 @@ export class VdsBadgePill {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "set-aria-label"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,11 +135,11 @@ export class VdsBadgePill {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,15 +154,15 @@ export class VdsBadgePill {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "contentColor": {
                 "type": "string",
-                "attribute": "content-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",
@@ -174,15 +179,15 @@ export class VdsBadgePill {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "content-color"
             },
             "borderFocusColor": {
                 "type": "string",
-                "attribute": "border-focus-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",
@@ -199,11 +204,11 @@ export class VdsBadgePill {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "border-focus-color"
             },
             "hideTitle": {
                 "type": "boolean",
-                "attribute": "hide-title",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -219,6 +224,7 @@ export class VdsBadgePill {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-title",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/badge-pill/vds-badge-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-badge-pill.js","sourceRoot":"","sources":["../../../src/components/badge-pill/vds-badge-pill.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;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAOjE,MAAM,OAAO,YAAY;IALzB;QAME,4BAA4B;QACpB,SAAI,GAA8D,QAAQ,CAAC;QACnF;;0FAEkF;QAC1E,gBAAW,GAAiE,SAAS,CAAC;QAW9F,gDAAgD;QACxC,cAAS,GAAY,KAAK,CAAC;QAE3B,aAAQ,GAAY,KAAK,CAAC;QAG1B,uBAAkB,GAAG,kBAAkB,CAAC;KAmDjD;IAjDC,mBAAmB;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE3D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,MAAM,GAAG,EAAE,CAAC;YAEhB,MAAM,GAAG;gBACP,gCAAgC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,SAAS;gBAC7F,mCAAmC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,SAAS;gBAClG,kCAAkC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,SAAS;aAC1G,CAAC;YAEF,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,OAAO;QACL,OAAO,gBAAU,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAa,CAAC;IAC7F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;YAC/C,+DACE,KAAK,EAAE,cAAc,CACnB,6BAA6B,EAC7B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EACtD,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kCAAkC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,uCAAuC,CACpI,EACD,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,gBACvD,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;gBAE3C,4DAAK,KAAK,EAAE,2BAA2B;oBACpC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;oBAC3B,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAE,yBAAyB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACtE,CACC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { BADGE_VARIANTS } from './vds-badge-pill.utils';\nimport { getIconSizeUpdated } from '../../utils/icon-attr.utils';\n\n@Component({\n  tag: 'vds-badge-pill',\n  styleUrl: 'vds-badge-pill.scss',\n  shadow: true,\n})\nexport class VdsBadgePill {\n  /** Sets the badge's size */\n  @Prop() size: '2x-small' | 'extra-small' | 'small' | 'medium' | 'large' = 'medium';\n  /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral\n   *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color;\n   *  To fully customize please refer to props contentColor and borderFocusColor. */\n  @Prop() statusColor: 'warning' | 'danger' | 'healthy' | 'information' | 'neutral' = 'neutral';\n  /** Sets the aria label in badge */\n  @Prop() setAriaLabel: string;\n  /** Sets an icon inside the badge */\n  @Prop() icon?: string;\n  /** Sets the text value of the badge. */\n  @Prop() value!: string;\n  /** Sets the color of the text and icon. (Only works when passing a custom statusColor) */\n  @Prop() contentColor: Colors;\n  /** Sets the color of the border in focus. (Only works when passing a custom statusColor) */\n  @Prop() borderFocusColor: Colors;\n  /** Hides the native tooltip when set to true */\n  @Prop() hideTitle: boolean = false;\n\n  private isCustom: boolean = false;\n  private customStyles;\n\n  private getIconSizeUpdated = getIconSizeUpdated;\n\n  componentWillRender(): void {\n    this.setCustomBadge();\n  }\n\n  private setCustomBadge(): void {\n    this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);\n\n    if (this.isCustom) {\n      let styles = {};\n\n      styles = {\n        '--custom-badge-pill-background': this.statusColor ? `var(--${this.statusColor})` : undefined,\n        '--custom-badge-pill-content-color': this.contentColor ? `var(--${this.contentColor})` : undefined,\n        '--custom-badge-pill-border-color': this.borderFocusColor ? `var(--${this.borderFocusColor})` : undefined,\n      };\n\n      this.customStyles = styles;\n    }\n  }\n\n  /** Sets the icon in the vds-badge-pills\n   *\n   * @returns HTMLStencilElement\n   */\n  getIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.icon} size={this.getIconSizeUpdated(this.size)}></vds-icon>;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host aria-label={this.setAriaLabel || this.value}>\n        <button\n          class={combineClasses(\n            'vds__badge__pill--container',\n            this.size ? `vds__badge__pill--size-${this.size}` : '',\n            this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom',\n          )}\n          style={this.customStyles}\n          title={this.hideTitle ? undefined : this.setAriaLabel || this.value}\n          aria-label={this.setAriaLabel || this.value}\n        >\n          <div class={'vds__badge__pill--content'}>\n            {this.icon && this.getIcon()}\n            {this.value && <span class={'vds__badge__pill--value'}>{this.value}</span>}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-badge-pill.js","sourceRoot":"","sources":["../../../src/components/badge-pill/vds-badge-pill.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;AAG7D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAOjE,MAAM,OAAO,YAAY;IALzB;QAME,4BAA4B;QACpB,SAAI,GAA8D,QAAQ,CAAC;QACnF;;0FAEkF;QAC1E,gBAAW,GAA0E,SAAS,CAAC;QAWvG,gDAAgD;QACxC,cAAS,GAAY,KAAK,CAAC;QAE3B,aAAQ,GAAY,KAAK,CAAC;QAG1B,uBAAkB,GAAG,kBAAkB,CAAC;KAmDjD;IAjDC,mBAAmB;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE3D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,MAAM,GAAG,EAAE,CAAC;YAEhB,MAAM,GAAG;gBACP,gCAAgC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,SAAS;gBAC7F,mCAAmC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,SAAS;gBAClG,kCAAkC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,SAAS;aAC1G,CAAC;YAEF,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,OAAO;QACL,OAAO,gBAAU,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAa,CAAC;IAC7F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;YAC/C,+DACE,KAAK,EAAE,cAAc,CACnB,6BAA6B,EAC7B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EACtD,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kCAAkC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,uCAAuC,CACpI,EACD,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,gBACvD,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;gBAE3C,4DAAK,KAAK,EAAE,2BAA2B;oBACpC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;oBAC3B,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAE,yBAAyB,IAAG,IAAI,CAAC,KAAK,CAAQ,CACtE,CACC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { BADGE_VARIANTS } from './vds-badge-pill.utils';\nimport { getIconSizeUpdated } from '../../utils/icon-attr.utils';\n\n@Component({\n  tag: 'vds-badge-pill',\n  styleUrl: 'vds-badge-pill.scss',\n  shadow: true,\n})\nexport class VdsBadgePill {\n  /** Sets the badge's size */\n  @Prop() size: '2x-small' | 'extra-small' | 'small' | 'medium' | 'large' = 'medium';\n  /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral\n   *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color;\n   *  To fully customize please refer to props contentColor and borderFocusColor. */\n  @Prop() statusColor: 'warning' | 'danger' | 'healthy' | 'information' | 'neutral' | Colors = 'neutral';\n  /** Sets the aria label in badge */\n  @Prop() setAriaLabel: string;\n  /** Sets an icon inside the badge */\n  @Prop() icon?: string;\n  /** Sets the text value of the badge. */\n  @Prop() value!: string;\n  /** Sets the color of the text and icon. (Only works when passing a custom statusColor) */\n  @Prop() contentColor: Colors;\n  /** Sets the color of the border in focus. (Only works when passing a custom statusColor) */\n  @Prop() borderFocusColor: Colors;\n  /** Hides the native tooltip when set to true */\n  @Prop() hideTitle: boolean = false;\n\n  private isCustom: boolean = false;\n  private customStyles;\n\n  private getIconSizeUpdated = getIconSizeUpdated;\n\n  componentWillRender(): void {\n    this.setCustomBadge();\n  }\n\n  private setCustomBadge(): void {\n    this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);\n\n    if (this.isCustom) {\n      let styles = {};\n\n      styles = {\n        '--custom-badge-pill-background': this.statusColor ? `var(--${this.statusColor})` : undefined,\n        '--custom-badge-pill-content-color': this.contentColor ? `var(--${this.contentColor})` : undefined,\n        '--custom-badge-pill-border-color': this.borderFocusColor ? `var(--${this.borderFocusColor})` : undefined,\n      };\n\n      this.customStyles = styles;\n    }\n  }\n\n  /** Sets the icon in the vds-badge-pills\n   *\n   * @returns HTMLStencilElement\n   */\n  getIcon(): HTMLStencilElement {\n    return <vds-icon svgIcon={this.icon} size={this.getIconSizeUpdated(this.size)}></vds-icon>;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host aria-label={this.setAriaLabel || this.value}>\n        <button\n          class={combineClasses(\n            'vds__badge__pill--container',\n            this.size ? `vds__badge__pill--size-${this.size}` : '',\n            this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom',\n          )}\n          style={this.customStyles}\n          title={this.hideTitle ? undefined : this.setAriaLabel || this.value}\n          aria-label={this.setAriaLabel || this.value}\n        >\n          <div class={'vds__badge__pill--content'}>\n            {this.icon && this.getIcon()}\n            {this.value && <span class={'vds__badge__pill--value'}>{this.value}</span>}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.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);
@@ -932,25 +946,32 @@
   padding: var(--spacing-04) var(--spacing-05);
   height: var(--spacing-13);
 }
-:host .vds__dropdown--trigger-disabled {
-  cursor: none;
+:host .vds__dropdown--trigger.vds__dropdown--trigger-error {
+  box-shadow: 0 0 0 0.0625rem inset var(--color-border-danger);
+}
+:host .vds__dropdown--trigger.vds__dropdown--trigger-error .vds__dropdown--value-label {
+  color: var(--color-text-danger-medium);
+}
+:host .vds__dropdown--trigger.vds__dropdown--trigger--readonly {
+  pointer-events: none;
+  box-shadow: 0 0 0 0.0625rem inset var(--color-border-low);
+  background: var(--color-interaction-black-lowest);
+}
+:host .vds__dropdown--trigger.vds__dropdown--trigger--readonly:focus-visible {
+  outline: none;
+}
+:host .vds__dropdown--trigger.vds__dropdown--trigger--readonly .vds__dropdown--value-label {
+  color: var(--color-text-medium);
+}
+:host .vds__dropdown--trigger.vds__dropdown--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--trigger-disabled .vds__dropdown--value {
+:host .vds__dropdown--trigger.vds__dropdown--trigger-disabled .vds__dropdown--value {
   color: var(--color-text-disabled);
 }
-:host .vds__dropdown--trigger-error {
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-danger);
-}
-:host .vds__dropdown--trigger-error:focus, :host .vds__dropdown--trigger-error:active, :host .vds__dropdown--trigger-error:hover {
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-danger);
-}
-:host .vds__dropdown--trigger-error .vds__dropdown--value-label {
-  color: var(--color-text-danger-medium);
-}
 :host .vds__dropdown--value {
   padding-right: var(--spacing-02);
   font-feature-settings: "clig" off, "liga" off;
@@ -1045,6 +1066,7 @@
 :host .vds__dropdown--right-actions {
   display: inline-flex;
   align-items: center;
+  gap: var(--spacing-02);
 }
 :host .vds-basic-dropdown__container {
   display: block;