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

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

@@ -14,6 +14,7 @@ export class VdsPopover {
          */
         this.autoPosition = false;
         this.popupOpened = false;
+        this.floatingCleanUp = () => { };
     }
     async emitValue() {
         if (this.popupOpened) {
@@ -104,18 +105,18 @@ export class VdsPopover {
         }
     }
     render() {
-        return (h(Host, { key: 'e28148c875326da74609581006e73cb3b94c9cde', style: this.setMaxWidthAndHeight() }, h("div", { key: '20332699d6c1f08a5f1cb4afad583ba0bb67b9de', class: "vds__popover-trigger", onClick: (evt) => {
+        return (h(Host, { key: '4852b947c517eceb16b9d847aa3b0be311a45eae', style: this.setMaxWidthAndHeight() }, h("div", { key: '4762231e6b1733ff75b509d576882290cac42721', class: "vds__popover-trigger", onClick: (evt) => {
                 this.handleClick(evt);
             }, ref: (triggerEl) => {
                 if (triggerEl)
                     this.actionElementRef = triggerEl;
-            } }, h("slot", { key: 'ec34a265bb4b3a1bdfdba28616aa0e74e8e396d7', name: "popover-trigger" })), h("div", { key: '05164816acb6198dab175c5fcd2683fe3ceb44e1', class: "vds__popover-container", style: this.setPadding(), ref: (popoverEl) => {
+            } }, h("slot", { key: '8ad799c71960616128af317604fd6bc3cac3971b', name: "popover-trigger" })), h("div", { key: '4a3fd72f559b05c417071089cc0c750ba72fe116', class: "vds__popover-container", style: this.setPadding(), ref: (popoverEl) => {
                 if (popoverEl)
                     this.popoverElementRef = popoverEl;
-            } }, h("slot", { key: 'ce6f34a0f872f008da42a9e70e636359664e5331', name: "popover-content" }), h("div", { key: '67e1aa4a75f3944d703844aab4279dc34292baeb', class: "vds__popover-arrow", ref: (popoverArrowEl) => {
+            } }, h("slot", { key: 'ac19779af1b03e255232f325eac7090c077275ae', name: "popover-content" }), h("div", { key: '721870ed6eb1c0e4daa523a4fd8a950f56979833', class: "vds__popover-arrow", ref: (popoverArrowEl) => {
                 if (popoverArrowEl)
                     this.arrowElementRef = popoverArrowEl;
-            } }, h("svg", { key: '4ca6172abf42e181fcf7473cacd94a07f6289911', class: "vds__popover-arrow-img", width: "8", height: "4", viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e49325de93d87875b712b14ebb0872be0e01948d', id: "popover-caret-filled-small", d: "M0 0L4 4L8 0H0Z", fill: "var(--surface-neutral-default)" }))))));
+            } }, h("svg", { key: '8e62f3c567e039988db701b688547e660d9f284e', class: "vds__popover-arrow-img", width: "8", height: "4", viewBox: "0 0 8 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a6c83f5ebc0dce2bac73ad770ccc192729a30a86', id: "popover-caret-filled-small", d: "M0 0L4 4L8 0H0Z", fill: "var(--surface-neutral-default)" }))))));
     }
     static get is() { return "vds-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -133,7 +134,6 @@ export class VdsPopover {
         return {
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "'top' | 'bottom' | 'right' | 'left'",
@@ -149,11 +149,11 @@ export class VdsPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "'bottom'"
             },
             "maxWidth": {
                 "type": "string",
-                "attribute": "max-width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -168,11 +168,11 @@ export class VdsPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-width"
             },
             "maxHeight": {
                 "type": "string",
-                "attribute": "max-height",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -187,11 +187,11 @@ export class VdsPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-height"
             },
             "event": {
                 "type": "string",
-                "attribute": "event",
                 "mutable": true,
                 "complexType": {
                     "original": "'hover' | 'click'",
@@ -207,11 +207,11 @@ export class VdsPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "event",
                 "defaultValue": "'click'"
             },
             "padding": {
                 "type": "string",
-                "attribute": "padding",
                 "mutable": true,
                 "complexType": {
                     "original": "'default' | 'none'",
@@ -227,11 +227,11 @@ export class VdsPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "padding",
                 "defaultValue": "'default'"
             },
             "autoPosition": {
                 "type": "boolean",
-                "attribute": "auto-position",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -247,6 +247,7 @@ export class VdsPopover {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "auto-position",
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"vds-popover.js","sourceRoot":"","sources":["../../../src/components/popover/vds-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from '@stencil/core';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n@Component({\n  tag: 'vds-popover',\n  styleUrl: 'vds-popover.scss',\n  shadow: true,\n})\n\nexport class VdsPopover {\n  \n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the popover will be opened */\n  @Prop({mutable: true}) position: 'top' | 'bottom' | 'right' | 'left' = 'bottom';\n  /** Sets the maximum width of the popover’s content */\n  @Prop({mutable: true}) maxWidth: string;\n  /** Sets the maximum height of the popover’s content */\n  @Prop({mutable: true}) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({mutable: true}) event: 'hover' | 'click' = 'click';\n  /** Toggles padding inside popover. */\n  @Prop({mutable: true}) padding: 'default' | 'none' = 'default';\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   */\n  @Prop({mutable: true}) autoPosition: boolean = false;\n\n  @State() popupOpened: boolean = false;\n  \n  /** Emits event when popover gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when popover gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private floatingCleanUp: () => void;\n\n  @Watch(\"popupOpened\")\n  async emitValue(): Promise<void> {\n    if (this.popupOpened){\n      this.opened.emit();\n      this.popoverElementRef.style.display = 'inline-flex';\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.popoverElementRef, this.arrowElementRef, this.position, this.autoPosition);\n    }\n    else{\n      this.closed.emit();\n      this.popoverElementRef.style.display = 'none';\n      this.floatingCleanUp();\n    } \n  }\n\n  /* Close the popover when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;      \n    }\n  }\n\n  /* Open the popover with click on the trigger element  */\n  @Listen('click')\n  handleClick(event: Event): void {\n    if (this.event === 'click') {\n      const clickedElement = event.target as HTMLElement;\n      if (clickedElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n\n  /* Open the popover from other element  */ \n  @Method()\n  public async open(): Promise<void> {\n    this.popupOpened = true;\n  }\n\n  /* Close the popover from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.popupOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the popover\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__popover-container') as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = false; \n      }\n    }\n  }\n\n  private setPadding(){\n    return {'--popover-padding': this.padding === 'none' ? '0' : 'var(--spacing-06) var(--spacing-05) var(--spacing-06) var(--spacing-05)'}\n  }\n  private setMaxWidthAndHeight(){\n    return {'--popover-max-width': this.maxWidth, '--popover-max-height': this.maxHeight} \n  }\n  \n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private popoverElementRef: HTMLElement;\n  \n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-trigger');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-arrow');\n    this.popoverElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__popover-container');\n\n    window.addEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this)); \n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }  \n\n  render(): HTMLStencilElement { \n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        <div class=\"vds__popover-trigger\"\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);              \n          }}\n          ref={(triggerEl) => { if(triggerEl)this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"popover-trigger\"></slot>\n        </div>\n        <div\n          class=\"vds__popover-container\" \n          style={this.setPadding()}\n          ref={(popoverEl) => {  if(popoverEl)this.popoverElementRef = popoverEl; }}\n        >          \n          <slot name=\"popover-content\"></slot>\n          <div class=\"vds__popover-arrow\" ref={(popoverArrowEl) => {  if(popoverArrowEl)this.arrowElementRef = popoverArrowEl; }}>\n            <svg class=\"vds__popover-arrow-img\" width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"popover-caret-filled-small\" d=\"M0 0L4 4L8 0H0Z\" fill=\"var(--surface-neutral-default)\"/>\n            </svg>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-popover.js","sourceRoot":"","sources":["../../../src/components/popover/vds-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, State, h, Element, EventEmitter, Event, Method } from '@stencil/core';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\nimport { updateFloatingBoxPosition } from '../../utils/floating-engine-utils';\nimport { queryElementFromShadowRoot } from '../../utils/node-utils';\n@Component({\n  tag: 'vds-popover',\n  styleUrl: 'vds-popover.scss',\n  shadow: true,\n})\n\nexport class VdsPopover {\n  \n  @Element() hostEl: HTMLElement;\n  /** Defines the position where the popover will be opened */\n  @Prop({mutable: true}) position: 'top' | 'bottom' | 'right' | 'left' = 'bottom';\n  /** Sets the maximum width of the popover’s content */\n  @Prop({mutable: true}) maxWidth: string;\n  /** Sets the maximum height of the popover’s content */\n  @Prop({mutable: true}) maxHeight: string;\n  /** The type of event that will trigger the popover */\n  @Prop({mutable: true}) event: 'hover' | 'click' = 'click';\n  /** Toggles padding inside popover. */\n  @Prop({mutable: true}) padding: 'default' | 'none' = 'default';\n  /** Toggles the floating container auto-positioning based on available window space. \n   * False by default as it may cause positioning issues in some situations, use with caution \n   */\n  @Prop({mutable: true}) autoPosition: boolean = false;\n\n  @State() popupOpened: boolean = false;\n  \n  /** Emits event when popover gets opens */\n  @Event() opened: EventEmitter<void>;\n  /** Emits event when popover gets closes */\n  @Event() closed: EventEmitter<void>;\n\n  private floatingCleanUp: () => void;\n\n  constructor() {\n    this.floatingCleanUp = () => { };\n  }\n\n  @Watch(\"popupOpened\")\n  async emitValue(): Promise<void> {\n    if (this.popupOpened){\n      this.opened.emit();\n      this.popoverElementRef.style.display = 'inline-flex';\n      this.floatingCleanUp = await updateFloatingBoxPosition(this.actionElementRef, this.popoverElementRef, this.arrowElementRef, this.position, this.autoPosition);\n    }\n    else{\n      this.closed.emit();\n      this.popoverElementRef.style.display = 'none';\n      this.floatingCleanUp();\n    } \n  }\n\n  /* Close the popover when click outside */\n  @Listen('click', { target: 'window' })\n  private handleClickOut(evt: MouseEvent): void {\n    const isClickInside = this.hostEl.contains(evt.target as Node);\n    if (!isClickInside) {\n      this.popupOpened = false;      \n    }\n  }\n\n  /* Open the popover with click on the trigger element  */\n  @Listen('click')\n  handleClick(event: Event): void {\n    if (this.event === 'click') {\n      const clickedElement = event.target as HTMLElement;\n      if (clickedElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n\n  /* Open the popover from other element  */ \n  @Method()\n  public async open(): Promise<void> {\n    this.popupOpened = true;\n  }\n\n  /* Close the popover from other element  */\n  @Method()\n  public async close(): Promise<void> {\n    this.popupOpened = false;\n  }\n  /**\n   *  Gets the target that will manage the popover\n   *  returns a promise with the target HTMLElement.\n   */\n  @Method()\n  public async getTarget(): Promise<HTMLElement | null> {\n    return document.querySelector('.vds__popover-container') as HTMLElement;\n  }\n\n  private handleHover(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = true;\n      }\n    }\n  }\n  private handleHoverOut(event: Event): void {\n    if (this.event === 'hover') {\n      const hoveredElement = event.target as HTMLElement;\n      if (hoveredElement) {\n        this.popupOpened = false; \n      }\n    }\n  }\n\n  private setPadding(){\n    return {'--popover-padding': this.padding === 'none' ? '0' : 'var(--spacing-06) var(--spacing-05) var(--spacing-06) var(--spacing-05)'}\n  }\n  private setMaxWidthAndHeight(){\n    return {'--popover-max-width': this.maxWidth, '--popover-max-height': this.maxHeight} \n  }\n  \n  private actionElementRef: HTMLElement;\n  private arrowElementRef: HTMLElement;\n  private popoverElementRef: HTMLElement;\n  \n  componentDidLoad() {\n    this.actionElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-trigger');\n    this.arrowElementRef = queryElementFromShadowRoot(this.hostEl,'.vds__popover-arrow');\n    this.popoverElementRef = queryElementFromShadowRoot(this.hostEl, '.vds__popover-container');\n\n    window.addEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.addEventListener('click', this.handleClick.bind(this)); \n    } else if (this.event === 'hover') {\n      this.actionElementRef.addEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.addEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('click', this.handleClickOut.bind(this));\n    if (this.event === 'click') {\n      this.actionElementRef.removeEventListener('click', this.handleClick.bind(this));\n    } else if (this.event === 'hover') {\n      this.actionElementRef.removeEventListener('mouseenter', this.handleHover.bind(this));\n      this.actionElementRef.removeEventListener('mouseleave', this.handleHoverOut.bind(this));\n    }\n  }  \n\n  render(): HTMLStencilElement { \n    return (\n      <Host style={this.setMaxWidthAndHeight()}>\n        <div class=\"vds__popover-trigger\"\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);              \n          }}\n          ref={(triggerEl) => { if(triggerEl)this.actionElementRef = triggerEl; }}\n        >\n          <slot name=\"popover-trigger\"></slot>\n        </div>\n        <div\n          class=\"vds__popover-container\" \n          style={this.setPadding()}\n          ref={(popoverEl) => {  if(popoverEl)this.popoverElementRef = popoverEl; }}\n        >          \n          <slot name=\"popover-content\"></slot>\n          <div class=\"vds__popover-arrow\" ref={(popoverArrowEl) => {  if(popoverArrowEl)this.arrowElementRef = popoverArrowEl; }}>\n            <svg class=\"vds__popover-arrow-img\" width=\"8\" height=\"4\" viewBox=\"0 0 8 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"popover-caret-filled-small\" d=\"M0 0L4 4L8 0H0Z\" fill=\"var(--surface-neutral-default)\"/>\n            </svg>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n"]}

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

@@ -90,7 +90,7 @@ export class VdsProgressCircular {
         this.setScale(this.scale);
     }
     render() {
-        return (h(Host, { key: '456f4ab12108bc4ace0f6758ee6cd78ddad745b3', style: this.setCustomColors() }, h("div", { key: '713b7477ec0e0374e884cfd63d04f02a73122c42', class: combineClasses('vds-progress-circular__container', this.customColors ? 'vds-progress-circular__container--custom-colors' : 'vds-progress-circular__container--default-colors'), style: { '--size': `calc(3.5rem * ${this.scale})` } }, h("svg", { key: '88fb7624dc8d1b1c7a3dbef5741b4652a1399179', class: combineClasses('vds-progress-circular__track', `vds-progress-circular__track--${this.status}`), viewBox: "0 0 52 52" }, h("circle", { key: '5458808a06c0e93c75208b514b5eeb6854c6a5a7', cx: "26", cy: "26", r: "24", fill: "none" })), h("svg", { key: '4d339463ed6ea16623e34712ad18e237e39b1e7c', class: combineClasses('vds-progress-circular__track-fill', `vds-progress-circular__track-fill--${this.status}`), style: this.setDurationAnimation(), viewBox: "0 0 52 52" }, h("circle", { key: 'f506c2bc1d97315b3b0463252441d37a805b76db', cx: "26", cy: "26", r: "24", fill: "none", style: this.setProgress() })))));
+        return (h(Host, { key: '5ead07229ac2b7ae9a2a94f01778d4382456f5c5', style: this.setCustomColors() }, h("div", { key: 'a7eb859248c6f997f9ef3a8f974ccfb92cb62dc6', class: combineClasses('vds-progress-circular__container', this.customColors ? 'vds-progress-circular__container--custom-colors' : 'vds-progress-circular__container--default-colors'), style: { '--size': `calc(3.5rem * ${this.scale})` } }, h("svg", { key: 'fec503b19a454e49475084a3fd6a9b9f6a746185', class: combineClasses('vds-progress-circular__track', `vds-progress-circular__track--${this.status}`), viewBox: "0 0 52 52" }, h("circle", { key: '8ad9dcd88148fa393e6328ecccb5643800aeeb39', cx: "26", cy: "26", r: "24", fill: "none" })), h("svg", { key: '89097d77ca783cd46ef0b3fbdc8d4e41f70548f7', class: combineClasses('vds-progress-circular__track-fill', `vds-progress-circular__track-fill--${this.status}`), style: this.setDurationAnimation(), viewBox: "0 0 52 52" }, h("circle", { key: '4180a218d83650d3174c7aabe76ff56e8931874f', cx: "26", cy: "26", r: "24", fill: "none", style: this.setProgress() })))));
     }
     static get is() { return "vds-progress-circular"; }
     static get encapsulation() { return "shadow"; }
@@ -108,7 +108,6 @@ export class VdsProgressCircular {
         return {
             "value": {
                 "type": "number",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -123,11 +122,11 @@ export class VdsProgressCircular {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "'error' | 'success' | 'default'",
@@ -143,11 +142,11 @@ export class VdsProgressCircular {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "status",
                 "defaultValue": "'default'"
             },
             "duration": {
                 "type": "number",
-                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -163,11 +162,11 @@ export class VdsProgressCircular {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "duration",
                 "defaultValue": "500"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -182,11 +181,11 @@ export class VdsProgressCircular {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "set-aria-label"
             },
             "colors": {
                 "type": "string",
-                "attribute": "colors",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string } | string",
@@ -201,11 +200,11 @@ export class VdsProgressCircular {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "colors"
             },
             "scale": {
                 "type": "number",
-                "attribute": "scale",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -221,6 +220,7 @@ export class VdsProgressCircular {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "scale",
                 "defaultValue": "1"
             }
         };

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

@@ -70,7 +70,7 @@ export class VdsProgressLinear {
         return style;
     }
     render() {
-        return (h(Host, { key: '47022e35b23812fa51b8f58757dd447cea7b4cf8', style: this.setCustomColors() }, h("div", { key: '9cbd4f99a808add6e0bfb4c7678037a6d3c90c23', class: combineClasses("vds-progress-linear__container", this.customColors ? "vds-progress-linear__container--custom-colors" : "vds-progress-linear__container--default-colors") }, h("div", { key: '1576e5ff9bb1d3b17fc821ccf24c899112b6c15a', class: combineClasses("vds-progress-linear__track", `vds-progress-linear__track--${this.status}`) }), h("div", { key: '4bee204f1e1cf05ce21a9b112eba4abdd2a6ec5a', style: this.setProgressStyles(), class: combineClasses("vds-progress-linear__track-fill", `vds-progress-linear__track-fill--${this.status}`) }))));
+        return (h(Host, { key: '2c7e0735821507854c896ef30b04c72da12112c5', style: this.setCustomColors() }, h("div", { key: '4b67dd82d76f97160f07aae415ec05b4aad94d10', class: combineClasses("vds-progress-linear__container", this.customColors ? "vds-progress-linear__container--custom-colors" : "vds-progress-linear__container--default-colors") }, h("div", { key: 'fe007f765bef7d65aa623f51652eca14315657dd', class: combineClasses("vds-progress-linear__track", `vds-progress-linear__track--${this.status}`) }), h("div", { key: '9e610996d27496f95eb5ed1aa070d844ba593ce4', style: this.setProgressStyles(), class: combineClasses("vds-progress-linear__track-fill", `vds-progress-linear__track-fill--${this.status}`) }))));
     }
     static get is() { return "vds-progress-linear"; }
     static get encapsulation() { return "shadow"; }
@@ -88,7 +88,6 @@ export class VdsProgressLinear {
         return {
             "value": {
                 "type": "number",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -103,11 +102,11 @@ export class VdsProgressLinear {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "\"error\" | \"success\" | \"default\"",
@@ -123,11 +122,11 @@ export class VdsProgressLinear {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "status",
                 "defaultValue": "\"default\""
             },
             "duration": {
                 "type": "number",
-                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -143,11 +142,11 @@ export class VdsProgressLinear {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "duration",
                 "defaultValue": "500"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -162,11 +161,11 @@ export class VdsProgressLinear {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "set-aria-label"
             },
             "colors": {
                 "type": "string",
-                "attribute": "colors",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string } | string",
@@ -181,7 +180,8 @@ export class VdsProgressLinear {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "colors"
             }
         };
     }

package/dist/collection/components/radio-button/vds-radio-button.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
 
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);

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

@@ -113,7 +113,7 @@ export class VdsRadioButton {
     }
     render() {
         var _a;
-        return (h(Host, { key: '301fe21bdd8c41ac010dee0dc79421494ce21ddf', state: this.state, class: this.disabled ? "vds-radio-button--disabled" : "" }, h("div", { key: '314329a23fb040bfc155b4e5212e6a0b706030fe', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-radio-button__container", `vds-radio-button__container--size-${this.size}`, `vds-radio-button__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-radio-button--checked" : "", this.disabled ? "vds-radio-button--disabled" : "", this.error ? "vds-radio-button--error" : "") }, h("div", { key: '8943a2759b06f8d02ad2ee42e4fffb30d2024b36', class: "vds-radio-button" }, h("input", { key: 'de670feeedf20951f7e337eb2e5a5296a38cf63a', type: "radio", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderRadioButton()), this.labelValue && this.renderLabel())));
+        return (h(Host, { key: '0e1cd74451cd676ab28e3bf472c0841244a15468', state: this.state, class: this.disabled ? "vds-radio-button--disabled" : "" }, h("div", { key: '3385b3acc29b97967747d57430ccac219048f770', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-radio-button__container", `vds-radio-button__container--size-${this.size}`, `vds-radio-button__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-radio-button--checked" : "", this.disabled ? "vds-radio-button--disabled" : "", this.error ? "vds-radio-button--error" : "") }, h("div", { key: 'c5109010f8cf87a4f3ba0b0609589b5c05e21bf1', class: "vds-radio-button" }, h("input", { key: '253ea75a8f1d53e6ed44b83e3645d35269ff77da', type: "radio", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderRadioButton()), this.labelValue && this.renderLabel())));
     }
     static get is() { return "vds-radio-button"; }
     static get encapsulation() { return "shadow"; }
@@ -132,7 +132,6 @@ export class VdsRadioButton {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"large\" | \"medium\"",
@@ -148,11 +147,11 @@ export class VdsRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "\"medium\""
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -168,11 +167,11 @@ export class VdsRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -188,11 +187,11 @@ export class VdsRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
-                "attribute": "error",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -208,11 +207,11 @@ export class VdsRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "error",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -227,11 +226,11 @@ export class VdsRadioButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             },
             "labelAlignment": {
                 "type": "string",
-                "attribute": "label-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "\"start\" | \"end\"",
@@ -247,11 +246,11 @@ export class VdsRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-alignment",
                 "defaultValue": "\"end\""
             },
             "labelValue": {
                 "type": "string",
-                "attribute": "label-value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -266,7 +265,8 @@ export class VdsRadioButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label-value"
             }
         };
     }

package/dist/collection/components/segmented-button/vds-segmented-button.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
 :root {
   font-family: "Roboto Flex", sans-serif, sans-serif;
   box-sizing: border-box;
@@ -481,6 +480,13 @@
   --height-12:0.75rem;
 }
 
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
 :root body {
   --spacing-00:0rem;
   --spacing-01:0.125rem;
@@ -733,7 +739,15 @@
   --static-dataviz-div-red-blue-650:#163670;
   --static-dataviz-div-red-blue-700:#0B194C;
   --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
   --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
   --elevation-shadow-0:none;
   --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
   --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);