@globalpayments/vega 2.101.0 → 2.102.0

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/renderers/vega-rich-text-link-editor-renderer.js

@@ -7,8 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaClick, VegaChange, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClick, VegaChange, VegaHide, VegaPopoverHide, VegaPopoverShow, VegaShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { RTE_EMAIL_LINK_TYPE_KEY } from '../../../constants/constant';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import bookmarkIcon from '../../../extensions/bookmark/assets/bookmark';
 export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -26,6 +28,10 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
             this.linkEditorController.handleEditAction();
             return;
           }
+          case 'bookmark': {
+            void this.linkEditorController.handleBookmarkNavigation();
+            return;
+          }
           case 'unlink': {
             void this.linkEditorController.handleUnlinkAction();
           }
@@ -54,6 +60,22 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
     this.handleUrlVegaChange = (e) => {
       this.linkEditorController.handleUrlVegaChange(e);
     };
+    this.handleBookmarkVegaChange = (e) => {
+      void this.linkEditorController.handleBookmarkVegaChange(e);
+    };
+    // Opening the Bookmark dropdown blurs the URL input; suppress its auto-validation while the
+    // dropdown is open so the error box cannot appear, shift layout, and cancel the first item click.
+    this.handleBookmarkInputSelectRef = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaShow, () => {
+        this.setUrlAutoValidation(false);
+      });
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaHide, () => {
+        this.setUrlAutoValidation(true);
+      });
+    };
+    this.handleBookmarkMouseDown = (e) => {
+      e.preventDefault();
+    };
     this.handleLinkTypeSelectRef = (ref) => {
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (payload) => {
         void this.linkEditorController.handleLinkTypeChange(payload);
@@ -94,11 +116,23 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
         this.renderLinkEditContent())));
   }
   renderLinkUnlinkContent() {
+    var _a;
+    const bookmarkName = this.linkTypeConfigController.getBookmarkNameForUrl((_a = this.record) === null || _a === void 0 ? void 0 : _a.url);
     return (h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
       h("vega-button-group", { size: "small", variant: "tertiary", ref: this.handleButtonGroupRef, onKeyDown: this.handleLinkFieldKeyDown },
+        bookmarkName && (h("vega-button-group-item", { label: this.getBookmarkLabel(bookmarkName), icon: VegaInternalIconManager.getIconKey('rte-bookmark'), itemKey: "bookmark" })),
         h("vega-button-group-item", { label: this.translationSlimmer.t('Edit'), itemKey: "edit" }),
         h("vega-button-group-item", { label: this.translationSlimmer.t('Unlink'), itemKey: "unlink" }))));
   }
+  getBookmarkLabel(bookmarkName) {
+    const characters = Array.from(bookmarkName);
+    if (characters.length <= VegaRichTextLinkEditorRenderer.BOOKMARK_LABEL_MAX_LENGTH) {
+      return bookmarkName;
+    }
+    return `${characters
+      .slice(0, VegaRichTextLinkEditorRenderer.BOOKMARK_LABEL_MAX_LENGTH - 3)
+      .join('')}...`;
+  }
   renderLinkEditContent() {
     return (h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
       h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
@@ -128,9 +162,22 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
     ];
   }
   renderUrlLinkEditFields() {
-    return [
+    const fields = [
       h("vega-input", { key: "url", "data-vega-form": "url", ref: this.handleUrlInputRef, size: "small", label: this.translationSlimmer.t('URL'), required: this.linkTypeConfigController.hasConfiguredLinkTypes(), onVegaChange: this.handleUrlVegaChange, onKeyDown: this.handleLinkFieldKeyDown }),
     ];
+    if (this.linkTypeConfigController.isBookmarkEnabled()) {
+      fields.push(this.renderBookmarkUrlSuggestions());
+    }
+    return fields;
+  }
+  renderBookmarkUrlSuggestions() {
+    const bookmarkNames = this.linkTypeConfigController.getBookmarkNames();
+    const hasBookmarks = bookmarkNames.length > 0;
+    return (h("vega-accordion", { expand: false, drawsBackground: false, onMouseDown: this.handleBookmarkMouseDown },
+      h("div", { slot: "title" }, this.translationSlimmer.t('Bookmark')),
+      h("vega-input-select", { slot: "content", style: { marginTop: '-16px' }, "data-vega-form": "bookmark", ref: this.handleBookmarkInputSelectRef, size: "small", placeholder: hasBookmarks
+          ? this.translationSlimmer.t('Select a bookmark')
+          : this.translationSlimmer.t('No bookmarks available'), disabled: !hasBookmarks, source: bookmarkNames.map((name) => ({ id: name, displayName: name })), onVegaChange: this.handleBookmarkVegaChange })));
   }
   renderLinkTypeSelector() {
     if (!this.linkTypeConfigController.hasConfiguredLinkTypes()) {
@@ -151,7 +198,16 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
       h("vega-button", { variant: "secondary", label: this.translationSlimmer.t('Cancel'), ref: this.handleCancelButtonRef }),
       h("vega-button", { label: this.translationSlimmer.t('Submit'), disabled: this.linkEditorStateManager.getIsSubmitDisabled(), ref: this.handleSubmitButtonRef })));
   }
+  setUrlAutoValidation(enabled) {
+    if (this.urlInputRef) {
+      this.urlInputRef.autoValidation = enabled;
+    }
+  }
 }
+(() => {
+  VegaInternalIconManager.register({ 'rte-bookmark': bookmarkIcon });
+})();
+VegaRichTextLinkEditorRenderer.BOOKMARK_LABEL_MAX_LENGTH = 24;
 __decorate([
   MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
@@ -170,3 +226,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "linkEditorStateManager", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/vega-rich-text-link-editor.js

@@ -23,7 +23,7 @@ import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
  */
 export class VegaRichTextLinkEditor {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextLinkEditorRenderer();

package/dist/collection/components/vega-section-title/vega-section-title.js

@@ -18,7 +18,7 @@ import { buildSectionTitleA11yTree } from './slimmers/a11y-tree/build-section-ti
  */
 export class VegaSectionTitle {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.renderer = new VegaSectionTitleRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**

package/dist/collection/components/vega-segment-control/vega-segment-control.js

@@ -22,7 +22,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
  */
 export class VegaSegmentControl {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.segmentControlRenderer = new VegaSegmentControlRenderer();
     this.segmentOverflowController = new VegaSegmentOverflowController();
     this.segmentRenderer = new VegaSegmentRenderer();

package/dist/collection/components/vega-selection-chip/vega-selection-chip-group/vega-selection-chip-group.js

@@ -22,7 +22,7 @@ import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers
  */
 export class VegaSelectionChipGroup {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.renderer = new VegaSelectionChipGroupRenderer();
     this.itemsController = new VegaSelectionChipGroupItemsController();
     this.valueController = new VegaSelectionChipGroupValueController();

package/dist/collection/components/vega-selection-chip/vega-selection-chip.js

@@ -23,7 +23,7 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
  */
 export class VegaSelectionChip {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.renderer = new VegaSelectionChipRenderer();
     this.checkedController = new VegaSelectionChipCheckedController();
     this.stateController = new VegaSelectionChipStateController();

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.js

@@ -24,7 +24,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
  */
 export class VegaSelectionTileGroup {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.renderer = new VegaSelectionTileGroupRenderer();
     this.itemsController = new VegaSelectionTileGroupItemsController();
     this.valueController = new VegaSelectionTileGroupValueController();

package/dist/collection/components/vega-selection-tile/vega-selection-tile.js

@@ -24,7 +24,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
  */
 export class VegaSelectionTile {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.renderer = new VegaSelectionTileRenderer();
     this.checkedController = new VegaSelectionTileCheckedController();
     this.stateController = new VegaSelectionTileStateController();

package/dist/collection/components/vega-sidenav/vega-sidenav-group/vega-sidenav-group.js

@@ -21,7 +21,7 @@ import { isHTMLVegaSidenavLinkElement } from '../utils';
 export class VegaSidenavGroup {
   constructor() {
     this.subStateObserverSlimmer = new VegaSidenavGroupSubStateController();
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.openState = 'close';
     /**

package/dist/collection/components/vega-sidenav/vega-sidenav-link/vega-sidenav-link.js

@@ -26,7 +26,7 @@ import internalVegaEventManager from '../../../helpers/event-manager/internal-ve
  */
 export class VegaSidenavLink {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.subStateObserverSlimmer = new VegaSidenavLinkSubStateController();
     this.clickEventEmitter = createEventEmitSlimmer(VegaSidenavLink, VegaClick);

package/dist/collection/components/vega-sidenav/vega-sidenav.js

@@ -24,7 +24,7 @@ import { VegaStateUpdate } from '../../helpers/event-manager/event-id/vega-event
  */
 export class VegaSidenav {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.openStateNotifySlimmer = createSubStateNotifySlimmer(VegaSidenav, 'openState', 'watchOpenState');
     this.backdropController = new VegaSidenavBackdropController();

package/dist/collection/components/vega-signature-capture/vega-signature-capture.js

@@ -26,7 +26,7 @@ import { TranslationSlimmer } from '../../helpers/slimmers/translation';
  */
 export class VegaSignatureCapture {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaSignatureCaptureRenderer = new VegaSignatureCaptureRenderer();

package/dist/collection/components/vega-skeleton/vega-skeleton.js

@@ -21,7 +21,7 @@ import { VegaSkeletonEllipseRenderer } from './slimmers/renderers/vega-skeleton-
  */
 export class VegaSkeleton {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaSkeletonTextRenderer = new VegaSkeletonTextRenderer();
     this.vegaSkeletonParagraphRenderer = new VegaSkeletonParagraphRenderer();

package/dist/collection/components/vega-slot-container/vega-slot-container.js

@@ -12,7 +12,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
  */
 export class VegaSlotContainer {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {

package/dist/collection/components/vega-stepper/vega-stepper.js

@@ -27,7 +27,7 @@ import { VegaStepperRuntimeMetricsPayloadDefinition } from '../../constants/runt
  */
 export class VegaStepper {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {

package/dist/collection/components/vega-tab-group/helpers/vega-tab-group-width-layout-helper.js

@@ -0,0 +1,91 @@
+import { formatAndValidResponsiveToken } from '../../../utils/design-token';
+/**
+ * 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.
+ */
+export 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 `%`.
+ */
+export 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 `%`.
+ */
+export 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.
+ */
+export 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.
+ */
+export function hasAnyPercentageTabWidth(items) {
+  return items.some((item) => isPercentageWidthValue(item.width));
+}

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-pages-controller.js

@@ -8,6 +8,7 @@ import { ValuePaginator } from '../../../../../helpers/paginator/value-paginator
 import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-resize-observer-slimmer';
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { debounce } from '../../../../../utils/timer';
+import { getConfiguredPercentageWidthValue, hasPercentageConfiguredWidth, shouldUseConstrainedWidthLayout, } from '../../../helpers/vega-tab-group-width-layout-helper';
 /** The `VegaTabGroupPagesController` class is responsible for managing the tab pages and their widths in a tab group component. */
 export class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
   /*
@@ -22,6 +23,9 @@ export 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,
@@ -33,6 +37,7 @@ export 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
@@ -51,6 +56,7 @@ export 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) {
@@ -60,7 +66,7 @@ export 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;
         }
       }
@@ -123,6 +129,14 @@ export 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.
    *
@@ -153,12 +167,36 @@ export 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}
@@ -184,20 +222,50 @@ export 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];
     }
   }
 }
@@ -222,6 +290,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTabGroupPagesController.prototype, "overflow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupPagesController.prototype, "tabItemWidth", void 0);
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupSliderStateController' })
 ], VegaTabGroupPagesController.prototype, "sliderStateController", void 0);
@@ -240,3 +311,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchTabItemsChange')
 ], VegaTabGroupPagesController.prototype, "handleTabItemsChange", null);
+__decorate([
+  MapToComponentMethod('watchTabItemWidthChange')
+], VegaTabGroupPagesController.prototype, "handleTabItemWidthChange", null);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-slider-state-controller.js

@@ -63,7 +63,13 @@ export 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);
     }
   }
@@ -84,9 +90,18 @@ export class VegaTabGroupSliderStateController extends VegaSlimmer {
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupSliderStateController.prototype, "tabListRenderer", void 0);
+__decorate([
+  MapToComponentField({ componentFieldName: 'vegaTabGroupConstrainedTabLabelRenderer' })
+], VegaTabGroupSliderStateController.prototype, "constrainedTabLabelRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTabGroupSliderStateController.prototype, "currentPageIndex", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupSliderStateController.prototype, "tabItemWidth", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupSliderStateController.prototype, "tabItems", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaTabGroupSliderStateController.prototype, "componentDidRender", null);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-constrained-tab-label-renderer.js

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__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;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/** Renders full tab labels and enables tooltips only when constrained labels overflow. */
+export 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([
+  MapToComponentField()
+], VegaTabGroupConstrainedTabLabelRenderer.prototype, "positionRelativeTo", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTabGroupConstrainedTabLabelRenderer.prototype, "componentDidRender", null);