@globalpayments/vega 2.99.0 → 2.101.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/slimmers/renderers/vega-rich-text-table-properties-form-field-renderer.js

@@ -53,6 +53,10 @@ export class VegaRichTextTablePropertiesFormFieldRenderer extends VegaRichTextTa
   renderTextAlignmentField() {
     return (h("div", { class: "text-alignment-container" },
       h("vega-font", { variant: "font-field-label", color: "text-primary" }, "Alignment"),
-      h("vega-flex", { direction: "row", gap: "size-16" }, this.renderAlignmentField(['left', 'center', 'right'], 'objects-align-', 'textAlign'))));
+      h("vega-flex", { direction: "row", gap: "size-16" }, this.renderAlignmentField(['left', 'center', 'right'], 'objects-align-', 'textAlign', {
+        left: this.translationSlimmer.t('Align table left'),
+        center: this.translationSlimmer.t('Align table center'),
+        right: this.translationSlimmer.t('Align table right'),
+      }))));
   }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/vega-rich-text-table-properties.css

@@ -70,6 +70,11 @@
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
   z-index: 1;
 }
+:host .text-alignment-button-group button:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: -2px;
+  z-index: 2;
+}
 :host .text-alignment-button-group vega-input[value=left] ~ .text-alignment-left,
 :host .text-alignment-button-group vega-input[value=center] ~ .text-alignment-center,
 :host .text-alignment-button-group vega-input[value=right] ~ .text-alignment-right,

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/vega-rich-text-table-properties.js

@@ -17,6 +17,7 @@ import { VegaRichTextTablePropertiesFormFieldRenderer } from './slimmers/rendere
 import { VegaRichTextCellPropertiesFormFieldRenderer } from './slimmers/renderers/vega-rich-text-cell-properties-form-field-renderer';
 import { VegaInternalThemeManager } from '../../../../../helpers/theme/internal-theme-manager';
 import { DarkModeStateControllerSlimmer } from '../../../../../helpers/slimmers/dark-mode-state-controller-slimmer';
+import { AriaAttributesValueMapper } from '../../../../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
  * @vegaVersion 2.79.0
  */
@@ -30,6 +31,17 @@ export class VegaRichTextTableProperties {
     this.cellFormRenderer = new VegaRichTextCellPropertiesFormFieldRenderer();
     this.controller = new TableColorController();
     this.darkModeStateSlimmer = new DarkModeStateControllerSlimmer();
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => this.host, {
+      'aria-label': {
+        dependency: ['data-aria-label'],
+        // Derive the fallback accessible name from `type` so the component
+        // announces the correct form even when consumers don't set
+        // `data-aria-label` explicitly.
+        defaultValue: () => this.type === 'CELL'
+          ? this.translationSlimmer.t('Cell properties')
+          : this.translationSlimmer.t('Table properties'),
+      },
+    });
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.renderer.getFormRef());
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
     /**
@@ -45,7 +57,7 @@ export class VegaRichTextTableProperties {
     methodPlaceholder(newValue);
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+    return sanitizeVegaComponent(h(Host, { role: "form" }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-rich-text-table-properties"; }
   static get encapsulation() { return "shadow"; }
@@ -246,6 +258,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "darkModeStateSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableProperties.prototype, "ariaAttributesValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextTableProperties.prototype, "changeEventPreventSlimmer", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/caption-button-slimmer.js

@@ -9,6 +9,7 @@ export class CaptionButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-caption',
       title: 'caption off',
       showArrowIcon: false,
+      ariaLabel: 'Insert/Edit Caption',
     });
   }
   isSelected() {

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/cell-properties-button-slimmer.js

@@ -9,6 +9,7 @@ export class CellPropertiesButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-cell-properties',
       title: 'cell properties',
       showArrowIcon: false,
+      ariaLabel: 'Cell Properties',
     });
   }
   renderBtnWrapper(renderBtn) {

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/column-button-slimmer.js

@@ -23,6 +23,7 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-column',
       title: 'Column',
       showArrowIcon: true,
+      ariaLabel: 'Column Operations',
     });
     this.handleDropdownItemClick = (input) => {
       this.emitClickEvent([TableSettingType.COLUMN, input.detail]);
@@ -32,7 +33,7 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 210, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 210, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
@@ -55,15 +56,15 @@ export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
    * @returns {HTMLElement} The action list element.
    */
   renderActionList() {
+    const isHeaderColumnSelected = ToggleHeaderTableColumnStrategy.isFullHeaderSelection(this.selectedCells);
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.HEADER_COLUMN },
-        h("vega-flex", { alignItems: "center", gap: "size-8" },
-          h("vega-toggle-switch", { checked: ToggleHeaderTableColumnStrategy.isFullHeaderSelection(this.selectedCells), size: "small" }),
-          "Header Column")),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_LEFT }, "Insert column left"),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_RIGHT }, "Insert column right"),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.DELETE_COLUMN, disabled: this.allColumnSelected(this.selectedCells) }, "Delete column"),
-      h("vega-dropdown-item", { itemKey: ColumnOperationType.SELECT_COLUMN }, "Select column")));
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.HEADER_COLUMN, label: "Header Column" },
+        h("vega-flex", { alignItems: "center", gap: "size-8", "aria-hidden": "true" },
+          h("vega-toggle-switch", { checked: isHeaderColumnSelected, size: "small", label: "Header Column" }))),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_LEFT, label: "Insert column left" }, "Insert column left"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_RIGHT, label: "Insert column right" }, "Insert column right"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.DELETE_COLUMN, label: "Delete column", disabled: this.allColumnSelected(this.selectedCells) }, "Delete column"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.SELECT_COLUMN, label: "Select column" }, "Select column")));
   }
   /**
    * Determine if all columns are selected based on the selected cell range.

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/merge-cells-button-slimmer.js

@@ -22,6 +22,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-merge-cells',
       title: 'Merge cells',
       showArrowIcon: true,
+      ariaLabel: 'Merge Cells',
     });
     this.handleDropdownItemClick = (input) => {
       if (Object.values(SplitCellOperationType).includes(input.detail)) {
@@ -35,7 +36,7 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 150, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 150, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
@@ -68,13 +69,13 @@ export class MergeCellsButtonSlimmer extends TableSettingButtonSlimmer {
   renderActionList() {
     const disabledMap = this.getMergeDirectionDisabledMap();
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELLS }, "Merge cells"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_UP, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_RIGHT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_DOWN, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
-      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_LEFT, disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
-      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_VERTICALLY, disabled: !this.selectSingleCell() }, "Split cell vertically"),
-      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, disabled: !this.selectSingleCell() }, "Split cell horizontally")));
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELLS, label: "Merge cells" }, "Merge cells"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_UP, label: "Merge cell up", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_UP] }, "Merge cell up"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_RIGHT, label: "Merge cell right", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_RIGHT] }, "Merge cell right"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_DOWN, label: "Merge cell down", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_DOWN] }, "Merge cell down"),
+      h("vega-dropdown-item", { itemKey: MergeCellsOperationType.MERGE_CELL_LEFT, label: "Merge cell left", disabled: disabledMap[MergeCellsOperationType.MERGE_CELL_LEFT] }, "Merge cell left"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_VERTICALLY, label: "Split cell vertically", disabled: !this.selectSingleCell() }, "Split cell vertically"),
+      h("vega-dropdown-item", { itemKey: SplitCellOperationType.SPLIT_CELL_HORIZONTALLY, label: "Split cell horizontally", disabled: !this.selectSingleCell() }, "Split cell horizontally")));
   }
   selectSingleCell() {
     return this.selectedCells.length === 1;

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/row-button-slimmer.js

@@ -1,13 +1,20 @@
+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 { h } from '@stencil/core';
 import { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
 import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
 import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
 import { RowOperationType } from '../../../setting-event-handlers/row-operation';
 import { RTETableHeadBlock } from '../../../dto/table-head-block';
 import { RTETableBlock } from '../../../dto/table-block';
 import { getParentBlockByType } from '../../../utils/utils';
 import { RTETableBodyBlock } from '../../../dto/table-body-block';
+import { MapToComponentField } from 'vega-slimmer/core';
 /**
  * Slimmer dedicated to building the row button.
  */
@@ -17,14 +24,20 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-row',
       title: 'Row',
       showArrowIcon: true,
+      ariaLabel: 'Row Operations',
     });
     this.handleDropdownItemClick = (input) => {
       this.emitClickEvent([TableSettingType.ROW, input.detail]);
     };
+    this.handleDropdownVisibilityChange = ({ eventName }) => {
+      this.isRowDropdownOpen = eventName.toLocaleLowerCase().indexOf('show') >= 0;
+    };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { minWidth: 180, trigger: "click", ref: (el) => {
+    return (h("vega-dropdown", { role: "presentation", isScreenPosition: true, minWidth: 180, trigger: "click", ref: (el) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
       } },
       renderBtn(),
       this.renderActionList()));
@@ -46,14 +59,13 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
   renderActionList() {
     const shouldChecked = this.areSelectedRowsHeaderRows();
     return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
-      h("vega-dropdown-item", { itemKey: RowOperationType.HEADER_ROW },
-        h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8" },
-          h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked }),
-          h("span", null, "Header row"))),
-      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_ABOVE }, "Insert row above"),
-      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_BELOW }, "Insert row below"),
-      h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: RowOperationType.DELETE_ROW }, "Delete row"),
-      h("vega-dropdown-item", { itemKey: RowOperationType.SELECT_ROW }, "Select row")));
+      h("vega-dropdown-item", { itemKey: RowOperationType.HEADER_ROW, label: "Header Row" },
+        h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8", "aria-hidden": "true" },
+          h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked, label: "Header Row" }))),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_ABOVE, label: "Insert row above" }, "Insert row above"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_BELOW, label: "Insert row below" }, "Insert row below"),
+      h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: RowOperationType.DELETE_ROW, label: "Delete row" }, "Delete row"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.SELECT_ROW, label: "Select row" }, "Select row")));
   }
   /**
    * Check if all selected rows are header rows.
@@ -101,3 +113,6 @@ export class RowButtonSlimmer extends TableSettingButtonSlimmer {
     return Array.from(selectedRows);
   }
 }
+__decorate([
+  MapToComponentField({ writable: true })
+], RowButtonSlimmer.prototype, "isRowDropdownOpen", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/table-properties-button-slimmer.js

@@ -9,6 +9,7 @@ export class TablePropertiesButtonSlimmer extends TableSettingButtonSlimmer {
       icon: 'rte-table-properties',
       title: 'table properties',
       showArrowIcon: false,
+      ariaLabel: 'Table Properties',
     });
   }
   renderBtnWrapper(renderBtn) {

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/table-setting-button-slimmer.abstract.js

@@ -8,13 +8,13 @@ import { h } from '@stencil/core';
 import { VegaInternalIconManager } from '../../../../../../../helpers/icon/internal-icon-manager';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class TableSettingButtonSlimmer extends VegaSlimmer {
-  constructor({ icon, title, showArrowIcon }) {
+  constructor({ icon, title, showArrowIcon, ariaLabel }) {
     super();
     this.renderBtn = () => {
       const selected = this.isSelected();
       const disable = this.isDisabled();
-      return (h("vega-tooltip", { key: `table-setting-${this.icon}`, text: this.getTitle(), placement: ['bottom', 'top'], trigger: "hover" },
-        h("button", { type: "button", class: {
+      return (h("vega-tooltip", { role: "presentation", key: `table-setting-${this.icon}`, text: this.getTitle(), placement: ['bottom', 'top'], trigger: "hover" },
+        h("button", { type: "button", "aria-label": this.ariaLabel, class: {
             'rte-table-setting-item': true,
             'rte-table-setting-item-disabled': disable,
             'rte-table-setting-item-selected': selected,
@@ -26,13 +26,14 @@ export class TableSettingButtonSlimmer extends VegaSlimmer {
             }
             this.handleClick(event);
           }, onKeyDown: this.preventDefaultEvent, onMouseDown: this.preventDefaultEvent },
-          h("vega-flex", { alignItems: "center", justifyContent: "center" },
+          h("vega-flex", { alignItems: "center", justifyContent: "center", "aria-hidden": "true" },
             h("vega-icon", { icon: VegaInternalIconManager.getIconKey(this.icon), size: "size-16", color: this.getIconColor() }),
             this.showArrowIcon ? (h("vega-icon", { size: "size-8", style: { marginLeft: '8px' }, icon: VegaInternalIconManager.getIconKey('chevron-down'), color: this.getIconColor() })) : null))));
     };
     this.icon = icon;
     this.title = title;
     this.showArrowIcon = showArrowIcon;
+    this.ariaLabel = ariaLabel;
   }
   render() {
     return typeof this.renderBtnWrapper === 'function'

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/vega-rich-text-table-setting-renderer.js

@@ -16,7 +16,7 @@ const buttonList = [
 ];
 export class VegaRichTextTableSettingRenderer extends VegaSlimmer {
   render() {
-    return (h("vega-flex", { gap: "size-8", class: "rte-table-setting-content" }, buttonList.map((item) => this.renderButton(item))));
+    return (h("div", { class: "rte-table-setting-content" }, buttonList.map((item) => this.renderButton(item))));
   }
   renderButton(item) {
     switch (item) {

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/vega-rich-text-table-setting.css

@@ -3,8 +3,14 @@
  * Deprecated. Not for use in new websites.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
+:host .rte-table-setting-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 :host .rte-table-setting-item {
   border: none;
+  border-radius: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 4px;
@@ -12,6 +18,10 @@
   cursor: pointer;
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
 }
+:host .rte-table-setting-item:focus {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: -1px;
+}
 :host .rte-table-setting-item:not(.rte-table-setting-item-disabled, .rte-table-setting-item-selected):hover {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/vega-rich-text-table-setting.js

@@ -40,6 +40,7 @@ export class VegaRichTextTableSetting {
     this.cellPropertiesButtonSlimmer = new CellPropertiesButtonSlimmer();
     this.mergeCellsButtonSlimmer = new MergeCellsButtonSlimmer();
     this.isColumnDropdownOpen = false;
+    this.isRowDropdownOpen = false;
     this.isMergeCellsDropdownOpen = false;
     /**
      * Indicates whether the current table already has a caption.
@@ -154,6 +155,7 @@ export class VegaRichTextTableSetting {
   }; }
   static get states() { return {
     "isColumnDropdownOpen": {},
+    "isRowDropdownOpen": {},
     "isMergeCellsDropdownOpen": {}
   }; }
   static get events() { return [{

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

@@ -22,6 +22,7 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
     return this.renderDropdown(createElement, editorContext, {}, [
       this.renderButton(createElement, editorContext, {
         label: 'Tokens',
+        ariaLabel: 'Tokens',
         showArrowIcon: true,
         tooltip: { text: 'Insert token' },
       }),

package/dist/collection/components/vega-rich-text-editor/extensions/word-count/action-handler-interceptors/prevent-hard-limit-exceed-interceptor.js

@@ -0,0 +1,70 @@
+import { isNonNullable } from '../../../../../types/type-guard';
+import { ActionHandlerInterceptor } from '../../../dto/action-handle-strategies/action-handle-interceptor.abstract';
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { RTE_WORD_COUNT_KEY } from '../../../constants/constant';
+/**
+ * Vetoes a commit that would push the character count past the hard limit, while
+ * still allowing deletions and formatting that keep or reduce the count.
+ */
+export class PreventHardLimitExceedInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Intercept when the candidate exceeds the configured maximum. Hard-limit
+   * commits are vetoed only when they increase the count.
+   *
+   * @param {CommitValueAction} action - the commit action carrying the candidate and previous values
+   * @returns {boolean} - whether the commit should be vetoed
+   */
+  canIntercept(action) {
+    var _a;
+    const extension = (_a = action.host.extensions) === null || _a === void 0 ? void 0 : _a.find((item) => this.isWordCountExtension(item));
+    if (!extension) {
+      return false;
+    }
+    const { hardLimit, maxChars } = extension.getConfig();
+    const nextContent = action.candidate.getPlainText();
+    const nextCount = extension.calculateTextCount(nextContent);
+    if (!isNonNullable(maxChars) || nextCount <= maxChars) {
+      return false;
+    }
+    let result = false;
+    let prevContent = '';
+    if (hardLimit && action.previous) {
+      prevContent = action.previous.getPlainText();
+      result = nextCount > extension.calculateTextCount(prevContent);
+    }
+    this.notifyCharsLimitExceeded(nextContent, prevContent, extension, action);
+    return result;
+  }
+  /**
+   * Not invoke the origin action handle to veto the commit that would push the character count past the hard limit.
+   */
+  intercept() {
+    methodPlaceholder();
+  }
+  /**
+   * Notify the consumer when the candidate exceeds the configured character limit.
+   * The previous content is empty when hard limit is not enabled for the performance optimization.
+   *
+   * @param {string} nextContent - the candidate content string
+   * @param {string} prevContent - the previous content string
+   * @param {VegaRTEWordCountExtension} extension - the configured word count extension
+   * @param {CommitValueAction} action - the commit action carrying the candidate value
+   */
+  notifyCharsLimitExceeded(nextContent, prevContent, extension, action) {
+    const { maxChars, hardLimit, onCharsLimitExceeded } = extension.getConfig();
+    if (typeof onCharsLimitExceeded === 'function') {
+      if (!hardLimit || prevContent !== nextContent) {
+        onCharsLimitExceeded(action.host, maxChars);
+      }
+    }
+  }
+  /**
+   * Check if the given extension is a word count extension.
+   *
+   * @param {VegaRTEExtension} extension - the extension to check
+   * @returns {boolean} - whether the extension is a word count extension
+   */
+  isWordCountExtension(extension) {
+    return extension['type'] === RTE_WORD_COUNT_KEY;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/word-count/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,62 @@
+import { RTE_WORD_COUNT_KEY } from '../../constants/constant';
+import { VegaRTEExtension } from '../extension.abstract';
+import { VegaRTEContent } from '../../dto/content-state';
+import { COMMIT_VALUE } from '../../dto/actions/commit-value-action';
+import { PreventHardLimitExceedInterceptor } from './action-handler-interceptors/prevent-hard-limit-exceed-interceptor';
+/**
+ * Default configuration applied when a word count option is not provided.
+ */
+export const DEFAULT_WORD_COUNT_CONFIG = {
+  showCharCount: true,
+  countInlineBreak: false,
+  hardLimit: false,
+};
+/**
+ * Rich Text Editor extension that provides character counting.
+ */
+export class VegaRTEWordCountExtension extends VegaRTEExtension {
+  constructor(config = {}) {
+    super();
+    /**
+     * Runtime discriminator used by the core to identify this extension.
+     */
+    this.type = RTE_WORD_COUNT_KEY;
+    this.config = Object.assign(Object.assign({}, DEFAULT_WORD_COUNT_CONFIG), config);
+  }
+  /**
+   * Get the extension configuration.
+   *
+   * @returns {ResolvedRTEWordCountConfig} The word count configuration.
+   */
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Compute the character count data for the given editor content.
+   *
+   * @param {VegaRTEContent} value - The editor content.
+   * @returns {VegaRTEWordCountData} The computed character count data.
+   */
+  getData(value) {
+    const plainText = value.getPlainText();
+    const { maxChars, hardLimit } = this.config;
+    const count = this.calculateTextCount(plainText);
+    return { count, maxChars, hardLimit };
+  }
+  /**
+   * Get the character count for the given content string.
+   *
+   * @param {string} content - The content string.
+   * @returns {number} The character count.
+   */
+  calculateTextCount(content) {
+    const { countInlineBreak } = this.config;
+    const text = countInlineBreak ? content : content.replace(/\n/g, '');
+    // Use the spread operator so that surrogate pairs (e.g. emoji) count as a single character.
+    return [...text].length;
+  }
+}
+(() => {
+  // Gate over-limit commits through the shared action-interceptor pipeline.
+  VegaRTEExtension.registerActionHandlerInterceptor(VegaRTEContent.name, COMMIT_VALUE, new PreventHardLimitExceedInterceptor());
+})();

package/dist/collection/components/vega-rich-text-editor/public-api.js

@@ -32,6 +32,7 @@ export { VegaRTEPasteExtension } from './extensions/paste/paste-extension';
 export { VegaRTECopyExtension } from './extensions/copy/copy-extension';
 export { VegaRTECutExtension } from './extensions/cut/cut-extension';
 export { VegaRTEImageExtension } from './extensions/image/image-extension';
+export { VegaRTEWordCountExtension } from './extensions/word-count/word-count-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/insert-composition-text-controller.js

@@ -8,7 +8,7 @@ import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-sli
 import { RTETextBlock } from '../../dto/blocks/text-block';
 import { RTETextNode } from '../../dto/nodes/text-node';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
-import { ZERO_WIDTH_SPACE } from '../../constants/constant';
+import { RTE_UPDATE_SOURCE_KEY, RTEUpdateSource, ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { UpdateTextAction } from '../../dto/actions/update-text-action';
 import changeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
@@ -215,6 +215,7 @@ export class InsertCompositionTextController extends VegaSlimmer {
     const inputEvent = new CustomEvent('beforeinput');
     inputEvent['data'] = text;
     inputEvent['inputType'] = 'insertText';
+    inputEvent[RTE_UPDATE_SOURCE_KEY] = RTEUpdateSource.Composition;
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.js

@@ -15,6 +15,7 @@ import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-ha
 import { KeyboardLinkHandler } from './helper/input-event-handler/keyboard-link-handler';
 import { generateUUID } from '../../../../utils/misc';
 import { RTECodeBlock } from '../../dto/blocks/code-block';
+import { RTE_UPDATE_SOURCE_KEY, RTEUpdateSource } from '../../constants/constant';
 /** Used to monitoring the user input actions by event listener */
 export class UserInputController extends VegaSlimmer {
   constructor() {
@@ -50,6 +51,7 @@ export class UserInputController extends VegaSlimmer {
       }
       this.insertCompositionTextController.removeObserver();
       let updateFlag = false;
+      let updateSource = RTEUpdateSource.Default;
       switch (inputType) {
         case 'insertParagraph':
           updateFlag = true;
@@ -57,6 +59,10 @@ export class UserInputController extends VegaSlimmer {
           break;
         case 'insertText':
           updateFlag = true;
+          updateSource =
+            e[RTE_UPDATE_SOURCE_KEY] === RTEUpdateSource.Composition
+              ? RTEUpdateSource.Composition
+              : RTEUpdateSource.Default;
           this.insertTextHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertLineBreak':
@@ -77,7 +83,7 @@ export class UserInputController extends VegaSlimmer {
           break;
       }
       if (updateFlag) {
-        void this.valueController.flushChanges(this.value);
+        void this.valueController.flushChanges(this.value, true, updateSource);
       }
     };
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/value-controller.js

@@ -17,10 +17,18 @@ import { waitForComponentDidRender } from '../../../../helpers/common/wait-for-c
 import { RTEEditorState } from '../../dto/editor-state';
 import { RTESelectionState } from '../../dto/selection-state';
 import stateEntityRenderingRegistry from './state-entity-rendering-registry';
+import { ActionHandleStrategyRegistry } from '../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { CommitValueAction } from '../../dto/actions/commit-value-action';
+import { RTEUpdateSource } from '../../constants/constant';
 /**
  * The value controller is responsible for updating the value of the rich text editor.
  */
 export class ValueController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    // Deep clone of the last committed value, kept only while a commit validator is active, used to roll back rejected changes.
+    this.committedSnapshot = null;
+  }
   /**
    * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
    */
@@ -65,15 +73,47 @@ export class ValueController extends VegaSlimmer {
       });
     }
     this.registerEditorRefAndContent();
+    this.seedCommittedSnapshot();
+  }
+  /**
+   * Seeds the rollback snapshot from the current value while a commit interceptor is active.
+   * Runs on load and on extension changes so runtime re-registration stays protected.
+   */
+  seedCommittedSnapshot() {
+    if (this.wordCountController.hasWordCountHardLimit()) {
+      this.committedSnapshot = this.value ? this.value.clone(true) : null;
+    }
   }
   /**
    * Updates the value of the editor and restore the selection.
    *
    * @param {VegaRTEContent} newValue The new value to set.
    * @param {boolean} recordHistory - Whether to record the change in history.
+   * @param {RTEUpdateSource} updateSource - The source of the update, defaulting to 'default'.
    */
-  async flushChanges(newValue, recordHistory = true) {
-    this.value = newValue.clone();
+  async flushChanges(newValue, recordHistory = true, updateSource = RTEUpdateSource.Default) {
+    const previous = this.committedSnapshot;
+    const action = new CommitValueAction(newValue, previous, this.host);
+    const committed = ActionHandleStrategyRegistry.executeTheStrategy(action, newValue);
+    if (!committed) {
+      if (updateSource === RTEUpdateSource.Composition) {
+        // The composition input characters cannot be deleted, so we force a repaint to restore the content from the model.
+        this.vegaRichTextEditorRenderer.forceContentRepaint();
+      }
+      else {
+        // The commit was vetoed, so restore the placeholder the framework skipped repainting and roll back.
+        this.vegaRichTextEditorRenderer.restoreEmptyTextPlaceholders();
+      }
+      // Deep clone so the rolled-back value never shares nodes with the snapshot, which in-place edits would otherwise corrupt.
+      this.value = (previous !== null && previous !== void 0 ? previous : newValue).clone(true);
+      if (previous) {
+        // Seed the snapshot again so the next commit attempt has a valid rollback point.
+        this.seedCommittedSnapshot();
+      }
+      await waitForComponentDidRender(this.host);
+      return;
+    }
+    this.value = committed.clone();
     if (recordHistory) {
       this.historyController.registerHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
     }
@@ -115,6 +155,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "wordCountController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "vegaRichTextEditorRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "sourceEditConfig", void 0);
@@ -130,3 +176,7 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad'),
+  MapToComponentMethod('watchExtensions')
+], ValueController.prototype, "seedCommittedSnapshot", null);