@globalpayments/vega 2.98.0 → 2.99.0

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/span-to-token-node-strategy.js

@@ -33,7 +33,7 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
   /**
    * @inheritDoc
    */
-  handle(elementsArray) {
+  handle(elementsArray, _options, parentTextAnnotations) {
     const element = elementsArray[0];
     const tokenKey = element.getAttribute('token-key');
     const text = element.textContent;
@@ -46,7 +46,9 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
       type: 'token',
       token: tokenKey,
       text,
-      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
+      annotations: Object.assign(Object.assign(Object.assign({}, restAnnotations), ((parentTextAnnotations === null || parentTextAnnotations === void 0 ? void 0 : parentTextAnnotations.inlineHtml)
+        ? { inlineHtml: parentTextAnnotations.inlineHtml }
+        : {})), { customAttribute: this.createCustomAttrs(customAttribute) }),
     };
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-node.js

@@ -1,4 +1,6 @@
 import { RTETextNode } from '../../dto/nodes/text-node';
+import { HTML_VOID_TAGS } from '../../constants/constant';
+import { isNonNullable } from '../../../../types/type-guard';
 /**
  * Token node for the Vega Rich Text Editor.
  */
@@ -54,5 +56,47 @@ export class RTETokenNode extends RTETextNode {
   toHtml() {
     return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}"${super.generateAttributeString()}>${this.text}</span>`;
   }
+  /**
+   * @inheritDoc
+   */
+  renderHtmlFromDepth(depth, options) {
+    void options;
+    const annotation = this.getInlineHtmlAnnotationAtDepth(depth);
+    if (!annotation)
+      return this.toHtml();
+    return this.renderTokenWithWrapperStr(annotation);
+  }
+  /**
+   * Render token markup wrapped by inline HTML annotations, preserving token attributes.
+   *
+   * @param {InlineHtmlAnnotation} inlineHtmlNode - Current wrapper annotation.
+   * @returns {string} Token HTML wrapped by inline HTML annotations.
+   */
+  renderTokenWithWrapperStr(inlineHtmlNode) {
+    const { htmlTag, child } = inlineHtmlNode;
+    const attrStr = this.inlineHtmlAnnotationAttrStr(inlineHtmlNode);
+    if (!child) {
+      if (HTML_VOID_TAGS.has(htmlTag)) {
+        return `<${htmlTag}${attrStr}>`;
+      }
+      return `<${htmlTag}${attrStr}>${this.toHtml()}</${htmlTag}>`;
+    }
+    return `<${htmlTag}${attrStr}>${this.renderTokenWithWrapperStr(child)}</${htmlTag}>`;
+  }
+  /**
+   * Build inline HTML wrapper attributes string.
+   *
+   * @param {InlineHtmlAnnotation} annotation - Inline HTML annotation.
+   * @returns {string} Serialized attribute string.
+   */
+  inlineHtmlAnnotationAttrStr(annotation) {
+    const { customAttribute, customClass, customStyle } = annotation;
+    const attrs = [
+      ...((customAttribute === null || customAttribute === void 0 ? void 0 : customAttribute.toString()) || []),
+      customClass === null || customClass === void 0 ? void 0 : customClass.toString(),
+      customStyle === null || customStyle === void 0 ? void 0 : customStyle.toString(),
+    ].filter(isNonNullable);
+    return attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
+  }
 }
 RTETokenNode.dtoName = 'RTETokenNode';

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isArrayEqual } from '../../../../utils/array';
 import { forceUpdate } from '@stencil/core';
+import { BlockBoundaryRegistry } from '../../extensions/block-boundary-registry';
 /**
  * Inject the editor context to the extensions.
  */
@@ -113,6 +114,7 @@ export class RTEExtensionController extends VegaSlimmer {
       getSelectedNodes: this.getSelectedNodes,
       setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),
       getSelection: this.selectionController.getSelection.bind(this.selectionController),
+      blockBoundaryRegistry: new BlockBoundaryRegistry(),
     };
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/text-style-annotation-handler.js

@@ -23,7 +23,10 @@ export class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstr
   }
   /**
    * Get the node type of element. The element type is determined in the following
-   * order: "data-type" attribute, node name, font size and class name.
+   * order: "data-type" attribute, class name, node name, font size.
+   * Class name is checked before node name so that an explicit
+   * `v-rte--text-style-*` marker (e.g. applied by the Word paste transformer)
+   * takes precedence over the element's default tag-based role.
    *
    * @param {HTMLElement} element - element.
    * @returns {Nullable<VegaRTETextStyleType>} - node type.
@@ -32,15 +35,15 @@ export class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstr
     const byDataType = this.getElementTypeByDataType(element);
     if (byDataType)
       return byDataType;
+    const byClassName = this.getElementTypeByClassName(element);
+    if (byClassName)
+      return byClassName;
     const byNodeName = this.getElementTypeByNodeName(element);
     if (byNodeName)
       return byNodeName;
     const byFontSize = this.getElementTypeByFontSize(element);
     if (byFontSize)
       return byFontSize;
-    const byClassName = this.getElementTypeByClassName(element);
-    if (byClassName)
-      return byClassName;
     return null;
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/continue-inline-to-rte-text-block-strategy.js

@@ -1,6 +1,7 @@
 import { generateUUID } from '../../../../../../utils/misc';
 import { RTETextBlock } from '../../../../dto/blocks/text-block';
 import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { RTE_BLOCK_BOUNDARY_ATTRIBUTE } from '../../../../constants/constant';
 import htmlElementToAnnotationGenerator from './annotation-handler/html-element-to-annotation-generator';
 import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
 import { ALWAYS_INLINE_TAGS, DEDICATED_STRATEGY_TAGS, PHRASING_CONTENT_TAGS, isInBlockTextContext, } from './strategy-tags';
@@ -83,6 +84,8 @@ export class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrateg
   isInlineCandidate(element, options) {
     if (element.nodeType === Node.TEXT_NODE)
       return true;
+    if (this.isBlockBoundaryElement(element, options))
+      return false;
     if (ALWAYS_INLINE_TAGS.has(element.nodeName))
       return true;
     if (this.isDedicatedBlockTag(element.nodeName))
@@ -91,6 +94,20 @@ export class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrateg
       return true;
     return this.isInlineLeafOrWrapper(element);
   }
+  /**
+   * Check whether an element marks a block boundary.
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @param {VegaRTETransformOptions} options - Transformation options.
+   * @returns {boolean} Whether the element is a boundary.
+   */
+  isBlockBoundaryElement(element, options) {
+    var _a;
+    if (element.hasAttribute(RTE_BLOCK_BOUNDARY_ATTRIBUTE)) {
+      return true;
+    }
+    return !!((_a = options.blockBoundaryRegistry) === null || _a === void 0 ? void 0 : _a.isBoundary(element));
+  }
   /**
    * Returns true when the tag has a dedicated block strategy (excludes inline annotation tags CODE and A).
    *

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -8,6 +8,7 @@ import { RTETextNode } from '../../../../dto/nodes/text-node';
 import { generateUUID } from '../../../../../../utils/misc';
 import { escapeHtml } from '../../../../helpers/utils';
 import { ReplaceSelectedTextAction } from '../../../../dto/actions/replace-selected-text-action';
+import { RTE_PASTE_MODE_DATA_TYPE, RTE_PASTE_MODE_WORD } from '../../../../constants/constant';
 /**
  * Handle user paste
  */
@@ -110,8 +111,11 @@ export class InsertPasteHandler extends BaseHandler {
     const body = parsedDoc.body;
     // Extract plain text from the parsed document
     const plainText = (body.textContent || '').replace(/\r\n?/g, '\n');
-    // Check for rich inline formatting
-    let hasFormatting = Boolean(body.querySelector('b,strong,i,em,s,del,strike,u,mark'));
+    // Check for rich inline formatting. Code blocks (`pre` carrying
+    // `data-language`, the marker the code-block strategy recognizes) count as
+    // formatting so they are never flattened to inline plain text, which would
+    // drop the code block on single-line pastes whose text equals the HTML text.
+    let hasFormatting = Boolean(body.querySelector('b,strong,i,em,s,del,strike,u,mark,code,pre[data-language]'));
     if (!hasFormatting) {
       hasFormatting = Array.from(body.querySelectorAll('span')).some((span) => {
         const style = span.getAttribute('style') || span.getAttribute('data-style') || '';
@@ -202,9 +206,18 @@ export class InsertPasteHandler extends BaseHandler {
     context.restore(rootElements);
     this.normalizeImportedHtmlArtifacts(parsedDoc.body);
     const htmlElements = Array.from(parsedDoc.body.childNodes);
-    const resultBlocks = ElementToDtoStrategyProcessor.process(htmlElements)
+    // Word paste enables custom-annotation processing (skipCustomAnnotations: false)
+    // so that inline styles produced by WordPasteStrategy (colors, font-weight, etc.)
+    // are mapped to RTE annotations. Regular rich paste skips them (undefined → default).
+    const transformOptions = payload.type === RTE_PASTE_MODE_WORD
+      ? {
+        autoMatchFormat: true,
+        skipCustomAnnotations: false,
+      }
+      : undefined;
+    const resultBlocks = ElementToDtoStrategyProcessor.process(htmlElements, transformOptions)
       .filter(Boolean)
-      .map((output) => output.toDto())
+      .map((output) => output.toDto(transformOptions))
       .filter(Boolean);
     // Fallback for synthetic payloads: if strategy conversion yields no blocks
     // but we still have plain text, create paragraph/text blocks directly.
@@ -475,6 +488,7 @@ export class InsertPasteHandler extends BaseHandler {
     return {
       html: event.dataTransfer.getData('text/html') || eventPayload.html || '',
       text: event.dataTransfer.getData('text/plain') || eventPayload.text || '',
+      type: event.dataTransfer.getData(RTE_PASTE_MODE_DATA_TYPE) || '',
     };
   }
 }

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

@@ -475,21 +475,40 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
    * @returns {Nullable<FocusNodeRangeState>} - The detected element's range state or null if not found.
    */
   detectNearestElement(block, offset) {
+    // Atomic blocks (e.g. table) opt out of descent so the caret stays anchored to the
+    // block boundary — resolving into a cell would break paragraph insertion before/after.
+    if (!block.allowsCaretDescend()) {
+      return;
+    }
     if (block.children) {
       const currentNode = block.children[offset];
       const prevNode = block.children[offset - 1];
-      if (currentNode && currentNode instanceof RTENode) {
+      // A nested block (e.g. an html-block's inner paragraph rendered with
+      // `display: contents`) can receive the caret at its own boundary, so descend
+      // into it to reach the real node — the start of the next block or the end of
+      // the previous one.
+      if (currentNode instanceof RTENode) {
         return {
           startNode: currentNode,
           startOffset: 0,
         };
       }
-      else if (prevNode && prevNode instanceof RTENode) {
+      else if (currentNode instanceof RTEBlock) {
+        // Fall through to the previous node if descending yields nothing (e.g. an empty block).
+        const nested = this.detectNearestElement(currentNode, 0);
+        if (nested) {
+          return nested;
+        }
+      }
+      if (prevNode instanceof RTENode) {
         return {
           startNode: prevNode,
           startOffset: prevNode.getRangeEndOffset(),
         };
       }
+      else if (prevNode instanceof RTEBlock) {
+        return this.detectNearestElement(prevNode, prevNode.children.length);
+      }
     }
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/source-edit-toolbar-button-slimmer.js

@@ -9,6 +9,7 @@ import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-ic
 import displayCode from '../../../assets/display-code';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { VegaRTEContent } from '../../../dto/content-state';
+import extensionContextManager from '../../../helpers/extension-context-manager';
 export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   constructor() {
     super({
@@ -36,7 +37,9 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return super.isDisabled();
   }
   async saveSourceCode() {
+    var _a;
     const sourceViewValue = this.richTextEditorSourceViewRenderer.getSourceCode();
+    const blockBoundaryRegistry = (_a = extensionContextManager.getExtensionContext(this.host)) === null || _a === void 0 ? void 0 : _a.blockBoundaryRegistry;
     if (!sourceViewValue && this.value.isEmpty()) {
       return;
     }
@@ -44,6 +47,7 @@ export class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
       await this.valueController.flushChanges(VegaRTEContent.fromHtml(sourceViewValue, {
         autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
         filterInlineStyles: this.sourceEditConfig.filterInlineStyles,
+        blockBoundaryRegistry,
       }));
     }
   }
@@ -66,6 +70,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", void 0);
+__decorate([
+  MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "value", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/vega-rich-text-editor-source-view-renderer.js

@@ -10,6 +10,7 @@ import CodeFormatter from '../../../../helpers/code-format/code-formatter';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaInternalCodeBlockBlur } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { VegaRTEContent } from '../../dto/content-state';
+import extensionContextManager from '../../helpers/extension-context-manager';
 /**
  * The renderer for the source view of the rich text editor. It renders a code block for editing the source code of the rich text editor content.
  */
@@ -21,14 +22,16 @@ export class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
      * Handle the blur event of the code block. When the code block loses focus, emit the source code change event with the current source code.
      */
     this.handleCodeBlockBlur = () => {
-      var _a;
+      var _a, _b;
       // If source view is closed while blurring, it means the user switch back to normal mode, so we can skip emitting the change event.
       if (this.sourceView) {
         const filterInlineStyles = Boolean(this.sourceEditConfig.filterInlineStyles);
         const sourceCode = this.getSourceCode();
+        const blockBoundaryRegistry = (_a = extensionContextManager.getExtensionContext(this.host)) === null || _a === void 0 ? void 0 : _a.blockBoundaryRegistry;
         const newValue = VegaRTEContent.fromHtml(sourceCode, {
-          autoMatchFormat: (_a = this.sourceEditConfig.autoMatchFormat) !== null && _a !== void 0 ? _a : true,
+          autoMatchFormat: (_b = this.sourceEditConfig.autoMatchFormat) !== null && _b !== void 0 ? _b : true,
           filterInlineStyles,
+          blockBoundaryRegistry,
         });
         const newSourceCode = newValue.toHtml({ filterInlineStyles });
         if (newSourceCode !== this.prevRecord) {

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-tab-list-renderer.js

@@ -78,18 +78,24 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
   renderCounterBadgeDom(item) {
     const counterBadge = item.counterBadge;
     const counterBadgeClass = this.getCounterBadgeClassByCount(counterBadge);
-    return ((counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.count) !== undefined &&
-      counterBadge.count > 0 && (h("div", { class: `vega-counter-badge ${counterBadgeClass}`, "aria-hidden": "true" },
-      h("vega-counter-badge", { count: counterBadge.count, color: counterBadge.color }))));
+    return (counterBadge &&
+      (!!counterBadge.dot || (counterBadge.count !== undefined && counterBadge.count > 0)) && (h("div", { class: `vega-counter-badge ${counterBadgeClass}`, "aria-hidden": "true" },
+      h("vega-counter-badge", { count: counterBadge.count, color: counterBadge.color, dot: counterBadge.dot }))));
   }
   getTabAriaLabel(item) {
     const counterBadge = item.counterBadge;
+    if (counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.dot) {
+      return `${item.label}, ${this.translationSlimmer.t('notification')}`;
+    }
     return (counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.count) && counterBadge.count > 0
       ? `${item.label}, ${counterBadge.count}`
       : item.label;
   }
   getCounterBadgeClassByCount(counterBadge) {
-    if (counterBadge && counterBadge.count) {
+    if (counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.dot) {
+      return 'dot-variant';
+    }
+    if (counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.count) {
       const digits = counterBadge.count.toString().length;
       if (digits === 1) {
         return 'one-digit';
@@ -101,9 +107,7 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
         return 'multi-digits';
       }
     }
-    else {
-      return '';
-    }
+    return '';
   }
   handleTabItemClick(event, dataTarget) {
     this.selectedTargetController.handleTabItemClick(dataTarget);
@@ -143,3 +147,6 @@ __decorate([
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupVoiceOverFocusController' })
 ], VegaTabGroupTabListRenderer.prototype, "voiceOverFocusController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupTabListRenderer.prototype, "translationSlimmer", void 0);

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

@@ -114,6 +114,12 @@
   padding-left: 8px;
   top: 10px;
 }
+.vega-tab > div > .label .vega-counter-badge.dot-variant {
+  width: 20px;
+}
+.vega-tab > div > .label .vega-counter-badge.dot-variant vega-counter-badge {
+  left: 10px;
+}
 .vega-tab > div > .label .vega-counter-badge.one-digit {
   width: 20px;
 }

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

@@ -23,6 +23,7 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaTabGroupRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-tab-group/runtime-metrics-payload-definition';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 /**
  * The Tab Group component organizes content into separate views, and allows users to switch between them without navigating away from the parent page.
  *
@@ -32,6 +33,7 @@ export class VegaTabGroup {
   constructor() {
     this.globalSlimmers = {};
     this.vegaTabGroupRenderer = new VegaTabGroupRenderer();
+    this.translationSlimmer = new TranslationSlimmer();
     this.vegaTabGroupDirectionButtonRenderer = new VegaTabGroupSwitchPageButtonRenderer();
     this.vegaTabGroupTabListRenderer = new VegaTabGroupTabListRenderer();
     this.vegaTabGroupCloseButtonRenderer = new VegaTabGroupCloseButtonRenderer();
@@ -402,6 +404,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTabGroup.prototype, "vegaTabGroupRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTabGroup.prototype, "translationSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTabGroup.prototype, "vegaTabGroupDirectionButtonRenderer", void 0);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-body-col-span-controller.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { resolveBodyColSpan } from '../renderers/vega-table-body-col-span-resolver';
+import { BreakpointKeys } from '../../../../constants/ui';
 /**
  * Per-row body colspan controller.
  *
@@ -16,6 +17,10 @@ import { resolveBodyColSpan } from '../renderers/vega-table-body-col-span-resolv
  *
  * The structural shape (a {@link VegaSlimmer} controller reading component fields) mirrors the
  * main-branch `VegaTableExpandRowController` paradigm.
+ *
+ * Breakpoint-aware: maps the current breakpoint from the parent vega-table and computes
+ * which columns are hidden at that breakpoint so the colspan resolver can shrink before
+ * breakpoint-hidden columns (instead of mirroring across them).
  */
 export class VegaTableBodyColSpanController extends VegaSlimmer {
   constructor() {
@@ -43,6 +48,8 @@ export class VegaTableBodyColSpanController extends VegaSlimmer {
       this.warnedColSpanKeys.clear();
       this.lastWarnedColumnsRef = this.columns;
     }
+    // Compute per-leaf hidden state based on current breakpoint.
+    const isHiddenAtBreakpoint = leaves.map((leaf) => this.isColumnHiddenAtBreakpoint(leaf));
     const results = new Array(leaves.length).fill(null);
     let skipCount = 0;
     leaves.forEach((leaf, leafIndex) => {
@@ -53,7 +60,7 @@ export class VegaTableBodyColSpanController extends VegaSlimmer {
       }
       const column = this.findColumn(leaf);
       const result = column
-        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys)
+        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys, isHiddenAtBreakpoint)
         : { htmlColspan: 1, skipCount: 0 };
       results[leafIndex] = result;
       skipCount = result.skipCount;
@@ -71,7 +78,30 @@ export class VegaTableBodyColSpanController extends VegaSlimmer {
       column.prop === renderInput.key ||
       column.label === renderInput.key);
   }
+  /**
+   * Determine whether a leaf is hidden at the current breakpoint.
+   *
+   * A leaf is hidden when the column's breakpoint threshold is greater than the current breakpoint.
+   * Breakpoint order: 'default' < 'S' < 'M' < 'L' < 'XL'.
+   * Example: if currentBreakpoint is 'S' and column.breakpoint is 'M', the column is hidden (S < M).
+   *
+   * @param {ColumnRenderInputModel} leaf - The leaf render input to check.
+   * @returns {boolean} True if the leaf is hidden at the current breakpoint.
+   */
+  isColumnHiddenAtBreakpoint(leaf) {
+    const column = this.findColumn(leaf);
+    if (!column || !column.breakpoint) {
+      return false; // No breakpoint = never hidden.
+    }
+    const currentBreakpointIndex = BreakpointKeys.indexOf(this.currentBreakpoint);
+    const columnBreakpointIndex = BreakpointKeys.indexOf(column.breakpoint);
+    // Column is hidden when current breakpoint is smaller than the column's breakpoint threshold.
+    return currentBreakpointIndex < columnBreakpointIndex;
+  }
 }
 __decorate([
   MapToComponentField()
 ], VegaTableBodyColSpanController.prototype, "columns", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableBodyColSpanController.prototype, "currentBreakpoint", void 0);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-body-col-span-resolver.js

@@ -37,16 +37,16 @@ function normalizeSpan(rawSpan) {
  * Walk rightward from the starting leaf to find the widest legal span.
  *
  * Stops (and returns a clamp reason) when the span would either run past the end of the
- * row or cross a pinned ↔ unpinned column boundary (which would break sticky positioning).
- * Breakpoint-hidden columns are intentionally **not** a stop condition — the span mirrors
- * across them (matching header group colSpan).
+ * row, cross a pinned ↔ unpinned column boundary, or encounter a breakpoint-hidden column.
+ * Breakpoint-hidden columns are a shrink trigger (the span stops before them).
  *
  * @param {number} declared - The declared span requested by the column.
  * @param {number} leafIndex - Index of the starting leaf in the flattened render-input array.
  * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
+ * @param {boolean[]} isHiddenAtBreakpoint - Per-leaf boolean: true if leaf is hidden at current breakpoint.
  * @returns {MaxSpan} The widest legal span plus the clamp reason (null when unconstrained).
  */
-function computeMaxSpan(declared, leafIndex, allLeaves) {
+function computeMaxSpan(declared, leafIndex, allLeaves, isHiddenAtBreakpoint) {
   var _a, _b;
   const startPinned = (_a = allLeaves[leafIndex]) === null || _a === void 0 ? void 0 : _a.pinned;
   let span = 1;
@@ -58,6 +58,13 @@ function computeMaxSpan(declared, leafIndex, allLeaves) {
         clampReason: `extends past the end of the row (${allLeaves.length} columns total)`,
       };
     }
+    // Reject if the next column is hidden at the current breakpoint.
+    if (isHiddenAtBreakpoint[leafIndex + offset]) {
+      return {
+        span,
+        clampReason: null, // Breakpoint-hidden stop is not a config-error warning — it is legitimate responsive hiding.
+      };
+    }
     // Reject if the next column is in a different pinned group.
     if (nextLeaf.pinned !== startPinned) {
       return {
@@ -87,11 +94,10 @@ function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
 /**
  * Resolve the effective body-cell colspan for a single source-data row cell.
  *
- * Clamps the declared span so it never runs past the end of the row nor crosses a
- * pinned ↔ unpinned column boundary. Structural clamps (end-of-row / pinned boundary) emit a
- * warning once per column key (tracked via the caller-supplied {@link warnedKeys} set).
- * Breakpoint-hidden columns are **not** clamped — the span mirrors across a `display: none`
- * column (matching header group colSpan) so the body grid stays column-aligned with the header.
+ * Clamps the declared span so it never runs past the end of the row, crosses a
+ * pinned ↔ unpinned column boundary, or encounters a breakpoint-hidden column (shrink before it).
+ * Structural clamps (end-of-row / pinned boundary) emit a warning once per column key
+ * (tracked via the caller-supplied {@link warnedKeys} set). Breakpoint-hidden stops are silent.
  *
  * @param {VegaTableColumnConfig} column - The column configuration for the spanning cell.
  * @param {VegaTableDataSourceItem} record - The row data record.
@@ -99,14 +105,15 @@ function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
  * @param {number} leafIndex - Index of this column in the flattened leaf render-input array.
  * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
  * @param {Set<string>} warnedKeys - Per-instance set tracking column keys that have already received a clamping warning.
+ * @param {boolean[]} isHiddenAtBreakpoint - Per-leaf boolean: true if leaf is hidden at current breakpoint.
  * @returns {BodyColSpanResult} Resolved spanning metadata for the cell.
  */
-export function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys) {
+export function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys, isHiddenAtBreakpoint) {
   var _a, _b, _c;
   const declared = getDeclaredSpan(column, record, rowIndex);
   if (!declared || declared <= 1)
     return NO_SPAN;
-  const { span, clampReason } = computeMaxSpan(declared, leafIndex, allLeaves);
+  const { span, clampReason } = computeMaxSpan(declared, leafIndex, allLeaves, isHiddenAtBreakpoint);
   const effectiveSpan = Math.min(declared, span);
   if (clampReason && effectiveSpan < declared) {
     const colKey = (_c = (_b = (_a = column.key) !== null && _a !== void 0 ? _a : column.prop) !== null && _b !== void 0 ? _b : column.label) !== null && _c !== void 0 ? _c : '';

package/dist/collection/helpers/translation/locales/en.js

@@ -188,6 +188,7 @@ export const staticTranslations = {
   'pm': 'pm',
   '{0} Selected': '{0} Selected',
   'date picker': 'Date Picker',
+  'notification': 'notification',
   'Selected result': 'Selected result',
   'Close event preview detail': 'Close event preview detail',
   'Edit event': 'Edit event',
@@ -220,5 +221,6 @@ export const staticTranslations = {
   'Next': 'Next',
   'Copy': 'Copy',
   'Cut': 'Cut',
+  'Use Word': 'Use Word',
 };
 export default staticTranslations;

package/dist/collection/utils/sanitize/index.js

@@ -3,10 +3,11 @@
  */
 export { HtmlSanitizer } from './core/html-sanitizer';
 export { SanitizeStrategy } from './core/sanitize-strategy';
-export { LabelSanitizeStrategy, StyleSanitizeStrategy, EmptySanitizeStrategy } from './strategies';
+export { LabelSanitizeStrategy, StyleSanitizeStrategy, EmptySanitizeStrategy, PlainTextSanitizeStrategy, } from './strategies';
 import { HtmlSanitizer } from './core/html-sanitizer';
-import { LabelSanitizeStrategy, StyleSanitizeStrategy, EmptySanitizeStrategy } from './strategies';
+import { LabelSanitizeStrategy, StyleSanitizeStrategy, EmptySanitizeStrategy, PlainTextSanitizeStrategy, } from './strategies';
 export const htmlSanitizer = new HtmlSanitizer();
 export const labelSanitizeStrategy = new LabelSanitizeStrategy();
 export const styleSanitizeStrategy = new StyleSanitizeStrategy();
 export const emptySanitizeStrategy = new EmptySanitizeStrategy();
+export const plainTextSanitizeStrategy = new PlainTextSanitizeStrategy();

package/dist/collection/utils/sanitize/strategies/index.js

@@ -1,3 +1,4 @@
 export { LabelSanitizeStrategy } from './label-sanitize-strategy';
 export { StyleSanitizeStrategy } from './style-sanitize-strategy';
 export { EmptySanitizeStrategy } from './empty-sanitize-strategy';
+export { PlainTextSanitizeStrategy } from './plain-text-sanitize-strategy';

package/dist/collection/utils/sanitize/strategies/label-sanitize-strategy.js

@@ -10,4 +10,18 @@ export class LabelSanitizeStrategy extends SanitizeStrategy {
     super(...arguments);
     this.allowedTags = LABEL_ALLOWED_TAGS;
   }
+  /**
+   * Drops script/style nodes entirely, including their text contents.
+   *
+   * @param {HTMLElement} element - Element node to sanitize.
+   * @param {Document} doc - Document reference used to create safe nodes.
+   * @returns {Nullable<Node>} Sanitized node or null when removed.
+   */
+  sanitizeElement(element, doc) {
+    const tagName = element.tagName;
+    if (tagName === 'SCRIPT' || tagName === 'STYLE') {
+      return null;
+    }
+    return super.sanitizeElement(element, doc);
+  }
 }