@heartlandone/vega 2.94.0 → 2.96.0

package/dist/esm/vega-code-block.entry.js

@@ -5,18 +5,18 @@ import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
 import { t as trashCan } from './trash-can-8819a939.js';
 import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-ddff8662.js';
-import { d as VegaChange, a as VegaClick, r as VegaRemove } from './vega-event-id-270fe47e.js';
-import { ab as CodeLanguage } from './code-block-e12588fe.js';
+import { d as VegaChange, a as VegaClick, r as VegaRemove } from './vega-event-id-f55f6977.js';
+import { a9 as CodeLanguage } from './code-block-0a88b481.js';
 import { a as arrayToClassString } from './ui-d73f756a.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { z as VegaInternalCodeBlockBlur, y as VegaInternalCodeBlockSelectionChange } from './vega-internal-event-id-827eb1ce.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
 import { d as deepEqual } from './object-0c277f57.js';
 import { T as TranslationSlimmer } from './translation-slimmer-21748a0e.js';
-import { S as ShadowSelectionPolyfill, a as SelectionController, C as ComponentValueHistoryControllerSlimmer } from './component-value-history-controller-slimmer.abstract-4e8eb313.js';
+import { S as ShadowSelectionPolyfill, a as SelectionController, C as ComponentValueHistoryControllerSlimmer } from './component-value-history-controller-slimmer.abstract-6846edfa.js';
 import { A as AutoRunWhenReRenderTaskQueueSlimmer } from './auto-run-when-re-render-task-queue-slimmer.abstract-27820d4c.js';
 import { d as debounce } from './timer-9321173b.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-96c14f5a.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-82626871.js';
 import { c as copy } from './copy-54e45e2d.js';
 import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-ac703085.js';
 import './icon-manager-4ef3f6dd.js';
@@ -36,8 +36,8 @@ import './tinycolor-polyfill-7be0eb93.js';
 import './vega-nonce-manager-497e5eb5.js';
 import './try-get-document-bef0f526.js';
 import './index-3b327f29.js';
-import './internal-vega-event-manager-48690e5b.js';
-import './range-e999837f.js';
+import './internal-vega-event-manager-2ecc9186.js';
+import './range-d4deb7df.js';
 import './keyboard-manager-slimmer-f3f66c15.js';
 import './keyboard-manager-a0c3e1cf.js';
 import './synchronize-task-queue-ac8acc3b.js';

package/dist/esm/vega-color-picker.entry.js

@@ -7,9 +7,9 @@ import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4b1afd04.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-1c86e974.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as VegaChange } from './vega-event-id-270fe47e.js';
+import { d as VegaChange } from './vega-event-id-f55f6977.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './feature-flag-controller-3fd04ea9.js';
 import './index-9c9865c0.js';
@@ -31,7 +31,7 @@ import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
 import './sub-state-observer-slimmer-64532d94.js';
-import './internal-vega-event-manager-48690e5b.js';
+import './internal-vega-event-manager-2ecc9186.js';
 
 const VegaColorPickerRuntimeMetricsPayloadDefinition = [
   {

package/dist/esm/vega-color-swatch-picker.entry.js

@@ -5,13 +5,13 @@ import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod,
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-395c23e3.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-ddff8662.js';
-import { c as VegaPopoverShow, b as VegaPopoverHide, a as VegaClick, d as VegaChange, M as VegaBlur } from './vega-event-id-270fe47e.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
+import { c as VegaPopoverShow, b as VegaPopoverHide, a as VegaClick, d as VegaChange, M as VegaBlur } from './vega-event-id-f55f6977.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-1c86e974.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { T as TranslationSlimmer } from './translation-slimmer-21748a0e.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-96c14f5a.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-82626871.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './feature-flag-controller-3fd04ea9.js';
 import './index-9c9865c0.js';
@@ -33,7 +33,7 @@ import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
 import './sub-state-observer-slimmer-64532d94.js';
-import './internal-vega-event-manager-48690e5b.js';
+import './internal-vega-event-manager-2ecc9186.js';
 import './icon-manager-4ef3f6dd.js';
 import './create-public-api-runtime-metrics-slimmer-48f85199.js';
 import './vega-env-manager-8f8dc473.js';

package/dist/esm/vega-color-swatch.entry.js

@@ -4,9 +4,9 @@ import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } fr
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { T as TinyColorPolyfill } from './tinycolor-polyfill-7be0eb93.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-6af5cf2e.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-48690e5b.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
-import { a as VegaClick } from './vega-event-id-270fe47e.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-2ecc9186.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
+import { a as VegaClick } from './vega-event-id-f55f6977.js';
 import { T as TranslationSlimmer } from './translation-slimmer-21748a0e.js';
 import './dynamic-slimmer-90b8af32.js';
 import './change-manager-6a7eb88c.js';

package/dist/esm/vega-combo-box.entry.js

@@ -5,9 +5,9 @@ import { a1 as isArrayOfType, a2 as isDropdownSourceItemType } from './type-guar
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4b1afd04.js';
 import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-395c23e3.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-96c14f5a.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
-import { s as VegaCreate, z as VegaDropdownHide, V as VegaDropdownClick, A as VegaDropdownSelectAllClick, i as VegaClose, d as VegaChange, t as VegaSearch } from './vega-event-id-270fe47e.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-82626871.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
+import { s as VegaCreate, A as VegaDropdownHide, V as VegaDropdownClick, u as VegaDropdownSelectAllClick, i as VegaClose, d as VegaChange, t as VegaSearch } from './vega-event-id-f55f6977.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-1c86e974.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-6af5cf2e.js';
@@ -34,7 +34,7 @@ import './dynamic-slimmer-90b8af32.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
 import './sub-state-observer-slimmer-64532d94.js';
-import './internal-vega-event-manager-48690e5b.js';
+import './internal-vega-event-manager-2ecc9186.js';
 import './vega-env-manager-8f8dc473.js';
 import './try-get-document-bef0f526.js';
 import './responsive-format-facade-ced96b0b.js';
@@ -148,8 +148,9 @@ class VegaComboBoxDropdownRenderer extends VegaSlimmer {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, async () => {
           await this.onItemClick();
         });
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownSelectAllClick, async () => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownSelectAllClick, async (payload) => {
           await this.onItemClick();
+          this.selectAllClickEventEmit.emit(payload.detail);
         });
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalDropdownTemplateItemsChange, 
         /*
@@ -257,6 +258,9 @@ __decorate$6([
 __decorate$6([
   MapToComponentField()
 ], VegaComboBoxDropdownRenderer.prototype, "searchEventEmit", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaComboBoxDropdownRenderer.prototype, "selectAllClickEventEmit", void 0);
 __decorate$6([
   MapToComponentField()
 ], VegaComboBoxDropdownRenderer.prototype, "valueController", void 0);
@@ -552,6 +556,8 @@ const VegaComboBox = class {
     this.create = createEvent(this, "create", 7);
     this.vegaSearch = createEvent(this, "vegaSearch", 7);
     this.search = createEvent(this, "search", 7);
+    this.vegaDropdownSelectAllClick = createEvent(this, "vegaDropdownSelectAllClick", 7);
+    this.dropdownSelectAllClick = createEvent(this, "dropdownSelectAllClick", 7);
     this.globalSlimmers = {};
     this.itemsSlotController = new VegaComboBoxItemsSlotController();
     this.keyboardController = new VegaComboBoxKeyboardController();
@@ -576,11 +582,17 @@ const VegaComboBox = class {
     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.
@@ -778,9 +790,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/esm/vega-date-picker_2.entry.js

@@ -8,7 +8,7 @@ import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlim
 import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-395c23e3.js';
 import { a as arrayToClassString, e as getDeepActiveElementInShadow, g as getDeviceType, D as DeviceType } from './ui-d73f756a.js';
 import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-ddff8662.js';
-import { a as VegaClick, w as VegaSelectionChange, v as VegaClear, u as VegaMonthYearChange, U as VegaOpen, i as VegaClose, d as VegaChange, V as VegaDropdownClick, y as VegaDropdownShow, z as VegaDropdownHide, x as VegaTodayClick } from './vega-event-id-270fe47e.js';
+import { a as VegaClick, x as VegaSelectionChange, w as VegaClear, v as VegaMonthYearChange, U as VegaOpen, i as VegaClose, d as VegaChange, V as VegaDropdownClick, z as VegaDropdownShow, A as VegaDropdownHide, y as VegaTodayClick } from './vega-event-id-f55f6977.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-6af5cf2e.js';
 import { i as isArrayEqual } from './array-7888f339.js';
@@ -22,11 +22,11 @@ import { S as StringMaskStrategy } from './string-mask-strategy-66586cd8.js';
 import { S as StringInputFormatterSlimmer } from './string-input-formatter-slimmer-4b4866a6.js';
 import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-f3f66c15.js';
 import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-96c14f5a.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-82626871.js';
 import { T as TranslationSlimmer } from './translation-slimmer-21748a0e.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
-import { E as ElementAppenderSlimmer } from './element-appender-slimmer-7fcb944b.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-73ad10ae.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
 import { C as ClickOutsideOnlyToDismissStrategy } from './click-outside-only-to-dismiss-strategy-3d286c1b.js';
 import { A as AriaDialogFocusableTrapSlimmer } from './aria-dialog-focusable-trap-slimmer-9eae86c6.js';
@@ -50,7 +50,7 @@ import './index-9c9865c0.js';
 import './string-format-strategy.abstract-23faab71.js';
 import './wait-for-component-did-render-0c237cb8.js';
 import './keyboard-manager-a0c3e1cf.js';
-import './internal-vega-event-manager-48690e5b.js';
+import './internal-vega-event-manager-2ecc9186.js';
 import './vega-env-manager-8f8dc473.js';
 import './internal-vega-z-index-manager-7d2b54c3.js';
 import './breakpoints-332702ed.js';

package/dist/esm/vega-dialog_2.entry.js

@@ -9,9 +9,9 @@ import './state-border-formatter-b680e922.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4b1afd04.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-ddff8662.js';
-import { i as VegaClose, a as VegaClick, U as VegaOpen } from './vega-event-id-270fe47e.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-96c14f5a.js';
+import { i as VegaClose, a as VegaClick, U as VegaOpen } from './vega-event-id-f55f6977.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-2452278f.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-82626871.js';
 import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-ac703085.js';
 import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-ea34fa7b.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
@@ -24,13 +24,14 @@ import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-1c86e974.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { A as AriaDialogFocusableTrapSlimmer } from './aria-dialog-focusable-trap-slimmer-9eae86c6.js';
+import { S as SharedBackdropManager } from './shared-backdrop-manager-a7c63838.js';
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import './breakpoints-d9faf11c.js';
 import './typography-19c3b9be.js';
 import './index-9c9865c0.js';
 import './try-get-document-bef0f526.js';
 import './observer-3959f9dd.js';
-import './internal-vega-event-manager-48690e5b.js';
+import './internal-vega-event-manager-2ecc9186.js';
 import './vega-env-manager-8f8dc473.js';
 import './vega-nonce-manager-497e5eb5.js';
 import './index-3b327f29.js';
@@ -246,12 +247,13 @@ class VegaModalRenderer extends VegaSlimmer {
     return this.modalContainer;
   }
   render() {
+    const effectiveWidth = this.sizeDeprecatedPropertySlimmer.getValue();
     return (h(Host, { class: {
         'align-center': this.deprecatedPropertySlimmer.getValue() && this.openState.isOpen,
         'animation': this.animation,
         'is-section-padding': isVegaModalSectionPaddingType(this.padding),
       } },
-      h("vega-box", { class: "modal-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, width: isResponsiveSizeType(this.size) ? this.size : DefaultModalSize, height: this.height, margin: this.margin }, this.renderContainer())));
+      h("vega-box", { class: "modal-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, width: isResponsiveSizeType(effectiveWidth) ? effectiveWidth : DefaultModalSize, height: this.height, margin: this.margin }, this.renderContainer())));
   }
   renderContainer() {
     return (h("vega-box", { class: "modal-container", corners: this.corners, ref: (node) => (this.modalContainer = node) },
@@ -331,7 +333,7 @@ __decorate$8([
 ], VegaModalRenderer.prototype, "margin", void 0);
 __decorate$8([
   MapToComponentField()
-], VegaModalRenderer.prototype, "size", void 0);
+], VegaModalRenderer.prototype, "sizeDeprecatedPropertySlimmer", void 0);
 __decorate$8([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "height", void 0);
@@ -727,9 +729,15 @@ 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);
@@ -774,19 +782,6 @@ 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}
@@ -833,7 +828,7 @@ __decorate$5([
 ], VegaModalOpenStateController.prototype, "openEventEmitter", void 0);
 __decorate$5([
   MapToComponentField()
-], VegaModalOpenStateController.prototype, "backdropController", void 0);
+], VegaModalOpenStateController.prototype, "backdropManager", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaModalOpenStateController.prototype, "openedModalStackController", void 0);
@@ -881,71 +876,138 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /**
- * Modal backdrop controller
+ * 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.
  */
-class VegaModalBackdropController extends VegaSlimmer {
+class VegaModalBackdropManager extends SharedBackdropManager {
+  /**
+   * Clear shared backdrop and ownership state.
+   */
+  clear() {
+    super.clear();
+    VegaModalBackdropManager.visibleBackdropOwners = [];
+  }
   /**
-   * Get the backdropRef element or null.
+   * Watch backdrop property changes and update visibility intent.
+   */
+  watchBackdrop() {
+    this.updateVisibility();
+  }
+  /**
+   * Watch backdropColor property changes and update color if backdrop exists.
    *
-   * @returns {HTMLElement | null} - The backdropRef.
    */
-  getBackdropRef() {
-    return this.backdropRef;
+  watchBackdropColor() {
+    const backdrop = this.getBackdrop();
+    if (!backdrop) {
+      return;
+    }
+    this.syncBackdropColor(backdrop);
+  }
+  /**
+   * Watch openState changes and update backdrop visibility intent.
+   */
+  watchOpenState() {
+    this.updateVisibility();
   }
-  /*
-   * 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}
+  /**
+   * 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.
    */
-  /* istanbul ignore next */
+  usesLazyBackdrop() {
+    return true;
+  }
   /**
-   * Set backdrop of modal.
+   * 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.
    */
-  setBackdrop() {
+  createBackdrop(doc) {
     var _a;
-    if (this.backdrop === 'none')
-      return;
-    // eslint-disable-next-line no-restricted-globals
-    let backdrop = document.querySelector(`vega-backdrop.${VegaModalBackdropController.modalBackdropClass}`);
-    if (!backdrop) {
-      // eslint-disable-next-line no-restricted-globals
-      backdrop = document.createElement('vega-backdrop');
-      backdrop.classList.add(VegaModalBackdropController.modalBackdropClass);
-      backdrop.color = VegaModalBackdropController.backdropColorMap[this.backdropColor];
-      backdrop.visible = true;
-      // 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).
-      // eslint-disable-next-line no-restricted-globals
-      ((_a = this.host.parentElement) !== null && _a !== void 0 ? _a : document.body).append(backdrop);
+    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);
     }
-    this.backdropRef = backdrop;
   }
   /**
-   * Removes the backdrop element if it exists.
+   * Apply color from the current active backdrop owner.
+   *
+   * @param {HTMLVegaBackdropElement} backdrop - Shared backdrop element.
    */
-  removeBackdrop() {
-    this.backdropRef && this.backdropRef.remove();
+  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];
   }
 }
-VegaModalBackdropController.modalBackdropClass = 'vega-modal-backdrop';
-VegaModalBackdropController.backdropColorMap = {
+VegaModalBackdropManager.modalBackdropClass = 'vega-modal-backdrop';
+VegaModalBackdropManager.visibleBackdropOwners = [];
+VegaModalBackdropManager.backdropColorMap = {
   default: 'bg-backdrop-modal',
   semi: 'bg-backdrop-popover',
   none: 'bg-transparent',
 };
 __decorate$4([
   MapToComponentField()
-], VegaModalBackdropController.prototype, "host", void 0);
+], VegaModalBackdropManager.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalBackdropManager.prototype, "backdrop", void 0);
 __decorate$4([
   MapToComponentField()
-], VegaModalBackdropController.prototype, "backdrop", void 0);
+], VegaModalBackdropManager.prototype, "backdropColor", void 0);
 __decorate$4([
   MapToComponentField()
-], VegaModalBackdropController.prototype, "backdropColor", void 0);
+], VegaModalBackdropManager.prototype, "openState", void 0);
+__decorate$4([
+  MapToComponentMethod('watchBackdrop')
+], VegaModalBackdropManager.prototype, "watchBackdrop", null);
+__decorate$4([
+  MapToComponentMethod('watchBackdropColor')
+], VegaModalBackdropManager.prototype, "watchBackdropColor", null);
+__decorate$4([
+  MapToComponentMethod('watchOpenState')
+], VegaModalBackdropManager.prototype, "watchOpenState", null);
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1012,7 +1074,7 @@ 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');
@@ -1038,7 +1100,7 @@ __decorate$2([
 ], VegaModalZIndexController.prototype, "openState", void 0);
 __decorate$2([
   MapToComponentField()
-], VegaModalZIndexController.prototype, "backdropController", void 0);
+], VegaModalZIndexController.prototype, "backdropManager", void 0);
 __decorate$2([
   MapToComponentField()
 ], VegaModalZIndexController.prototype, "openedModalStackController", void 0);
@@ -1165,7 +1227,7 @@ const VegaModal = class {
     this.openStateController = new VegaModalOpenStateController();
     this.mobileController = new VegaModalMobileController();
     this.scrollController = new VegaModalScrollController();
-    this.backdropController = new VegaModalBackdropController();
+    this.backdropManager = new VegaModalBackdropManager();
     this.openedModalStackController = new VegaModalOpenedModalStackController();
     this.zIndexController = new VegaModalZIndexController();
     this.paddingStateController = new VegaModalPaddingStateController();
@@ -1175,6 +1237,7 @@ const VegaModal = class {
     this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.renderer.getModalContainerRef());
     this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(vegaModalDisableBodyScrollCss);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
+    this.sizeDeprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'width', 'size', undefined);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
     this.openState = this.initOpenState();
     /**
@@ -1188,10 +1251,6 @@ const VegaModal = class {
      * - `none`:
      *      specifies that the backdrop will not be rendered.
      *
-     * _Note_:
-     *    When changing this value, a page refresh is required
-     *    for the changes to take effect.
-     *
      * @vegaVersion 1.0.6
      */
     this.backdrop = 'default';
@@ -1282,6 +1341,12 @@ const VegaModal = class {
   }
   watchOpenState() {
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-default-e2e}
+   */
+  watchBackdrop() {
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-modal-size-number-e2e}
@@ -1290,6 +1355,14 @@ const VegaModal = class {
   /* istanbul ignore next */
   watchSize() {
   }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-width-number-e2e}
+   * @see{module:vega-modal-width-responsive-e2e}
+   */
+  /* istanbul ignore next */
+  watchWidth() {
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-modal-height-e2e}
@@ -1300,6 +1373,14 @@ const VegaModal = class {
   watchOpen() {
     this.openState = new VegaModalOpenState(this.open, 'property');
   }
+  /**
+   * 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}
+   */
+  watchBackdropColor() {
+  }
   watchPadding() {
   }
   watchContentMaxHeight() {
@@ -1346,6 +1427,9 @@ const VegaModal = class {
    */
   async modal(option) {
   }
+  /* The disconnectedCallback lifecycle is e2e-test covered in
+   * @see{module:vega-modal-disconnected-callback-e2e}
+   */
   render() {
     return sanitizeVegaComponent(this.renderer.render(), this.host);
   }
@@ -1358,9 +1442,12 @@ const VegaModal = class {
   get host() { return getElement(this); }
   static get watchers() { return {
     "openState": ["watchOpenState"],
+    "backdrop": ["watchBackdrop"],
     "size": ["watchSize"],
+    "width": ["watchWidth"],
     "height": ["watchHeight"],
     "open": ["watchOpen"],
+    "backdropColor": ["watchBackdropColor"],
     "padding": ["watchPadding"],
     "contentMaxHeight": ["watchContentMaxHeight"]
   }; }
@@ -1382,7 +1469,7 @@ __decorate([
 ], VegaModal.prototype, "scrollController", void 0);
 __decorate([
   InjectVegaSlimmer()
-], VegaModal.prototype, "backdropController", void 0);
+], VegaModal.prototype, "backdropManager", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "openedModalStackController", void 0);
@@ -1410,6 +1497,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "sizeDeprecatedPropertySlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);