@globalpayments/vega 2.99.0 → 2.101.0

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { createActivationKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 import { htmlSanitizer, labelSanitizeStrategy, plainTextSanitizeStrategy, } from '../../../../../utils/sanitize';
 export class VegaDropdownItemRenderer extends VegaSlimmer {
   constructor() {
@@ -26,7 +26,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         'danger': this.danger && this.selectType === 'none',
       }, tabIndex: this.disabled ? -1 : 0, 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
+      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createActivationKeyHandlerToTriggerClick({ preventDefault: true }), style: this.height > 0 && {
         height: `${this.height}px`,
         boxSizing: 'border-box',
         overflow: 'hidden',

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.css

@@ -65,7 +65,8 @@
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }
 
-:host li:not(.vega-dropdown-item-disabled):focus {
+:host li:not(.vega-dropdown-item-disabled):focus,
+:host(:focus) li:not(.vega-dropdown-item-disabled) {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
   outline: 0;
 }

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

@@ -13,7 +13,7 @@ import { VegaDropdownCreateRenderer } from './slimmers/renderers/vega-dropdown-c
 import { VegaDropdownListRenderer } from './slimmers/renderers/vega-dropdown-list-renderer';
 import { VegaDropdownItemLevelRenderer } from './slimmers/renderers/vega-dropdown-item-level-renderer';
 import { VegaDropdownSearchRenderer } from './slimmers/renderers/vega-dropdown-search-renderer';
-import { VegaDropdownKeyboardController } from './slimmers/controllers/vega-dropdown-keyboard-conttroller';
+import { VegaDropdownKeyboardController } from './slimmers/controllers/vega-dropdown-keyboard-controller';
 import { VegaDropdownAppenderController } from './slimmers/controllers/vega-dropdown-appender-controller';
 import { VegaDropdownGroupLevelRenderer } from './slimmers/renderers/vega-dropdown-group-level-renderer';
 import { VegaDropdownSearchController } from './slimmers/controllers/vega-dropdown-search-controller';

package/dist/collection/components/vega-field-label/slimmers/renderers/vega-field-label-label-announcement-renderer.js

@@ -4,52 +4,43 @@ 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 { h } from '@stencil/core';
 import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 /*
- * Screen-reader-only announcement.
+ * Builds the visually-hidden state suffix appended to the field label for AT.
  *
- * VoiceOver cannot reliably derive the full field state from the
- * visible label alone because:
- *   - "Required" is represented visually by a decorative "*" — AT
- *     users would hear the raw asterisk character, not a meaningful word.
+ * Screen-reader users cannot derive the full field state from the visible
+ * label alone because:
+ *   - "Required" is represented visually by a decorative "*" — AT users
+ *     would otherwise hear the raw asterisk character.
  *   - "Disabled" has no visible text marker at all.
  *
- * This span provides a single, predictable AT announcement that
- * concatenates the label text with the plain-English states
- * (e.g. "Email, Required, Disabled"), ensuring VoiceOver reads
- * exactly what the user needs to know.
- *
- * The visible <label> below is hidden from AT (`aria-hidden="true"`)
- * to prevent duplicate announcements and to stop VoiceOver from
- * vocalising the decorative "*" as part of the label text.
+ * The suffix (e.g. ", Required, Disabled") is rendered as a real, visually
+ * hidden text node INSIDE the visible label span (not as an `aria-label`).
+ * A real text node reads consistently across Safari/Chrome/Firefox and,
+ * unlike an `aria-label` on a container with hidden children, does not make
+ * Chrome/Firefox announce an "empty group".
  */
 export class VegaFieldLabelLabelAnnouncementRenderer extends VegaSlimmer {
   /**
-   * Render a label announcement.
-   *
-   * @returns {Nullable<HTMLElement>}
-   */
-  render() {
-    return this.label && h("span", { class: "aria-announcement" }, this.generateAnnouncement());
-  }
-  /**
-   * Generate a screen-reader-friendly announcement string that concatenates the label text with the field's required/optional and disabled states.
+   * Build the visually-hidden state suffix (the part after the label text).
    *
-   * @returns {string} The generated announcement string.
+   * @returns {string} e.g. ", Required, Disabled", or '' when there is no state to announce.
    */
-  generateAnnouncement() {
-    let announcement = this.label;
+  getStateSuffix() {
+    if (!this.label) {
+      return '';
+    }
+    let suffix = '';
     if (this.isFieldRequired) {
-      announcement += `, ${this.translationSlimmer.t('Required')}`;
+      suffix += `, ${this.translationSlimmer.t('Required')}`;
     }
     else if (this.optional) {
-      announcement += `, ${this.translationSlimmer.t('Optional')}`;
+      suffix += `, ${this.translationSlimmer.t('Optional')}`;
     }
     if (this.disabled) {
-      announcement += `, ${this.translationSlimmer.t('Disabled')}`;
+      suffix += `, ${this.translationSlimmer.t('Disabled')}`;
     }
-    return announcement;
+    return suffix;
   }
 }
 __decorate([

package/dist/collection/components/vega-field-label/vega-field-label.js

@@ -101,19 +101,21 @@ export class VegaFieldLabel {
   render() {
     var _a;
     const shouldCenterAlign = !!((_a = this.suffixButtonConfig) === null || _a === void 0 ? void 0 : _a.centerAlign);
+    const stateSuffix = this.labelAnnouncementRenderer.getStateSuffix();
     return sanitizeVegaComponent(h(Host, { class: {
         'hidden': this.label === '',
         'disabled': this.disabled,
         'center-align': shouldCenterAlign,
       }, onClick: this.handleClick },
-      this.labelAnnouncementRenderer.render(),
-      h("label", { "aria-hidden": "true", part: "container" },
-        h("span", { class: "vega-field-label", part: "label" }, this.label),
-        !this.isFieldRequired && this.optional && (h("span", { class: "optional" },
+      h("label", { part: "container" },
+        h("span", { class: "vega-field-label", part: "label", role: "text" },
+          this.label,
+          stateSuffix && h("span", { class: "aria-announcement" }, stateSuffix)),
+        !this.isFieldRequired && this.optional && (h("span", { class: "optional", "aria-hidden": "true" },
           "(",
           this.translationSlimmer.t('Optional'),
           ")")),
-        h("span", { class: {
+        h("span", { "aria-hidden": "true", class: {
             'vega-field-label-required': true,
             'hidden': !this.isFieldRequired,
           } }, "*")),

package/dist/collection/components/vega-flag-icon/slimmers/controllers/vega-flag-icon-controller.js

@@ -48,14 +48,14 @@ export class VegaFlagIconController extends VegaSlimmer {
     };
   }
   /**
-   * componentWillLoad
+   * connectedCallback
    */
-  componentWillLoad() {
+  connectedCallback() {
     if (!this.country)
       return;
-    const hasIcon = this.isFlagForCountryCodeLoaded(this.country);
-    if (!hasIcon)
+    if (!this.isFlagForCountryCodeLoaded(this.country)) {
       this.registerObserver();
+    }
   }
   /**
    * disconnectedCallback
@@ -95,8 +95,8 @@ __decorate([
   MapToComponentField()
 ], VegaFlagIconController.prototype, "country", void 0);
 __decorate([
-  MapToComponentMethod('componentWillLoad')
-], VegaFlagIconController.prototype, "componentWillLoad", null);
+  MapToComponentMethod('connectedCallback')
+], VegaFlagIconController.prototype, "connectedCallback", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaFlagIconController.prototype, "unRegisterObserver", null);

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/country-select-renderer.js

@@ -8,11 +8,10 @@ import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
-import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
 import { getCountryCallingCode } from '../../../../polyfill/libphonenumber';
 import { COUNTRIES } from '../../assets/countries';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
-import { VegaDropdownRenderItemInternalOverridden, VegaInputSelectRenderPrefixIconInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaDropdownRenderItemInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 export class CountrySelectRenderer extends VegaSlimmer {
@@ -93,7 +92,7 @@ export class CountrySelectRenderer extends VegaSlimmer {
           isScreenPosition: FeatureFlag.isEnabled('VEGA_INPUT_PHONE_NUMBER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
           matchTargetWidth: false,
           size: this.estimateMaxWidthOfCountries(countries),
-        }, size: this.size, prefixIcon: VegaInternalIconManager.getIconKey(this.countryCode), disabled: this.disabled, placeholder: "", ref: (inputSelect) => {
+        }, size: this.size, disabled: this.disabled, placeholder: "", ref: (inputSelect) => {
           this.inputSelectRef = inputSelect;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(inputSelect, VegaChange, 
           /*
@@ -105,11 +104,8 @@ export class CountrySelectRenderer extends VegaSlimmer {
             this.handleCountrySelectChange(e.detail);
           });
           remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaDropdownRenderItemInternalOverridden), this.renderDropdownItem.bind(this));
-          remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInputSelectRenderPrefixIconInternalOverridden), this.renderDropdownPrefixIconWithFlagIcon.bind(this));
-        }, value: this.countryCode })));
-  }
-  renderDropdownPrefixIconWithFlagIcon(prefixIcon) {
-    return h("vega-flag-icon", { country: prefixIcon.split(' ')[1] });
+        }, value: this.countryCode },
+        h("vega-flag-icon", { slot: "prefix", country: this.countryCode }))));
   }
   /*
    * The below method is e2e-test covered in

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

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import chevronUp from '../../../../global/icons/chevron-up';
 import chevronDown from '../../../../global/icons/chevron-down';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
@@ -16,11 +15,29 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderContainer = () => {
-      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), part: "select-container" },
+      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: this.handleTriggerKeyDown, part: "select-container" },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
     };
+    /**
+     * VD-9605: open/close the dropdown on both Enter and Space, matching native button
+     * semantics. Space is preventDefaulted so activating the trigger does not scroll the page.
+     *
+     * @param {KeyboardEvent} e - keydown event on the select trigger.
+     * @returns {void}
+     */
+    this.handleTriggerKeyDown = (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+      }
+      if (this.disabled) {
+        return;
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.currentTarget.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
+      }
+    };
     this.renderPrefixIcon = () => {
       return this.vegaInputSelectPrefixIconRenderer.render();
     };

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

@@ -6,35 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { h } from '@stencil/core';
-import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInputSelectRenderPrefixIconInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
-/** Manager remote invocation */
 export class VegaInputSelectPrefixIconRenderer extends VegaSlimmer {
-  /**
-   * Component lifecycle - connectedCallback
-   */
-  connectedCallback() {
-    this.remotePhoneNumberPrefixIconRenderSubject =
-      domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaInputSelectRenderPrefixIconInternalOverridden);
-  }
-  /**
-   * Call the render function in input-phone-number.
-   *
-   * @param {unknown[]} args - arguments of remote search function
-   * @returns {Nullable<HTMLVegaFlagIconElement>} - returned vega-flag-icon.
-   */
-  callRemotePrefixIconRender(...args) {
-    if (this.remotePhoneNumberPrefixIconRenderSubject) {
-      const renderResult = remoteInvocationRegistry.call(this.remotePhoneNumberPrefixIconRenderSubject, ...args);
-      if (renderResult)
-        return renderResult;
-    }
-    return null;
+  checkPrefixSlotPresence() {
+    this.hasPrefixSlot = this.host.querySelector('[slot="prefix"]') !== null;
   }
   render() {
-    const renderResult = this.callRemotePrefixIconRender(this.prefixIcon);
-    return (this.prefixIcon && (h("div", { class: "vega-input-select-prefix-icon" }, renderResult ? (renderResult) : (h("vega-icon", { icon: this.prefixIcon, size: "size-16" })))));
+    return ((this.hasPrefixSlot || this.prefixIcon) && (h("div", { class: "vega-input-select-prefix-icon" }, this.hasPrefixSlot ? (h("slot", { name: "prefix" })) : (h("vega-icon", { icon: this.prefixIcon, size: "size-16" })))));
   }
 }
 __decorate([
@@ -44,5 +21,8 @@ __decorate([
   MapToComponentField()
 ], VegaInputSelectPrefixIconRenderer.prototype, "prefixIcon", void 0);
 __decorate([
-  MapToComponentMethod('connectedCallback')
-], VegaInputSelectPrefixIconRenderer.prototype, "connectedCallback", null);
+  MapToComponentField({ writable: true })
+], VegaInputSelectPrefixIconRenderer.prototype, "hasPrefixSlot", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaInputSelectPrefixIconRenderer.prototype, "checkPrefixSlotPresence", null);

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

@@ -83,6 +83,7 @@ export class VegaInputSelect {
     this.isDropdownShow = false;
     this.currentBreakpoint = getCurrentBreakpoint();
     this.isLazyLoading = false;
+    this.hasPrefixSlot = false;
     /**
      * Specifies the label or title for the input field.
      *
@@ -801,7 +802,8 @@ export class VegaInputSelect {
     "isDropdownShow": {},
     "currentBreakpoint": {},
     "isLazyLoading": {},
-    "selectedItem": {}
+    "selectedItem": {},
+    "hasPrefixSlot": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",

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

@@ -8,6 +8,7 @@ import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComp
 import { findParent } from '../../../../utils/ui';
 import { VegaModalOpenState } from '../models/vega-modal-open-state';
 import { AriaDialogFocusableTrapSlimmer } from '../../../../helpers/slimmers/aria-dialog-focusable-trap-slimmer';
+import { isOverlayHandledEscape, markOverlayHandledEscape, } from '../../../../helpers/keyboard/overlay-escape-coordination';
 /**
  * Modal open state controller
  */
@@ -39,11 +40,73 @@ export class VegaModalOpenStateController extends VegaSlimmer {
         this.close('close-button');
       }
     };
+    /**
+     * Capture-phase document `keydown` listener for Escape. When this modal is
+     * the topmost open vega-modal we close it and stop propagation so that
+     * ancestor focus traps (e.g. a Bootstrap modal which closes itself on
+     * Escape via its own keydown listener attached to the modal element) do
+     * not also react to the same key press and close themselves.
+     *
+     * If an inner overlay (vega-dropdown / vega-popover) already handled this
+     * Escape press, it calls `markOverlayHandledEscape(event)` from its own
+     * capture-phase listener. `isOverlayHandledEscape` detects this so this
+     * modal does not also close — meaning Escape closes only the innermost
+     * overlay.
+     *
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    this.handleEscapeCapture = (event) => {
+      if (event.code !== 'Escape') {
+        return;
+      }
+      if (!this.openState.isOpen) {
+        return;
+      }
+      if (this.openedModalStackController.peek() !== this.host) {
+        return;
+      }
+      // If an inner overlay (vega-dropdown / vega-popover) already handled
+      // this Escape press in its own capture-phase listener, skip closing the
+      // modal — Escape should close only the innermost overlay.
+      if (isOverlayHandledEscape(event)) {
+        return;
+      }
+      // Stop the event before any descendant or ancestor focus-trap container
+      // (e.g. a Bootstrap modal which closes itself on Escape, or an outer
+      // vega-modal) reacts to it. Mark the event so an outer vega-modal in the
+      // same document-capture phase does not also close on the same key press.
+      event.stopPropagation();
+      event.preventDefault();
+      markOverlayHandledEscape(event);
+      this.close('escape');
+    };
+  }
+  /**
+   * Component lifecycle - [connectedCallback]
+   *
+   * Capture-phase Escape listener is registered here (rather than
+   * `componentDidLoad`) so it is re-added whenever the modal element is moved
+   * in the DOM (e.g. RTE's Insert-via-URL modal is moved to `host.parentElement`
+   * before being shown — that triggers disconnect+connect but does not re-fire
+   * `componentDidLoad`).
+   *
+   * Capture-phase Escape listener so ancestor focus-trap containers (e.g. a
+   * Bootstrap modal whose own keydown handler is attached to the modal
+   * element) do not also react to the same Escape press while a vega-modal
+   * is open inside them. Capture phase fires before any descendant bubble
+   * listener; calling `stopPropagation` then prevents those listeners from
+   * running. We only intervene when this is the topmost open vega-modal.
+   */
+  connectedCallback() {
+    // eslint-disable-next-line no-restricted-globals
+    document.addEventListener('keydown', this.handleEscapeCapture, true);
   }
   /**
    * Component lifecycle - [disconnectedCallback]
    */
   disconnectedCallback() {
+    // eslint-disable-next-line no-restricted-globals
+    document.removeEventListener('keydown', this.handleEscapeCapture, true);
     this.close('remove-node');
   }
   /**
@@ -325,6 +388,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaModalOpenStateController.prototype, "ariaDialogFocusableTrapSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaModalOpenStateController.prototype, "connectedCallback", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaModalOpenStateController.prototype, "disconnectedCallback", null);

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

@@ -25,6 +25,23 @@ export class VegaPopoverAppenderRenderer extends VegaSlimmer {
   getPopoverContentBox() {
     return this.popoverContentBox;
   }
+  /**
+   * Whether an inner overlay (e.g. an open `vega-input-select`/`vega-dropdown`
+   * or a nested popover) is currently displayed inside this popover's content
+   * box. Such overlays own the Escape key, so the popover must not close while
+   * one of them is open.
+   *
+   * @returns {boolean} True when a visible nested overlay content box exists.
+   */
+  hasOpenNestedOverlay() {
+    if (!this.popoverContentBox) {
+      return false;
+    }
+    const nested = this.popoverContentBox.querySelectorAll('vega-dropdown-content-box, vega-popover-content-box');
+    return Array.from(nested).some(
+    // eslint-disable-next-line spellcheck/spell-checker
+    (box) => box.getClientRects().length > 0);
+  }
   /**
    * The `render` function returns a JSX element for a `vega-popover-content-box` component with a ref assigned to `this.popoverContentBox`.
    *

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

@@ -13,6 +13,7 @@ import { VegaPopoverShow, VegaPopoverHide } from '../../helpers/event-manager/ev
 import { VegaPopoverAppenderRenderer } from './slimmers/renderers/vega-popover-appender-renderer';
 import { VegaPopoverAppenderController } from './slimmers/controllers/vega-popover-appender-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { isOverlayHandledEscape, markOverlayHandledEscape, } from '../../helpers/keyboard/overlay-escape-coordination';
 /**
  * A Popover is an overlaid window that displays rich content, and is visually tethered to the element that triggers it.
  *
@@ -505,8 +506,39 @@ __decorate([
     {
       keyCode: 'Escape',
       activeElementInScope: [host.appenderRenderer.getPopoverContentBox()],
-      callback: host.hidePopover,
+      // Capture-phase + stopPropagation so ancestor focus-trap containers
+      // (e.g. a Bootstrap modal which closes itself on Escape via its own
+      // keydown listener attached to the modal element) do not also react
+      // to the same key press and close themselves before/instead of the
+      // popover. The popover's own close logic still runs here.
+      //
+      // `stopPropagation` does NOT block other document-level capture
+      // listeners (e.g. vega-modal's Escape handler) on the same target,
+      // so we also tag the event with a marker that vega-modal checks to
+      // avoid closing when the popover already handled this Escape press.
+      // We deliberately do NOT use `stopImmediatePropagation` here because
+      // other document listeners on the same target (e.g. focus-restore
+      // observers in toolbar slimmers) still need to observe the key.
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ (event) => {
+        // An inner overlay (e.g. an open vega-input-select / vega-dropdown
+        // or a nested popover) owns this Escape press. Skip closing so it
+        // dismisses only the innermost overlay, not the whole popover. This
+        // is order-independent within the shared KeyboardManager loop: if
+        // the inner overlay's handler ran first it marked the event; if it
+        // runs after this one, its still-open content box is detectable
+        // inside our content box.
+        if (isOverlayHandledEscape(event) || host.appenderRenderer.hasOpenNestedOverlay()) {
+          return;
+        }
+        if (host.isPopoverShow) {
+          event.stopPropagation();
+          markOverlayHandledEscape(event);
+        }
+        host.hidePopover();
+      },
       eventName: 'keydown',
+      capture: true,
       preventDefault: true,
     },
     {

package/dist/collection/components/vega-rich-text-content/slimmers/renderers/vega-rich-text-content-renderer.js

@@ -43,7 +43,10 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
-    return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
+    return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable, role: "textbox", "aria-multiline": "true", "aria-disabled": this.contentEditable ? undefined : 'true', 
+      // When disabled the element is not contenteditable, so it needs an explicit
+      // tabindex to remain a focus stop and let AT announce its disabled state.
+      tabindex: this.contentEditable ? undefined : '0' }, this.renderContent()));
   }
   renderContent() {
     var _a;

package/dist/collection/components/vega-rich-text-editor/constants/constant.js

@@ -32,6 +32,14 @@ export const RTE_TEXT_COLORS = [
   },
 ];
 export const ZERO_WIDTH_SPACE = '\u200b';
+// Identifies the input source that triggered a value flush.
+export var RTEUpdateSource;
+(function (RTEUpdateSource) {
+  RTEUpdateSource["Default"] = "default";
+  RTEUpdateSource["Composition"] = "composition";
+})(RTEUpdateSource || (RTEUpdateSource = {}));
+// Event property key used to carry the update source across the synthetic beforeinput event.
+export const RTE_UPDATE_SOURCE_KEY = '__updateSource';
 export const VegaRTEDefaultTextStyleItems = [
   { key: 'title' },
   { key: 'subtitle' },
@@ -94,3 +102,4 @@ export const RTE_PASTE_MODE_DATA_TYPE = 'application/x-vega-rte-paste-mode';
  * originated from Microsoft Word.
  */
 export const RTE_PASTE_MODE_WORD = 'word';
+export const RTE_WORD_COUNT_KEY = 'rte-word-count';

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/commit-value-strategy.js

@@ -0,0 +1,13 @@
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Default commit strategy — the candidate becomes the committed value. Rejection
+ * is handled exclusively by interceptors that veto the commit by not executing.
+ */
+export class CommitValueStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action) {
+    return action.candidate;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/commit-value-action.js

@@ -0,0 +1,20 @@
+import { ModifyContentAction } from './modify-content-action.abstract';
+/**
+ * Action type discriminator. Plain string constant — intentionally NOT added to
+ * {@link ModifyContentActionType} enum to keep the commit-validation flow self-contained.
+ */
+export const COMMIT_VALUE = 'COMMIT_VALUE';
+/**
+ * Dispatched before the editor commits a candidate value. The default strategy
+ * commits the candidate as-is; interceptors are the only place a commit is vetoed.
+ */
+export class CommitValueAction extends ModifyContentAction {
+  constructor(candidate, previous, host) {
+    super();
+    this.candidate = candidate;
+    this.previous = previous;
+    this.host = host;
+    this.isFlushable = false;
+    this.type = COMMIT_VALUE;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/blocks/block.abstract.js

@@ -183,6 +183,17 @@ export class RTEBlock {
     }
     return firstItem;
   }
+  /**
+   * Get the plain text content of the block, used for character counting.
+   *
+   * @returns {string} The concatenated plain text of all child nodes and blocks.
+   */
+  getPlainText() {
+    var _a;
+    return ((_a = this.children) !== null && _a !== void 0 ? _a : [])
+      .map((child) => child.getPlainText())
+      .join('');
+  }
   /**
    * Check if the block is a list item block
    *

package/dist/collection/components/vega-rich-text-editor/dto/blocks/list-item-block.js

@@ -1,4 +1,3 @@
-import { RTETextNode } from '../nodes/text-node';
 import { RTEListBlock } from './list-block';
 import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
 import { AppendChildrenAction } from '../actions/append-child-nodes-action';
@@ -47,7 +46,7 @@ export class RTEListItemBlock extends RTETextBlock {
    */
   static from(block, options = { autoMatchFormat: true }) {
     const listItemBlock = new RTEListItemBlock(block.id, undefined, options);
-    listItemBlock.children = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock, options));
+    listItemBlock.children = RTEListItemBlock.convertNodes(block.nodes, listItemBlock, options);
     if (block.children) {
       listItemBlock.nestList = block.children.map((child) => {
         const listBlock = RTEListBlock.from(child, options);
@@ -103,6 +102,16 @@ export class RTEListItemBlock extends RTETextBlock {
     }
     return super.getLastNode();
   }
+  /**
+   * @inheritDoc
+   */
+  getPlainText() {
+    var _a;
+    const nestListText = ((_a = this.nestList) !== null && _a !== void 0 ? _a : [])
+      .map((list) => list.getPlainText())
+      .join('');
+    return super.getPlainText() + nestListText;
+  }
   /**
    * Create a new list item block.
    *

package/dist/collection/components/vega-rich-text-editor/dto/blocks/text-block.js

@@ -56,18 +56,30 @@ export class RTETextBlock extends RTEBlock {
     const textBlock = new RTETextBlock(block.id, block.type, options);
     const annotations = options.autoMatchFormat
       ? Object.assign(Object.assign({}, block.annotations), { textStyle: (_b = (_a = block.annotations) === null || _a === void 0 ? void 0 : _a.textStyle) !== null && _b !== void 0 ? _b : textBlock.type }) : block.annotations;
-    textBlock.children = block.nodes
+    textBlock.children = RTETextBlock.convertNodes(block.nodes, textBlock, options);
+    if (annotations) {
+      super.convertAnnotationsToMap(textBlock.annotationMap, annotations);
+    }
+    return textBlock;
+  }
+  /**
+   * Convert raw node payloads to their registered `RTENode` subclasses via
+   * `RTEDTOClassManager`, preserving custom types (e.g. `RTETokenNode`).
+   *
+   * @param {VegaRTETextNode[]} nodes - Raw node payloads.
+   * @param {RTETextBlock} parent - Parent block for the converted nodes.
+   * @param {VegaRTETransformOptions} [options] - Optional transform options.
+   * @returns {RTETextNode[]} Converted nodes; unregistered types are dropped.
+   */
+  static convertNodes(nodes, parent, options) {
+    return nodes
       .map((richText) => {
       const NodeClass = RTEDTOClassManager.getRTENodeClass(richText.type);
       if (NodeClass) {
-        return NodeClass.from(richText, textBlock, options);
+        return NodeClass.from(richText, parent, options);
       }
     })
       .filter(isNonNullable);
-    if (annotations) {
-      super.convertAnnotationsToMap(textBlock.annotationMap, annotations);
-    }
-    return textBlock;
   }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type