@heartlandone/vega 2.82.0 → 2.84.0

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

@@ -29,18 +29,23 @@ export class VegaModalBackdropController extends 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;
   }
@@ -51,6 +56,7 @@ export class VegaModalBackdropController extends VegaSlimmer {
     this.backdropRef && this.backdropRef.remove();
   }
 }
+VegaModalBackdropController.modalBackdropClass = 'vega-modal-backdrop';
 VegaModalBackdropController.backdropColorMap = {
   default: 'bg-backdrop-modal',
   semi: 'bg-backdrop-popover',

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

@@ -0,0 +1,43 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaModalSectionPaddingState } from '../models/vega-modal-section-padding-state';
+/**
+ * Modal section padding state controller
+ */
+export class VegaModalPaddingStateController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    this.setSectionPaddingState();
+  }
+  /**
+   * Watch for changes in padding and update the section padding state accordingly.
+   */
+  watchPadding() {
+    this.setSectionPaddingState();
+  }
+  /**
+   * Set the section padding state based on the current padding prop.
+   */
+  setSectionPaddingState() {
+    this.sectionPaddingState = new VegaModalSectionPaddingState(this.padding);
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaModalPaddingStateController.prototype, "sectionPaddingState", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalPaddingStateController.prototype, "padding", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaModalPaddingStateController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchPadding')
+], VegaModalPaddingStateController.prototype, "watchPadding", null);

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

@@ -4,11 +4,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-slimmer';
+import { TagNameMutationFilter } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-filters';
 /**
  * Nested modal controller
  */
-export class VegaNestedModalController extends VegaSlimmer {
+export class VegaNestedModalController extends MutationObserverSlimmer {
+  constructor() {
+    super({
+      mutationFilter: TagNameMutationFilter('VEGA-MODAL'),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: () => {
+        this.appendNestedModalToBody();
+      },
+    });
+  }
   /**
    * Component lifecycle - [connectedCallback]
    */

package/dist/collection/components/vega-modal/slimmers/models/vega-modal-section-padding-state.js

@@ -0,0 +1,56 @@
+import { isVegaModalSectionPaddingType } from '../../../../types/type-guard';
+/**
+ * Represents the modal section padding state.
+ */
+export class VegaModalSectionPaddingState {
+  constructor(padding) {
+    if (isVegaModalSectionPaddingType(padding)) {
+      this.sectionPadding = Object.assign({}, VegaModalSectionPaddingState.defaultSectionPadding, padding);
+    }
+    else {
+      const isEmptyPadding = !padding || (typeof padding === 'object' && Object.keys(padding).length === 0);
+      const paddingValue = isEmptyPadding
+        ? VegaModalSectionPaddingState.defaultPadding
+        : padding;
+      this.sectionPadding = {
+        header: paddingValue,
+        content: paddingValue,
+        footer: paddingValue,
+      };
+    }
+  }
+  /**
+   * Gets the padding for the header section of the modal.
+   *
+   * @returns {ResponsiveType<PaddingType>} The padding for the header section.
+   */
+  getHeaderPadding() {
+    return this.sectionPadding.header;
+  }
+  /**
+   * Gets the padding for the content section of the modal.
+   *
+   * @returns {ResponsiveType<PaddingType>} The padding for the content section.
+   */
+  getContentPadding() {
+    return this.sectionPadding.content;
+  }
+  /**
+   * Gets the padding for the footer section of the modal.
+   *
+   * @returns {ResponsiveType<PaddingType>} The padding for the footer section.
+   */
+  getFooterPadding() {
+    return this.sectionPadding.footer;
+  }
+}
+VegaModalSectionPaddingState.defaultPadding = 'size-24';
+VegaModalSectionPaddingState.defaultSectionPadding = {
+  header: {
+    x: VegaModalSectionPaddingState.defaultPadding,
+    top: VegaModalSectionPaddingState.defaultPadding,
+    bottom: 'size-16',
+  },
+  content: { x: VegaModalSectionPaddingState.defaultPadding, y: '0' },
+  footer: VegaModalSectionPaddingState.defaultPadding,
+};

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

@@ -9,7 +9,7 @@ import { Fragment, h, Host } from '@stencil/core';
 import { generateUUID } from '../../../../utils/misc';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import { DefaultModalSize } from '../../../../constants/ui';
-import { isResponsiveSizeType } from '../../../../types/type-guard';
+import { isResponsiveSizeType, isVegaModalSectionPaddingType } from '../../../../types/type-guard';
 /**
  * Modal renderer
  */
@@ -31,6 +31,7 @@ export class VegaModalRenderer extends VegaSlimmer {
     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())));
   }
@@ -44,10 +45,9 @@ export class VegaModalRenderer extends VegaSlimmer {
     return (h("vega-box", { class: {
         'vega-modal-header': true,
         'vega-modal-header-with-title': this.hasModalTitle(),
-        'vega-modal-header-with-slot': this.useModalSlotTitle(),
         'vega-modal-header-with-icon': this.showCloseButton,
         'vega-modal-header-with-content-scroll': this.isContentScrollable(),
-      }, padding: this.padding, id: this.titleId },
+      }, padding: this.sectionPaddingState.getHeaderPadding(), id: this.titleId },
       this.renderTitle(),
       this.showCloseButton && this.renderCloseBtn()));
   }
@@ -55,7 +55,7 @@ export class VegaModalRenderer extends VegaSlimmer {
     return (h("vega-box", { class: {
         'vega-modal-content': true,
         'vega-modal-content-with-scroll': this.isContentScrollable(),
-      }, padding: this.padding, maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e) },
+      }, padding: this.sectionPaddingState.getContentPadding(), maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e) },
       h(Fragment, null,
         h("slot", null),
         h("slot", { name: "content" }),
@@ -66,7 +66,7 @@ export class VegaModalRenderer extends VegaSlimmer {
         'vega-modal-footer': true,
         'vega-modal-footer-with-slot': this.hasModalFooter(),
         'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
-      }, padding: this.padding, ref: (e) => (this.modalFooter = e) },
+      }, padding: this.sectionPaddingState.getFooterPadding(), ref: (e) => (this.modalFooter = e) },
       h(Fragment, null,
         h("slot", { name: "footer" }),
         h("slot", { name: "modal-footer" }))));
@@ -88,12 +88,9 @@ export class VegaModalRenderer extends VegaSlimmer {
     return Boolean(this.contentMaxHeight);
   }
   hasModalTitle() {
-    return Boolean(this.modalTitle) || this.useModalSlotTitle();
-  }
-  useModalSlotTitle() {
-    return (!this.modalTitle &&
-      (this.host.querySelector(`[slot='modal-title']`) !== null ||
-        this.host.querySelector(`[slot='title']`) !== null));
+    return (Boolean(this.modalTitle) ||
+      this.host.querySelector(`[slot='modal-title']`) !== null ||
+      this.host.querySelector(`[slot='title']`) !== null);
   }
 }
 __decorate([
@@ -138,3 +135,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "openStateController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "sectionPaddingState", void 0);

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

@@ -5240,15 +5240,30 @@
   align-items: center;
   flex-direction: row;
   gap: 8px;
-  padding-bottom: 0px;
 }
 
-.vega-modal-header.vega-modal-header-with-title:not(.vega-modal-header-with-slot),
-.vega-modal-header.vega-modal-header-with-icon:not(.vega-modal-header-with-slot) {
+:host(:not(.is-section-padding)) .vega-modal-header {
+  padding-bottom: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-header.vega-modal-header-with-title, :host(:not(.is-section-padding)) .vega-modal-header.vega-modal-header-with-icon {
   padding-bottom: 16px;
 }
-
-.vega-modal-header-with-content-scroll:not(.vega-modal-header-with-title):not(.vega-modal-header-with-icon) {
+:host(:not(.is-section-padding)) .vega-modal-header.vega-modal-header-with-content-scroll:not(.vega-modal-header-with-title):not(.vega-modal-header-with-icon) {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-content {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-content.vega-modal-content-with-scroll {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+:host(:not(.is-section-padding)) .vega-modal-footer:not(.vega-modal-footer-with-slot) {
+  padding-top: 0px;
+}
+:host(:not(.is-section-padding)) .vega-modal-footer.vega-modal-footer-with-content-scroll:not(.vega-modal-footer-with-slot) {
   padding-top: 0px;
   padding-bottom: 0px;
 }
@@ -5305,26 +5320,10 @@
   display: block;
 }
 
-.vega-modal-content {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .vega-modal-content-with-scroll {
-  padding-top: 24px;
-  padding-bottom: 24px;
   overflow: auto;
 }
 
-.vega-modal-footer:not(.vega-modal-footer-with-slot) {
-  padding-top: 0px;
-}
-
-.vega-modal-footer-with-content-scroll:not(.vega-modal-footer-with-slot) {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot {
   position: relative;
   z-index: 1;

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

@@ -24,6 +24,7 @@ import { VegaModalBackdropController } from './slimmers/controllers/vega-modal-b
 import { VegaModalOpenedModalStackController } from './slimmers/controllers/vega-modal-opened-modal-stack-controller';
 import { VegaModalZIndexController } from './slimmers/controllers/vega-modal-z-index-controller';
 import { VegaModalOpenState } from './slimmers/models/vega-modal-open-state';
+import { VegaModalPaddingStateController } from './slimmers/controllers/vega-modal-padding-state-controller';
 /**
  * @vegaVersion 1.0.6
  */
@@ -37,6 +38,7 @@ export class VegaModal {
     this.backdropController = new VegaModalBackdropController();
     this.openedModalStackController = new VegaModalOpenedModalStackController();
     this.zIndexController = new VegaModalZIndexController();
+    this.paddingStateController = new VegaModalPaddingStateController();
     this.renderer = new VegaModalRenderer();
     this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
     this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
@@ -163,6 +165,9 @@ export class VegaModal {
   watchOpen() {
     this.openState = new VegaModalOpenState(this.open, 'property');
   }
+  watchPadding() {
+    methodPlaceholder();
+  }
   watchContentMaxHeight() {
     methodPlaceholder();
   }
@@ -470,8 +475,8 @@ export class VegaModal {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "ResponsiveType<PaddingType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "original": "ResponsiveType<PaddingType> | VegaModalSectionPadding",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { header?: ResponsiveType<PaddingType>; content?: ResponsiveType<PaddingType>; footer?: ResponsiveType<PaddingType>; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -480,6 +485,10 @@ export class VegaModal {
           "PaddingType": {
             "location": "import",
             "path": "../../types/ui.type"
+          },
+          "VegaModalSectionPadding": {
+            "location": "import",
+            "path": "./types"
           }
         }
       },
@@ -573,7 +582,8 @@ export class VegaModal {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "openState": {}
+    "openState": {},
+    "sectionPaddingState": {}
   }; }
   static get events() { return [{
       "method": "vegaClose",
@@ -691,6 +701,9 @@ export class VegaModal {
     }, {
       "propName": "open",
       "methodName": "watchOpen"
+    }, {
+      "propName": "padding",
+      "methodName": "watchPadding"
     }, {
       "propName": "contentMaxHeight",
       "methodName": "watchContentMaxHeight"
@@ -745,6 +758,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "zIndexController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "paddingStateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "renderer", void 0);

package/dist/collection/components/vega-pagination/internal/vega-pagination-go-to.js

@@ -21,7 +21,7 @@ export const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, })
       ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, handleChange);
       } },
-      h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
+      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/collection/components/vega-pagination/vega-pagination-page-selector-mobile/slimmers/renderers/page-selector-mobile-renderer.js

@@ -42,7 +42,7 @@ export class PageSelectorMobileRenderer extends VegaSlimmer {
       h("vega-form", { ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, this.handleChange);
         } },
-        h("vega-input", { "data-vega-form": "pageSelectorMobile_goTo", size: "small", showClearIcon: false, style: { width: '54px' }, maskConfig: {
+        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/collection/components/vega-progress-tracker/vega-progress-tracker.js

@@ -92,17 +92,16 @@ export class VegaProgressTracker {
      */
     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
      */
@@ -330,10 +329,13 @@ export class VegaProgressTracker {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaHint",
+            "text": "`prevStep()` still clamps at `0` and will not take `current`\ninto `-1`."
+          }, {
             "name": "vegaVersion",
             "text": "2.82.0"
           }],
-        "text": "When enabled, allows `current` to be set to `-1` to indicate\n   no highlighted/current step (e.g. all steps are pending or\n   the workflow has not started).\n\nDefaults to `false` to preserve backward-compatible behavior:\n   `current` is clamped to `[0, steps.length - 1]`.\n\nWhen enabled, `current = -1` is a valid state. The `prevStep()`\n   method still clamps at `0` \u2014 reaching `-1` is only possible\n   by explicitly setting `current = -1` via the prop or\n   `setCurrent(-1)`."
+        "text": "When enabled, `current = -1` becomes a valid state that indicates\n   no highlighted/current step (e.g. all steps are pending or the\n   workflow has not started).\n\nTwo ways to enter this state:\n- Set the `current` prop to `-1`.\n- Call the `setCurrent(-1)` method."
       },
       "attribute": "allow-no-current-step",
       "reflect": false,

package/dist/collection/components/vega-rich-text-editor/dto/annotations/text-style-annotation.js

@@ -1,4 +1,5 @@
 import { BlockAnnotation, BlockAnnotationTypeEnum } from './block-annotation.abstract';
+import { TEXT_STYLE_DEFAULTS } from './text-style-default-styles';
 /**
  * Text style annotation
  */
@@ -24,45 +25,9 @@ export class TextStyleAnnotation extends BlockAnnotation {
    * @returns {Nullable<AnnotationStyle>} The default styles for the given text style type.
    */
   static getDefaultStyles(textStyle) {
-    const textStyleBase = {
-      fontFamily: 'Inter',
-      fontSize: '16px',
-      lineHeight: '22px',
-      minHeight: '22px',
-      fontWeight: '500',
-    };
-    const paragraphStyle = Object.assign(Object.assign({}, textStyleBase), { marginTop: '0px', marginBottom: '0px' });
-    switch (textStyle) {
-      case 'paragraph': {
-        return paragraphStyle;
-      }
-      case 'title': {
-        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' });
-      }
-      case 'subtitle': {
-        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' });
-      }
-      case 'heading-1': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '22px', lineHeight: '24px', minHeight: '24px' });
-      }
-      case 'heading-2': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '20px', lineHeight: '24px', minHeight: '24px' });
-      }
-      case 'heading-3': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '18px' });
-      }
-      case 'heading-4': {
-        return Object.assign({}, paragraphStyle);
-      }
-      case 'heading-5': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '14px' });
-      }
-      case 'heading-6': {
-        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '12px' });
-      }
-      default:
-        return null;
-    }
+    if (!textStyle)
+      return null;
+    return TEXT_STYLE_DEFAULTS[textStyle];
   }
   /**
    * Generate the JSON representation of the annotation

package/dist/collection/components/vega-rich-text-editor/dto/annotations/text-style-default-styles.js

@@ -0,0 +1,30 @@
+const TEXT_STYLE_BASE = {
+  fontFamily: 'Inter',
+  fontSize: '16px',
+  lineHeight: '22px',
+  minHeight: '22px',
+  fontWeight: '500',
+};
+const PARAGRAPH_TEXT_STYLE = Object.assign(Object.assign({}, TEXT_STYLE_BASE), { marginTop: '0px', marginBottom: '0px' });
+export const TEXT_STYLE_VALUES = [
+  'paragraph',
+  'title',
+  'subtitle',
+  'heading-1',
+  'heading-2',
+  'heading-3',
+  'heading-4',
+  'heading-5',
+  'heading-6',
+];
+export const TEXT_STYLE_DEFAULTS = {
+  'paragraph': PARAGRAPH_TEXT_STYLE,
+  'title': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' }),
+  'subtitle': Object.assign(Object.assign({}, TEXT_STYLE_BASE), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' }),
+  'heading-1': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '22px', lineHeight: '24px', minHeight: '24px' }),
+  'heading-2': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '20px', lineHeight: '24px', minHeight: '24px' }),
+  'heading-3': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '18px' }),
+  'heading-4': Object.assign({}, PARAGRAPH_TEXT_STYLE),
+  'heading-5': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '14px' }),
+  'heading-6': Object.assign(Object.assign({}, PARAGRAPH_TEXT_STYLE), { fontSize: '12px' }),
+};

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

@@ -49,12 +49,27 @@ export class VegaRTEExtension {
   static registerFilterStylesStrategy(blockOrNodeClassName, strategy) {
     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) {
+    methodPlaceholder(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.setExtensionContext(context);
   }
@@ -103,12 +118,22 @@ export 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) {
-    RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+  registerToolbarButtonRenderer(type, renderer, host) {
+    if (host) {
+      RTEDTORendererManager.registerRTEToolbarButtonRendererForHost(host, type, renderer);
+    }
+    else {
+      RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+    }
   }
   /**
    * This is a helper method that utilizes RTEUtils to register common strategies.

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-extension.js

@@ -8,6 +8,7 @@ import { RTELanguageToolbarButtonRenderer } from './language-toolbar-button-rend
 export class VegaRTELanguageExtension extends VegaRTEExtension {
   constructor(languageList, languagesState) {
     super();
+    this.languageToolbarButtonRenderer = null;
     this.languageState = {
       selectedLanguage: '',
       contentMap: {},
@@ -25,24 +26,39 @@ export 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);
     }
@@ -54,7 +70,9 @@ export 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);