@globalpayments/vega 2.89.0 → 2.91.0

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

@@ -216,7 +216,7 @@
   font-size: 42px;
   font-weight: 700;
   line-height: 50px;
-  letter-spacing: 0.42px;
+  letter-spacing: -0.42px;
 }
 
 @media screen and (min-width: 768px) and (max-width: 1023px) {
@@ -226,7 +226,7 @@
     font-size: 42px;
     font-weight: 700;
     line-height: 50px;
-    letter-spacing: 2.52px;
+    letter-spacing: -0.67px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
@@ -236,7 +236,7 @@
     font-size: 48px;
     font-weight: 700;
     line-height: 56px;
-    letter-spacing: 0.96px;
+    letter-spacing: -1.06px;
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
@@ -246,7 +246,7 @@
     font-size: 60px;
     font-weight: 700;
     line-height: 70px;
-    letter-spacing: 1.8px;
+    letter-spacing: -1.8px;
   }
 }
 :host(.v-font-h2),
@@ -275,7 +275,7 @@
     font-size: 36px;
     font-weight: 700;
     line-height: 44px;
-    letter-spacing: 1.8px;
+    letter-spacing: -0.18px;
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
@@ -285,7 +285,7 @@
     font-size: 42px;
     font-weight: 700;
     line-height: 52px;
-    letter-spacing: 0.42px;
+    letter-spacing: -0.42px;
   }
 }
 :host(.v-font-h3),
@@ -294,7 +294,7 @@
   font-size: 28px;
   font-weight: 500;
   line-height: 36px;
-  letter-spacing: 0.28px;
+  letter-spacing: -0.28px;
 }
 
 @media screen and (min-width: 768px) and (max-width: 1023px) {
@@ -304,7 +304,7 @@
     font-size: 28px;
     font-weight: 500;
     line-height: 36px;
-    letter-spacing: 0.28px;
+    letter-spacing: -0.28px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
@@ -314,7 +314,7 @@
     font-size: 28px;
     font-weight: 500;
     line-height: 36px;
-    letter-spacing: 0.28px;
+    letter-spacing: -0.28px;
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
@@ -324,7 +324,7 @@
     font-size: 32px;
     font-weight: 500;
     line-height: 44px;
-    letter-spacing: 0.32px;
+    letter-spacing: -0.32px;
   }
 }
 :host(.v-font-h4),
@@ -1830,6 +1830,68 @@
     text-align: justify;
   }
 }
+/* This file is generated by vega-design 2.0.77 */
+/* Legacy letter-spacing values for typography tokens whose source
+ * percentage was negative. Generated only for tokens affected by the converter bug.
+ * Opt in by adding the `legacy-letter-spacing` class alongside `v-font-*`. */
+:host(.v-font-h1.legacy-letter-spacing),
+.v-font-h1.legacy-letter-spacing {
+  letter-spacing: 0.42px;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.v-font-h1.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h1.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 2.52px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.v-font-h1.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h1.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 0.96px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.v-font-h1.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h1.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 1.8px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.v-font-h2.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h2.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 1.8px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.v-font-h2.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h2.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 0.42px;
+  }
+}
+:host(.v-font-h3.legacy-letter-spacing),
+.v-font-h3.legacy-letter-spacing {
+  letter-spacing: 0.28px;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.v-font-h3.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h3.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 0.28px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.v-font-h3.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h3.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 0.28px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.v-font-h3.legacy-letter-spacing:not(.disable-responsive)),
+  .v-font-h3.legacy-letter-spacing:not(.disable-responsive) {
+    letter-spacing: 0.32px;
+  }
+}
 /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
 /**
  * Deprecated. Not for use in new websites.

package/dist/collection/components/vega-input-credit-card/vega-input-credit-card.js

@@ -60,6 +60,16 @@ export class VegaInputCreditCard {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.90.0
+     */
+    this.optional = false;
     /**
      * Determines whether the credit card input field is disabled.
      *
@@ -139,7 +149,7 @@ export class VegaInputCreditCard {
     this.renderInputContainer = () => {
       var _a;
       const iconName = ((_a = this.getCreditCardType(this.value)) === null || _a === void 0 ? void 0 : _a.iconName) || 'regular-credit-card';
-      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (ref) => {
+      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, optional: this.optional, showClearIcon: false, ref: (ref) => {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
             this.handleVegaChange(input);
@@ -237,6 +247,30 @@ export class VegaInputCreditCard {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.90.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

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

@@ -16,7 +16,7 @@ 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(), onBlur: this.preventBlur, 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: createEnterKeyHandlerToTriggerClick(), part: "select-container" },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
@@ -128,14 +128,6 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
         this.itemsSlotRef = ref;
       } })));
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-input-select-keyboard-control-e2e}
-   */
-  /* istanbul ignore next */
-  preventBlur(e) {
-    e.stopImmediatePropagation();
-  }
   getDropdownSource() {
     return this.source.map((item) => ({
       key: item.id,

package/dist/collection/components/vega-radio/vega-radio-group/vega-radio-group.css

@@ -51,20 +51,19 @@
   display: none;
 }
 
-.vega-label {
+vega-field-label {
   margin-bottom: 16px;
+  display: block;
 }
-
-.vega-label label {
+vega-field-label::part(container) {
   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));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .vega-label label {
+  vega-field-label::part(container) {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -73,7 +72,7 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .vega-label label {
+  vega-field-label::part(container) {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -82,7 +81,7 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .vega-label label {
+  vega-field-label::part(container) {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -90,10 +89,8 @@
     letter-spacing: 0px;
   }
 }
-
-.vega-require {
-  color: rgba(var(--v-text-error, 189, 41, 71, 1));
-  margin-left: 4px;
+vega-field-label::part(label) {
+  word-break: normal;
 }
 
 .vega-hint {

package/dist/collection/components/vega-radio/vega-radio-group/vega-radio-group.js

@@ -88,6 +88,16 @@ export class VegaRadioGroup {
      * @vegaVersion 1.3.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.90.0
+     */
+    this.optional = false;
     /**
      * Provides a supplementary prompt message that assists users
      *    in selecting the appropriate value for the radio group.
@@ -165,13 +175,7 @@ export class VegaRadioGroup {
       this.renderHintDom()), this.host);
   }
   renderLabelDom() {
-    return (this.label && (h("div", { class: "vega-label" },
-      h("label", { "aria-label": this.label },
-        this.label,
-        this.renderRequireDom()))));
-  }
-  renderRequireDom() {
-    return this.required ? h("span", { class: "vega-require" }, "*") : null;
+    return (this.label && (h("vega-field-label", { label: this.label, isFieldRequired: this.required, disabled: this.disabled, optional: this.optional })));
   }
   renderHintDom() {
     return (this.hint && (h("div", { class: "vega-hint" },
@@ -307,6 +311,30 @@ export class VegaRadioGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.90.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "hint": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.css

@@ -7,11 +7,13 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow-y: auto;
+  min-height: 0;
 }
 
 :host .rich-text-content {
   position: relative;
-  height: 100%;
+  min-height: 100%;
   outline: 2px solid transparent;
   outline-offset: 2px;
   font-weight: 500;

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

@@ -70,3 +70,8 @@ export const HTML_VOID_TAGS = new Set([
   'track',
   'wbr',
 ]);
+/**
+ * The visual height in pixels of one row in the rich text editor.
+ * This value is based on the paragraph line-height and padding of text content.
+ */
+export const VegaRTEOneRowHeightPx = 22;

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/link-wrapper-renderer.js

@@ -9,6 +9,8 @@ import RTETextNodeRenderer from '../nodes/text-node-renderer';
 import { isNonNullable } from '../../../../../types/type-guard';
 import { UnlinkLinkGroupAction } from '../../actions/unlink-link-group-action';
 import RTEDTORendererManager from '../../../../../helpers/rte-manager/dto-renderer-manager';
+import { VegaRTELinkExtension } from '../../../extensions/link/link-extension';
+import { normalizeUrlByDefaultProtocol } from '../../../extensions/link/utils';
 /**
  * Renders link nodes and wraps them with link editor or anchor element based on edit mode.
  */
@@ -50,7 +52,7 @@ class RTELinkWrapperRenderer {
    * @param {RTERenderContext} context - Context containing render options.
    * @returns {VegaRTERenderResult[]} - Array of rendered HTML elements.
    */
-  render(nodes, linkGroupAnnotation, { editable }) {
+  render(nodes, linkGroupAnnotation, { editable, host }) {
     const blockNodes = this.groupNodesByLink(nodes);
     return blockNodes
       .flatMap((item) => {
@@ -67,6 +69,8 @@ class RTELinkWrapperRenderer {
             return true;
           }
         });
+        this.normalizeLinkNodesByDefaultProtocol(item, host);
+        linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
         return editable
           ? this.renderLinkEditorWrapper(item, linkAnnotation, linkGroupAnnotation)
           : this.renderLink(item, linkAnnotation, linkGroupAnnotation);
@@ -127,5 +131,36 @@ class RTELinkWrapperRenderer {
   renderLink(linkNodes, linkAnnotation, linkGroupAnnotation) {
     return (h("a", Object.assign({}, linkGroupAnnotation.toJsx(linkAnnotation)), linkNodes.map((node) => RTETextNodeRenderer.render(node))));
   }
+  normalizeLinkNodesByDefaultProtocol(linkNodes, host) {
+    if (!host || linkNodes.length === 0) {
+      return;
+    }
+    const firstLinkAnnotation = linkNodes[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+    if (!firstLinkAnnotation) {
+      return;
+    }
+    const normalizedUrl = this.normalizeUrlByDefaultProtocol(firstLinkAnnotation.link.href, host);
+    if (!normalizedUrl || normalizedUrl === firstLinkAnnotation.link.href) {
+      return;
+    }
+    linkNodes.forEach((node) => {
+      const currentLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+      if (!currentLinkAnnotation || currentLinkAnnotation.link.href === normalizedUrl) {
+        return;
+      }
+      node.apply(new LinkAnnotationAction({
+        link: {
+          href: normalizedUrl,
+          groupKey: currentLinkAnnotation.link.groupKey,
+        },
+        type: 'update_link',
+        doSplit: false,
+      }));
+    });
+  }
+  normalizeUrlByDefaultProtocol(url, host) {
+    const linkConfig = VegaRTELinkExtension.configStore.get(host) || {};
+    return normalizeUrlByDefaultProtocol(url, linkConfig.defaultProtocol);
+  }
 }
 export default new RTELinkWrapperRenderer();

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -65,9 +65,10 @@ export class VegaRTEToolbarButtonRenderer {
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
    * @param {(RTEDropdownListItem | RTEDropdownListGroup)[]} itemList - The list of dropdown items.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
    * @returns {VegaRTERenderResult} - The render result for the dropdown list.
    */
-  renderDropdownListTemplate(h, itemList) {
+  renderDropdownListTemplate(h, itemList, editorContext) {
     return h('div', {
       slot: 'items',
       onMouseDown: this.preventDefault,
@@ -82,8 +83,8 @@ export class VegaRTEToolbarButtonRenderer {
       h('style', { nonce: vegaNonceManager.nonce }, '.rte-dropdown-list vega-dropdown-group vega-dropdown-group { padding-left: 4px }'),
       ...itemList.map((item) => {
         return 'children' in item
-          ? this.renderDropdownGroup(h, item)
-          : this.renderDropdownItem(h, item);
+          ? this.renderDropdownGroup(h, item, editorContext)
+          : this.renderDropdownItem(h, item, editorContext);
       }),
     ]);
   }
@@ -92,32 +93,34 @@ export class VegaRTEToolbarButtonRenderer {
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
    * @param {RTEDropdownListItem} item - The dropdown item.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
    * @returns {VegaRTERenderResult} - The render result for the dropdown item.
    */
-  renderDropdownItem(h, item) {
+  renderDropdownItem(h, item, editorContext) {
     return h('vega-dropdown-item', {
       key: item.key,
       itemKey: item.key,
-      label: item.label,
+      label: editorContext.translation.t(item.label),
       prefixIcon: item.icon,
     });
   }
   /**
-   * Renders a dropdown item for the toolbar button.
+   * Renders a dropdown group for the toolbar button.
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
    * @param {RTEDropdownListGroup} item - The dropdown group.
-   * @returns {VegaRTERenderResult} - The render result for the dropdown item.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown group.
    */
-  renderDropdownGroup(h, item) {
+  renderDropdownGroup(h, item, editorContext) {
     return h('vega-dropdown-group', {
       key: item.key,
-      label: item.label,
+      label: editorContext.translation.t(item.label),
       divide: false,
     }, item.children.map((child) => {
       return 'children' in child
-        ? this.renderDropdownGroup(h, child)
-        : this.renderDropdownItem(h, child);
+        ? this.renderDropdownGroup(h, child, editorContext)
+        : this.renderDropdownItem(h, child, editorContext);
     }));
   }
   /**
@@ -176,7 +179,7 @@ export class VegaRTEToolbarButtonRenderer {
       return h('vega-font', {
         variant: 'font-field-label-sm',
         color: isDisabled ? 'text-disabled' : 'text-primary',
-      }, label);
+      }, editorContext.translation.t(label));
     }
     return null;
   }

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

@@ -9,6 +9,7 @@ import { ActionHandlerInterceptorRegistry } from '../dto/action-handle-strategie
 import { methodPlaceholder } from 'vega-slimmer/core';
 import htmlElementToAnnotationGenerator from '../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
 import { RTEFilterStylesStrategyRegistry } from '../dto/filter-styles-strategies/filter-styles-strategy-registry';
+import { RTEExtensionStateStore } from './rte-extension-state-store';
 const patchedBlockClasses = new WeakSet();
 const annotationHandlersByClass = new WeakMap();
 /**
@@ -98,6 +99,16 @@ export class VegaRTEExtension {
       return instance;
     };
   }
+  /**
+   * Create a per-host state store for this extension.
+   * Declare as `static readonly` to share store across extension instances while isolating state per RTE host.
+   *
+   * @template T - The type of the state value to store per host.
+   * @returns {RTEExtensionStateStore<T>} A new state store instance.
+   */
+  static createStateStore() {
+    return new RTEExtensionStateStore();
+  }
   /**
    * Lifecycle hook called by the rich text editor before the first render
    * (during `componentWillLoad`).  Override this method to perform per-host

package/dist/collection/components/vega-rich-text-editor/extensions/functions/renderers/function-toolbar-button-renderer.js

@@ -16,7 +16,7 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
         showArrowIcon: true,
         tooltip: { text: 'Insert function' },
       }),
-      this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST),
+      this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST, editorContext),
     ]);
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-toolbar-button-renderer.js

@@ -2,13 +2,8 @@ import { methodPlaceholder } from 'vega-slimmer/core';
 import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
 /**
  * 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.
+ * Each editor host gets its own instance, registered via
+ * {@link VegaRTEExtension#prepareBeforeLoad}, so renderer state is held in plain fields.
  */
 export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
   constructor(languageList, languageChangeCallback, selectedLanguage = '') {
@@ -17,10 +12,9 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     this.languageChangeCallback = null;
     this.selectedLanguage = '';
     this.labelRef = null;
+    this.translation = 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.
+     * Handles the language selection event from the dropdown.
      *
      * @param {string} itemKey - The key of the selected language item.
      */
@@ -35,15 +29,18 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     this.selectedLanguage = selectedLanguage;
   }
   /**
-   * Updates the selected language and refreshes the button label text in-place,
-   * without requiring a full re-render of the toolbar.
+   * Updates the selected language and refreshes the button label text in-place
+   * without a full toolbar re-render. The label is routed through the translation
+   * helper so localization is preserved on imperative updates.
    *
    * @param {string} language The language key to set as selected.
    */
   setSelectedLanguage(language) {
+    var _a;
     this.selectedLanguage = language;
-    if (this.labelRef) {
-      this.labelRef.textContent = this.getLanguageLabelByKey(language);
+    if (((_a = this.labelRef) === null || _a === void 0 ? void 0 : _a.firstChild) && this.translation) {
+      const label = this.getLanguageLabelByKey(language);
+      this.labelRef.firstChild.nodeValue = this.translation.t(label);
     }
   }
   /**
@@ -58,7 +55,8 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
    * @inheritDoc
    */
   render(createElement, editorContext) {
-    return this.renderDropdown(createElement, editorContext, { source: this.languageList }, [
+    const translatedSource = this.languageList.map((item) => this.translateDropdownEntry(item, editorContext));
+    return this.renderDropdown(createElement, editorContext, { source: translatedSource }, [
       this.renderButton(createElement, editorContext, {
         label: this.getLanguageLabelByKey(this.selectedLanguage),
         showArrowIcon: true,
@@ -73,6 +71,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
    * @inheritDoc
    */
   renderButtonLabel(h, editorContext, label) {
+    this.translation = editorContext.translation;
     const isDisabled = this.isDisabled(editorContext);
     return h('vega-font', {
       variant: 'font-field-label-sm',
@@ -81,7 +80,7 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       ref: (el) => {
         this.labelRef = el;
       },
-    }, label);
+    }, editorContext.translation.t(label));
   }
   /* istanbul ignore next */
   /**
@@ -103,4 +102,19 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     const language = this.getListItemByKey(this.languageList, key);
     return (_a = language === null || language === void 0 ? void 0 : language.label) !== null && _a !== void 0 ? _a : 'Select Language';
   }
+  /**
+   * Recursively translates labels in a dropdown entry so that nested
+   * {@link RTEDropdownListGroup} children are also localized.
+   *
+   * @param {RTEDropdownListItem | RTEDropdownListGroup} entry The entry to translate.
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context.
+   * @returns {RTEDropdownListItem | RTEDropdownListGroup} The translated entry.
+   */
+  translateDropdownEntry(entry, editorContext) {
+    const translatedLabel = editorContext.translation.t(entry.label);
+    if ('children' in entry) {
+      return Object.assign(Object.assign({}, entry), { label: translatedLabel, children: entry.children.map((child) => this.translateDropdownEntry(child, editorContext)) });
+    }
+    return Object.assign(Object.assign({}, entry), { label: translatedLabel });
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/line-height/line-height-toolbar-button-renderer.js

@@ -37,7 +37,7 @@ export class RTELineHeightToolbarButtonRenderer extends VegaRTEToolbarButtonRend
         showArrowIcon: true,
         tooltip: { text: VegaInternalTranslation.t('Line Height') },
       }),
-      this.renderDropdownListTemplate(createElement, dropdownItems),
+      this.renderDropdownListTemplate(createElement, dropdownItems, editorContext),
     ]);
   }
   /**