@heartlandone/vega 2.82.0 → 2.83.0

package/dist/cjs/{token-extension-9b213b6b.js → token-extension-361273fb.js}

@@ -12,7 +12,7 @@ const internalTranslationController = require('./internal-translation-controller
 const contentState = require('./content-state-648652b4.js');
 const codeBlock = require('./code-block-b1f8aded.js');
 const typeGuard = require('./type-guard-3ec852d7.js');
-const dtoRendererManager = require('./dto-renderer-manager-ae5fcbba.js');
+const dtoRendererManager = require('./dto-renderer-manager-7eb5c5ce.js');
 const baseRenderer = require('./base-renderer-0a3b62b7.js');
 const internalIconManager = require('./internal-icon-manager-c989189a.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');
@@ -1232,12 +1232,26 @@ class VegaRTEExtension {
   static registerFilterStylesStrategy(blockOrNodeClassName, strategy) {
     codeBlock.RTEFilterStylesStrategyRegistry.register(blockOrNodeClassName, strategy);
   }
+  /**
+   * Lifecycle hook called by the rich text editor before the first render
+   * (during `componentWillLoad`).  Override this method to perform per-host
+   * pre-render setup — for example, registering a host-specific toolbar button
+   * renderer via {@link registerToolbarButtonRenderer} so that each editor on
+   * the page gets its own isolated renderer instance.
+   *
+   * The default implementation is a no-op; subclasses may override selectively.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {HTMLVegaRichTextEditorElement} host - The host rich text editor element that is about to load.
+   */
+  prepareBeforeLoad(host) {
+  }
   /**
    * Initializes the RTE extension with the provided context.
    *
    * @param {RTEExtensionContext} context - The context of the RTE extension.
    */
-  initialExtension(context) {
+  initialExtensionAfterLoad(context) {
     this.extensionContext = context;
     RTEExtensionContextManager$1.setExtensionContext(context);
   }
@@ -1285,12 +1299,22 @@ class VegaRTEExtension {
   }
   /**
    * Register a toolbar button renderer for the extension.
+   * When a `host` element is provided the renderer is registered in the per-host map
+   * (via {@link RTEDTORendererManager#registerRTEToolbarButtonRendererForHost}), giving
+   * that host an isolated renderer instance that takes precedence over the global singleton.
+   * Omit `host` to fall back to the global registration (backwards-compatible default).
    *
    * @param {string} type - The type of the toolbar button.
    * @param {VegaRTEToolbarButtonRenderer} renderer - The renderer to register.
+   * @param {HTMLVegaRichTextEditorElement} [host] - Optional host element for per-host isolation.
    */
-  registerToolbarButtonRenderer(type, renderer) {
-    dtoRendererManager.RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+  registerToolbarButtonRenderer(type, renderer, host) {
+    if (host) {
+      dtoRendererManager.RTEDTORendererManager.registerRTEToolbarButtonRendererForHost(host, type, renderer);
+    }
+    else {
+      dtoRendererManager.RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+    }
   }
   /**
    * This is a helper method that utilizes RTEUtils to register common strategies.
@@ -1777,30 +1801,41 @@ class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
 
 /**
  * Toolbar button renderer for language selection in Vega Rich Text Editor.
+ *
+ * Each {@link HTMLVegaRichTextEditorElement} that uses a language extension receives its
+ * **own** instance of this renderer, registered in the per-host map inside
+ * {@link RTEDTORendererManager} via {@link VegaRTEExtension#prepareBeforeLoad}.  Because
+ * every editor has a dedicated renderer, all state (label DOM ref, selected language, and
+ * the language-change callback) is held in plain instance fields — no WeakMaps or shared
+ * singletons are required.
  */
 class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
-  constructor(languageList, languageChangeCallback, selectedLanguage) {
+  constructor(languageList, languageChangeCallback, selectedLanguage = '') {
     super();
     this.languageList = [];
-    this.selectedLanguage = 'Select Language';
+    this.languageChangeCallback = null;
+    this.selectedLanguage = '';
     this.labelRef = null;
     /**
      * Handles the language selection event.
+     * Because each editor has its own renderer instance, the language-change callback
+     * is stored directly on this instance — no indirect context lookup is needed.
      *
      * @param {string} itemKey - The key of the selected language item.
      */
     this.handleDropdownClick = (itemKey) => {
       this.setSelectedLanguage(itemKey);
       if (typeof this.languageChangeCallback === 'function') {
-        this.languageChangeCallback(this.selectedLanguage);
+        this.languageChangeCallback(itemKey);
       }
     };
     this.languageList = languageList;
-    this.selectedLanguage = selectedLanguage;
     this.languageChangeCallback = languageChangeCallback;
+    this.selectedLanguage = selectedLanguage;
   }
   /**
-   * Public method to set the selected language.
+   * Updates the selected language and refreshes the button label text in-place,
+   * without requiring a full re-render of the toolbar.
    *
    * @param {string} language The language key to set as selected.
    */
@@ -1830,7 +1865,8 @@ class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
     ]);
   }
   /**
-   * Override to render the button label with custom behavior.
+   * Override to capture the rendered label element ref so that
+   * {@link setSelectedLanguage} can update the button text without a full re-render.
    *
    * @inheritDoc
    */
@@ -1840,7 +1876,9 @@ class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
       variant: 'font-field-label-sm',
       color: isDisabled ? 'text-disabled' : 'text-primary',
       // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (el) => (this.labelRef = el),
+      ref: (el) => {
+        this.labelRef = el;
+      },
     }, label);
   }
   /* istanbul ignore next */
@@ -1858,8 +1896,9 @@ class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
    * @returns {string} The label of the language, or the key if not found.
    */
   getLanguageLabelByKey(key) {
+    var _a;
     const language = this.getListItemByKey(this.languageList, key);
-    return language.label;
+    return (_a = language === null || language === void 0 ? void 0 : language.label) !== null && _a !== void 0 ? _a : 'Select Language';
   }
 }
 
@@ -1870,6 +1909,7 @@ class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
 class VegaRTELanguageExtension extends VegaRTEExtension {
   constructor(languageList, languagesState) {
     super();
+    this.languageToolbarButtonRenderer = null;
     this.languageState = {
       selectedLanguage: '',
       contentMap: {},
@@ -1887,24 +1927,39 @@ class VegaRTELanguageExtension extends VegaRTEExtension {
       this.languageState.selectedLanguage = selectedLanguage;
       this.applyLanguageContent(selectedLanguage, this.languageState.contentMap);
     };
+    this.languageList = languageList;
     if (languagesState) {
       this.languageState = Object.assign(Object.assign({}, this.languageState), languagesState);
     }
     if (!this.languageState.selectedLanguage && languageList.length > 0) {
       this.languageState.selectedLanguage = languageList[0].key;
     }
-    this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
-    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer);
+  }
+  /**
+   * Called by the rich text editor during `componentWillLoad` (before the first render).
+   * Creates a fresh {@link RTELanguageToolbarButtonRenderer} instance dedicated to this
+   * host element and registers it in the per-host map inside {@link RTEDTORendererManager}.
+   * This ensures that each editor on the page has its own isolated renderer — no shared
+   * singleton state, no WeakMap indirection.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {HTMLVegaRichTextEditorElement} host - The host rich text editor element.
+   */
+  prepareBeforeLoad(host) {
+    this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(this.languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
+    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer, host);
   }
   /**
    * Initializes the language extension.
-   * Applies the content for the selected language upon initialization.
    *
    * @param {RTEExtensionContext} context The extension context.
    */
-  initialExtension(context) {
-    super.initialExtension(context);
+  initialExtensionAfterLoad(context) {
+    super.initialExtensionAfterLoad(context);
     const { selectedLanguage, contentMap } = this.languageState;
+    if (this.languageToolbarButtonRenderer) {
+      this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    }
     if (contentMap && contentMap[selectedLanguage]) {
       this.applyLanguageContent(this.languageState.selectedLanguage, this.languageState.contentMap);
     }
@@ -1916,7 +1971,9 @@ class VegaRTELanguageExtension extends VegaRTEExtension {
    */
   setState(state) {
     const { selectedLanguage, contentMap } = state;
-    this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    if (this.languageToolbarButtonRenderer) {
+      this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    }
     this.languageState.selectedLanguage = selectedLanguage;
     this.languageState.contentMap = Object.assign({}, contentMap);
     this.applyLanguageContent(selectedLanguage, contentMap);
@@ -7415,10 +7472,10 @@ class VegaRTETableExtension extends VegaRTEExtension {
    *
    * @param {RTEExtensionContext} context - extension context
    */
-  initialExtension(context) {
+  initialExtensionAfterLoad(context) {
     this.tableSelection.init(context);
     const tableExtensionContext = Object.assign(Object.assign({}, context), { tableSelection: this.tableSelection });
-    super.initialExtension(tableExtensionContext);
+    super.initialExtensionAfterLoad(tableExtensionContext);
   }
   /**
    * @inheritDoc

package/dist/cjs/vega-banner.cjs.entry.js

@@ -69,15 +69,24 @@ class VegaBannerRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {HTMLElement} the banner content element
    */
   renderBannerContent() {
+    const hasContentSlot = this.hasContentSlot();
     return (index.h("div", { class: {
         ['banner-content-container']: true,
-        ['linear']: !this.isMobileDevice && (!this.content || !this.bannerTitle),
+        ['linear']: !this.isMobileDevice && ((!this.content && !hasContentSlot) || !this.bannerTitle),
       } },
       this.renderBannerTitle(),
       index.h("div", { class: "banner-content" },
-        index.h("vega-font", { variant: this.isMobileDevice ? 'font-footnote1-long' : 'font-p2-short', color: this.type === 'error' ? 'text-primary' : 'text-black' }, this.content),
+        hasContentSlot ? (index.h("slot", { name: "content" })) : (index.h("vega-font", { variant: this.isMobileDevice ? 'font-footnote1-long' : 'font-p2-short', color: this.type === 'error' ? 'text-primary' : 'text-black' }, this.content)),
         this.isMobileDevice ? null : this.actionButtonRenderer.render())));
   }
+  /**
+   * Checks whether the host element contains a slotted element targeting the "content" slot.
+   *
+   * @returns {boolean} `true` if a child element with `slot="content"` exists, `false` otherwise.
+   */
+  hasContentSlot() {
+    return this.host.querySelector('[slot="content"]') !== null;
+  }
   /**
    * Get banner title element by property
    *
@@ -292,6 +301,8 @@ const VegaBanner = class {
     this.bannerTitle = '';
     /**
      * Specifies the content displayed within the banner.
+     * Also supports slot-based content: place a child element with `slot="content"` inside
+     * the banner to render rich HTML content. The slot takes precedence over this property.
      *
      * @vegaVersion 2.8.0
      */

package/dist/cjs/vega-checkbox_2.cjs.entry.js

@@ -96,7 +96,7 @@ __decorate$2([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaCheckboxShowErrorController.prototype, "disconnectedCallback", null);
 
-const vegaCheckboxCss = ":host{display:inline-block;vertical-align:middle}.vega-checkbox-container{position:relative;display:flex;-webkit-tap-highlight-color:transparent}.vega-checkbox-container>input[type=checkbox]{position:absolute;left:0px;top:0px;opacity:0;width:24px;height:24px;padding:0px;margin:0px}.vega-checkbox-container>.vega-checkbox-icon{display:inline-block;box-sizing:border-box;width:24px;height:24px;border-style:solid;border-width:2px;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1));position:relative;left:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:4px;min-width:24px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.vega-checkbox-container>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px}.vega-checkbox-container>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon{display:inline-flex;align-items:center;justify-content:center}:host(.disabled) .vega-checkbox-container{cursor:not-allowed}:host(:not(.disabled)) .vega-checkbox-container{cursor:pointer}.vega-checkbox-container .vega-require{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px;vertical-align:middle}.vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}.vega-checkbox-container.error>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))}:host(.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon>vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-label-container{display:inline-block;margin-left:12px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.disabled) .vega-checkbox-container>.vega-checkbox-label-container{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.vega-error{display:block;margin-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-checkbox-label-container.vega-hidden{display:none}.vega-hidden{display:none}.size-default input[type=checkbox]{width:24px;height:24px}.size-default .vega-checkbox-icon{width:24px;height:24px;min-width:24px;border-radius:4px}.size-default .vega-checkbox-label-container{margin-left:12px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.size-small input[type=checkbox]{width:16px;height:16px}.size-small .vega-checkbox-icon{width:16px;height:16px;min-width:16px;border-radius:2px}.size-small .vega-checkbox-label-container{margin-left:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}";
+const vegaCheckboxCss = ":host{display:inline-block;vertical-align:middle}.vega-checkbox-container{position:relative;display:flex;-webkit-tap-highlight-color:transparent}.vega-checkbox-container>input[type=checkbox]{position:absolute;left:0px;top:0px;opacity:0;width:24px;height:24px;padding:0px;margin:0px}.vega-checkbox-container>.vega-checkbox-icon{display:inline-block;box-sizing:border-box;width:24px;height:24px;border-style:solid;border-width:2px;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1));position:relative;left:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:4px;min-width:24px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon,:host(.indeterminate) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));display:inline-flex;align-items:center;justify-content:center}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:hover,:host(.indeterminate) .vega-checkbox-container>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.vega-checkbox-container>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px}.vega-checkbox-container>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:active,:host(.indeterminate) .vega-checkbox-container>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(.disabled) .vega-checkbox-container{cursor:not-allowed}:host(:not(.disabled)) .vega-checkbox-container{cursor:pointer}.vega-checkbox-container .vega-require{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px;vertical-align:middle}.vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon,:host(.indeterminate) .vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:hover,:host(.indeterminate) .vega-checkbox-container.error>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}.vega-checkbox-container.error>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:active,:host(.indeterminate) .vega-checkbox-container.error>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))}:host(.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon,:host(.indeterminate.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon>vega-icon,:host(.indeterminate.disabled) .vega-checkbox-container>.vega-checkbox-icon>vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-label-container{display:inline-block;margin-left:12px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.disabled) .vega-checkbox-container>.vega-checkbox-label-container{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.vega-error{display:block;margin-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-checkbox-label-container.vega-hidden{display:none}.vega-hidden{display:none}.size-default input[type=checkbox]{width:24px;height:24px}.size-default .vega-checkbox-icon{width:24px;height:24px;min-width:24px;border-radius:4px}.size-default .vega-checkbox-label-container{margin-left:12px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.size-small input[type=checkbox]{width:16px;height:16px}.size-small .vega-checkbox-icon{width:16px;height:16px;min-width:16px;border-radius:2px}.size-small .vega-checkbox-label-container{margin-left:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}";
 
 var __decorate$1 = (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;
@@ -176,6 +176,21 @@ const VegaCheckbox = class {
      * @vegaVersion 1.0.7
      */
     this.checked = false;
+    /**
+     * Specifies whether the checkbox is in an indeterminate state.
+     *
+     * The indeterminate state is a visual-only state typically used to represent
+     *    a checkbox whose value is neither fully checked nor fully unchecked,
+     *    such as a "select all" control where only some children are selected.
+     *
+     * Setting this property does not affect the `checked` or `value` properties.
+     *    User interaction (clicking) will clear the indeterminate state and
+     *    toggle `checked` as usual.
+     *
+     * @vegaVersion 2.83.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.indeterminate = false;
     /**
      * Specifies whether the checkbox element is disabled.
      *
@@ -203,11 +218,14 @@ const VegaCheckbox = class {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
     /**
-     * The below method is e2e-test covered in
+     * Indeterminate-clearing behavior is unit-tested.
+     * The checked-state side of this method is e2e-test covered in
      * @see{module:vega-checkbox-change}
      */
-    /* istanbul ignore next */
     this.onCheckBoxChange = (e) => {
+      if (this.indeterminate) {
+        this.indeterminate = false;
+      }
       this.checked = e.currentTarget.checked;
     };
     this.onSelectedIconClick = (e) => {
@@ -234,6 +252,7 @@ const VegaCheckbox = class {
     if (this.host.innerHTML.trim() === '') {
       this.labelElement.classList.add('vega-hidden');
     }
+    this.syncNativeIndeterminate();
   }
   /**
    * Invoke this method to set the value of the checkbox.
@@ -252,14 +271,18 @@ const VegaCheckbox = class {
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         'vega-flex-shrink-0 v-min-w-min': isInsideCheckboxGroup,
         'checked': this.checked,
+        'indeterminate': this.indeterminate,
         'disabled': this.isDisabled(),
       } }, index.h("label", { class: ui.arrayToClassString([
         'vega-checkbox-container',
         this.showError && 'error',
         this.size && `size-${this.size}`,
-      ]), ref: (e) => (this.inputContainerRef = e) }, index.h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', disabled: this.isDisabled(), role: 'button', tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }), index.h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()), index.h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) }, this.renderLabelDom(), this.renderRequireDom()))), this.host);
+      ]), ref: (e) => (this.inputContainerRef = e) }, index.h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }), index.h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()), index.h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) }, this.renderLabelDom(), this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
+    if (this.indeterminate) {
+      return index.h("vega-icon", { icon: "minus-sign", size: this.size === 'small' ? 'size-12' : 'size-16' });
+    }
     return this.checked ? (index.h("vega-icon", { icon: "checkmark", size: this.size === 'small' ? 'size-12' : 'size-16' })) : null;
   }
   renderLabelDom() {
@@ -273,6 +296,16 @@ const VegaCheckbox = class {
   initValue() {
     this.value = this.identifier !== '' ? (this.checked ? this.identifier : '') : this.checked;
   }
+  /**
+   * Syncs the indeterminate property to the native input element.
+   * The HTML `indeterminate` attribute can only be set via JavaScript,
+   *    so it must be applied imperatively after each render.
+   */
+  syncNativeIndeterminate() {
+    if (this.inputRef) {
+      this.inputRef.indeterminate = this.indeterminate;
+    }
+  }
   /**
    * indicating whether the component is disabled or not, single checkbox will take the self disabled value and the checkbox in group will take the self disabled and group disabled value
    *

package/dist/cjs/vega-date-picker_2.cjs.entry.js

@@ -30,7 +30,7 @@ const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-9b7095a4.js');
 const translationSlimmer = require('./translation-slimmer-d0c77ad2.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-dedd3a34.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-52c2b455.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const clickOutsideOnlyToDismissStrategy = require('./click-outside-only-to-dismiss-strategy-407f6d1e.js');
 const ariaDialogFocusableTrapSlimmer = require('./aria-dialog-focusable-trap-slimmer-5507f917.js');

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

@@ -18,6 +18,8 @@ const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-9b7095a4.js');
 const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-93c5fb50.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-300a3929.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
+const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
 const misc = require('./misc-3d30df91.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const ui = require('./ui-32120990.js');
@@ -37,9 +39,10 @@ require('./vega-env-manager-23b8b23c.js');
 require('./vega-nonce-manager-df69d3ed.js');
 require('./index-592b4052.js');
 require('./object-b53e9416.js');
+require('./array-249289f2.js');
+require('./number-4816603d.js');
 require('./synchronize-task-queue-1ee80e94.js');
 require('./vega-internal-event-id-87014e4f.js');
-require('./number-4816603d.js');
 
 const vegaDialogCss = ":host vega-modal{padding-left:16px;padding-right:16px}@media (min-width: 768px){:host vega-modal{padding:0px}}:host .vega-dialog-actions-container{display:flex;justify-content:center;flex-direction:column;gap:12px}@media (min-width: 768px){:host .vega-dialog-actions-container{justify-content:flex-end;flex-direction:row}}:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:30px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));word-break:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}";
 
@@ -185,7 +188,20 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
 /**
  * Nested modal controller
  */
-class VegaNestedModalController extends globalSlimmerRegistry.VegaSlimmer {
+class VegaNestedModalController extends mutationObserverSlimmer.MutationObserverSlimmer {
+  constructor() {
+    super({
+      mutationFilter: mutationObserverFilters.TagNameMutationFilter('VEGA-MODAL'),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: () => {
+        this.appendNestedModalToBody();
+      },
+    });
+  }
   /**
    * Component lifecycle - [connectedCallback]
    */
@@ -889,18 +905,23 @@ class VegaModalBackdropController extends globalSlimmerRegistry.VegaSlimmer {
    * Set backdrop of modal.
    */
   setBackdrop() {
+    var _a;
     if (this.backdrop === 'none')
       return;
     // eslint-disable-next-line no-restricted-globals
-    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
+    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('modal-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
-      document.querySelector('body').append(backdrop);
+      ((_a = this.host.parentElement) !== null && _a !== void 0 ? _a : document.body).append(backdrop);
     }
     this.backdropRef = backdrop;
   }
@@ -911,6 +932,7 @@ class VegaModalBackdropController extends globalSlimmerRegistry.VegaSlimmer {
     this.backdropRef && this.backdropRef.remove();
   }
 }
+VegaModalBackdropController.modalBackdropClass = 'vega-modal-backdrop';
 VegaModalBackdropController.backdropColorMap = {
   default: 'bg-backdrop-modal',
   semi: 'bg-backdrop-popover',

package/dist/cjs/vega-dropdown_5.cjs.entry.js

@@ -14,7 +14,7 @@ const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-facto
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-879ff4f3.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-dedd3a34.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-52c2b455.js');
 const ariaDialogFocusableTrapSlimmer = require('./aria-dialog-focusable-trap-slimmer-5507f917.js');
 const index$1 = require('./index-592b4052.js');
 const array = require('./array-249289f2.js');

package/dist/cjs/vega-env-manager-23b8b23c.js

@@ -11,9 +11,9 @@ exports.FrameworkEnum = void 0;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.82.0` will be replaced to a version string when running publish script.
+    // The `2.83.0` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.82.0';
+    this.vegaVersion = '2.83.0';
     this.framework = exports.FrameworkEnum.VanillaJs;
   }
   /**

package/dist/cjs/vega-pagination-page-selector-mobile.cjs.entry.js

@@ -58,7 +58,7 @@ class PageSelectorMobileRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("vega-form", { ref: (ref) => {
           domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaFormSubmit, this.handleChange);
         } },
-        index.h("vega-input", { "data-vega-form": "pageSelectorMobile_goTo", size: "small", showClearIcon: false, style: { width: '54px' }, maskConfig: {
+        index.h("vega-input", { "data-vega-form": "pageSelectorMobile_goTo", size: "small", autocomplete: "on", showClearIcon: false, style: { width: '54px' }, maskConfig: {
             type: 'number',
             options: {
               allowNegative: false,

package/dist/cjs/vega-pagination.cjs.entry.js

@@ -60,7 +60,7 @@ const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
       ref: (ref) => {
         domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaFormSubmit, handleChange);
       } },
-      index.h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
+      index.h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", autocomplete: "on", showClearIcon: false, style: { width: '60px' }, maskConfig: {
           type: 'number',
           options: {
             allowNegative: false,

package/dist/cjs/vega-popover_2.cjs.entry.js

@@ -10,7 +10,7 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-dedd3a34.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-52c2b455.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
 const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');

package/dist/cjs/vega-progress-tracker_2.cjs.entry.js

@@ -773,17 +773,16 @@ const VegaProgressTracker = class {
      */
     this.canClickStep = true;
     /**
-     * When enabled, allows `current` to be set to `-1` to indicate
-     *    no highlighted/current step (e.g. all steps are pending or
-     *    the workflow has not started).
+     * When enabled, `current = -1` becomes a valid state that indicates
+     *    no highlighted/current step (e.g. all steps are pending or the
+     *    workflow has not started).
      *
-     * Defaults to `false` to preserve backward-compatible behavior:
-     *    `current` is clamped to `[0, steps.length - 1]`.
+     * Two ways to enter this state:
+     * - Set the `current` prop to `-1`.
+     * - Call the `setCurrent(-1)` method.
      *
-     * When enabled, `current = -1` is a valid state. The `prevStep()`
-     *    method still clamps at `0` — reaching `-1` is only possible
-     *    by explicitly setting `current = -1` via the prop or
-     *    `setCurrent(-1)`.
+     * @VegaHint `prevStep()` still clamps at `0` and will not take `current`
+     *    into `-1`.
      *
      * @vegaVersion 2.82.0
      */

package/dist/cjs/vega-rich-text-content.cjs.entry.js

@@ -15,7 +15,7 @@ const accessibility = require('./accessibility-bfa227f6.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 const typeGuard = require('./type-guard-3ec852d7.js');
-const dtoRendererManager = require('./dto-renderer-manager-ae5fcbba.js');
+const dtoRendererManager = require('./dto-renderer-manager-7eb5c5ce.js');
 const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');