@globalpayments/vega 2.97.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/helpers/utils.js

@@ -64,6 +64,15 @@ export function splitStyleProperties(styleAttr) {
   }
   return properties;
 }
+/**
+ * Simple escape HTML-sensitive characters so text can be rendered literally in HTML. Only escape &, <, and >.
+ *
+ * @param {string} text - Raw text content.
+ * @returns {string} Escaped text content.
+ */
+export function simpleEscapeHtml(text) {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
 /**
  * Escape HTML-sensitive characters so text can be rendered literally in HTML.
  *
@@ -71,12 +80,7 @@ export function splitStyleProperties(styleAttr) {
  * @returns {string} Escaped text content.
  */
 export function escapeHtml(text) {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
+  return simpleEscapeHtml(text).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 }
 /**
  * Escape text for use inside a double-quoted HTML attribute value.

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-rich-text-editor/vega-rich-text-editor.js

@@ -52,6 +52,8 @@ import { RTEExtensionController } from './slimmers/controllers/extension-control
 import { VegaRTEDefaultTextStyleItems, VegaRTEPresetToolbarItems } from './constants/constant';
 import { VegaRichTextEditorSourceViewRenderer } from './slimmers/renderers/vega-rich-text-editor-source-view-renderer';
 /**
+ * The rich text editor enables users to format text for a variety of publishers.
+ *
  * @vegaVersion 2.34.0
  */
 export class VegaRichTextEditor {

package/dist/collection/components/vega-section-title/vega-section-title.js

@@ -12,6 +12,8 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { A11yTreeSlimmer } from '../../helpers/slimmers/a11y-tree-slimmer';
 import { buildSectionTitleA11yTree } from './slimmers/a11y-tree/build-section-title-a11y-tree';
 /**
+ * The Section Title component provides uniform styling when creating titles for sections on a page, with an optional icon and subtitle.
+ *
  * @vegaVersion 2.1.0
  */
 export class VegaSectionTitle {

package/dist/collection/components/vega-segment-control/vega-segment-control.js

@@ -16,6 +16,8 @@ import { VegaSegmentOverflowController } from './slimmers/controllers/vega-segme
 import { VegaSegmentRenderer } from './slimmers/renderers/vega-segment-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * A Segment Control displays a set of mutually exclusive options, where only one option can be selected at a time.
+ *
  * @vegaVersion 2.3.0
  */
 export class VegaSegmentControl {

package/dist/collection/components/vega-selection-chip/vega-selection-chip.js

@@ -17,6 +17,8 @@ import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 /**
+ * A Selection Chip represents a selectable option within a Selection Chip Group.
+ *
  * @vegaVersion 2.22.0
  */
 export class VegaSelectionChip {

package/dist/collection/components/vega-selection-tile/vega-selection-tile.js

@@ -18,6 +18,8 @@ import { CHECKBOX_VALUE_CHANGE, RADIO_VALUE_CHANGE, } from '../../helpers/change
 import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * A Selection Tile represents a selectable option within a Selection Tile Group.
+ *
  * @vegaVersion 2.7.0
  */
 export class VegaSelectionTile {

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

@@ -17,6 +17,8 @@ import { VegaSidenavOpenStatusController } from './slimmers/controllers/vega-sid
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaStateUpdate } from '../../helpers/event-manager/event-id/vega-event-id';
 /**
+ * The Sidebar Navigation component displays a hierarchical navigation structure.
+ *
  * @deprecated This component will be removed soon, please consider using `vega-left-nav` component instead.
  * @vegaVersion 1, v2.29.0
  */

package/dist/collection/components/vega-signature-capture/vega-signature-capture.js

@@ -20,6 +20,8 @@ import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-ob
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 /**
+ * This component displays an area for users to draw their signature, emulating a signature captured on paper.
+ *
  * @vegaVersion 2.19.0
  */
 export class VegaSignatureCapture {

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

@@ -15,6 +15,8 @@ import { VegaSkeletonTableRenderer } from './slimmers/renderers/vega-skeleton-ta
 import { VegaSkeletonRendererManager } from './slimmers/renderers/vega-skeleton-renderer-manager';
 import { VegaSkeletonEllipseRenderer } from './slimmers/renderers/vega-skeleton-ellipse-renderer';
 /**
+ * A Skeleton component is used to create placeholders representing content on a page.
+ *
  * @vegaVersion 2.15.0
  */
 export class VegaSkeleton {

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

@@ -21,6 +21,8 @@ import { arrayToClassString } from '../../utils/ui';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaStepperRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-stepper/runtime-metrics-payload-definition';
 /**
+ * The Stepper component allows users to modify a numerical value either by text input or with increment and decrement buttons.
+ *
  * @vegaVersion 1.0.5
  */
 export class VegaStepper {

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,13 +23,17 @@ 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.
+ *
  * @vegaVersion 1.0.6
  */
 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();
@@ -400,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);