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

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

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,21 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
-/* This mixing can be used to implement font styling. 
- * to do so, you need to import the scss file and used @include font-style(title, medium);
- * This will implement styling according to the $volt-font-styles map
- */
 :host {
   display: block;
   box-sizing: border-box;
@@ -968,6 +969,7 @@
 }
 :host .vds__tab--spacing {
   padding: var(--spacing-03) var(--spacing-00) var(--spacing-03) var(--spacing-00);
+  width: 100%;
 }
 :host .vds__tab--content {
   display: none;
@@ -1018,7 +1020,7 @@
   color: var(--color-link-default);
 }
 :host .vds__tab-container {
-  align-self: flex-start;
+  align-self: center;
   width: var(--tab-width, fit-content);
   height: 1.25rem;
 }
@@ -1076,4 +1078,8 @@
 
 :host-context(.vds__tab--disabled) {
   pointer-events: none;
+}
+
+:host([vds-flex-width]) {
+  flex: 1 1 auto;
 }

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

@@ -1,20 +1,159 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @component vds-tab
+ * @description A tab component that represents a single tab within a tab group. Supports multiple types (default, icon, text, withAction, custom), icons, action buttons, and accessibility features. Designed to work with vds-tabs-group for creating tabbed interfaces.
+ *
+ * @example
+ * <!-- Basic tab with icon and label -->
+ * <vds-tab
+ *   value="Profile"
+ *   informative-icon="user">
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Text-only tab -->
+ * <vds-tab
+ *   value="Settings"
+ *   type="text">
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Icon-only tab -->
+ * <vds-tab
+ *   type="icon"
+ *   informative-icon="home"
+ *   set-aria-label="Home">
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Tab with action button -->
+ * <vds-tab
+ *   value="Documents"
+ *   informative-icon="folder-closed"
+ *   type="withAction"
+ *   action-icon="close"
+ *   action-aria-label="Close tab">
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Custom tab with slot content -->
+ * <vds-tab type="custom">
+ *   <div slot="tab-header-content">
+ *     <span>Custom Content</span>
+ *   </div>
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Disabled tab -->
+ * <vds-tab
+ *   value="Premium"
+ *   informative-icon="star"
+ *   disabled="true">
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Tab with fixed width -->
+ * <vds-tab
+ *   value="Dashboard"
+ *   informative-icon="dashboard"
+ *   width="200px">
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Tab with max width -->
+ * <vds-tab
+ *   value="Very Long Tab Title"
+ *   type="text"
+ *   max-width="150px">
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Tab group with multiple tabs -->
+ * <vds-tabs-group active-tab-index="0">
+ *   <vds-tab value="Home" informative-icon="home"></vds-tab>
+ *   <vds-tab value="Profile" informative-icon="user"></vds-tab>
+ *   <vds-tab value="Settings" informative-icon="module-settings"></vds-tab>
+ * </vds-tabs-group>
+ *
+ * @example
+ * <!-- Tab with content slot -->
+ * <vds-tab value="Overview" informative-icon="dashboard">
+ *   <div slot="tab-content">
+ *     <h3>Dashboard Overview</h3>
+ *     <p>Your dashboard content goes here</p>
+ *   </div>
+ * </vds-tab>
+ *
+ * @example
+ * <!-- Tab with event handling -->
+ * <vds-tab
+ *   id="notifications-tab"
+ *   value="Notifications"
+ *   informative-icon="bell"
+ *   type="withAction"
+ *   action-icon="close">
+ * </vds-tab>
+ * <script>
+ *   const tab = document.getElementById('notifications-tab');
+ *   tab.addEventListener('isSelected', () => console.log('Tab selected'));
+ *   tab.addEventListener('clicked', () => console.log('Action button clicked'));
+ * </script>
+ *
+ * @example
+ * <!-- Complete tabbed interface -->
+ * <vds-tabs-group active-tab-index="0">
+ *   <vds-tab value="Overview" informative-icon="dashboard">
+ *     <div slot="tab-content">
+ *       <h2>Overview</h2>
+ *       <p>Dashboard content</p>
+ *     </div>
+ *   </vds-tab>
+ *
+ *   <vds-tab value="Analytics" informative-icon="analytics">
+ *     <div slot="tab-content">
+ *       <h2>Analytics</h2>
+ *       <p>Analytics data</p>
+ *     </div>
+ *   </vds-tab>
+ *
+ *   <vds-tab value="Reports" informative-icon="document">
+ *     <div slot="tab-content">
+ *       <h2>Reports</h2>
+ *       <p>Your reports</p>
+ *     </div>
+ *   </vds-tab>
+ * </vds-tabs-group>
+ */
 export class VdsTab {
     constructor() {
         /**
-         * @deprecated This property is now being overridden by the VdsTabsGroup,
-         * the activeTabIndex property is the new preferred way of setting the default tab.
-         * Sets tab to active state.
+         * Sets tab to active state
+         * @deprecated This property is now being overridden by the VdsTabsGroup, the activeTabIndex property is the new preferred way of setting the default tab.
+         * @type {boolean}
+         * @default false
          */
         this.isActive = false;
-        /** Sets tab to disable state */
+        /**
+         * Sets tab to disable state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */
+        /**
+         * Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot.
+         * @type {"default" | "icon" | "withAction" | "text" | "custom"}
+         * @default "default"
+         */
         this.type = 'default';
     }
+    /**
+     * Handles keyboard navigation (Enter and Space keys)
+     * @private
+     * @param {KeyboardEvent} event - The keyboard event
+     */
     handleKeyDown(event) {
-        if (event.target.nodeName === "VDS-TAB" && event.key === 'Enter' || event.key === ' ') {
+        if ((event.target.nodeName === 'VDS-TAB' && event.key === 'Enter') || event.key === ' ') {
             event.preventDefault();
             if (!this.isActive && !this.disabled) {
                 this.isActive = true;
@@ -22,9 +161,18 @@ export class VdsTab {
             }
         }
     }
+    /**
+     * Watches for value changes and emits valueChanged event
+     * @private
+     */
     handleValueChange() {
         this.valueChanged.emit(this.value);
     }
+    /**
+     * Generates the icon element for the tab
+     * @private
+     * @returns {HTMLElement | void} The icon element or undefined if no icon is set
+     */
     generateIcon() {
         const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon ? this.icon : null;
         if (iconToUse) {
@@ -34,6 +182,11 @@ export class VdsTab {
             console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');
         }
     }
+    /**
+     * Generates the action icon button for withAction type tabs
+     * @private
+     * @returns {HTMLElement | void} The action icon button element or undefined if not configured
+     */
     generateActionIconButton() {
         if (this.actionIcon) {
             return (h("span", { class: "vds__tab--action-icon-button" }, h("vds-icon-button", { icon: this.actionIcon, variant: "tertiary", size: "small", setAriaLabel: this.actionAriaLabel, onClick: (evt) => {
@@ -44,28 +197,62 @@ export class VdsTab {
             console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');
         }
     }
+    /**
+     * Generates the label element for the tab
+     * @private
+     * @returns {HTMLElement} The label element
+     */
     generateLabel() {
         if ((this.value === undefined || this.value === '') && this.type !== 'icon') {
             console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');
         }
         return (h("span", { class: combineClasses('vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '', this.type === 'default' ? 'vds__tab--label-default' : '', this.type === 'text' ? 'vds__tab--label-text' : '', this.type === 'withAction' ? 'vds__tab--label-with-action' : '', this.type === 'withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '', this.type === 'withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : '') }, this.value));
     }
+    /**
+     * Generates the default type tab (icon + label)
+     * @private
+     * @returns {HTMLElement} The default tab element
+     */
     generateTypeDefault() {
         return (h("div", { class: "vds__tab--default" }, this.generateIcon(), h("span", { class: "vds__tab--spacing-between-content" }), this.generateLabel()));
     }
+    /**
+     * Generates the icon-only type tab
+     * @private
+     * @returns {HTMLElement} The icon tab element
+     */
     generateTypeIcon() {
-        return (h("div", { class: "vds__tab--icon" }, this.generateIcon()));
+        return h("div", { class: "vds__tab--icon" }, this.generateIcon());
     }
+    /**
+     * Generates the withAction type tab (icon + label + action button)
+     * @private
+     * @returns {HTMLElement} The withAction tab element
+     */
     generateTypeWithAction() {
-        return (h("div", { class: "vds__tab--with-action" }, h("div", { class: "vds__tab--with-action-content", tabindex: this.disabled ? "-1" : "0" }, this.generateIcon(), h("span", { class: "vds__tab--spacing-between-content" }), this.generateLabel(), h("span", { class: "vds__tab--spacing-between-content" })), h("div", { class: "vds__tab--with-action-actionable" }, this.generateActionIconButton())));
+        return (h("div", { class: "vds__tab--with-action" }, h("div", { class: "vds__tab--with-action-content", tabindex: this.disabled ? '-1' : '0' }, this.generateIcon(), h("span", { class: "vds__tab--spacing-between-content" }), this.generateLabel(), h("span", { class: "vds__tab--spacing-between-content" })), h("div", { class: "vds__tab--with-action-actionable" }, this.generateActionIconButton())));
     }
+    /**
+     * Generates the custom type tab with slot content
+     * @private
+     * @returns {HTMLElement} The custom tab element
+     */
     generateTypeCustom() {
         return (h("div", { class: "vds__tab--custom" }, h("slot", { name: "tab-header-content" })));
     }
+    /**
+     * Generates the text-only type tab
+     * @private
+     * @returns {HTMLElement} The text tab element
+     */
     generateTypeText() {
-        return (h("div", { class: "vds__tab--text" }, this.generateLabel()));
+        return h("div", { class: "vds__tab--text" }, this.generateLabel());
     }
-    // getType: return the formatted content
+    /**
+     * Returns the formatted content based on the tab type
+     * @private
+     * @returns {HTMLElement} The tab content element
+     */
     getType() {
         switch (this.type) {
             case 'default': {
@@ -85,19 +272,33 @@ export class VdsTab {
             }
         }
     }
+    /**
+     * Handles click events on the tab
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     */
     handleClick(evt) {
         if (!this.isActive && !this.disabled) {
             this.isActive = true;
             this.isSelected.emit(evt);
         }
     }
+    /**
+     * Handles click events on the action icon button
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     */
     handleActionIconClick(evt) {
         if (this.type === 'withAction') {
             evt.stopPropagation();
             this.clicked.emit(evt);
         }
     }
-    // setStyle define the width depending the properties prioritizing the width over the maxWidth
+    /**
+     * Sets the width style based on width or maxWidth properties
+     * @private
+     * @returns {Object} Style object with CSS custom properties
+     */
     setStyle() {
         if (this.width) {
             return { '--tab-width': this.width };
@@ -109,10 +310,14 @@ export class VdsTab {
             return {};
         }
     }
+    /**
+     * Render the tab component
+     * @returns {HTMLElement} The rendered tab element
+     */
     render() {
-        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) => {
+        return (h(Host, { key: '4e36b733e447bfc79925be52f173cc8d3c08fdd4', style: this.setStyle(), class: this.disabled ? 'vds__tab--disabled' : '' }, h("div", { key: 'e8aee6a1029915d222e06f8a2231593b9e821539', 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: '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" }))));
+            } }, h("div", { key: '9ff8a20a0b048c54cd987059fbf65fed9183ff2e', class: "vds__tab-container" }, this.getType())), h("div", { key: '71364811f118b79f71331ba24de2d68ab9991e7e', class: this.isActive ? 'vds__tab--content-active' : 'vds__tab--content' }, h("slot", { key: '0c43a45742cdfa577423fb7974943573a290c731', name: "tab-content" }))));
     }
     static get is() { return "vds-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -139,7 +344,10 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets tab title. The value of this property is used by default as an aria-label too."
                 },
                 "getter": false,
@@ -160,9 +368,15 @@ export class VdsTab {
                 "docs": {
                     "tags": [{
                             "name": "deprecated",
-                            "text": "This property is now being overridden by the VdsTabsGroup, \nthe activeTabIndex property is the new preferred way of setting the default tab. \nSets tab to active state."
+                            "text": "This property is now being overridden by the VdsTabsGroup, the activeTabIndex property is the new preferred way of setting the default tab."
+                        }, {
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
                         }],
-                    "text": ""
+                    "text": "Sets tab to active state"
                 },
                 "getter": false,
                 "setter": false,
@@ -181,7 +395,13 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets tab to disable state"
                 },
                 "getter": false,
@@ -203,9 +423,12 @@ export class VdsTab {
                 "docs": {
                     "tags": [{
                             "name": "deprecated",
-                            "text": "This property is being replaced by informativeIcon. \nSets tab icon. The tab icon is only a visual representation."
+                            "text": "This property is being replaced by informativeIcon."
+                        }, {
+                            "name": "type",
+                            "text": "{string}"
                         }],
-                    "text": ""
+                    "text": "Sets tab icon. The tab icon is only a visual representation."
                 },
                 "getter": false,
                 "setter": false,
@@ -223,7 +446,10 @@ export class VdsTab {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets tab icon. The tab icon is only a visual representation."
                 },
                 "getter": false,
@@ -242,7 +468,10 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets tab fixed width. This property can't be used at the same time with the property maxWidth"
                 },
                 "getter": false,
@@ -261,7 +490,10 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets tab maxWidth. This property can't be used at the same time with the property width"
                 },
                 "getter": false,
@@ -280,7 +512,13 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"default\" | \"icon\" | \"withAction\" | \"text\" | \"custom\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"default\""
+                        }],
                     "text": "Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot."
                 },
                 "getter": false,
@@ -300,7 +538,10 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets tab action icon button. Only available selecting withAction type."
                 },
                 "getter": false,
@@ -319,7 +560,10 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets tab action icon button aria-label"
                 },
                 "getter": false,
@@ -338,7 +582,10 @@ export class VdsTab {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property."
                 },
                 "getter": false,
@@ -356,7 +603,13 @@ export class VdsTab {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "isSelected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when the tab is selected (sets isActive prop to true)"
                 },
                 "complexType": {
@@ -376,7 +629,13 @@ export class VdsTab {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "clicked"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when the action icon button is clicked"
                 },
                 "complexType": {
@@ -396,7 +655,13 @@ export class VdsTab {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "valueChanged"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<string>}"
+                        }],
                     "text": "Emits event when the value is changed"
                 },
                 "complexType": {
@@ -423,4 +688,3 @@ export class VdsTab {
             }];
     }
 }
-//# sourceMappingURL=vds-tab.js.map

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

@@ -135,4 +135,3 @@ TabCustomUsage.args = {
     isActive: 'false',
     disabled: 'false',
 };
-//# sourceMappingURL=vds-tab.stories.js.map

package/dist/collection/components/tabs-group/vds-tabs-group.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,17 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host {
   display: block;
 }
@@ -956,6 +961,9 @@
   display: inline-flex;
   gap: var(--spacing-07);
 }
+:host .vds__tabs-group--header-tabs-nav-automatic-width {
+  flex: 1 1 100%;
+}
 :host .vds__tabs-group--tab-view-content {
   padding: var(--spacing-04);
   position: relative;