@globalpayments/vega 2.47.1 → 2.49.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -17,8 +17,10 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRichTextEditorSelectionRangeChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
+import { RTETextNode } from '../../dto/nodes/text-node';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { RTERange } from '../../dto/range';
+import { RTESelectionState } from '../../dto/selection-state';
 /**
  * The text selection controller
  */
@@ -28,7 +30,7 @@ export class SelectionController extends VegaSlimmer {
     this.currentRange = new RTERange();
     this.updateCaretPositionTaskQueue = new SynchronizeTaskQueue(1);
     this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
-    this.selectedNodes = [];
+    this.pendingRestoreSelectionNodes = [];
     /**
      * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
      *
@@ -68,6 +70,7 @@ export class SelectionController extends VegaSlimmer {
    * Watches the internal value of the editor
    */
   watchValueUpdate() {
+    this.prepareRestoreSelectionState();
     this.restoreSelection();
   }
   /**
@@ -102,6 +105,14 @@ export class SelectionController extends VegaSlimmer {
   getSelectedBlocks() {
     return Array.from(this.selectionMap.keys());
   }
+  /**
+   * Set the selection state
+   *
+   * @param {RTESelectionState} state - The selection state to set
+   */
+  setSelectionState(state) {
+    this.selectionState = state;
+  }
   /**
    * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue
    *
@@ -159,23 +170,15 @@ export class SelectionController extends VegaSlimmer {
    * Restore the selection to the current selected nodes
    */
   restoreSelection() {
-    if (this.selectedNodes.length > 0) {
-      const startNode = this.selectedNodes[0];
-      const endNode = this.selectedNodes.length > 1 ? this.selectedNodes[this.selectedNodes.length - 1] : startNode;
-      if (startNode === endNode && startNode.text.length === 0) {
+    if (this.selectionState) {
+      const { startNode, endNode, startOffset, endOffset } = this.selectionState.range;
+      if (startNode instanceof RTETextNode && startNode === endNode && startNode.text.length === 0) {
         this.enqueueSelectionRangeFutureState(startNode, ZERO_WIDTH_SPACE.length);
       }
       else {
-        const { startContainer, endContainer, startOffset, endOffset } = this.currentRange;
-        if (stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
-          stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement) {
-          this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
-        }
-        else {
-          this.enqueueSelectionRangeFutureState(startNode, 0, endNode, endNode.text.length);
-        }
+        this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
       }
-      this.selectedNodes = [];
+      this.selectionState = null;
     }
   }
   /**
@@ -263,10 +266,43 @@ export class SelectionController extends VegaSlimmer {
    */
   registerSelectionRangeChangeObserver() {
     this.selectionRangeChangeObserver = new Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
-      this.selectedNodes.push(payload.node);
+      this.pendingRestoreSelectionNodes.push(payload.node);
     });
     ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
   }
+  /**
+   * Prepare the selection state to restore
+   */
+  prepareRestoreSelectionState() {
+    if (this.pendingRestoreSelectionNodes.length > 0) {
+      const startNode = this.pendingRestoreSelectionNodes[0];
+      const endNode = this.pendingRestoreSelectionNodes.length > 1
+        ? this.pendingRestoreSelectionNodes[this.pendingRestoreSelectionNodes.length - 1]
+        : startNode;
+      const { startOffset, endOffset, endContainer, startContainer } = this.currentRange;
+      const nodesInCurrentRange = stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+        stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement;
+      if (nodesInCurrentRange) {
+        this.currentRange = this.currentRange.updateRTERange({
+          startNode,
+          endNode,
+          startOffset,
+          endOffset,
+        });
+        this.selectionState = new RTESelectionState(this.currentRange);
+      }
+      else {
+        this.currentRange = this.currentRange.updateRTERange({
+          startNode,
+          endNode,
+          startOffset: 0,
+          endOffset: endNode.text.length,
+        });
+        this.selectionState = new RTESelectionState(this.currentRange);
+      }
+      this.pendingRestoreSelectionNodes = [];
+    }
+  }
 }
 SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
 __decorate([
@@ -290,6 +326,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "insertCompositionTextController", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "historyController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], SelectionController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/value-controller.js

@@ -14,6 +14,8 @@ import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { debounce } from '../../../../utils/timer';
 import { VegaRTEContent } from '../../dto/content-state';
 import { waitForComponentDidRender } from '../../../../helpers/common';
+import { RTEEditorState } from '../../dto/editor-state';
+import { RTESelectionState } from '../../dto/selection-state';
 /**
  * The value controller is responsible for updating the value of the rich text editor.
  */
@@ -64,8 +66,12 @@ export class ValueController extends VegaSlimmer {
    * Updates the value of the editor and restore the selection.
    *
    * @param {VegaRTEContent} newValue The new value to set.
+   * @param {boolean} recordHistory - Whether to record the change in history.
    */
-  async flushChanges(newValue) {
+  async flushChanges(newValue, recordHistory = true) {
+    if (recordHistory) {
+      this.historyController.registerHistory(new RTEEditorState(newValue, new RTESelectionState(this.selectionController.getCurrentRange())));
+    }
     this.value = newValue.clone();
     await waitForComponentDidRender(this.host);
   }
@@ -91,6 +97,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "historyController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "selectionController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-rich-text-editor/test/dto/content-state.test.js

@@ -2,6 +2,8 @@ import { VegaRTEContent } from '../../dto/content-state';
 import { RTETextBlock } from '../../dto/blocks/text-block';
 import { RTEImageBlock } from '../../dto/blocks/image-block';
 import { RTEListBlock } from '../../dto/blocks/list-block';
+import { BlockAnnotationTypeEnum } from '../../dto/annotations/block-annotation.abstract';
+import { NodeAnnotationTypeEnum } from '../../dto/annotations/node-annotation.abstract';
 describe('content state', () => {
   it('fromJSON should work as expect', () => {
     expect(() => VegaRTEContent.fromJSON([
@@ -125,6 +127,43 @@ describe('content state', () => {
     expect(clonedContentState).not.toBe(contentState);
     expect(clonedContentState).toEqual(contentState);
   });
+  it('should deep clone content state', () => {
+    const contentState = VegaRTEContent.fromJSON([
+      {
+        id: '1',
+        type: 'paragraph',
+        annotations: {
+          textStyle: 'paragraph',
+        },
+        nodes: [
+          { id: '1-1', type: 'text', text: 'This is a paragraph', annotations: { bold: true } },
+        ],
+      },
+    ]);
+    const clonedContentState = contentState.clone(true);
+    expect(clonedContentState).not.toBe(contentState);
+    expect(clonedContentState).toEqual(contentState);
+    const block = contentState.blocks[0];
+    const clonedBlock = clonedContentState.blocks[0];
+    expect(clonedBlock).toEqual(block);
+    expect(clonedBlock).not.toBe(block);
+    const node = block.nodes[0];
+    const clonedNode = clonedBlock.nodes[0];
+    expect(clonedNode).toEqual(node);
+    expect(clonedNode).not.toBe(node);
+    const blockAnnotations = block.annotationMap;
+    const clonedBlockAnnotations = clonedBlock.annotationMap;
+    expect(clonedBlockAnnotations).toEqual(blockAnnotations);
+    expect(clonedBlockAnnotations).not.toBe(blockAnnotations);
+    expect(clonedBlock.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE)).toEqual(block.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE));
+    expect(clonedBlock.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE)).not.toBe(block.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE));
+    const nodeAnnotations = node.annotationMap;
+    const clonedNodeAnnotations = clonedNode.annotationMap;
+    expect(clonedNodeAnnotations).toEqual(nodeAnnotations);
+    expect(clonedNodeAnnotations).not.toBe(nodeAnnotations);
+    expect(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual(node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+    expect(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).not.toBe(node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+  });
   it('the parent property should set as properly when create VegaRTEContent', () => {
     const contentState = VegaRTEContent.fromJSON([
       {
@@ -169,4 +208,81 @@ describe('content state', () => {
     expect(nestedListBlock.parent).toEqual(listItemBlock);
     expect(nestedListItemBlock.parent).toEqual(nestedListBlock);
   });
+  describe('findNodeById', () => {
+    let content;
+    beforeAll(() => {
+      content = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          nodes: [
+            { id: '1-1', type: 'text', text: 'This ' },
+            { id: '1-2', type: 'text', text: 'is a ' },
+            { id: '1-3', type: 'text', text: 'paragraph.' },
+          ],
+        },
+        {
+          id: '2',
+          type: 'image',
+          nodes: [{ id: '2-1', type: 'image', url: 'img.png' }],
+        },
+        {
+          id: '3',
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: '3-1',
+              type: 'list-item',
+              nodes: [{ id: '3-1-1', type: 'text', text: 'List item 1' }],
+              children: [
+                {
+                  id: '3-2',
+                  type: 'number-list',
+                  blocks: [
+                    {
+                      id: '3-2-1',
+                      type: 'list-item',
+                      nodes: [
+                        { id: '3-2-1-1', type: 'text', text: 'Nested list item' },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+    });
+    it('should find the node in text block', () => {
+      expect(content.findNodeById('1-2').toJSON()).toEqual({ id: '1-2', type: 'text', text: 'is a ' });
+    });
+    it('should find the node in image block', () => {
+      expect(content.findNodeById('2-1').toJSON()).toEqual({
+        id: '2-1',
+        type: 'image',
+        url: 'img.png',
+        annotations: {
+          size: 'md',
+        },
+      });
+    });
+    it('should find the node in list item', () => {
+      expect(content.findNodeById('3-1-1').toJSON()).toEqual({
+        id: '3-1-1',
+        type: 'text',
+        text: 'List item 1',
+      });
+    });
+    it('should find the node in nested list item', () => {
+      expect(content.findNodeById('3-2-1-1').toJSON()).toEqual({
+        id: '3-2-1-1',
+        type: 'text',
+        text: 'Nested list item',
+      });
+    });
+    it('should return null for non-existent node', () => {
+      expect(content.findNodeById('not-exist')).toBeNull();
+    });
+  });
 });

package/dist/collection/components/vega-rich-text-editor/test/dto/nodes/text-node.test.js

@@ -396,4 +396,16 @@ describe('text node', () => {
     textNode.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
     expect(textNode.toJSON()).toEqual({ id: '1', type: 'text', text: 'This is a text.' });
   });
+  it('should clone a text node with annotations correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new BoldAnnotationAction(true));
+    const clonedNode = textNode.clone();
+    expect(textNode).toEqual(clonedNode);
+    expect(textNode).not.toBe(clonedNode);
+    expect(textNode.annotationMap).toEqual(clonedNode.annotationMap);
+    expect(textNode.annotationMap).not.toBe(clonedNode.annotationMap);
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).not.toBe(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+  });
 });

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

@@ -43,6 +43,7 @@ import { InsertCompositionTextController } from './slimmers/controllers/insert-c
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
+import { HistoryController } from './slimmers/controllers/history-controller';
 /**
  * @vegaVersion 2.34.0
  */
@@ -95,6 +96,7 @@ export class VegaRichTextEditor {
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
     this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
+    this.historyController = new HistoryController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
@@ -689,3 +691,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "historyController", void 0);

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

@@ -63,6 +63,10 @@ export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
             { key: 'lg', text: this.translationSlimmer.t('Lg') },
           ], selected: this.size, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+              // The below line is covered in `history.spec#should register history, and undo/redo for image size change`
+              // Prevent handling vegaChange triggered by DOM ref reuse (e.g., undo/redo) when the image editor is not visible.
+              if (!this.selected)
+                return;
               const size = e.detail;
               this.size = size;
               this.changeEventEmitter.emit({

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

@@ -38,6 +38,7 @@ export class VegaRichTextImageEditor {
      *
      * @vegaVersion 2.34.0
      */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.size = 'md';
   }
   render() {
@@ -75,7 +76,7 @@ export class VegaRichTextImageEditor {
     },
     "size": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "VegaRichTextImageEditorSizeType",
         "resolved": "\"lg\" | \"md\" | \"sm\"",

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

@@ -30,11 +30,11 @@ export class VegaStepper {
       propertyRules: [
         {
           propertyName: 'min',
-          ruleFactory: (min) => new MinNumberRule({ minValue: min }),
+          ruleFactory: (min) => typeof min === 'number' ? new MinNumberRule({ minValue: min }) : null,
         },
         {
           propertyName: 'max',
-          ruleFactory: (max) => new MaxNumberRule({ maxValue: max }),
+          ruleFactory: (max) => typeof max === 'number' ? new MaxNumberRule({ maxValue: max }) : null,
         },
       ],
       defaultValue: 0,

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

@@ -52,15 +52,17 @@ export class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
       const primaryMargin = 48;
       const groupWidth = this.host.getBoundingClientRect().width;
       let tabGroupContainerWidth = this.variant === 'secondary' ? groupWidth : groupWidth - primaryMargin;
-      if (startIndex > 0) {
-        tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH + this.TAB_SIDE_BUTTON_AND_CONTENT_SPACE;
-      }
-      const showRightButton = values.length > 0 &&
-        values.slice(startIndex).reduce((prev, current) => prev + current) >
-          tabGroupContainerWidth &&
-        tabGroupContainerWidth > 0;
-      if (showRightButton) {
-        tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH;
+      if (this.overflow === 'menu') {
+        if (startIndex > 0) {
+          tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH + this.TAB_SIDE_BUTTON_AND_CONTENT_SPACE;
+        }
+        const showRightButton = values.length > 0 &&
+          values.slice(startIndex).reduce((prev, current) => prev + current) >
+            tabGroupContainerWidth &&
+          tabGroupContainerWidth > 0;
+        if (showRightButton) {
+          tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH;
+        }
       }
       return tabGroupContainerWidth;
     };
@@ -136,9 +138,14 @@ export class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
    */
   initTabPages() {
     if (this.tabItems) {
-      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);
+      if (this.overflow === 'scroll') {
+        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);
+      }
     }
   }
   /*
@@ -199,6 +206,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTabGroupPagesController.prototype, "variant", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupPagesController.prototype, "overflow", void 0);
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupSliderStateController' })
 ], VegaTabGroupPagesController.prototype, "sliderStateController", void 0);

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

@@ -23,10 +23,11 @@ export class VegaTabGroupRenderer extends VegaSlimmer {
           'more-tab': this.tabPages.length > 1,
           'tab-style-secondary': this.variant === 'secondary',
           'tab-style-primary': this.variant !== 'secondary',
+          'swipe-more-tabs': this.overflow === 'scroll',
         }, ref: (node) => (this.tabMenuContainer = node) },
-        this.directionButtonRenderer.render('left'),
+        this.overflow === 'menu' && this.directionButtonRenderer.render('left'),
         this.tabListRenderer.render(),
-        this.directionButtonRenderer.render('right')),
+        this.overflow === 'menu' && this.directionButtonRenderer.render('right')),
       h("div", { class: "horizontal-divider" }),
       this.contentRenderer.render()));
   }
@@ -37,6 +38,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTabGroupRenderer.prototype, "variant", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupRenderer.prototype, "overflow", void 0);
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupRenderer.prototype, "tabListRenderer", void 0);

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

@@ -21,10 +21,23 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("div", { class: "tab-list" },
-      h("vega-carousel", { showSlider: false, ref: (el) => (this.carouselDom = el) }, this.tabPages.length > 0 ? (this.tabPages.map((tabPage) => {
-        return h("div", null, this.renderTabList(tabPage));
-      })) : (h("div", null, this.renderTabList(this.tabItems))))));
+    return (h("div", { class: {
+        'tab-list': true,
+        'menu': this.overflow === 'menu',
+        'scroll': this.overflow === 'scroll',
+      } },
+      this.overflow === 'menu' && this.renderTabListInMenuOverflow(),
+      this.overflow === 'scroll' && this.renderTabListInScrollOverflow()));
+  }
+  renderTabListInMenuOverflow() {
+    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)))));
+  }
+  renderTabListInScrollOverflow() {
+    return (h("div", { class: "overflow-scroll" }, this.tabPages.map((tabPage, index) => {
+      return h("div", { key: index }, this.renderTabList(tabPage));
+    })));
   }
   renderTabList(showTabItems) {
     return (h("vega-flex", { gap: this.gap }, showTabItems.map((item) => {
@@ -106,6 +119,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "tabItems", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupTabListRenderer.prototype, "overflow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "positionRelativeTo", void 0);

package/dist/collection/components/vega-tab-group/vega-tab-group.css

@@ -15,6 +15,22 @@
   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;
 }

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

@@ -84,6 +84,12 @@ export class VegaTabGroup {
      * @vegaVersion 1.39.0
      */
     this.variant = 'primary';
+    /**
+     * Specifies the overflow navigation for many tab items within the tab group.
+     *
+     * @vegaVersion __VERSION__
+     */
+    this.overflow = 'menu';
   }
   /**
    * The below method is e2e-test covered in
@@ -283,6 +289,32 @@ export class VegaTabGroup {
       "attribute": "variant",
       "reflect": false,
       "defaultValue": "'primary'"
+    },
+    "overflow": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TabGroupOverflowType",
+        "resolved": "\"menu\" | \"scroll\"",
+        "references": {
+          "TabGroupOverflowType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "__VERSION__"
+          }],
+        "text": "Specifies the overflow navigation for many tab items within the tab group."
+      },
+      "attribute": "overflow",
+      "reflect": false,
+      "defaultValue": "'menu'"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-toggle-switch/vega-toggle-switch.js

@@ -45,6 +45,7 @@ export class VegaToggleSwitch {
     this.checked = false;
     /**
      * The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked.
+     * This property is included for form control compatibility and can be used interchangeably with the checked property.
      *
      * @vegaVersion 2.25.0
      */
@@ -125,7 +126,12 @@ export class VegaToggleSwitch {
     methodPlaceholder();
   }
   componentWillLoad() {
-    this.value = this.checked;
+    if (!this.checked && this.value === true) {
+      this.checked = true;
+    }
+    else {
+      this.value = this.checked;
+    }
   }
   render() {
     let divContainerCss = this.checked
@@ -189,7 +195,7 @@ export class VegaToggleSwitch {
             "name": "vegaVersion",
             "text": "2.25.0"
           }],
-        "text": "The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked."
+        "text": "The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked.\nThis property is included for form control compatibility and can be used interchangeably with the checked property."
       },
       "attribute": "value",
       "reflect": true,

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -34,6 +34,8 @@ export const VegaInputSelectRenderPrefixIconInternalOverridden = new VegaInterna
 export const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');
 export const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLinkClick');
 export const VegaInternalLeftNavGroupExpand = new VegaInternalEventID('leftNavGroupExpand');
+export const VegaInternalLeftNavLinkSelected = new VegaInternalEventID('leftNavLinkSelected');
+export const VegaInternalInitializeLeftNavLinkSelected = new VegaInternalEventID('initializeLeftNavLinkSelected');
 export const VegaInternalDropdownUpdateTarget = new VegaInternalEventID('dropdownUpdateTarget');
 export const VegaInternalRichTextEditorFlushChanges = new VegaInternalEventID('richTextEditorFlushChanges');
 export const VegaInternalRichTextEditorSelectionRangeChange = new VegaInternalEventID('richTextEditorSelectionRangeChange');