@heartlandone/vega 2.94.0 → 2.96.0

package/dist/collection/components/vega-combo-box/vega-combo-box.js

@@ -12,7 +12,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from '
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaCreate, VegaSearch } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaCreate, VegaDropdownSelectAllClick, VegaSearch, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
@@ -53,11 +53,17 @@ export class VegaComboBox {
     this.changeEventEmit = createEventEmitSlimmer(VegaComboBox, VegaChange);
     this.createEventEmit = createEventEmitSlimmer(VegaComboBox, VegaCreate);
     this.searchEventEmit = createEventEmitSlimmer(VegaComboBox, VegaSearch);
+    this.selectAllClickEventEmit = createEventEmitSlimmer(VegaComboBox, VegaDropdownSelectAllClick);
     this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaCreate, VegaSearch], () => this.dropdownRenderer.getDropdownRef(), {
       customPreventHandle: (e) => {
         e.stopImmediatePropagation();
       },
     });
+    this.dropdownEventPreventSelectAllClick = new ChildNodesEventPreventSlimmer([VegaDropdownSelectAllClick], () => this.dropdownRenderer.getDropdownRef(), {
+      customPreventHandle: (e) => {
+        e.stopPropagation();
+      },
+    });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaComboBoxRuntimeMetricsPayloadDefinition);
     /**
      * Specifies the label or title for the combo box.
@@ -681,6 +687,45 @@ export class VegaComboBox {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaDropdownSelectAllClick",
+      "name": "vegaDropdownSelectAllClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.95.0"
+          }],
+        "text": "An event emitter only fired when the Select All checkbox in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownSelectAllClick",
+      "name": "dropdownSelectAllClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.95.0"
+          }],
+        "text": "An event emitter only fired when the Select All checkbox in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "close": {
@@ -776,9 +821,15 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaComboBox.prototype, "searchEventEmit", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaComboBox.prototype, "selectAllClickEventEmit", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaComboBox.prototype, "dropdownEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaComboBox.prototype, "dropdownEventPreventSelectAllClick", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaComboBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -289,7 +289,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "Partial<VegaComponentInterface<HTMLVegaModalElement>>",
-        "resolved": "{ size?: ResponsiveType<SizeType>; margin?: ResponsiveType<MarginType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; corners?: ResponsiveType<CornersType>; handleClose?: () => boolean; height?: ResponsiveType<string | number>; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType> | VegaModalSectionPadding; showCloseButton?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; margin?: ResponsiveType<MarginType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; corners?: ResponsiveType<CornersType>; handleClose?: () => boolean; height?: ResponsiveType<string | number>; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType> | VegaModalSectionPadding; showCloseButton?: boolean; width?: ResponsiveType<SizeType>; }",
         "references": {
           "Partial": {
             "location": "global"

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-render-mode-controller.js

@@ -10,10 +10,6 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
  * the render mode of a dropdown component based on the presence of a specific element in the DOM.
  */
 export class VegaDropdownRenderModeController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.renderMode = 'SOURCE';
-  }
   /**
    * The `connectedCallback` function is called before the component is rendered and is used to set the
    * render mode.
@@ -34,10 +30,12 @@ export class VegaDropdownRenderModeController extends VegaSlimmer {
    * While component first connected, the items slot is in the host.
    * While component connected after the first time, the items slot will apppend to vega-dropdown-content-box, so the parent changed.
    *   code: VegaDropdownRenderer.appendItemsToContentBox
+   *
    */
   setRenderMode() {
-    const parent = this.renderer.getDropdownContentBoxRef() || this.host;
-    this.renderMode = parent.querySelector('[slot=items]') ? 'SLOT' : 'SOURCE';
+    const contentBox = this.renderer.getDropdownContentBoxRef();
+    const hasItemsSlot = Boolean((contentBox === null || contentBox === void 0 ? void 0 : contentBox.querySelector('[slot=items]')) || this.host.querySelector('[slot=items]'));
+    this.renderMode = hasItemsSlot ? 'SLOT' : 'SOURCE';
   }
 }
 __decorate([
@@ -46,6 +44,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDropdownRenderModeController.prototype, "renderMode", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownRenderModeController.prototype, "connectedCallback", null);

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

@@ -77,6 +77,7 @@ export class VegaDropdown {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDropdownRuntimeMetricsPayloadDefinition);
     this.searchString = null;
     this.isDropdownShow = false;
+    this.renderMode = 'SOURCE';
     /**
      * Specifies the trigger mode for the dropdown.
      *   hover: The dropdown is shown/hidden on hover, and listens for global area clicks.
@@ -233,10 +234,33 @@ export class VegaDropdown {
      */
     this.isLazyLoading = false;
     /**
-     * Determines whether the dropdown position is calculated relative to the screen.
+     * Determines whether the dropdown uses viewport-based positioning (`position: fixed`) or container-based positioning (`position: absolute`).
      *
-     * @VegaWarning - It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
-     * 			    - Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
+     * **Technical Implementation:**
+     *
+     * - When `false` (default): The dropdown content box renders with `position: absolute` and its coordinates are calculated relative to the nearest positioned ancestor. Combined with `positionRelativeTo`, you can specify which ancestor to measure from, which ensures the menu scrolls together with that ancestor.
+     *
+     * - When `true`: The dropdown content box renders with `position: fixed` and its coordinates are calculated from the viewport. The menu is visually anchored to the trigger element via JavaScript and moves with it on scroll, even though it is not part of the document flow. `positionRelativeTo` has no effect in this mode.
+     *
+     * When to set `isScreenPosition` to `true`:
+     *
+     * - Dropdowns that need to break out of container constraints (non-Shadow-DOM only):
+     *    When you want the dropdown to appear outside its container's boundaries (e.g., to avoid being clipped by a parent's
+     *    `overflow: hidden` or small dimensions), viewport-based positioning allows it to render freely.
+     *    This only works for regular (non-Shadow-DOM) containers. Shadow DOM boundaries cannot be escaped with `position: fixed`.
+     *
+     * - Dropdowns in fixed or sticky positioned containers:
+     *    When the dropdown trigger is inside a fixed or sticky positioned container, viewport-based positioning ensures correct alignment.
+     *
+     * When to keep `isScreenPosition` as `false` (default):
+     *
+     * - Simple layouts where the dropdown and its trigger are not inside scrollable containers
+     * - When you want the dropdown to scroll naturally with its container (using `position: absolute`)
+     * - When you need `positionRelativeTo` to control which ancestor the dropdown is positioned relative to
+     * - When `matchContainerHeight` is needed (this property is overridden when `isScreenPosition` is `true`)
+     *
+     * @VegaWarning - Setting this to `true` override the `positionRelativeTo` and `matchContainerHeight` properties, rendering them ineffective.
+     * 			    - Currently, when set to `true`, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
      * @vegaVersion 2.36.0
      */
     this.isScreenPosition = false;
@@ -380,6 +404,9 @@ export class VegaDropdown {
   async syncTemplateData() {
     methodPlaceholder();
   }
+  /**
+   * Render the dropdown component.
+   */
   render() {
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
@@ -978,12 +1005,12 @@ export class VegaDropdown {
       "docs": {
         "tags": [{
             "name": "VegaWarning",
-            "text": "- It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.\n- Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
+            "text": "- Setting this to `true` override the `positionRelativeTo` and `matchContainerHeight` properties, rendering them ineffective.\n- Currently, when set to `true`, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
           }, {
             "name": "vegaVersion",
             "text": "2.36.0"
           }],
-        "text": "Determines whether the dropdown position is calculated relative to the screen."
+        "text": "Determines whether the dropdown uses viewport-based positioning (`position: fixed`) or container-based positioning (`position: absolute`).\n\n**Technical Implementation:**\n\n- When `false` (default): The dropdown content box renders with `position: absolute` and its coordinates are calculated relative to the nearest positioned ancestor. Combined with `positionRelativeTo`, you can specify which ancestor to measure from, which ensures the menu scrolls together with that ancestor.\n\n- When `true`: The dropdown content box renders with `position: fixed` and its coordinates are calculated from the viewport. The menu is visually anchored to the trigger element via JavaScript and moves with it on scroll, even though it is not part of the document flow. `positionRelativeTo` has no effect in this mode.\n\nWhen to set `isScreenPosition` to `true`:\n\n- Dropdowns that need to break out of container constraints (non-Shadow-DOM only):\n   When you want the dropdown to appear outside its container's boundaries (e.g., to avoid being clipped by a parent's\n   `overflow: hidden` or small dimensions), viewport-based positioning allows it to render freely.\n   This only works for regular (non-Shadow-DOM) containers. Shadow DOM boundaries cannot be escaped with `position: fixed`.\n\n- Dropdowns in fixed or sticky positioned containers:\n   When the dropdown trigger is inside a fixed or sticky positioned container, viewport-based positioning ensures correct alignment.\n\nWhen to keep `isScreenPosition` as `false` (default):\n\n- Simple layouts where the dropdown and its trigger are not inside scrollable containers\n- When you want the dropdown to scroll naturally with its container (using `position: absolute`)\n- When you need `positionRelativeTo` to control which ancestor the dropdown is positioned relative to\n- When `matchContainerHeight` is needed (this property is overridden when `isScreenPosition` is `true`)"
       },
       "attribute": "is-screen-position",
       "reflect": false,
@@ -1098,7 +1125,8 @@ export class VegaDropdown {
   static get states() { return {
     "searchString": {},
     "isDropdownShow": {},
-    "sourceForRender": {}
+    "sourceForRender": {},
+    "renderMode": {}
   }; }
   static get events() { return [{
       "method": "vegaDropdownClick",
@@ -1150,7 +1178,7 @@ export class VegaDropdown {
             "name": "vegaVersion",
             "text": "2.93.0"
           }],
-        "text": "An event emitter notifying that the Select All option has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+        "text": "An event emitter only fired when the Select All checkbox has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
       },
       "complexType": {
         "original": "boolean",
@@ -1171,7 +1199,7 @@ export class VegaDropdown {
             "name": "vegaVersion",
             "text": "2.93.0"
           }],
-        "text": "An event emitter notifying that the Select All option has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+        "text": "An event emitter only fired when the Select All checkbox has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
       },
       "complexType": {
         "original": "boolean",

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-dropdown-controller.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, VegaSearchTrigger, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownSelectAllClick, VegaDropdownShow, VegaReset, VegaSearchTrigger, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /** The `VegaInputSelectDropdownController` class is a TypeScript React component that controls the behavior of a dropdown select input. */
 export class VegaInputSelectDropdownController extends VegaSlimmer {
@@ -44,6 +44,10 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaSearchTrigger, (payload) => {
       this.searchTriggerEventEmitter.emit(payload.detail);
     });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownSelectAllClick, async (payload) => {
+      this.vegaInputSelectValueController.setValue(await payload.host.getSelection());
+      this.selectAllClickEventEmitter.emit(payload.detail);
+    });
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaInternalDropdownTemplateItemsChange, 
     /*
      * The below method is e2e-test covered in
@@ -92,6 +96,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "hideEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "vegaDropdownProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "selectType", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "selectAllClickEventEmitter", void 0);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-items-slot-controler.js

@@ -14,7 +14,12 @@ import { TagNameMutationFilter } from '../../../../helpers/slimmers/mutation-obs
 export class VegaInputSelectItemsSlotController extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    /**
+     * Observes the current template items container before and after relocation into the dropdown.
+     */
     this.mutationObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.getItemsContainer() || this.host,
       mutationFilter: TagNameMutationFilter('VEGA-DROPDOWN-ITEM'),
       options: {
         childList: true,
@@ -24,6 +29,7 @@ export class VegaInputSelectItemsSlotController extends VegaSlimmer {
       /*
        * The below method is e2e-test covered in
        * @see{module:vega-input-select-template-slot-change-e2e}
+       * @see{module:vega-input-select-template-select-all-e2e}
        */
       /* istanbul ignore next */
       // eslint-disable-next-line jsdoc/require-jsdoc
@@ -40,13 +46,28 @@ export class VegaInputSelectItemsSlotController extends VegaSlimmer {
    * The function appends host items to a dropdown element.
    */
   appendHostItemsToDropdown() {
-    const items = this.host.querySelector('[slot=items]');
+    const items = this.getItemsContainer();
     const itemsSlotRef = this.vegaInputSelectDropdownRenderer.getItemsSlotRef();
+    const dropdownRef = this.vegaInputSelectDropdownRenderer.getDropdownRef();
     if (items && itemsSlotRef) {
       itemsSlotRef.remove();
-      this.vegaInputSelectDropdownRenderer.getDropdownRef().append(items);
+      dropdownRef.append(items);
+    }
+    if (itemsSlotRef) {
+      void dropdownRef.syncTemplateData();
     }
   }
+  /**
+   * Gets the template items container from host before relocation,
+   * or from dropdown after it has been moved.
+   *
+   * @returns {Nullable<HTMLElement>} The current template items container, if present.
+   */
+  getItemsContainer() {
+    const dropdownRef = this.vegaInputSelectDropdownRenderer.getDropdownRef();
+    return (this.host.querySelector('[slot=items]') ||
+      (dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.querySelector('[slot=items]')));
+  }
 }
 __decorate([
   InjectVegaSlimmer()

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -94,6 +94,10 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       return Object.assign({ placement: 'bottom' }, this.selectedLabelTooltipProps);
     };
   }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-select-allow-select-all-dynamic-e2e}
+   */
   watchVegaDropdownProps() {
     if (this.vegaDropdownProps && this.vegaDropdownProps.preserveValueIfNotInSource !== undefined) {
       this.dropdown.preserveValueIfNotInSource = this.vegaDropdownProps.preserveValueIfNotInSource;

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -17,7 +17,7 @@ import { VegaInputSelectDropdownRenderer } from './slimmers/renderers/vega-input
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaHide, VegaLabelButtonClick, VegaSearch, VegaSearchTrigger, VegaShow, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaDropdownSelectAllClick, VegaHide, VegaLabelButtonClick, VegaSearch, VegaSearchTrigger, VegaShow, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaInputSelectLazyLoadController } from './slimmers/controllers/vega-input-select-lazy-load-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
@@ -70,7 +70,13 @@ export class VegaInputSelect {
     this.showEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaShow);
     this.hideEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaHide);
     this.labelButtonClickEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaLabelButtonClick);
+    this.selectAllClickEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaDropdownSelectAllClick);
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaSearch, VegaSearchTrigger, VegaShow, VegaHide], () => this.host, true);
+    this.dropdownEventPreventSelectAllClick = new ChildNodesEventPreventSlimmer([VegaDropdownSelectAllClick], () => this.vegaInputSelectDropdownRenderer.getDropdownRef(), {
+      customPreventHandle: (e) => {
+        e.stopPropagation();
+      },
+    });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputSelectRuntimeMetricsPayloadDefinition);
     this.isDropdownShow = false;
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -636,7 +642,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; useDefaultFilter?: boolean; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; preserveValueIfNotInSource?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; useDefaultFilter?: boolean; matchContainerHeight?: boolean; allowSelectAll?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; preserveValueIfNotInSource?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",
@@ -908,6 +914,45 @@ export class VegaInputSelect {
           }
         }
       }
+    }, {
+      "method": "vegaDropdownSelectAllClick",
+      "name": "vegaDropdownSelectAllClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.95.0"
+          }],
+        "text": "An event emitter only fired when the Select All checkbox in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownSelectAllClick",
+      "name": "dropdownSelectAllClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.95.0"
+          }],
+        "text": "An event emitter only fired when the Select All checkbox in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }, {
       "method": "vegaShow",
       "name": "vegaShow",
@@ -1135,9 +1180,15 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "labelButtonClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "selectAllClickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "eventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "dropdownEventPreventSelectAllClick", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-backdrop-manager.js

@@ -0,0 +1,141 @@
+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 { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { SharedBackdropManager } from '../../../../helpers/backdrop';
+/**
+ * Modal-specific backdrop manager — extends SharedBackdropManager to get its own static scope.
+ * Each subclass of SharedBackdropManager gets its own separate static state (consumers, visibility intents, etc).
+ * Handles backdrop color customization and stack-aware visibility.
+ */
+export class VegaModalBackdropManager extends SharedBackdropManager {
+  /**
+   * Clear shared backdrop and ownership state.
+   */
+  clear() {
+    super.clear();
+    VegaModalBackdropManager.visibleBackdropOwners = [];
+  }
+  /**
+   * Watch backdrop property changes and update visibility intent.
+   */
+  watchBackdrop() {
+    this.updateVisibility();
+  }
+  /**
+   * Watch backdropColor property changes and update color if backdrop exists.
+   *
+   */
+  watchBackdropColor() {
+    const backdrop = this.getBackdrop();
+    if (!backdrop) {
+      return;
+    }
+    this.syncBackdropColor(backdrop);
+  }
+  /**
+   * Watch openState changes and update backdrop visibility intent.
+   */
+  watchOpenState() {
+    this.updateVisibility();
+  }
+  /**
+   * Opt in to lazy backdrop lifecycle: the DOM element is created on first show
+   * and removed when the last modal with a visible backdrop closes.
+   * This keeps `backdrop='none'` modals from leaving a stale DOM node.
+   *
+   * @returns {boolean} Always true for modals.
+   */
+  usesLazyBackdrop() {
+    return true;
+  }
+  /**
+   * Customize backdrop creation for modal use case with color support.
+   * Appends backdrop as a sibling of the modal host to share the same stacking context.
+   *
+   * @param {Document} doc - The document reference.
+   * @returns {HTMLVegaBackdropElement} The created and configured backdrop element.
+   */
+  createBackdrop(doc) {
+    var _a;
+    const backdrop = doc.createElement('vega-backdrop');
+    backdrop.classList.add(VegaModalBackdropManager.modalBackdropClass);
+    backdrop.color = VegaModalBackdropManager.backdropColorMap[this.backdropColor];
+    backdrop.visible = false;
+    // Append backdrop as a sibling of the modal host so it shares the same stacking context.
+    // - When vega-modal is in document.body (normal case), parentElement is document.body.
+    // - When vega-modal is inside a third-party dialog (e.g. Bootstrap modal), parentElement is the dialog container — keeping the backdrop inside the focus-trap root.
+    // - Falls back to document.body when parentElement is null (e.g. VegaDialog creates the vega-modal element before appending it to the DOM).
+    ((_a = this.host.parentElement) !== null && _a !== void 0 ? _a : doc.body).append(backdrop);
+    return backdrop;
+  }
+  /**
+   * Update this modal's backdrop intent.
+   */
+  updateVisibility() {
+    const shouldShow = this.openState.isOpen && this.backdrop !== 'none';
+    this.trackBackdropOwner(shouldShow);
+    this.setVisibilityIntent(shouldShow);
+    const backdrop = this.getBackdrop();
+    if (backdrop) {
+      this.syncBackdropColor(backdrop);
+    }
+  }
+  /**
+   * Keep a manager-ordered list of visible backdrop owners.
+   * The last owner in the list controls shared backdrop color.
+   *
+   * @param {boolean} shouldShow - Whether this manager currently requests a visible backdrop.
+   */
+  trackBackdropOwner(shouldShow) {
+    VegaModalBackdropManager.visibleBackdropOwners =
+      VegaModalBackdropManager.visibleBackdropOwners.filter((owner) => owner !== this);
+    if (shouldShow) {
+      VegaModalBackdropManager.visibleBackdropOwners.push(this);
+    }
+  }
+  /**
+   * Apply color from the current active backdrop owner.
+   *
+   * @param {HTMLVegaBackdropElement} backdrop - Shared backdrop element.
+   */
+  syncBackdropColor(backdrop) {
+    var _a;
+    const owner = (_a = VegaModalBackdropManager.visibleBackdropOwners[VegaModalBackdropManager.visibleBackdropOwners.length - 1]) !== null && _a !== void 0 ? _a : null;
+    if (!owner) {
+      return;
+    }
+    backdrop.color = VegaModalBackdropManager.backdropColorMap[owner.backdropColor];
+  }
+}
+VegaModalBackdropManager.modalBackdropClass = 'vega-modal-backdrop';
+VegaModalBackdropManager.visibleBackdropOwners = [];
+VegaModalBackdropManager.backdropColorMap = {
+  default: 'bg-backdrop-modal',
+  semi: 'bg-backdrop-popover',
+  none: 'bg-transparent',
+};
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropManager.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropManager.prototype, "backdrop", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropManager.prototype, "backdropColor", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropManager.prototype, "openState", void 0);
+__decorate([
+  MapToComponentMethod('watchBackdrop')
+], VegaModalBackdropManager.prototype, "watchBackdrop", null);
+__decorate([
+  MapToComponentMethod('watchBackdropColor')
+], VegaModalBackdropManager.prototype, "watchBackdropColor", null);
+__decorate([
+  MapToComponentMethod('watchOpenState')
+], VegaModalBackdropManager.prototype, "watchOpenState", null);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-open-state-controller.js

@@ -213,9 +213,15 @@ export class VegaModalOpenStateController extends VegaSlimmer {
       ? this.openedModalStackController.push()
       : this.openedModalStackController.remove();
     this.updateDocumentRootOverflow();
-    this.backdropController.setBackdrop();
-    this.zIndexController.setModalZIndex();
-    this.removeBackdropWhileNoModalShow();
+    if (this.openState.isOpen) {
+      this.backdropManager.watchOpenState();
+      this.zIndexController.setModalZIndex();
+    }
+    else {
+      // On close, update z-index before lazy backdrop teardown so stale entries are removed.
+      this.zIndexController.setModalZIndex();
+      this.backdropManager.watchOpenState();
+    }
     this.emitEvent();
     this.setModalVisibility();
     this.ariaDialogToggle(this.openState.isOpen);
@@ -260,19 +266,6 @@ export class VegaModalOpenStateController extends VegaSlimmer {
       document.body.classList.remove('disable-scroll-in-desktop');
     }
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-disconnected-callback-e2e }
-   */
-  /* istanbul ignore next */
-  /**
-   * Removes the backdrop element if no modals are currently visible.
-   */
-  removeBackdropWhileNoModalShow() {
-    if (!this.openState.isOpen && this.openedModalStackController.length() === 0) {
-      this.backdropController.removeBackdrop();
-    }
-  }
   /*
    * The below method is e2e-test covered in
    * @see{@module:vega-modal-backdrop-mousedown-mouseup-e2e}
@@ -319,7 +312,7 @@ __decorate([
 ], VegaModalOpenStateController.prototype, "openEventEmitter", void 0);
 __decorate([
   MapToComponentField()
-], VegaModalOpenStateController.prototype, "backdropController", void 0);
+], VegaModalOpenStateController.prototype, "backdropManager", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalOpenStateController.prototype, "openedModalStackController", void 0);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-z-index-controller.js

@@ -14,7 +14,7 @@ export class VegaModalZIndexController extends VegaSlimmer {
    * Manages the z-index of modal elements based on their visibility status.
    */
   setModalZIndex() {
-    const backdropRef = this.backdropController.getBackdropRef();
+    const backdropRef = this.backdropManager.getBackdrop();
     if (this.openState.isOpen) {
       InternalVegaZIndexManager.setZIndex(backdropRef, 'base');
       InternalVegaZIndexManager.setZIndex(this.host, 'base');
@@ -40,7 +40,7 @@ __decorate([
 ], VegaModalZIndexController.prototype, "openState", void 0);
 __decorate([
   MapToComponentField()
-], VegaModalZIndexController.prototype, "backdropController", void 0);
+], VegaModalZIndexController.prototype, "backdropManager", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalZIndexController.prototype, "openedModalStackController", void 0);