@heartlandone/vega 2.88.0 → 2.90.0

package/dist/cjs/vega-signature-capture.cjs.entry.js

@@ -7,45 +7,45 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const internalIconManager = require('./internal-icon-manager-66c48800.js');
 const component = require('./component-1e352960.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
-const vegaEventId = require('./vega-event-id-39dedd17.js');
-const designToken = require('./design-token-ad9f413c.js');
-const staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
+const designToken = require('./design-token-939bf72c.js');
+const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const object = require('./object-b53e9416.js');
 const index$1 = require('./index-592b4052.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5fd6e54a.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-23d112bd.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-c4ebee27.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
-const translationSlimmer = require('./translation-slimmer-aee3fb1c.js');
+const translationSlimmer = require('./translation-slimmer-e8549aff.js');
 require('./icon-manager-e855446d.js');
 require('./create-public-api-runtime-metrics-slimmer-122350c3.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./misc-3d30df91.js');
 require('./observer-f49483e8.js');
-require('./ui-3727d685.js');
-require('./type-guard-424efe26.js');
+require('./ui-c91c37a7.js');
+require('./type-guard-9917b11f.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-a1250419.js');
-require('./responsive-format-facade-bf330592.js');
+require('./internal-translation-controller-9785d4e8.js');
+require('./responsive-format-facade-d112aa9f.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./feature-flag-controller-5fa21654.js');
 require('./index-3ca118c4.js');
-require('./state-border-formatter-fd194e53.js');
+require('./state-border-formatter-c3c9b90d.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-vega-event-manager-c515cf5e.js');
+require('./internal-vega-event-manager-6e49d1ca.js');
 require('./string-39438062.js');
 require('./vega-internal-event-id-e138d4d6.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./sub-state-observer-slimmer-aa93ab4f.js');
+require('./sub-state-observer-slimmer-5bfe8e97.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -99,7 +99,7 @@ class WrittenModeRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderFooter()));
   }
   renderLabel() {
-    return (this.label && (index.h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled })));
+    return (this.label && (index.h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled, optional: this.optional })));
   }
   renderContainer() {
     return (index.h("div", { class: {
@@ -149,6 +149,9 @@ __decorate$2([
 __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], WrittenModeRenderer.prototype, "required", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], WrittenModeRenderer.prototype, "optional", void 0);
 __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], WrittenModeRenderer.prototype, "showClearBtn", void 0);
@@ -460,6 +463,16 @@ const VegaSignatureCapture = class {
      * @vegaVersion 2.19.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.89.0
+     */
+    this.optional = false;
     /**
      * Determines whether the clear button is displayed.
      *

package/dist/cjs/vega-stepper.cjs.entry.js

@@ -8,21 +8,21 @@ const component = require('./component-1e352960.js');
 const number = require('./number-4816603d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-23d112bd.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-01930b4e.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
-const vegaEventId = require('./vega-event-id-39dedd17.js');
-const staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-c4ebee27.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-85a7fdb0.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
+const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5fd6e54a.js');
-const ui = require('./ui-3727d685.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
+const ui = require('./ui-c91c37a7.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./string-39438062.js');
 require('./observer-f49483e8.js');
 require('./misc-3d30df91.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./vega-internal-event-id-e138d4d6.js');
-require('./internal-translation-controller-a1250419.js');
+require('./internal-translation-controller-9785d4e8.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
@@ -32,8 +32,8 @@ require('./breakpoints-ebde4837.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
-require('./sub-state-observer-slimmer-aa93ab4f.js');
-require('./internal-vega-event-manager-c515cf5e.js');
+require('./sub-state-observer-slimmer-5bfe8e97.js');
+require('./internal-vega-event-manager-6e49d1ca.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-5fa21654.js');
 require('./index-3ca118c4.js');

package/dist/cjs/vega-tab-group_2.cjs.entry.js

@@ -10,20 +10,20 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 const timer = require('./timer-5f33058b.js');
 const accessibility = require('./accessibility-88f8af84.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
-const vegaEventId = require('./vega-event-id-39dedd17.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const observer = require('./observer-f49483e8.js');
-const staticSubjectTitle = require('./static-subject-title-5829a298.js');
-const ui = require('./ui-3727d685.js');
+const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
+const ui = require('./ui-c91c37a7.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-01930b4e.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5fd6e54a.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-85a7fdb0.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./ui-32120990.js');
 require('./breakpoints-ebde4837.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-vega-event-manager-c515cf5e.js');
+require('./internal-vega-event-manager-6e49d1ca.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-5fa21654.js');
 require('./index-3ca118c4.js');
@@ -378,11 +378,13 @@ class VegaTabGroupPagesController extends pageResizeObserverSlimmer.PageResizeOb
    */
   /* istanbul ignore next */
   /**
-   * 1.record the width of tab.
-   * 2.the width of every tab is zero if the tab group component embedded in modal, so need recalculate the width of tab.
+   * 1. Record the width of each tab.
+   * 2. Recalculate when widths are zero, such as when the tab group is embedded in a modal before render.
+   * 3. Recalculate when tab count changes to ensure overflow navigation buttons stay in sync.
    */
   initTabsWidthArray() {
     if (this.tabWidthArray.length === 0 ||
+      this.tabWidthArray.length !== this.tabItems.length ||
       this.tabWidthArray.some((tabWidth) => tabWidth === 0)) {
       const newTabWidthArray = [];
       this.tabItems.forEach((item) => {
@@ -1234,9 +1236,10 @@ const VegaTabGroup = class {
     /**
      * Defines the tab items that appear within the tab group.
      *
-     * The `tabItems` property can only be set once during
-     *    initialization and cannot be overridden or
-     *    modified dynamically.
+     * The `tabItems` property supports dynamic updates.
+     *
+     * - When items are added or removed, the tab group
+     *      will update tabs and overflow layout automatically.
      *
      * @vegaVersion 1.3.0
      */

package/dist/cjs/vega-table_11.cjs.entry.js

@@ -8,30 +8,30 @@ const placeholder = require('./placeholder-cb6d37ad.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const object = require('./object-b53e9416.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const observer = require('./observer-f49483e8.js');
-const ui = require('./ui-3727d685.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
+const ui = require('./ui-c91c37a7.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 const vegaInternalEventId = require('./vega-internal-event-id-e138d4d6.js');
-const vegaEventId = require('./vega-event-id-39dedd17.js');
-const responsiveFormatFacade = require('./responsive-format-facade-bf330592.js');
-const typeGuard = require('./type-guard-424efe26.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
+const responsiveFormatFacade = require('./responsive-format-facade-d112aa9f.js');
+const typeGuard = require('./type-guard-9917b11f.js');
 const component = require('./component-1e352960.js');
 const misc = require('./misc-3d30df91.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
 const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-757e3a76.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-01930b4e.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5fd6e54a.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-450277b6.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-85a7fdb0.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
 const immutableMap = require('./immutable-map-d711339d.js');
-const translationSlimmer = require('./translation-slimmer-aee3fb1c.js');
+const translationSlimmer = require('./translation-slimmer-e8549aff.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-aa93ab4f.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-5bfe8e97.js');
 const featureFlagController = require('./feature-flag-controller-5fa21654.js');
 const breakpoints$1 = require('./breakpoints-ebde4837.js');
 const accessibility = require('./accessibility-88f8af84.js');
@@ -43,9 +43,9 @@ require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-a1250419.js');
+require('./internal-translation-controller-9785d4e8.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-vega-event-manager-c515cf5e.js');
+require('./internal-vega-event-manager-6e49d1ca.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./index-3ca118c4.js');
 require('./icon-manager-e855446d.js');

package/dist/cjs/vega-text.cjs.entry.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-58ea899e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
-const ui = require('./ui-3727d685.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./ui-32120990.js');
@@ -34,9 +33,6 @@ class VegaTextTooltipRenderer extends pageResizeObserverSlimmer.PageResizeObserv
       target: /* istanbul ignore next */ () => [this.host, document.body],
       callback: /* istanbul ignore next */ () => {
         if (this.overflow === 'ellipsis') {
-          if (this.tooltipRef) {
-            this.tooltipRef.innerText = this.content;
-          }
           void this.handleTooltip();
         }
       },
@@ -61,10 +57,25 @@ class VegaTextTooltipRenderer extends pageResizeObserverSlimmer.PageResizeObserv
       // or a previously hidden `vega-tab-group-panel` becoming visible) could leave the host
       // pinned to a transient narrow width and lock `vega-text` in a truncated state.
       this.host.style.minWidth = 'auto';
-      if (ui.isTextWrapped(this.host)) {
-        const tooltip = this.createTooltip();
+      // When a tooltip is active and vega-text is a shrink-to-fit flex item (e.g. inside
+      // vega-chip), the host's rendered width has collapsed to the truncated content width.
+      // Enlarging the viewport does NOT change the host's measured width in that case, so
+      // getBoundingClientRect() would still return the old collapsed value.
+      // Fix: temporarily restore the full text in the tooltip so the flex item expands back
+      // to its container-constrained width before we measure. Both this write and the
+      // subsequent getBoundingClientRect() are synchronous — the browser does not paint
+      // between them, so no flicker is introduced.
+      if (this.tooltipRef) {
+        this.tooltipRef.textContent = this.text;
+      }
+      const truncated = this.computeTruncatedText();
+      if (truncated !== this.text) {
+        const tooltip = this.createTooltip(truncated);
+        // Re-validate after Stencil hydration in case the tooltip component causes a layout
+        // shift that affects the available width. Remove the tooltip if the text now fits;
+        // otherwise update the display text only if it actually changed.
         void tooltip.componentOnReady().then(() => {
-          void this.updateTooltipDisplayText();
+          this.updateTooltipDisplayText();
         });
         // VD-8855: After truncating during what may have been a transient narrow layout,
         // schedule one delayed re-measure (after layout settles) to verify whether the
@@ -80,28 +91,16 @@ class VegaTextTooltipRenderer extends pageResizeObserverSlimmer.PageResizeObserv
               return;
             }
             this.host.style.minWidth = 'auto';
-            if (this.tooltipRef) {
-              this.tooltipRef.innerText = this.content;
-            }
-            if (!ui.isTextWrapped(this.host)) {
-              if (this.tooltipRef && this.tooltipRef.classList.contains('hydrated')) {
-                this.host.innerText = this.content;
-                this.tooltipRef.remove();
-                this.tooltipRef = null;
-              }
-            }
-            else if (this.tooltipRef) {
-              void this.updateTooltipDisplayText();
-            }
+            this.updateTooltipDisplayText();
           });
         });
       }
       else {
-        if (this.tooltipRef && this.tooltipRef.classList.contains('hydrated')) {
-          this.host.innerText = this.content;
-          this.tooltipRef.remove();
-          this.tooltipRef = null;
-        }
+        // Text fits — remove any existing tooltip regardless of its hydration state.
+        // The previous guard (classList.contains('hydrated')) created a race window where
+        // a tooltip created while the page was narrow would persist if the page was widened
+        // before Stencil finished hydrating the tooltip element.
+        this.removeTooltip();
       }
     };
     /**
@@ -110,69 +109,100 @@ class VegaTextTooltipRenderer extends pageResizeObserverSlimmer.PageResizeObserv
      * @see{module:vega-text-with-long-text-change-screen-size}
      */
     /* istanbul ignore next */
-    this.createTooltip = () => {
+    this.createTooltip = (truncatedText) => {
       var _a, _b, _c;
       this.tooltipRef = this.host.querySelector('vega-tooltip');
       if (!this.tooltipRef) {
         // eslint-disable-next-line no-restricted-globals
         this.tooltipRef = document.createElement('vega-tooltip');
-        this.tooltipRef.text = this.content;
-        this.tooltipRef.innerText = this.content;
+        this.tooltipRef.text = this.text;
+        // Set the already-computed truncated text before DOM insertion so the browser
+        // never paints the full (unwrapped) text — eliminating the initial flicker.
+        this.tooltipRef.textContent = truncatedText;
         this.tooltipRef.placement = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.placement;
         this.tooltipRef.maxWidth = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.maxWidth;
         this.tooltipRef.minWidth = (_c = this.tooltip) === null || _c === void 0 ? void 0 : _c.minWidth;
         this.host.replaceChildren(this.tooltipRef);
       }
+      else {
+        // Tooltip already exists (resize case): update its display text immediately
+        // rather than waiting for the async componentOnReady callback.
+        this.tooltipRef.textContent = truncatedText;
+      }
       return this.tooltipRef;
     };
-    /** Calculate the number of displayed characters according to the screen width and font size.
-     * In order to avoid errors, recalculate whether the vega-tooltip displays a line break.
-     * If it has, gradually reduce the number of calculated characters until there is no line break.
-     * If there is no newline yet, incrementally increase the counted number of characters until the newline.
+    /**
      * The below method is e2e-test covered in
      * @see{module:vega-text-with-long-text}
      * @see{module:vega-text-with-long-text-change-screen-size}
      * @see{module:vega-text-with-long-text-minimize-screen-size}
-     * @see{module:vega-text-with-long-text-minimize-screen-safari}
      */
     /* istanbul ignore next */
-    this.updateTooltipDisplayText = async () => {
-      let fontSize = parseFloat(ui.getElementComputedStyle(this.host, 'font-size'));
-      fontSize = isNaN(fontSize) ? VegaTextTooltipRenderer.DEFAULT_FONT_SIZE : fontSize;
-      const textLength = Math.floor(this.host.getBoundingClientRect().width / Math.floor(fontSize / 2));
-      if (ui.isTextWrapped(this.tooltipRef)) {
-        for (let i = textLength; i >= 1; i--) {
-          this.tooltipRef.textContent = this.truncateStringWithEllipsis(i);
-          if (!ui.isTextWrapped(this.tooltipRef)) {
-            break;
-          }
-          if (i <= 1) {
-            // Set min-width to fix the safari wrap issue when the default width is already wrapped.
-            this.insertMinWidthStyle();
-            break;
-          }
-        }
-      }
+    this.truncateStringWithEllipsis = (textLength) => {
+      return this.text.substring(0, textLength) + '...';
     };
     /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-text-with-long-text}
-     * @see{module:vega-text-with-long-text-change-screen-size}
-     * @see{module:vega-text-with-long-text-minimize-screen-size}
+     * Check the maximum length of text that can be displayed without overflow based on the available width.
+     *
+     * @see {module:multiple-vega-text-in-flex-container}
+     * @returns {number} The maximum length of text that can be displayed without overflow.
      */
     /* istanbul ignore next */
-    this.truncateStringWithEllipsis = (textLength) => {
-      return this.content.substring(0, textLength) + '...';
-    };
-    this.initTextContent = () => {
-      this.content = this.host.textContent;
+    this.getSafeTextLengthByDom = () => {
+      const widthChecker = this.widthCheckerRef;
+      widthChecker.textContent = this.text;
+      const safeWidth = this.host.getBoundingClientRect().width;
+      let checkerWidth = widthChecker.getBoundingClientRect().width;
+      if (this.text.length < 2 || checkerWidth <= safeWidth) {
+        return this.text.length;
+      }
+      let low = 0;
+      let high = this.text.length - 1;
+      for (let i = 0; i < this.text.length && low < high; i++) {
+        const mid = Math.floor((low + high + 1) / 2);
+        const displayedText = this.text.substring(0, mid) + '...';
+        widthChecker.textContent = displayedText;
+        checkerWidth = widthChecker.getBoundingClientRect().width;
+        if (checkerWidth <= safeWidth) {
+          low = mid;
+        }
+        else {
+          high = mid - 1;
+        }
+      }
+      return Math.max(1, low);
     };
   }
   /**
    * Component lifecycle - [componentDidLoad]{@link VegaText.componentDidLoad}
    */
   componentDidLoad() {
-    this.initTextContent();
+    this.widthCheckerRef = this.host.shadowRoot.querySelector('.width-checker');
+    this.host.textContent = this.text;
+    // Run truncation synchronously during componentDidLoad so the tooltip is created before the
+    // browser's first paint. The resize observer callback is deferred (isDeferred: true →
+    // setTimeout) which guarantees it fires AFTER the first paint, causing a visible jump from
+    // CSS-clipped raw text to JS-truncated tooltip. By calling handleTooltip here we avoid that
+    // first-paint gap. For hidden elements (clientWidth === 0) handleTooltip returns early and
+    // the resize observer fires again once the element becomes visible.
+    if (this.overflow === 'ellipsis') {
+      void this.handleTooltip();
+    }
+  }
+  /**
+   * Watching the text prop — sync cached content and re-evaluate tooltip.
+   * The below method is e2e-test covered in
+   * @see{module:vega-text-with-dynamic-update-content}
+   */
+  /* istanbul ignore next */
+  watchText() {
+    this.host.textContent = this.text;
+    if (this.overflow === 'ellipsis') {
+      void this.handleTooltip();
+    }
+    else {
+      this.removeTooltip();
+    }
   }
   /**
    * The below method is e2e-test covered in
@@ -188,6 +218,63 @@ class VegaTextTooltipRenderer extends pageResizeObserverSlimmer.PageResizeObserv
       this.tooltipRef.minWidth = (_c = this.tooltip) === null || _c === void 0 ? void 0 : _c.minWidth;
     }
   }
+  /**
+   * Removes the tooltip from the DOM and restores plain text, regardless of hydration state.
+   *
+   * @see{module:vega-text-with-long-text}
+   * @see{module:vega-text-with-long-text-change-screen-size}
+   */
+  /* istanbul ignore next */
+  removeTooltip() {
+    if (this.tooltipRef) {
+      this.host.textContent = this.text;
+      this.tooltipRef.remove();
+      this.tooltipRef = null;
+    }
+  }
+  /**
+   * Update the tooltip display text.
+   *
+   * @see{module:vega-text-with-long-text}
+   * @see{module:vega-text-with-long-text-change-screen-size}
+   */
+  /* istanbul ignore next */
+  updateTooltipDisplayText() {
+    // Same flex-collapse fix as in the initial measurement: restore the full text
+    // so the host expands to its container-constrained width before measuring.
+    if (this.tooltipRef) {
+      this.tooltipRef.textContent = this.text;
+    }
+    const reValidated = this.computeTruncatedText();
+    if (reValidated === this.text) {
+      // Text fits after hydration — clean up the tooltip entirely.
+      this.removeTooltip();
+    }
+    else if (this.tooltipRef && this.tooltipRef.textContent !== reValidated) {
+      this.tooltipRef.textContent = reValidated;
+    }
+  }
+  /**
+   * Get the truncated text based on the available width and the font styles.
+   * If the truncated length is less than or equal to 1, it will set a min-width to prevent Safari from wrapping the text to multiple lines when the container is narrower than a single character.
+   *
+   * @see{module:vega-text-with-long-text}
+   */
+  /* istanbul ignore next */
+  computeTruncatedText() {
+    const truncatedLength = this.getSafeTextLengthByDom();
+    if (truncatedLength === this.text.length) {
+      return this.text;
+    }
+    if (truncatedLength <= 1) {
+      // Set min-width to fix the Safari wrap issue when the container is narrower than a single character.
+      this.insertMinWidthStyle();
+    }
+    else {
+      this.host.style.minWidth = 'auto';
+    }
+    return this.truncateStringWithEllipsis(truncatedLength);
+  }
   /**
    * Dynamically calculates and sets the minimum width of an element based on the content inside a hidden placeholder element.
    * The below method is e2e-test covered in
@@ -207,10 +294,12 @@ class VegaTextTooltipRenderer extends pageResizeObserverSlimmer.PageResizeObserv
     this.host.style.minWidth = placeholder.getBoundingClientRect().width + 'px';
   }
 }
-VegaTextTooltipRenderer.DEFAULT_FONT_SIZE = 16;
 __decorate$1([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTextTooltipRenderer.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTextTooltipRenderer.prototype, "text", void 0);
 __decorate$1([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTextTooltipRenderer.prototype, "tooltip", void 0);
@@ -220,11 +309,14 @@ __decorate$1([
 __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTextTooltipRenderer.prototype, "componentDidLoad", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchText')
+], VegaTextTooltipRenderer.prototype, "watchText", null);
 __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('watchTooltip')
 ], VegaTextTooltipRenderer.prototype, "watchTooltip", null);
 
-const vegaTextCss = ":host{display:block}:host(.vega-container-text-newline){overflow-wrap:break-word}:host(.vega-container-text-ellipsis){word-break:break-all}";
+const vegaTextCss = ":host{display:block;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;letter-spacing:inherit;line-height:inherit;flex-direction:column;flex-wrap:wrap;gap:0px}:host .placeholder-text{display:block;width:100%;visibility:hidden;overflow:hidden;word-break:break-all;height:0px !important;margin:0;padding:0;line-height:0px;border:none}:host .width-checker{position:absolute;display:block;visibility:hidden;top:0;left:0;white-space:nowrap;height:0px !important;margin:0;padding:0;border:none}:host(.vega-container-text-newline){overflow-wrap:break-word}:host(.vega-container-text-newline) .placeholder-text{display:none}:host(.vega-container-text-ellipsis){word-break:break-all;min-width:0}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -249,6 +341,20 @@ const VegaText = class {
      * @vegaVersion 1.18.0
      */
     this.overflow = 'newline';
+    /**
+     * Specifies the text content to display.
+     *
+     * @vegaVersion 2.89.0
+     */
+    this.text = '';
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-text-with-dynamic-update-content}
+   */
+  /* istanbul ignore next */
+  /** Watching the text prop. */
+  watchText() {
   }
   /**
    * The below method is e2e-test covered in
@@ -260,14 +366,22 @@ const VegaText = class {
   }
   componentDidLoad() {
   }
+  /**
+   * Renders the VegaText component.
+   * span.placeholder-text is used as a placeholder to maintain an optimal, fixed width when the displayed text changes, thereby preventing anomalous line breaks caused by secondary width adjustments within a flex container.
+   * span.width-checker is used to calculate the maximum length of text that can be displayed without overflow based on the available width, which is essential for the tooltip functionality to determine when to show the tooltip and what content to display in it.
+   *
+   * @returns {VegaText} The rendered JSX element.
+   */
   render() {
     return (index.h(index.Host, { class: {
         'vega-container-text-ellipsis': this.overflow === 'ellipsis',
         'vega-container-text-newline': this.overflow === 'newline',
-      } }, index.h("slot", null)));
+      } }, index.h("span", { class: "placeholder-text" }, this.text), index.h("span", { class: "width-checker" }), index.h("slot", null)));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
+    "text": ["watchText"],
     "tooltip": ["watchTooltip"]
   }; }
 };