@heartlandone/vega 2.100.0 → 2.102.0

package/dist/esm/vega-tab-group_2.entry.js

@@ -2,32 +2,40 @@ import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4b1afd04.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-adfc80c6.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
 import { d as debounce } from './timer-9321173b.js';
+import { f as formatAndValidResponsiveToken } from './design-token-df3331d9.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-c899a968.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-bb7e68a0.js';
-import { V as VegaDropdownClick, a as VegaClick } from './vega-event-id-f55f6977.js';
+import { d as VegaDropdownClick, b as VegaClick } from './vega-event-id-6b4db259.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { T as TAB_PANEL_ADD_OR_DEL_TO_GROUP } from './static-subject-title-1c86e974.js';
 import { f as findParent, j as checkIsVoiceOverClick, k as getFirstFocusableElement, l as createSafeIdFromString } from './ui-80e610f4.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-82626871.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-e8bb2292.js';
-import { T as TranslationSlimmer } from './translation-slimmer-77022f2e.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-3ae5c7db.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-aa7f4c6e.js';
+import { T as TranslationSlimmer } from './translation-slimmer-b3f3cf65.js';
 import './breakpoints-332702ed.js';
 import './ui-93922c59.js';
 import './breakpoints-d9faf11c.js';
 import './try-get-document-bef0f526.js';
-import './internal-vega-event-manager-2ecc9186.js';
-import './vega-env-manager-8f8dc473.js';
+import './type-guard-08c82e08.js';
+import './typography-19c3b9be.js';
+import './internal-translation-controller-4a7ee4d5.js';
+import './responsive-format-facade-55131a33.js';
+import './number-4398f2e1.js';
+import './pixel-f32c07ce.js';
+import './array-7888f339.js';
 import './feature-flag-controller-3fd04ea9.js';
 import './index-9c9865c0.js';
+import './state-border-formatter-2b73fa08.js';
+import './internal-vega-event-manager-6eebe8f8.js';
+import './vega-env-manager-8f8dc473.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-translation-controller-fff376d2.js';
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -58,26 +66,26 @@ class VegaTabGroupRenderer extends VegaSlimmer {
       this.contentRenderer.render()));
   }
 }
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaTabGroupRenderer.prototype, "tabPages", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaTabGroupRenderer.prototype, "variant", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaTabGroupRenderer.prototype, "overflow", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupRenderer.prototype, "tabListRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField({ componentFieldName: 'vegaTabGroupDirectionButtonRenderer' })
 ], VegaTabGroupRenderer.prototype, "directionButtonRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField({ componentFieldName: 'vegaTabGroupContentRenderer' })
 ], VegaTabGroupRenderer.prototype, "contentRenderer", void 0);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -110,13 +118,13 @@ class VegaTabGroupSelectedTargetController extends VegaSlimmer {
     }
   }
 }
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaTabGroupSelectedTargetController.prototype, "clickEventEmitter", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField({ writable: true })
 ], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaTabGroupSelectedTargetController.prototype, "vegaTabGroupPageIndexController", void 0);
 
@@ -199,7 +207,98 @@ class ValuePaginator {
   }
 }
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+/**
+ * Tab-width layout modes:
+ * - Adaptive: no global or per-item widths; tabs retain their natural widths.
+ * - Mixed: only some items define widths; configured items use their widths and
+ *   remaining items retain adaptive sizing.
+ * - Constrained: a global width is set or every item defines a width; the tab
+ *   list uses a stable width for consistent percentage-based sizing.
+ *
+ * `shouldUseConstrainedWidthLayout` selects constrained mode. The percentage
+ * helpers support renderer sizing and constrained-layout pagination.
+ */
+/**
+ * Determines whether constrained layout mode should be used.
+ *
+ * Constrained layout is intentionally enabled only when:
+ * - a global width is configured, or
+ * - all tab items explicitly define width.
+ *
+ * @param {ResponsiveType<WidthType> | undefined} tabItemWidth - Global tab item width configuration.
+ * @param {TabConfig[]} items - Tab item definitions.
+ * @returns {boolean} True when constrained layout mode should be applied.
+ */
+function shouldUseConstrainedWidthLayout(tabItemWidth, items) {
+  return tabItemWidth != null || (items.length > 0 && items.every((item) => item.width != null));
+}
+/**
+ * Determines whether a width configuration includes a percentage value.
+ *
+ * @param {ResponsiveType<WidthType> | undefined} width - Width configuration to evaluate.
+ * @returns {boolean} True when at least one configured value uses `%`.
+ */
+function isPercentageWidthValue(width) {
+  if (width == null) {
+    return false;
+  }
+  if (typeof width === 'string') {
+    return width.trim().endsWith('%');
+  }
+  if (typeof width === 'number') {
+    return false;
+  }
+  return Object.values(width).some((itemWidth) => {
+    return typeof itemWidth === 'string' && itemWidth.trim().endsWith('%');
+  });
+}
+/**
+ * Determines whether the effective configured width for a tab item is percentage-based.
+ *
+ * Per-item `width` takes priority over component-level `tabItemWidth`.
+ *
+ * @param {TabConfig} item - Tab item definition.
+ * @param {ResponsiveType<WidthType> | undefined} tabItemWidth - Global width configuration.
+ * @returns {boolean} True when the resolved configured width uses `%`.
+ */
+function hasPercentageConfiguredWidth(item, tabItemWidth) {
+  return getConfiguredPercentageWidthValue(item, tabItemWidth) != null;
+}
+/**
+ * Gets the resolved percentage width for a tab item.
+ *
+ * Per-item `width` takes priority over component-level `tabItemWidth`.
+ *
+ * @param {TabConfig} item - Tab item definition.
+ * @param {ResponsiveType<WidthType> | undefined} tabItemWidth - Global width configuration.
+ * @returns {Nullable<number>} The resolved percentage value, or `null` when the configured width is not a percentage.
+ */
+function getConfiguredPercentageWidthValue(item, tabItemWidth) {
+  const configuredWidth = item.width != null ? item.width : tabItemWidth;
+  if (configuredWidth == null) {
+    return null;
+  }
+  const resolvedWidth = formatAndValidResponsiveToken(configuredWidth, 'widthAndHeight');
+  if (resolvedWidth == null || !resolvedWidth.trim().endsWith('%')) {
+    return null;
+  }
+  const percentageWidth = Number.parseFloat(resolvedWidth);
+  return Number.isFinite(percentageWidth) ? percentageWidth : null;
+}
+/**
+ * Determines whether the tab list should use a stable container width.
+ *
+ * Mixed layouts that include percentage-based per-item widths require a stable
+ * container width so percentages resolve consistently.
+ *
+ * @param {TabConfig[]} items - Tab item definitions.
+ * @returns {boolean} True when any item uses a percentage width.
+ */
+function hasAnyPercentageTabWidth(items) {
+  return items.some((item) => isPercentageWidthValue(item.width));
+}
+
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -219,6 +318,9 @@ class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
     /* eslint-disable jsdoc/require-jsdoc*/
     super({
       callback: /* istanbul ignore next */ () => {
+        if (shouldUseConstrainedWidthLayout(this.tabItemWidth, this.tabItems)) {
+          this.initTabsWidthArray();
+        }
         this.initTabPagesWithDebounce();
       },
       target: /* istanbul ignore next */ () => this.host,
@@ -230,6 +332,7 @@ class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
     /* The space of left button and first tab, right button hasn't space */
     this.TAB_SIDE_BUTTON_AND_CONTENT_SPACE = 8;
     this.valuePaginator = new ValuePaginator();
+    this.wasUsingConstrainedLayout = false;
     this.initTabPagesWithDebounce = debounce(this.initTabPages, 80, this);
     /*
      * The below method is e2e-test covered in
@@ -248,6 +351,7 @@ class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
     this.getTabContainerSpace = (startIndex, values) => {
       const primaryMargin = 48;
       const groupWidth = this.host.getBoundingClientRect().width;
+      const shouldUsePercentageBasedCapacity = this.shouldUsePercentageBasedCapacityPagination();
       let tabGroupContainerWidth = this.variant === 'secondary' ? groupWidth : groupWidth - primaryMargin;
       if (this.overflow === 'menu') {
         if (startIndex > 0) {
@@ -257,7 +361,7 @@ class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
           values.slice(startIndex).reduce((prev, current) => prev + current) >
             tabGroupContainerWidth &&
           tabGroupContainerWidth > 0;
-        if (showRightButton) {
+        if (showRightButton && !shouldUsePercentageBasedCapacity) {
           tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH;
         }
       }
@@ -320,6 +424,14 @@ class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
   handleTabItemsChange() {
     this.initTabPagesWithDebounce();
   }
+  /**
+   * Recalculates pagination when the global tab-item width changes at runtime.
+   *
+   * {@link VegaTabGroup#watchTabItemWidthChange}
+   */
+  handleTabItemWidthChange() {
+    this.initTabPages();
+  }
   /**
    * The function sets the tab items for a tab configuration.
    *
@@ -350,12 +462,36 @@ class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
         this.tabPages = [[...this.tabItems]];
       }
       else {
-        this.tabPages = this.valuePaginator.paginate(this.tabItems, (_input, index) => this.tabWidthArray[index] > 0
-          ? this.tabWidthArray[index] + Number(this.formatAndValidGap(this.gap))
-          : this.tabWidthArray[index], this.getTabContainerSpace);
+        const shouldUsePercentageBasedCapacity = this.shouldUsePercentageBasedCapacityPagination();
+        const effectiveGap = Number(this.formatAndValidGap(this.gap));
+        this.tabPages = this.valuePaginator.paginate(this.tabItems, (_input, index) => {
+          var _a;
+          const tabWidth = this.tabWidthArray[index];
+          if (tabWidth <= 0) {
+            return tabWidth;
+          }
+          if (shouldUsePercentageBasedCapacity) {
+            return ((_a = getConfiguredPercentageWidthValue(this.tabItems[index], this.tabItemWidth)) !== null && _a !== void 0 ? _a : tabWidth);
+          }
+          const shouldIncludeGap = index > 0 &&
+            !hasPercentageConfiguredWidth(this.tabItems[index], this.tabItemWidth);
+          return shouldIncludeGap ? tabWidth + effectiveGap : tabWidth;
+        }, shouldUsePercentageBasedCapacity ? 100 : this.getTabContainerSpace);
       }
     }
   }
+  /**
+   * Determines whether tab pages can be calculated directly from percentage widths.
+   *
+   * @returns {boolean} True when every constrained tab has a percentage width.
+   */
+  shouldUsePercentageBasedCapacityPagination() {
+    // Mixed fixed and percentage widths must use measured pixel widths because
+    // a single percentage capacity cannot represent their combined size.
+    return (shouldUseConstrainedWidthLayout(this.tabItemWidth, this.tabItems) &&
+      this.tabItems.length > 0 &&
+      this.tabItems.every((item) => hasPercentageConfiguredWidth(item, this.tabItemWidth)));
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-tab-group-with-right-button}
@@ -381,64 +517,100 @@ class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
    * 3. Recalculate when tab count changes to ensure overflow navigation buttons stay in sync.
    */
   initTabsWidthArray() {
-    if (this.tabWidthArray.length === 0 ||
-      this.tabWidthArray.length !== this.tabItems.length ||
-      this.tabWidthArray.some((tabWidth) => tabWidth === 0)) {
-      const newTabWidthArray = [];
-      this.tabItems.forEach((item) => {
-        const tabItem = this.host.shadowRoot.querySelector(`.vega-tab[data-target='${item.dataTarget}']`);
-        if (tabItem) {
-          const tabWidth = tabItem.getBoundingClientRect().width;
-          newTabWidthArray.push(tabWidth);
+    if (!this.tabItems || this.tabItems.length === 0) {
+      return;
+    }
+    const shouldUseConstrainedLayout = shouldUseConstrainedWidthLayout(this.tabItemWidth, this.tabItems);
+    if (!shouldUseConstrainedLayout) {
+      const shouldRecalculateDefaultWidthArray = this.wasUsingConstrainedLayout ||
+        this.tabWidthArray.length === 0 ||
+        this.tabWidthArray.length !== this.tabItems.length ||
+        this.tabWidthArray.some((tabWidth) => tabWidth === 0);
+      this.wasUsingConstrainedLayout = false;
+      if (shouldRecalculateDefaultWidthArray) {
+        const newTabWidthArray = [];
+        this.tabItems.forEach((item) => {
+          const tabItem = this.host.shadowRoot.querySelector(`.vega-tab[data-target='${item.dataTarget}']`);
+          if (tabItem) {
+            const tabWidth = tabItem.getBoundingClientRect().width;
+            newTabWidthArray.push(tabWidth);
+          }
+        });
+        if (newTabWidthArray.length > 0 &&
+          !newTabWidthArray.some((tabWidth) => tabWidth === 0)) {
+          this.tabWidthArray = [...newTabWidthArray];
         }
-      });
-      if (newTabWidthArray.length > 0 && !newTabWidthArray.some((tabWidth) => tabWidth === 0)) {
-        this.tabWidthArray = [...newTabWidthArray];
       }
+      return;
+    }
+    this.wasUsingConstrainedLayout = true;
+    const newTabWidthArray = [];
+    this.tabItems.forEach((item) => {
+      const tabItem = this.host.shadowRoot.querySelector(`.vega-tab[data-target='${item.dataTarget}']`);
+      if (tabItem) {
+        const tabWidth = tabItem.getBoundingClientRect().width;
+        newTabWidthArray.push(tabWidth);
+      }
+    });
+    const hasValidWidths = newTabWidthArray.length === this.tabItems.length &&
+      !newTabWidthArray.some((tabWidth) => tabWidth === 0);
+    if (!hasValidWidths) {
+      return;
+    }
+    const isTabWidthArrayChanged = this.tabWidthArray.length !== newTabWidthArray.length ||
+      newTabWidthArray.some((tabWidth, index) => Math.abs(tabWidth - this.tabWidthArray[index]) > 0.5);
+    if (isTabWidthArrayChanged) {
+      this.tabWidthArray = [...newTabWidthArray];
     }
   }
 }
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaTabGroupPagesController.prototype, "host", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaTabGroupPagesController.prototype, "gap", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField({ writable: true })
 ], VegaTabGroupPagesController.prototype, "tabPages", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField({ writable: true })
 ], VegaTabGroupPagesController.prototype, "tabWidthArray", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField({ writable: true })
 ], VegaTabGroupPagesController.prototype, "tabItems", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaTabGroupPagesController.prototype, "variant", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaTabGroupPagesController.prototype, "overflow", void 0);
-__decorate$a([
+__decorate$b([
+  MapToComponentField()
+], VegaTabGroupPagesController.prototype, "tabItemWidth", void 0);
+__decorate$b([
   MapToComponentField({ componentFieldName: 'vegaTabGroupSliderStateController' })
 ], VegaTabGroupPagesController.prototype, "sliderStateController", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('componentDidLoad')
 ], VegaTabGroupPagesController.prototype, "componentDidLoad", null);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('componentDidRender')
 ], VegaTabGroupPagesController.prototype, "componentDidRender", null);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('watchGapChange')
 ], VegaTabGroupPagesController.prototype, "handleGapChange", null);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('watchTabWidthArrayChange')
 ], VegaTabGroupPagesController.prototype, "handleTabWidthArrayChange", null);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('watchTabItemsChange')
 ], VegaTabGroupPagesController.prototype, "handleTabItemsChange", null);
+__decorate$b([
+  MapToComponentMethod('watchTabItemWidthChange')
+], VegaTabGroupPagesController.prototype, "handleTabItemWidthChange", null);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -509,23 +681,23 @@ class VegaTabGroupPageIndexController extends VegaSlimmer {
     }
   }
 }
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaTabGroupPageIndexController.prototype, "tabPages", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField({ writable: true })
 ], VegaTabGroupPageIndexController.prototype, "currentPageIndex", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaTabGroupPageIndexController.prototype, "selectedTabDataTarget", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentMethod('watchTabPagesChange')
 ], VegaTabGroupPageIndexController.prototype, "handleTabPagesChange", null);
-__decorate$9([
+__decorate$a([
   MapToComponentMethod('watchSelectedTabDataTargetChange')
 ], VegaTabGroupPageIndexController.prototype, "handleSelectedDataTargetChange", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -578,26 +750,26 @@ class VegaTabGroupCloseButtonRenderer extends VegaSlimmer {
       h("vega-icon", { icon: "close", size: "size-12" }))));
   }
 }
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaTabGroupCloseButtonRenderer.prototype, "host", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaTabGroupCloseButtonRenderer.prototype, "tabWidthArray", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaTabGroupCloseButtonRenderer.prototype, "showCloseButton", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaTabGroupCloseButtonRenderer.prototype, "tabItems", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
 ], VegaTabGroupCloseButtonRenderer.prototype, "selectedTargetController", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField({ componentFieldName: 'vegaTabGroupPagesController' })
 ], VegaTabGroupCloseButtonRenderer.prototype, "tabPagesController", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -669,26 +841,26 @@ class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
         h("vega-icon", { size: "size-12", icon: icon }))));
   }
 }
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaTabGroupSwitchPageButtonRenderer.prototype, "tabPages", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaTabGroupSwitchPageButtonRenderer.prototype, "currentPageIndex", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaTabGroupSwitchPageButtonRenderer.prototype, "selectedTabDataTarget", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaTabGroupSwitchPageButtonRenderer.prototype, "positionRelativeTo", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField({ componentFieldName: 'vegaTabGroupPageIndexController' })
 ], VegaTabGroupSwitchPageButtonRenderer.prototype, "pageIndexController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaTabGroupSwitchPageButtonRenderer.prototype, "vegaTabGroupSelectedTargetController", void 0);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -818,32 +990,32 @@ class VegaTabGroupPanelController extends VegaSlimmer {
     }
   }
 }
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaTabGroupPanelController.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaTabGroupPanelController.prototype, "selectedTabDataTarget", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaTabGroupPanelController.prototype, "tabItems", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
 ], VegaTabGroupPanelController.prototype, "selectTargetController", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('connectedCallback')
 ], VegaTabGroupPanelController.prototype, "connectedCallback", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('disconnectedCallback')
 ], VegaTabGroupPanelController.prototype, "disconnectedCallback", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('componentDidLoad')
 ], VegaTabGroupPanelController.prototype, "componentDidLoad", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('watchSelectedTabDataTargetChange')
 ], VegaTabGroupPanelController.prototype, "watchSelectedTabDataTargetChange", null);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -883,11 +1055,11 @@ class VegaTabGroupVoiceOverFocusController extends VegaSlimmer {
     return Array.from(this.host.querySelectorAll('vega-tab-group-panel')).find((panel) => (panel === null || panel === void 0 ? void 0 : panel.getAttribute('id')) === dataTarget);
   }
 }
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaTabGroupVoiceOverFocusController.prototype, "host", void 0);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -907,18 +1079,24 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
     };
   }
   render() {
+    const isConstrainedLayout = shouldUseConstrainedWidthLayout(this.tabItemWidth, this.tabItems);
+    const hasMixedPercentageWidths = hasAnyPercentageTabWidth(this.tabItems) && !isConstrainedLayout;
     return (h("div", { class: {
         'tab-list': true,
         'menu': this.overflow === 'menu',
         'scroll': this.overflow === 'scroll',
+        'custom-tab-width': isConstrainedLayout,
+        'mixed-percentage-tab-width': hasMixedPercentageWidths,
       } },
-      this.overflow === 'menu' && this.renderTabListInMenuOverflow(),
+      this.overflow === 'menu' && this.renderTabListInMenuOverflow(hasMixedPercentageWidths),
       this.overflow === 'scroll' && this.renderTabListInScrollOverflow()));
   }
-  renderTabListInMenuOverflow() {
+  renderTabListInMenuOverflow(hasMixedPercentageWidths) {
+    const isConstrainedLayout = shouldUseConstrainedWidthLayout(this.tabItemWidth, this.tabItems);
+    const pageWrapperStyle = hasMixedPercentageWidths || isConstrainedLayout ? { paddingRight: '1px' } : undefined;
     return (h("vega-carousel", { showSlider: false, ref: (el) => (this.carouselDom = el) }, this.tabPages.length > 0 ? (this.tabPages.map((tabPage, index) => {
-      return h("div", { key: index }, this.renderTabList(tabPage));
-    })) : (h("div", null, this.renderTabList(this.tabItems)))));
+      return (h("div", { key: index, style: pageWrapperStyle }, this.renderTabList(tabPage)));
+    })) : (h("div", { style: pageWrapperStyle }, this.renderTabList(this.tabItems)))));
   }
   renderTabListInScrollOverflow() {
     return (h("div", { class: "overflow-scroll" }, this.tabPages.map((tabPage, index) => {
@@ -926,16 +1104,29 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
     })));
   }
   renderTabList(showTabItems) {
-    return (h("vega-flex", { gap: this.gap, role: "tablist" }, showTabItems.map((item) => {
+    const isConstrainedLayout = shouldUseConstrainedWidthLayout(this.tabItemWidth, this.tabItems);
+    const hasMixedPercentageWidths = hasAnyPercentageTabWidth(this.tabItems) && !isConstrainedLayout;
+    const shouldUseStableTabListWidth = isConstrainedLayout || hasAnyPercentageTabWidth(this.tabItems);
+    return (h("vega-flex", { gap: this.gap, role: "tablist", style: shouldUseStableTabListWidth ? { width: '100%' } : undefined }, showTabItems.map((item) => {
+      const shouldKeepAdaptiveTabShrinkable = hasMixedPercentageWidths && item.width == null;
+      const shouldPreventIntrinsicMinimumWidth = isConstrainedLayout || shouldKeepAdaptiveTabShrinkable || item.width != null;
+      const shouldAllowTabShrink = shouldKeepAdaptiveTabShrinkable ||
+        (isConstrainedLayout && hasPercentageConfiguredWidth(item, this.tabItemWidth));
       const tabLabelId = createSafeIdFromString(item.dataTarget, 'vega-tab-label');
       return (h("div", { class: {
           'vega-tab': true,
+          'custom-tab-label-width': isConstrainedLayout || item.width != null,
           'selected': this.selectedTabDataTarget === item.dataTarget,
           'last-page': this.currentPageIndex + 1 === this.tabPages.length,
-          'vega-flex-shrink-0': true,
-          'v-min-w-min': true,
+          'vega-flex-shrink-0': !shouldAllowTabShrink,
+          'v-min-w-min': !shouldPreventIntrinsicMinimumWidth,
           'disabled': Boolean(item.disabled),
-        }, "data-target": item.dataTarget, key: item.dataTarget },
+        }, style: Object.assign({ flexGrow: item.width != null ? '0' : undefined, width: this.resolveTabWidth(item) }, (shouldAllowTabShrink
+          ? {
+            minWidth: '0',
+            flexShrink: '1',
+          }
+          : {})), "data-target": item.dataTarget, key: item.dataTarget },
         h("div", { class: "vega-tab-container" },
           h("div", { class: {
               'label': true,
@@ -944,7 +1135,7 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
             /* eslint-disable-next-line react/jsx-no-bind */
             onClick: (event) => this.handleTabItemClick(event, item.dataTarget), id: tabLabelId, "aria-label": this.getTabAriaLabel(item), "aria-selected": (this.selectedTabDataTarget === item.dataTarget).toString(), role: 'tab', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
             this.renderPrefixIconDom(item),
-            this.renderTabLabelDom(item),
+            this.renderTabLabelDom(item, isConstrainedLayout || item.width != null),
             this.renderCounterBadgeDom(item)),
           this.closeButtonRenderer.render(item))));
     })));
@@ -953,7 +1144,10 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
     const prefixIcon = item.prefixIcon;
     return prefixIcon && h("vega-icon", { icon: prefixIcon });
   }
-  renderTabLabelDom(item) {
+  renderTabLabelDom(item, isConstrainedLayout) {
+    if (isConstrainedLayout) {
+      return this.constrainedTabLabelRenderer.render(item);
+    }
     const labelLength = item.label.length;
     return labelLength > this.TAB_LABEL_MAX_SIZE ? (h("vega-tooltip", { text: item.label, placement: "bottom", "position-relative-to": this.positionRelativeTo },
       h("span", null,
@@ -994,48 +1188,117 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
     }
     return '';
   }
+  resolveTabWidth(item) {
+    var _a, _b;
+    if (item.width != null) {
+      /* istanbul ignore next */
+      return (_a = formatAndValidResponsiveToken(item.width, 'widthAndHeight')) !== null && _a !== void 0 ? _a : undefined;
+    }
+    if (this.tabItemWidth != null) {
+      /* istanbul ignore next */
+      return (_b = formatAndValidResponsiveToken(this.tabItemWidth, 'widthAndHeight')) !== null && _b !== void 0 ? _b : undefined;
+    }
+    return undefined;
+  }
   handleTabItemClick(event, dataTarget) {
     this.selectedTargetController.handleTabItemClick(dataTarget);
     this.voiceOverFocusController.handleVoiceOverPanelFocus(event, dataTarget);
   }
 }
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "tabPages", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "currentPageIndex", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "selectedTabDataTarget", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "gap", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "showCloseButton", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "tabItems", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "overflow", void 0);
-__decorate$4([
+__decorate$5([
+  MapToComponentField()
+], VegaTabGroupTabListRenderer.prototype, "tabItemWidth", void 0);
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "positionRelativeTo", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField({ componentFieldName: 'vegaTabGroupCloseButtonRenderer' })
 ], VegaTabGroupTabListRenderer.prototype, "closeButtonRenderer", void 0);
-__decorate$4([
+__decorate$5([
+  MapToComponentField({ componentFieldName: 'vegaTabGroupConstrainedTabLabelRenderer' })
+], VegaTabGroupTabListRenderer.prototype, "constrainedTabLabelRenderer", void 0);
+__decorate$5([
   MapToComponentField({ componentFieldName: 'vegaTabGroupSelectedTargetController' })
 ], VegaTabGroupTabListRenderer.prototype, "selectedTargetController", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField({ componentFieldName: 'vegaTabGroupVoiceOverFocusController' })
 ], VegaTabGroupTabListRenderer.prototype, "voiceOverFocusController", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "translationSlimmer", void 0);
 
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Renders full tab labels and enables tooltips only when constrained labels overflow. */
+class VegaTabGroupConstrainedTabLabelRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.tabLabelRefs = {};
+    this.tabTooltipRefs = {};
+  }
+  componentDidRender() {
+    this.refreshTooltipTriggers();
+  }
+  refreshTooltipTriggers() {
+    Object.keys(this.tabLabelRefs).forEach((dataTarget) => {
+      const labelRef = this.tabLabelRefs[dataTarget];
+      const tooltipRef = this.tabTooltipRefs[dataTarget];
+      if (labelRef && tooltipRef) {
+        tooltipRef.trigger = labelRef.scrollWidth > labelRef.clientWidth ? 'hover' : 'none';
+      }
+    });
+  }
+  /**
+   * Renders a label that truncates visually and exposes its complete value through a tooltip on overflow.
+   *
+   * @param {TabConfig} item - The tab configuration.
+   * @returns {HTMLElement} The constrained tab label.
+   */
+  render(item) {
+    return (h("vega-tooltip", { text: item.label, trigger: "none", placement: "bottom", "position-relative-to": this.positionRelativeTo, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      ref: (ref) => {
+        this.tabTooltipRefs[item.dataTarget] = ref;
+      } },
+      h("span", { class: "tab-label-ellipsis", 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          this.tabLabelRefs[item.dataTarget] = ref;
+        } }, item.label)));
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaTabGroupConstrainedTabLabelRenderer.prototype, "positionRelativeTo", void 0);
+__decorate$4([
+  MapToComponentMethod('componentDidRender')
+], VegaTabGroupConstrainedTabLabelRenderer.prototype, "componentDidRender", null);
+
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1122,7 +1385,13 @@ class VegaTabGroupSliderStateController extends VegaSlimmer {
       }, this.UPDATE_ANIMATION_FLAG_DELAY);
       await this.goToPageTaskQueue.enqueue({
         /** Add task to the queue and run it until component did render */
-        run: async () => await carouselDom.goToPage(this.currentPageIndex + 1),
+        run: async () => {
+          await carouselDom.goToPage(this.currentPageIndex + 1);
+          if (this.tabItemWidth != null ||
+            this.tabItems.some((item) => item.width != null)) {
+            this.constrainedTabLabelRenderer.refreshTooltipTriggers();
+          }
+        },
       }, false);
     }
   }
@@ -1143,9 +1412,18 @@ class VegaTabGroupSliderStateController extends VegaSlimmer {
 __decorate$2([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupSliderStateController.prototype, "tabListRenderer", void 0);
+__decorate$2([
+  MapToComponentField({ componentFieldName: 'vegaTabGroupConstrainedTabLabelRenderer' })
+], VegaTabGroupSliderStateController.prototype, "constrainedTabLabelRenderer", void 0);
 __decorate$2([
   MapToComponentField()
 ], VegaTabGroupSliderStateController.prototype, "currentPageIndex", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTabGroupSliderStateController.prototype, "tabItemWidth", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTabGroupSliderStateController.prototype, "tabItems", void 0);
 __decorate$2([
   MapToComponentMethod('componentDidRender')
 ], VegaTabGroupSliderStateController.prototype, "componentDidRender", null);
@@ -1180,7 +1458,7 @@ const VegaTabGroupRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-const vegaTabGroupCss = ".tab-content-container.tab-style-primary{margin-left:24px;margin-right:24px}.vega-tab{cursor:pointer;border-top-left-radius:8px;border-top-right-radius:8px;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}.tab-content-container .tab-list.scroll{width:100%;overflow:hidden}.tab-content-container .tab-list.scroll .overflow-scroll>div{display:flex;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab-content-container .tab-list.scroll .overflow-scroll>div::-webkit-scrollbar{display:none}.tab-content-container.more-tab .vega-tab{flex-grow:1}.tab-content-container.more-tab .vega-tab.last-page{flex-grow:0}.vega-tab>div.vega-tab-container{display:flex;align-items:center}.vega-tab>div.vega-tab-container>div{flex-grow:1}.tab-style-primary .vega-tab:hover{background-color:rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))}.tab-style-primary .vega-tab.selected,.tab-style-primary .vega-tab.selected:hover{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-tab>div>.label{display:inline-flex;align-items:center;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;cursor:pointer;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.vega-tab>div>.label vega-icon{padding-right:8px}.vega-tab>div>.label .vega-counter-badge{position:relative;height:20px;padding-left:8px}.vega-tab>div>.label .vega-counter-badge vega-counter-badge{position:absolute;padding-left:8px;top:10px}.vega-tab>div>.label .vega-counter-badge.dot-variant{width:20px}.vega-tab>div>.label .vega-counter-badge.dot-variant vega-counter-badge{left:10px}.vega-tab>div>.label .vega-counter-badge.one-digit{width:20px}.vega-tab>div>.label .vega-counter-badge.one-digit vega-counter-badge{left:10px}.vega-tab>div>.label .vega-counter-badge.two-digits{width:28px}.vega-tab>div>.label .vega-counter-badge.two-digits vega-counter-badge{left:14px}.vega-tab>div>.label .vega-counter-badge.multi-digits{width:32px}.vega-tab>div>.label .vega-counter-badge.multi-digits vega-counter-badge{left:16px}.vega-tab>div>.label.vega-close-icon-space{padding-right:12px}.vega-tab>div>div.vega-close-icon{padding-left:0px;flex-grow:0;padding-right:13px}.vega-tab>div>div.vega-hidden{display:none}.vega-tab>div vega-icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1));box-sizing:content-box}.vega-tab>div>div.vega-close-icon vega-icon{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}.vega-tab.disabled{pointer-events:none;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}.vega-tab.disabled .label,.vega-tab.disabled vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host{display:block;width:100%;text-align:left;line-height:normal;min-width:270px}.horizontal-divider{height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));width:100%;display:none;margin-top:-1px}.tab-content-container{display:flex;gap:8px;justify-content:space-between}.tab-content-container.more-tab .tab-list{width:100%}div.tab-left-button,div.tab-right-button{display:inline-block;cursor:pointer;border-top-left-radius:8px;border-top-right-radius:8px;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1))}div.tab-left-button.vega-hidden,div.tab-right-button.vega-hidden{display:none}div.tab-left-button vega-icon,div.tab-right-button vega-icon{box-sizing:content-box;padding:13px 13px 13px 12px}.vega-tab-group-content vega-tab-group-panel{display:none}.vega-tab-group-content vega-tab-group-panel.active{display:block}.tab-style-secondary .vega-tab>div.vega-tab-container{align-items:baseline}.tab-style-secondary+.horizontal-divider{display:block}.tab-style-secondary .vega-tab{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}.tab-style-secondary .vega-tab>div>.label{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:12px}.tab-style-secondary .vega-tab.selected>div>.label,.tab-style-secondary .vega-tab.selected>div>.label vega-icon,.tab-style-secondary .vega-tab:hover>div>.label,.tab-style-secondary .vega-tab:hover>div>.label vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.tab-style-secondary .vega-tab{border-top-width:0px;border-left-width:0px;border-right-width:0px;border-bottom-width:2px;border-style:solid;border-color:transparent}.tab-style-secondary .vega-tab.selected{border-color:rgba(var(--v-border-color-action, 19, 98, 226, 1))}.tab-style-secondary div.tab-left-button,.tab-style-secondary div.tab-right-button{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}.tab-style-secondary div.tab-left-button vega-icon,.tab-style-secondary div.tab-right-button vega-icon{padding:6px 13px 13px 6px}.tab-style-secondary div.tab-left-button:hover vega-icon,.tab-style-secondary div.tab-right-button:hover vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}";
+const vegaTabGroupCss = ".tab-content-container.tab-style-primary{margin-left:24px;margin-right:24px}.vega-tab{cursor:pointer;border-top-left-radius:8px;border-top-right-radius:8px;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}.tab-content-container .tab-list.scroll{width:100%;overflow:hidden}.tab-content-container .tab-list.scroll .overflow-scroll>div{display:flex;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab-content-container .tab-list.scroll .overflow-scroll>div::-webkit-scrollbar{display:none}.tab-content-container.more-tab .vega-tab{flex-grow:1}.tab-content-container.more-tab .tab-list.custom-tab-width .vega-tab{flex-grow:0}.tab-content-container.more-tab .vega-tab.last-page{flex-grow:0}.vega-tab>div.vega-tab-container{display:flex;align-items:center}.vega-tab.custom-tab-label-width>div.vega-tab-container{min-width:0px}.vega-tab>div.vega-tab-container>div{flex-grow:1}.vega-tab.custom-tab-label-width>div.vega-tab-container>div{min-width:0px}.tab-style-primary .vega-tab:hover{background-color:rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))}.tab-style-primary .vega-tab.selected,.tab-style-primary .vega-tab.selected:hover{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-tab>div>.label{display:inline-flex;align-items:center;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;cursor:pointer;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-tab>div>.label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.vega-tab.custom-tab-label-width>div>.label{overflow:hidden;min-width:0px;max-width:100%}.vega-tab.custom-tab-label-width>div>.label .tab-label-ellipsis{display:block;min-width:0px;width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vega-tab.custom-tab-label-width>div>.label vega-tooltip{display:block;flex-grow:1;min-width:0px;max-width:100%;overflow:hidden}.vega-tab>div>.label vega-icon{padding-right:8px}.vega-tab>div>.label .vega-counter-badge{position:relative;height:20px;padding-left:8px}.vega-tab>div>.label .vega-counter-badge vega-counter-badge{position:absolute;padding-left:8px;top:10px}.vega-tab>div>.label .vega-counter-badge.dot-variant{width:20px}.vega-tab>div>.label .vega-counter-badge.dot-variant vega-counter-badge{left:10px}.vega-tab>div>.label .vega-counter-badge.one-digit{width:20px}.vega-tab>div>.label .vega-counter-badge.one-digit vega-counter-badge{left:10px}.vega-tab>div>.label .vega-counter-badge.two-digits{width:28px}.vega-tab>div>.label .vega-counter-badge.two-digits vega-counter-badge{left:14px}.vega-tab>div>.label .vega-counter-badge.multi-digits{width:32px}.vega-tab>div>.label .vega-counter-badge.multi-digits vega-counter-badge{left:16px}.vega-tab>div>.label.vega-close-icon-space{padding-right:12px}.vega-tab>div>div.vega-close-icon{padding-left:0px;flex-grow:0;padding-right:13px}.vega-tab>div>div.vega-hidden{display:none}.vega-tab>div vega-icon{color:rgba(var(--v-text-primary, 32, 54, 69, 1));box-sizing:content-box}.vega-tab>div>div.vega-close-icon vega-icon{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}.vega-tab.disabled{pointer-events:none;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}.vega-tab.disabled .label,.vega-tab.disabled vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host{display:block;width:100%;text-align:left;line-height:normal;min-width:270px}.horizontal-divider{height:1px;background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));width:100%;display:none;margin-top:-1px}.tab-content-container{display:flex;gap:8px;justify-content:space-between}.tab-content-container.more-tab .tab-list{flex-grow:1;min-width:0px;width:auto}.tab-content-container .tab-list.custom-tab-width{flex-grow:1;min-width:0px;width:auto}.tab-content-container .tab-list.mixed-percentage-tab-width{flex-grow:1;min-width:0px;width:auto}div.tab-left-button,div.tab-right-button{display:inline-block;cursor:pointer;border-top-left-radius:8px;border-top-right-radius:8px;background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1))}div.tab-left-button.vega-hidden,div.tab-right-button.vega-hidden{display:none}div.tab-left-button vega-icon,div.tab-right-button vega-icon{box-sizing:content-box;padding:13px 13px 13px 12px}.vega-tab-group-content vega-tab-group-panel{display:none}.vega-tab-group-content vega-tab-group-panel.active{display:block}.tab-style-secondary .vega-tab>div.vega-tab-container{align-items:baseline}.tab-style-secondary+.horizontal-divider{display:block}.tab-style-secondary .vega-tab{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}.tab-style-secondary .vega-tab>div>.label{padding-left:16px;padding-right:16px;padding-top:0px;padding-bottom:12px}.tab-style-secondary .vega-tab.selected>div>.label,.tab-style-secondary .vega-tab.selected>div>.label vega-icon,.tab-style-secondary .vega-tab:hover>div>.label,.tab-style-secondary .vega-tab:hover>div>.label vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.tab-style-secondary .vega-tab{border-top-width:0px;border-left-width:0px;border-right-width:0px;border-bottom-width:2px;border-style:solid;border-color:transparent}.tab-style-secondary .vega-tab.selected{border-color:rgba(var(--v-border-color-action, 19, 98, 226, 1))}.tab-style-secondary div.tab-left-button,.tab-style-secondary div.tab-right-button{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0))}.tab-style-secondary div.tab-left-button vega-icon,.tab-style-secondary div.tab-right-button vega-icon{padding:6px 13px 13px 6px}.tab-style-secondary div.tab-left-button:hover vega-icon,.tab-style-secondary div.tab-right-button:hover vega-icon{color:rgba(var(--v-text-link, 19, 98, 226, 1))}";
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1197,11 +1475,12 @@ const VegaTabGroup = class {
     registerInstance(this, hostRef);
     this.vegaClick = createEvent(this, "vegaClick", 7);
     this.click = createEvent(this, "click", 7);
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaTabGroupRenderer = new VegaTabGroupRenderer();
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaTabGroupDirectionButtonRenderer = new VegaTabGroupSwitchPageButtonRenderer();
     this.vegaTabGroupTabListRenderer = new VegaTabGroupTabListRenderer();
+    this.vegaTabGroupConstrainedTabLabelRenderer = new VegaTabGroupConstrainedTabLabelRenderer();
     this.vegaTabGroupCloseButtonRenderer = new VegaTabGroupCloseButtonRenderer();
     this.vegaTabGroupPagesController = new VegaTabGroupPagesController();
     this.vegaTabGroupSelectedTargetController = new VegaTabGroupSelectedTargetController();
@@ -1302,6 +1581,13 @@ const VegaTabGroup = class {
   /* istanbul ignore next */
   watchTabItemsChange() {
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-tab-group-tab-item-width-customization}
+   */
+  /* istanbul ignore next */
+  watchTabItemWidthChange() {
+  }
   /**
    * Call the pager to return a two-dimensional array of page numbers.
    */
@@ -1320,7 +1606,8 @@ const VegaTabGroup = class {
     "currentPageIndex": ["watchCurrentPageIndexChange"],
     "selectedTabDataTarget": ["watchSelectedTabDataTargetChange"],
     "gap": ["watchGapChange"],
-    "tabItems": ["watchTabItemsChange"]
+    "tabItems": ["watchTabItemsChange"],
+    "tabItemWidth": ["watchTabItemWidthChange"]
   }; }
 };
 __decorate$1([
@@ -1338,6 +1625,9 @@ __decorate$1([
 __decorate$1([
   InjectVegaSlimmer()
 ], VegaTabGroup.prototype, "vegaTabGroupTabListRenderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaTabGroup.prototype, "vegaTabGroupConstrainedTabLabelRenderer", void 0);
 __decorate$1([
   InjectVegaSlimmer()
 ], VegaTabGroup.prototype, "vegaTabGroupCloseButtonRenderer", void 0);
@@ -1388,7 +1678,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const VegaTabGroupPanel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.clickEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**