@globalpayments/vega 2.36.0 → 2.37.0

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

@@ -4,18 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
-import { DefaultModalSize } from '../../constants/ui';
-import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
-import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
-import { DeviceType } from '../../types/ui.type';
-import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { Component, Element, Event, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { findParent, getDeviceType } from '../../utils/ui';
-import { formatAndValidResponsiveToken } from '../../utils/design-token';
-import InternalVegaZIndexManager from '../../helpers/zindex/internal-vega-z-index-manager';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
-import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaOpen, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -25,31 +16,35 @@ import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/depreca
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaModalRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-modal/runtime-metrics-payload-definition';
 import { VegaNestedModalController } from './slimmers/controllers/vega-nested-modal-controller';
+import { VegaModalRenderer } from './slimmers/renderers/vega-modal-renderer';
+import { VegaModalLayoutController } from './slimmers/controllers/vega-modal-layout-controller';
+import { VegaModalMobileController } from './slimmers/controllers/vega-modal-mobile-controller';
+import { VegaModalScrollController } from './slimmers/controllers/vega-modal-scroll-controller';
+import { VegaModalOpenStateController } from './slimmers/controllers/vega-modal-open-state-controller';
+import { VegaModalBackdropController } from './slimmers/controllers/vega-modal-backdrop-controller';
+import { VegaModalOpenedModalStackController } from './slimmers/controllers/vega-modal-opened-modal-stack-controller';
+import { VegaModalZIndexController } from './slimmers/controllers/vega-modal-z-index-controller';
 /**
  * @vegaVersion 1.0.6
  */
 export class VegaModal {
   constructor() {
     this.globalSlimmers = {};
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-resize-e2e}
-     */
-    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
-      callback: /* istanbul ignore next */ () => {
-        this.setModalWidth('update');
-        this.setContentMaxHeight();
-      },
-      isDeferred: true,
-    });
     this.nestedModalController = new VegaNestedModalController();
+    this.openStateController = new VegaModalOpenStateController();
+    this.mobileController = new VegaModalMobileController();
+    this.scrollController = new VegaModalScrollController();
+    this.layoutController = new VegaModalLayoutController();
+    this.backdropController = new VegaModalBackdropController();
+    this.openedModalStackController = new VegaModalOpenedModalStackController();
+    this.zIndexController = new VegaModalZIndexController();
+    this.renderer = new VegaModalRenderer();
     this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
     this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
-    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
+    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.renderer.getModalContainerRef());
     this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(mainContentStyle);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
-    this.isModalWidthSet = false;
     /**
      * Provides options for controlling the behavior of the backdrop.
      * - `default`:
@@ -135,18 +130,6 @@ export class VegaModal {
      * @vegaVersion 1.22.0
      */
     this.handleClose = undefined;
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-toggle-interactive-e2e}
-     */
-    /* istanbul ignore next */
-    this.closeModal = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!this.handleClose || this.handleClose()) {
-        this.open = false;
-      }
-    };
   }
   /**
    * The below method is e2e-test covered in
@@ -155,31 +138,14 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   watchSize() {
-    this.setModalWidth('update');
+    methodPlaceholder();
   }
   watchOpen() {
-    this.toggle();
+    methodPlaceholder();
   }
   disconnectedCallback() {
     this.open = false;
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-resize-e2e}
-   */
-  /* istanbul ignore next */
-  componentDidLoad() {
-    if (this.open) {
-      this.toggle();
-    }
-    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
-      this.disableBackdropTouchMove();
-    }
-    if (this.isContentScrollable) {
-      this.listenContentScroll();
-    }
-    this.setContentMaxHeight();
-  }
   /**
    * Clicking on a non-static current modal should close this modal, not other modals.
    * The below method is e2e-test covered in
@@ -187,19 +153,7 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   listenDataTarget(e) {
-    /*
-     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
-     */
-    const target = e.composedPath()[0];
-    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
-      this.open = false;
-    }
-    if (this.host.id &&
-      (target.getAttribute('data-target') === this.host.id ||
-        findParent(target, `[data-target=${this.host.id}]`))) {
-      e.preventDefault();
-      this.open = true;
-    }
+    methodPlaceholder(e);
   }
   /**
    * The below method is e2e-test covered in
@@ -207,11 +161,7 @@ export class VegaModal {
    */
   /* istanbul ignore next */
   listenDataDismiss(e) {
-    const target = e.target.closest(`[data-dismiss='modal']`);
-    if (target) {
-      e.preventDefault();
-      this.open = false;
-    }
+    methodPlaceholder(e);
   }
   /**
    * Invoke this method to show or hide the modal.
@@ -237,265 +187,7 @@ export class VegaModal {
     }
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: {
-        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
-        'animation': this.animation,
-      } },
-      h("div", { class: "modal-dialog" }, this.renderContainer())), this.host);
-  }
-  renderContainer() {
-    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
-    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
-      this.renderHeader(padding),
-      this.renderContent(padding),
-      this.renderFooter(padding)));
-  }
-  renderHeader(padding) {
-    return (h("div", { class: {
-        'vega-modal-header': true,
-        'vega-modal-header-with-title': this.hasModalTitle(),
-        'vega-modal-header-with-icon': this.showCloseButton,
-        'vega-modal-header-with-content-scroll': this.isContentScrollable(),
-        [padding]: true,
-      } },
-      this.renderTitle(),
-      this.showCloseButton && this.renderCloseBtn()));
-  }
-  renderContent(padding) {
-    return (h("div", { class: {
-        'vega-modal-content': true,
-        'vega-modal-content-with-scroll': this.isContentScrollable(),
-        [padding]: true,
-      }, ref: (e) => (this.modalContent = e) },
-      h(Fragment, null,
-        h("slot", null),
-        h("slot", { name: "content" }),
-        h("slot", { name: "modal-content" }))));
-  }
-  renderFooter(padding) {
-    return (h("div", { class: {
-        'vega-modal-footer': true,
-        'vega-modal-footer-with-slot': this.hasModalFooter(),
-        'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
-        [padding]: true,
-      }, ref: (e) => (this.modalFooter = e) },
-      h(Fragment, null,
-        h("slot", { name: "footer" }),
-        h("slot", { name: "modal-footer" }))));
-  }
-  renderTitle() {
-    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null,
-      h("slot", { name: "title" }),
-      h("slot", { name: "modal-title" })))));
-  }
-  renderCloseBtn() {
-    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.closeModal, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("vega-icon", { icon: "close", size: "size-16" })));
-  }
-  hasModalFooter() {
-    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
-      this.host.querySelector(`[slot='footer']`) !== null);
-  }
-  isContentScrollable() {
-    return Boolean(this.contentMaxHeight);
-  }
-  hasModalTitle() {
-    return (Boolean(this.modalTitle) ||
-      this.host.querySelector(`[slot='modal-title']`) !== null ||
-      this.host.querySelector(`[slot='title']`) !== null);
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-content-scroll-to-bottom}
-   */
-  /* istanbul ignore next */
-  listenContentScroll() {
-    this.modalContent.addEventListener('scroll', () => {
-      if (this.modalContent.scrollHeight - this.modalContent.scrollTop <=
-        this.modalContent.clientHeight) {
-        this.modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-      else {
-        this.modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-    });
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  toggle() {
-    this.open ? this.pushToModalStack() : this.deleteFromModalStack();
-    this.updateDocumentRootOverflow();
-    this.setBackdrop();
-    this.setModalZIndex();
-    this.setModalWidth();
-    this.emitEvent();
-    this.setModalVisibility();
-  }
-  setModalZIndex() {
-    if (this.open) {
-      InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.setZIndex(this.host, 'base');
-    }
-    else {
-      InternalVegaZIndexManager.removeZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
-      const length = this.getVisibleModalLength();
-      if (length > 0) {
-        InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-        InternalVegaZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
-      }
-      this.removeBackdropWhileNoModalShow();
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-default-e2e}
-   * @see{module:vega-modal-size-number-e2e}
-   * @see{module:vega-modal-size-responsive-e2e}
-   * @see{module:vega-modal-resize-e2e}
-   * While call toggle method for modal show or hide, it will call this method.
-   * but we should really update the modal width while first initialize modal, window resize and size changed.
-   * So to avoid repeated calls by toggle, we add a flag as parameter,
-   */
-  /* istanbul ignore next */
-  setModalWidth(flag = 'initialize') {
-    if (this.isModalWidthSet && flag === 'initialize')
-      return;
-    const size = this.getModalSize();
-    const dialog = this.host.shadowRoot.querySelector('.modal-dialog');
-    typeof size === 'number'
-      ? (dialog.style['width'] = `${size}px`)
-      : (dialog.style['width'] = `${size}`);
-    this.isModalWidthSet = true;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-content-max-height-responsive-e2e}
-   */
-  /* istanbul ignore next */
-  setContentMaxHeight() {
-    const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
-    if (maxHeight) {
-      this.modalContent.style.maxHeight = `${maxHeight}px`;
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  setModalVisibility() {
-    this.host.style['display'] = this.open ? 'flex' : 'none';
-  }
-  emitEvent() {
-    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-default-e2e}
-   * @see{module:vega-modal-size-number-e2e}
-   * @see{module:vega-modal-size-responsive-e2e}
-   * @see{module:vega-modal-resize-e2e}
-   * @see{module:vega-modal-default-width-S-320-e2e}
-   * @see{module:vega-modal-default-width-S-600-e2e}
-   */
-  /* istanbul ignore next */
-  getModalSize() {
-    const size = ResponsiveFormatFacade.format(this.size, 'size');
-    if (size) {
-      return size;
-    }
-    else {
-      return DefaultModalSize[getCurrentBreakpoint()];
-    }
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-backdrop-color-default-e2e}
-   * @see{module:vega-modal-backdrop-color-semi-e2e}
-   * @see{module:vega-modal-backdrop-color-none-e2e}
-   * @see{module:vega-modal-default-e2e}
-   */
-  /* istanbul ignore next */
-  setBackdrop() {
-    if (this.backdrop === 'none')
-      return;
-    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
-    if (!backdrop) {
-      backdrop = document.createElement('vega-backdrop');
-      backdrop.classList.add('modal-backdrop');
-      backdrop.color = VegaModal.backdropColorMap[this.backdropColor];
-      backdrop.visible = true;
-      document.querySelector('body').append(backdrop);
-    }
-    this.backdropRef = backdrop;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-disconnected-callback-e2e }
-   */
-  /* istanbul ignore next */
-  removeBackdropWhileNoModalShow() {
-    if (this.getVisibleModalLength() === 0) {
-      this.backdropRef && this.backdropRef.remove();
-    }
-  }
-  //TODO: Record the nest modal by an array.
-  /**
-   * Get visible modal length
-   */
-  getVisibleModalLength() {
-    return VegaModal.openedModalStack.length;
-  }
-  /**
-   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
-   */
-  updateDocumentRootOverflow() {
-    if (this.backdrop === 'none')
-      return;
-    if (this.open && this.getVisibleModalLength() === 1) {
-      document.body.classList.add('disable-scroll-in-desktop');
-    }
-    else if (!this.open && this.getVisibleModalLength() === 0) {
-      document.body.classList.remove('disable-scroll-in-desktop');
-    }
-  }
-  pushToModalStack() {
-    VegaModal.openedModalStack.push(this.host);
-  }
-  deleteFromModalStack() {
-    VegaModal.openedModalStack = VegaModal.openedModalStack.filter((modal) => modal !== this.host);
-  }
-  /**
-   * There are two situations in modal scrolling:
-   * 1. Scrolls the non-modal content part in vega-modal (e.g. backdrop, modal dialog).
-   * 2. Scrolls the modal content (if scrollable) in vega-modal.
-   * On the mobile side, we need to prevent scrolling in the area outside the modal content.
-   *
-   * TODO: If the modal content is too long, a scroll bar will appear and the body cannot be scrolled,
-   * but on the IOS side, the body content of the scrolling modal will occasionally appear scrolling.
-   * This problem is reproduced on the following websites, and there is no solution yet.
-   * https://v5.bootcss.com/docs/components/modal/
-   * https://mui.com/material-ui/react-dialog/
-   */
-  /* istanbul ignore next */
-  disableBackdropTouchMove() {
-    this.host.addEventListener('touchstart', (e) => {
-      this.touchStartY = e.targetTouches[0].pageY;
-    }, { capture: true });
-    this.host.addEventListener('touchmove', (e) => {
-      const isScrolledTop = this.host.scrollTop <= 0;
-      const isScrolledBottom = this.host.scrollHeight - this.host.scrollTop <= this.host.clientHeight;
-      const isToBottomMove = this.touchStartY < e.targetTouches[0].pageY;
-      const isToTopMove = this.touchStartY > e.targetTouches[0].pageY;
-      if (e.target === this.host &&
-        ((isScrolledTop && isToBottomMove) || (isScrolledBottom && isToTopMove))) {
-        e.preventDefault();
-      }
-    }, { capture: true });
+    return sanitizeVegaComponent(this.renderer.render(), this.host);
   }
   static get is() { return "vega-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -919,21 +611,36 @@ export class VegaModal {
       "passive": false
     }]; }
 }
-VegaModal.openedModalStack = [];
-VegaModal.backdropColorMap = {
-  default: 'bg-backdrop-modal',
-  semi: 'bg-backdrop-popover',
-  none: 'bg-transparent',
-};
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaModal.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
+], VegaModal.prototype, "nestedModalController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaModal.prototype, "nestedModalController", void 0);
+], VegaModal.prototype, "openStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "mobileController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "scrollController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "layoutController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "backdropController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openedModalStackController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "zIndexController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "renderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "openEventEmitter", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-link/slimmers/renderers/vega-left-nav-link-renderer.js

@@ -19,7 +19,7 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
      */
     /* istanbul ignore next */
     this.handleClick = () => {
-      if (!this.selected) {
+      if (!this.selected && !this.customSelectionEnabled) {
         this.controller.setSelected(true);
       }
       this.menuClickEventEmitter.emit();
@@ -73,3 +73,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavLinkRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavLinkRenderer.prototype, "customSelectionEnabled", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-link/vega-left-nav-link.js

@@ -29,6 +29,12 @@ export class VegaLeftNavLink {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.selected = false;
+    /**
+     * Specifies whether the link's selected state can be customized. When enabled, it prevents the default automatic selection on click, allowing users to manually control the link’s selection behavior.
+     *
+     * @vegaVersion 2.37.0
+     */
+    this.customSelectionEnabled = false;
   }
   render() {
     slotPlaceholder(h("slot", null));
@@ -84,6 +90,27 @@ export class VegaLeftNavLink {
       "reflect": true,
       "defaultValue": "false"
     },
+    "customSelectionEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.37.0"
+          }],
+        "text": "Specifies whether the link's selected state can be customized. When enabled, it prevents the default automatic selection on click, allowing users to manually control the link\u2019s selection behavior."
+      },
+      "attribute": "custom-selection-enabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "url": {
       "type": "string",
       "mutable": false,

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

@@ -306,7 +306,7 @@ export class VegaPagination {
             "name": "vegaVersion",
             "text": "2.36.0"
           }],
-        "text": "Specifies the properties of the vega-dropdown component\n   used to configure the dropdown for the\n   page size selector in pagination."
+        "text": "Specifies the properties of the `vega-dropdown` component\n   used to configure the dropdown for the\n   page size selector in pagination."
       }
     }
   }; }

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

@@ -267,7 +267,7 @@ export class VegaRadioGroup {
       "mutable": false,
       "complexType": {
         "original": "VegaFlexProps",
-        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<GapType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
+        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; gap?: ResponsiveType<GapType>; alignItems?: ResponsiveType<FlexAlignItemType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
         "references": {
           "VegaFlexProps": {
             "location": "import",

package/dist/collection/components/vega-radio/vega-radio.css

@@ -13,6 +13,9 @@
   position: relative;
   display: inline-flex;
   gap: 8px;
+  cursor: not-allowed;
+}
+.vega-radio-container:not(.vega-radio-disabled) {
   cursor: pointer;
 }
 

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

@@ -241,7 +241,7 @@ export class VegaSelectionChip {
       "mutable": false,
       "complexType": {
         "original": "VegaSelectionChipTooltipProps",
-        "resolved": "{ alignment?: ElementAppenderAlignmentType; maxWidth?: ResponsiveType<SizeType>; minWidth?: ResponsiveType<SizeType>; placement?: ElementAppenderPlacementType; positionRelativeTo?: string; size?: ResponsiveType<SizeType>; trigger?: \"click\" | \"hover\" | \"none\"; content?: string; disableInteractive?: boolean; text?: string; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; alignment?: ElementAppenderAlignmentType; placement?: ElementAppenderPlacementType; }",
         "references": {
           "VegaSelectionChipTooltipProps": {
             "location": "import",
@@ -256,7 +256,7 @@ export class VegaSelectionChip {
             "name": "vegaVersion",
             "text": "2.22.0"
           }],
-        "text": "Specifies the tooltip displayed for the selection chip\n   when it is in a disabled state.\nThis provides additional context or information about the chip's\n   functionality or reason for being disabled."
+        "text": "Specifies the `vega-tooltip` displayed for the selection chip\n   when it is in a disabled state.\nThis provides additional context or information about the chip's\n   functionality or reason for being disabled."
       }
     },
     "swatchColor": {

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

@@ -34,12 +34,12 @@ export class VegaTabGroupCloseButtonRenderer extends VegaSlimmer {
       e.stopPropagation();
     };
   }
-  render() {
+  render(item) {
     const vegaCloseIconCss = this.showCloseButton
       ? 'vega-close-icon'
       : 'vega-close-icon vega-hidden';
     return (this.showCloseButton &&
-      this.tabItems.length > 1 && (h("div", { class: vegaCloseIconCss, onClick: this.onCloseTab, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), "aria-label": 'Close Button' },
+      this.tabItems.length > 1 && (h("div", { class: vegaCloseIconCss, onClick: this.onCloseTab, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), "aria-label": 'Close Button' },
       h("vega-icon", { icon: "close", size: "size-12" }))));
   }
 }

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

@@ -45,6 +45,7 @@ export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       source.push({
         key: tabItem.dataTarget,
         label: tabItem.label,
+        disabled: tabItem.disabled,
       });
     });
     const translocation = {

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

@@ -34,6 +34,7 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
           'last-page': this.currentPageIndex + 1 === this.tabPages.length,
           'vega-flex-shrink-0': true,
           'v-min-w-min': true,
+          'disabled': Boolean(item.disabled),
         }, "data-target": item.dataTarget, key: item.dataTarget },
         h("div", { class: "vega-tab-container" },
           h("div", { class: {
@@ -41,11 +42,11 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
               'vega-close-icon-space': this.showCloseButton,
             }, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
             this.renderPrefixIconDom(item),
             this.renderTabLabelDom(item),
             this.renderCounterBadgeDom(item)),
-          this.closeButtonRenderer.render())));
+          this.closeButtonRenderer.render(item))));
     })));
   }
   renderPrefixIconDom(item) {

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

@@ -140,6 +140,15 @@
   color: rgba(var(--v-text-inverted-secondary, 188, 186, 213, 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%;

package/dist/collection/components/vega-table/internal/vega-table-scrollable-container.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { isNonNullable } from '../../../types/type-guard';
-export const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
+export const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, children) => {
   const { maxHeight } = scrollConfig;
   const isVerticalScrollable = isNonNullable(maxHeight);
   const handleVerticalScroll = (e) => {
@@ -14,6 +14,7 @@ export const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, childre
     if (target.scrollTop > 0 && !target.classList.contains('scrolled')) {
       target.classList.add('scrolled');
     }
+    onScroll(e);
   };
   return (h("div", { class: "vega-table-scrollable-container", style: {
       maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,