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

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

@@ -110,9 +110,9 @@ export class VdsTab {
         }
     }
     render() {
-        return (h(Host, { key: 'e2ee87ae6558616c2ede1684f748f3c08e4d2468', style: this.setStyle(), class: this.disabled ? 'vds__tab--disabled' : '' }, h("div", { key: '2a83cef4c92324ebb68f9551bb880e5d8b9ec782', class: combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : ''), role: "tab", "aria-label": this.setAriaLabel ? this.setAriaLabel : this.value, tabindex: this.disabled ? "-1" : "0", onClick: (evt) => {
+        return (h(Host, { key: '0c7512892620006d24955810a3044fa368a70b15', style: this.setStyle(), class: this.disabled ? 'vds__tab--disabled' : '' }, h("div", { key: 'fd4d699aab0dd611e4654beb7c4890663ec27a69', class: combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : ''), role: "tab", "aria-label": this.setAriaLabel ? this.setAriaLabel : this.value, tabindex: this.disabled ? "-1" : "0", onClick: (evt) => {
                 this.handleClick(evt);
-            } }, h("div", { key: '084df0fbd0b43092f5dd9f902033dc505bdca23d', class: "vds__tab-container" }, this.getType())), h("div", { key: 'f394e57f852d59f257ddf263853409ca94707547', class: this.isActive ? 'vds__tab--content-active' : 'vds__tab--content' }, h("slot", { key: 'e1827ac7b7b81b4d11e4f30005d9015090349f85', name: "tab-content" }))));
+            } }, h("div", { key: '0986a040d9b10f88d7ab3776065b7babbad30d04', class: "vds__tab-container" }, this.getType())), h("div", { key: 'b2d808a12b6331b1033496a1d379837eaf82ffb6', class: this.isActive ? 'vds__tab--content-active' : 'vds__tab--content' }, h("slot", { key: '3f45ba9ed0f335521a6821ade596a32de600d3a7', name: "tab-content" }))));
     }
     static get is() { return "vds-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -130,7 +130,6 @@ export class VdsTab {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -145,11 +144,11 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "isActive": {
                 "type": "boolean",
-                "attribute": "is-active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -168,11 +167,11 @@ export class VdsTab {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "is-active",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -188,11 +187,11 @@ export class VdsTab {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -210,11 +209,11 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "informativeIcon": {
                 "type": "string",
-                "attribute": "informative-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -229,11 +228,11 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "informative-icon"
             },
             "width": {
                 "type": "string",
-                "attribute": "width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -248,11 +247,11 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "width"
             },
             "maxWidth": {
                 "type": "string",
-                "attribute": "max-width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -267,11 +266,11 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-width"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": true,
                 "complexType": {
                     "original": "'default' | 'icon' | 'withAction' | 'text' | 'custom'",
@@ -287,11 +286,11 @@ export class VdsTab {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'default'"
             },
             "actionIcon": {
                 "type": "string",
-                "attribute": "action-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -306,11 +305,11 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "action-icon"
             },
             "actionAriaLabel": {
                 "type": "string",
-                "attribute": "action-aria-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -325,11 +324,11 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "action-aria-label"
             },
             "setAriaLabel": {
                 "type": "string",
-                "attribute": "set-aria-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -344,7 +343,8 @@ export class VdsTab {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "set-aria-label"
             }
         };
     }

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

@@ -28,18 +28,10 @@ export class VdsTabsGroup {
         forceUpdate(this);
     }
     componentWillLoad() {
-        try {
-            this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));
-            if (this.tabs.length > 0) {
-                this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length
-                    ? this.activeTabIndex
-                    : 0;
-                this.updateTabsState(this.tabs);
-            }
-        }
-        catch (e) {
-            console.error('componentWillLoad Error: ', e);
-        }
+        this.setTabs();
+    }
+    componentWillRender() {
+        this.setTabs();
     }
     componentDidRender() {
         if (this.tabs.length > 0) {
@@ -67,6 +59,20 @@ export class VdsTabsGroup {
             }
         }
     }
+    setTabs() {
+        try {
+            this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));
+            if (this.tabs.length > 0) {
+                this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length
+                    ? this.activeTabIndex
+                    : 0;
+                this.updateTabsState(this.tabs);
+            }
+        }
+        catch (e) {
+            console.error('componentWillLoad Error: ', e);
+        }
+    }
     handleActiveTabIndexChange() {
         this.updateTabsState(this.tabs);
     }
@@ -145,11 +151,11 @@ export class VdsTabsGroup {
         this.defineAttributes();
     }
     render() {
-        return (h(Host, { key: '76bdfd7b81e08a0b1dd0e728986f1b006d47680d', class: this.disabled ? 'vds__tabs-group--disabled' : '' }, h("div", { key: 'b1d420eb1c561e3d2b5edb7ce81dfc06cd077377', ref: (el) => {
+        return (h(Host, { key: 'da27d20a6f0d2c6695e9b9b2e7984aa612355440', class: this.disabled ? 'vds__tabs-group--disabled' : '' }, h("div", { key: '0c7bceac3747ecd9cc658e5e1e55bad08803bb3a', ref: (el) => {
                 if (!el)
                     return;
                 this.tabsGroupContainer = el;
-            }, class: "vds__tabs-group" }, h("div", { key: '3702b48c6dfa2757f8c31c7e6dda03ba578d302f', class: combineClasses('vds__tabs-group--header', 'vds__tabs-group--header-tabs-' + this.tabAlignment, this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : '') }, h("div", { key: 'cdc273f03dab09fb375ce2a809948ab45273b3bd', class: "vds__tabs-group--header-content" }, h("slot", { key: 'ffe7399a3d5f31121df4c2b1157763e5d5e4e0b5', name: "header-content" })), h("div", { key: 'b1212f299317b12b48f12e6836963ae63a631a2a', class: "vds__tabs-group--header-tabs-nav", role: "tablist" }, h("slot", { key: 'd5ea7e292a327c8523aab29b299a4fab93a9eecb', name: "tab-list" })), this.renderActiveTabIndicator()))));
+            }, class: "vds__tabs-group" }, h("div", { key: '12fd14a9b1779cdb5eec53c29b11bd32ede778c3', class: combineClasses('vds__tabs-group--header', 'vds__tabs-group--header-tabs-' + this.tabAlignment, this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : '') }, h("div", { key: '86d3b8a9ee044a0a986abeed2e174e6685538a7d', class: "vds__tabs-group--header-content" }, h("slot", { key: 'e6d07580cd77e4df7f15cbc92033912ae35980d8', name: "header-content" })), h("div", { key: '4c6064d5318e091991eea4738361198f9394d243', class: "vds__tabs-group--header-tabs-nav", role: "tablist" }, h("slot", { key: '6ec027c38b6e31ccf4b8536437a1865cbaf428fe', name: "tab-list" })), this.renderActiveTabIndicator()))));
     }
     static get is() { return "vds-tabs-group"; }
     static get encapsulation() { return "shadow"; }
@@ -167,7 +173,6 @@ export class VdsTabsGroup {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": true,
                 "complexType": {
                     "original": "'default' | 'icon' | 'withAction' | 'text' | 'custom'",
@@ -183,11 +188,11 @@ export class VdsTabsGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'default'"
             },
             "width": {
                 "type": "string",
-                "attribute": "width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -202,11 +207,11 @@ export class VdsTabsGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "width"
             },
             "maxWidth": {
                 "type": "string",
-                "attribute": "max-width",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -221,11 +226,11 @@ export class VdsTabsGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "max-width"
             },
             "tabAlignment": {
                 "type": "string",
-                "attribute": "tab-alignment",
                 "mutable": true,
                 "complexType": {
                     "original": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'",
@@ -241,11 +246,11 @@ export class VdsTabsGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "tab-alignment",
                 "defaultValue": "'flex-start'"
             },
             "showTrack": {
                 "type": "boolean",
-                "attribute": "show-track",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -261,11 +266,11 @@ export class VdsTabsGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show-track",
                 "defaultValue": "false"
             },
             "activeTabIndex": {
                 "type": "number",
-                "attribute": "active-tab-index",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -281,11 +286,11 @@ export class VdsTabsGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "active-tab-index",
                 "defaultValue": "0"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -301,6 +306,7 @@ export class VdsTabsGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/tabs-group/vds-tabs-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"vds-tabs-group.js","sourceRoot":"","sources":["../../../src/components/tabs-group/vds-tabs-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Element, Prop, Method, Listen, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-tabs-group',\n  styleUrl: 'vds-tabs-group.scss',\n  shadow: true,\n})\nexport class VdsTabsGroup {\n  @Element() hostEl: HTMLElement;\n  /** Sets the type for the tabs group */\n  @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom' = 'default';\n  /** Sets the width for the tabs */\n  @Prop({ mutable: true }) width?: string;\n  /** Sets the max width for the tabs */\n  @Prop({ reflect: true, mutable: true }) maxWidth?: string;\n  /** Sets the alignment for the tabs */\n  @Prop({ reflect: true, mutable: true }) tabAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' = 'flex-start';\n  /** Shows the indicator track under the tab*/\n  @Prop({ mutable: true }) showTrack: boolean = false;\n  /** Sets the index to select the active tab inside the group.\n   * If not specified, loads the first tab.\n   */\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  /** Sets tab group to disable state */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n  @State() internalActiveTabIndex: number = 0;\n\n  private activeTab: HTMLVdsTabElement;\n  private tabsGroupContainer: HTMLDivElement;\n  private indicatorEl: HTMLDivElement;\n  private tabs: HTMLVdsTabElement[] = [];\n  private resizeObserver: ResizeObserver;\n\n  @Listen('isSelected')\n  handleTabSelection(evt: CustomEvent): void {\n    const target = evt.target as HTMLElement;\n    this.internalActiveTabIndex = Number(target?.getAttribute('vds-tabindex')) || 0;\n    this.activeTabIndex = this.internalActiveTabIndex;\n    this.updateTabsState(this.tabs);\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(): void {\n    this.updateIndicatorPosition();\n    forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    try {\n      this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));\n      if (this.tabs.length > 0) {\n        this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length\n          ? this.activeTabIndex\n          : 0;\n        this.updateTabsState(this.tabs);\n      }\n    } catch (e) {\n      console.error('componentWillLoad Error: ', e);\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.tabs.length > 0) {\n      this.observeActiveTabContent();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private observeActiveTabContent() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    if (this.activeTab) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active');\n      if (content) {\n        this.resizeObserver = new ResizeObserver(() => {\n          this.defineAttributes();\n          this.updateIndicatorPosition()\n        });\n        this.resizeObserver.observe(content);\n      }\n    }\n  }\n\n  @Watch('activeTabIndex')\n  handleActiveTabIndexChange() {\n    this.updateTabsState(this.tabs);\n  }\n\n  @Watch(\"disabled\")\n  setDisabledState() {\n    (this.tabs || []).forEach(tab => {\n      tab.disabled = this.disabled;\n    });\n  }\n\n  /**\n   * Gets the currently active tab index\n   * \n   * @returns {Promise<number>} A promise that resolves with the active tab index.\n   */\n  @Method()\n  public async getActive(): Promise<number> {\n    return this.internalActiveTabIndex;\n  }\n\n  /**\n   * Sets the active tab index\n   * \n   * @param {number} index - The index of the tab to set as active.\n   */\n  @Method()\n  public async setActive(index: number) {\n    this.setActiveTab(index);\n  }\n\n  private setActiveTab(index: number) {\n    if (this.tabs.length > 0) {\n      this.internalActiveTabIndex = this.validateTabIndex(index);\n      this.activeTabIndex = this.internalActiveTabIndex;\n    }\n  }\n\n  private validateTabIndex(index: number): number {\n    const isValidIndex = index >= 0 && index < this.tabs.length;\n    const isEnabled = isValidIndex && !this.tabs[index]?.disabled;\n    if (isValidIndex && isEnabled) {\n      return index;\n    }\n    const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);\n    return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;\n  }\n\n  private defineAttributes() {\n    if (this.activeTab && this.tabsGroupContainer) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active') as HTMLElement;\n      if (content) {\n        this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);\n      }\n    }\n  }\n\n  private updateIndicatorPosition() {\n    if (this.activeTab && this.indicatorEl) {\n      const tabLeft = this.activeTab.offsetLeft;\n      const tabWidth = this.activeTab.offsetWidth;\n      const parentLeft = this.indicatorEl.parentElement.offsetLeft;\n\n      this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;\n      this.indicatorEl.style.width = `${tabWidth}px`;\n    }\n  }\n\n  private renderActiveTabIndicator() {\n    return this.activeTab && (\n      <div\n        class=\"vds__tabs-group--active-tab-indicator\"\n        ref={(el: HTMLDivElement) => (this.indicatorEl = el)}\n      />\n    );\n  }\n\n  private updateTabsState(tabs: HTMLVdsTabElement[]) {\n    this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);\n    tabs.forEach((tab, tabIndex) => {\n      const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;\n      tab.isActive = isActiveTab;\n      if (isActiveTab) {\n        this.activeTab = tab;\n        this.updateIndicatorPosition();\n      }\n      tab.setAttribute('vds-tabindex', `${tabIndex}`);\n      tab.type = this.type;\n      tab.width = this.width;\n      tab.maxWidth = this.maxWidth;\n    });\n    this.defineAttributes();\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__tabs-group--disabled' : ''}>\n        <div\n          ref={(el: HTMLDivElement): void => {\n            if (!el) return;\n            this.tabsGroupContainer = el;\n          }}\n          class=\"vds__tabs-group\"\n        >\n          <div class={\n            combineClasses(\n              'vds__tabs-group--header',\n              'vds__tabs-group--header-tabs-' + this.tabAlignment,\n              this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : ''\n            )}\n          >\n            <div class=\"vds__tabs-group--header-content\">\n              <slot name=\"header-content\"></slot>\n            </div>\n            <div class=\"vds__tabs-group--header-tabs-nav\" role=\"tablist\">\n              <slot name=\"tab-list\"></slot>\n            </div>\n            {this.renderActiveTabIndicator()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"vds-tabs-group.js","sourceRoot":"","sources":["../../../src/components/tabs-group/vds-tabs-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State, Element, Prop, Method, Listen, forceUpdate } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-tabs-group',\n  styleUrl: 'vds-tabs-group.scss',\n  shadow: true,\n})\nexport class VdsTabsGroup {\n  @Element() hostEl: HTMLElement;\n  /** Sets the type for the tabs group */\n  @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom' = 'default';\n  /** Sets the width for the tabs */\n  @Prop({ mutable: true }) width?: string;\n  /** Sets the max width for the tabs */\n  @Prop({ reflect: true, mutable: true }) maxWidth?: string;\n  /** Sets the alignment for the tabs */\n  @Prop({ reflect: true, mutable: true }) tabAlignment: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' = 'flex-start';\n  /** Shows the indicator track under the tab*/\n  @Prop({ mutable: true }) showTrack: boolean = false;\n  /** Sets the index to select the active tab inside the group.\n   * If not specified, loads the first tab.\n   */\n  @Prop({ mutable: true }) activeTabIndex: number = 0;\n  /** Sets tab group to disable state */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n\n  @State() internalActiveTabIndex: number = 0;\n\n  private activeTab: HTMLVdsTabElement;\n  private tabsGroupContainer: HTMLDivElement;\n  private indicatorEl: HTMLDivElement;\n  private tabs: HTMLVdsTabElement[] = [];\n  private resizeObserver: ResizeObserver;\n\n\n  @Listen('isSelected')\n  handleTabSelection(evt: CustomEvent): void {\n    const target = evt.target as HTMLElement;\n    this.internalActiveTabIndex = Number(target?.getAttribute('vds-tabindex')) || 0;\n    this.activeTabIndex = this.internalActiveTabIndex;\n    this.updateTabsState(this.tabs);\n  }\n\n  @Listen('valueChanged')\n  handleValueChanged(): void {\n    this.updateIndicatorPosition();\n    forceUpdate(this);\n  }\n\n  componentWillLoad() {\n    this.setTabs();\n  }\n\n  componentWillRender() {\n    this.setTabs();\n  }\n\n  componentDidRender(): void {\n    if (this.tabs.length > 0) {\n      this.observeActiveTabContent();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  private observeActiveTabContent() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    if (this.activeTab) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active');\n      if (content) {\n        this.resizeObserver = new ResizeObserver(() => {\n          this.defineAttributes();\n          this.updateIndicatorPosition()\n        });\n        this.resizeObserver.observe(content);\n      }\n    }\n  }\n\n  private setTabs(): void {\n      try {\n      this.tabs = Array.from(this.hostEl.querySelectorAll('vds-tab'));\n      if (this.tabs.length > 0) {\n        this.internalActiveTabIndex = this.activeTabIndex >= 0 && this.activeTabIndex < this.tabs.length\n          ? this.activeTabIndex\n          : 0;\n        this.updateTabsState(this.tabs);\n      }\n    } catch (e) {\n      console.error('componentWillLoad Error: ', e);\n    }\n  }\n\n  @Watch('activeTabIndex')\n  handleActiveTabIndexChange() {\n    this.updateTabsState(this.tabs);\n  }\n\n  @Watch(\"disabled\")\n  setDisabledState() {\n    (this.tabs || []).forEach(tab => {\n      tab.disabled = this.disabled;\n    });\n  }\n\n  /**\n   * Gets the currently active tab index\n   * \n   * @returns {Promise<number>} A promise that resolves with the active tab index.\n   */\n  @Method()\n  public async getActive(): Promise<number> {\n    return this.internalActiveTabIndex;\n  }\n\n  /**\n   * Sets the active tab index\n   * \n   * @param {number} index - The index of the tab to set as active.\n   */\n  @Method()\n  public async setActive(index: number) {\n    this.setActiveTab(index);\n  }\n\n  private setActiveTab(index: number) {\n    if (this.tabs.length > 0) {\n      this.internalActiveTabIndex = this.validateTabIndex(index);\n      this.activeTabIndex = this.internalActiveTabIndex;\n    }\n  }\n\n  private validateTabIndex(index: number): number {\n    const isValidIndex = index >= 0 && index < this.tabs.length;\n    const isEnabled = isValidIndex && !this.tabs[index]?.disabled;\n    if (isValidIndex && isEnabled) {\n      return index;\n    }\n    const firstEnabledIndex = this.tabs.findIndex(tab => !tab.disabled);\n    return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;\n  }\n\n  private defineAttributes() {\n    if (this.activeTab && this.tabsGroupContainer) {\n      const content = this.activeTab.shadowRoot?.querySelector('.vds__tab--content-active') as HTMLElement;\n      if (content) {\n        this.hostEl.setAttribute('style', `height: ${this.tabsGroupContainer.offsetHeight + content.offsetHeight}px`);\n      }\n    }\n  }\n\n  private updateIndicatorPosition() {\n    if (this.activeTab && this.indicatorEl) {\n      const tabLeft = this.activeTab.offsetLeft;\n      const tabWidth = this.activeTab.offsetWidth;\n      const parentLeft = this.indicatorEl.parentElement.offsetLeft;\n\n      this.indicatorEl.style.left = `${tabLeft - parentLeft}px`;\n      this.indicatorEl.style.width = `${tabWidth}px`;\n    }\n  }\n\n  private renderActiveTabIndicator() {\n    return this.activeTab && (\n      <div\n        class=\"vds__tabs-group--active-tab-indicator\"\n        ref={(el: HTMLDivElement) => (this.indicatorEl = el)}\n      />\n    );\n  }\n\n  private updateTabsState(tabs: HTMLVdsTabElement[]) {\n    this.internalActiveTabIndex = this.validateTabIndex(this.activeTabIndex);\n    tabs.forEach((tab, tabIndex) => {\n      const isActiveTab = tabIndex === this.internalActiveTabIndex && !tab.disabled;\n      tab.isActive = isActiveTab;\n      if (isActiveTab) {\n        this.activeTab = tab;\n        this.updateIndicatorPosition();\n      }\n      tab.setAttribute('vds-tabindex', `${tabIndex}`);\n      tab.type = this.type;\n      tab.width = this.width;\n      tab.maxWidth = this.maxWidth;\n    });\n    this.defineAttributes();\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.disabled ? 'vds__tabs-group--disabled' : ''}>\n        <div\n          ref={(el: HTMLDivElement): void => {\n            if (!el) return;\n            this.tabsGroupContainer = el;\n          }}\n          class=\"vds__tabs-group\"\n        >\n          <div class={\n            combineClasses(\n              'vds__tabs-group--header',\n              'vds__tabs-group--header-tabs-' + this.tabAlignment,\n              this.showTrack ? 'vds__tabs-group--header-tabs-show-track' : ''\n            )}\n          >\n            <div class=\"vds__tabs-group--header-content\">\n              <slot name=\"header-content\"></slot>\n            </div>\n            <div class=\"vds__tabs-group--header-tabs-nav\" role=\"tablist\">\n              <slot name=\"tab-list\"></slot>\n            </div>\n            {this.renderActiveTabIndicator()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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