@globalpayments/vega 2.88.0 → 2.89.0

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"]
   }; }
 };

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

@@ -8,21 +8,21 @@ const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const component = require('./component-1e352960.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 staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-430b4f02.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 vegaEventId = require('./vega-event-id-39dedd17.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-01930b4e.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-85a7fdb0.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./string-39438062.js');
 require('./observer-f49483e8.js');
-require('./ui-3727d685.js');
+require('./ui-c91c37a7.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-5582d789.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
@@ -33,8 +33,8 @@ require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.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');
@@ -308,7 +308,7 @@ const VegaTextarea = class {
       return (index.h("div", { class: { 'vega-textarea-container': true, 'vega-textarea-not-resizable': !this.resizable }, ref: (e) => (this.inputContainerRef = e) }, index.h("textarea", { rows: this.rows >= 2 ? this.rows - 1 : 4, placeholder: this.placeholder, disabled: this.disabled, required: this.required, ref: this.setTextareaRef, maxLength: this.maxLength, minLength: this.minLength, value: this.value, onBlur: this.handleTextareaBlur, "aria-label": this.label || 'No label defined' }), this.showCounter && this.renderCharacterCounter()));
     };
     this.renderHintMessage = () => {
-      return index.h("vega-text", null, this.hint);
+      return index.h("vega-text", { text: this.hint });
     };
     this.renderCharacterCounter = () => {
       return (index.h("div", { class: {

package/dist/cjs/vega-time-picker_2.cjs.entry.js

@@ -4,32 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const componentLoadRequired = require('./component-load-required-6cc74719.js');
-const timeRequiredRule = require('./time-required-rule-ba450bbd.js');
+const timeRequiredRule = require('./time-required-rule-618109fa.js');
 const component = require('./component-1e352960.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 domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
-const vegaEventId = require('./vega-event-id-39dedd17.js');
-const ui = require('./ui-3727d685.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-430b4f02.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
+const ui = require('./ui-c91c37a7.js');
 const accessibility = require('./accessibility-88f8af84.js');
-const typeGuard = require('./type-guard-424efe26.js');
+const typeGuard = require('./type-guard-474dec0d.js');
 const array = require('./array-249289f2.js');
-const staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-d04aa177.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-e95427b5.js');
 const clickOutsideOnlyToDismissStrategy = require('./click-outside-only-to-dismiss-strategy-407f6d1e.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-74528545.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-a73354ca.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-01930b4e.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5fd6e54a.js');
-const translationSlimmer = require('./translation-slimmer-aee3fb1c.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-85a7fdb0.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
+const translationSlimmer = require('./translation-slimmer-1a7a2b6d.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-5582d789.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
@@ -38,16 +38,16 @@ require('./ui-32120990.js');
 require('./breakpoints-ebde4837.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');
 require('./typography-4560e7f1.js');
 require('./number-4816603d.js');
 require('./internal-vega-z-index-manager-f03ddb37.js');
-require('./responsive-format-facade-bf330592.js');
+require('./responsive-format-facade-cc368403.js');
 require('./pixel-98f2a10c.js');
 require('./feature-flag-controller-5fa21654.js');
 require('./index-3ca118c4.js');
-require('./keyboard-manager-6821709a.js');
-require('./internal-vega-event-manager-c515cf5e.js');
+require('./keyboard-manager-5babfda8.js');
+require('./internal-vega-event-manager-6e49d1ca.js');
 require('./vega-env-manager-23b8b23c.js');
 
 var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -75,7 +75,7 @@ class VegaTimePickerLabelRenderer extends globalSlimmerRegistry.VegaSlimmer {
     };
   }
   render() {
-    return (index.h("vega-field-label", { onClick: this.onTimePickerFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+    return (index.h("vega-field-label", { onClick: this.onTimePickerFocus, "is-field-required": this.required, optional: this.optional, disabled: this.disabled, label: this.label }));
   }
 }
 __decorate$d([
@@ -87,6 +87,9 @@ __decorate$d([
 __decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTimePickerLabelRenderer.prototype, "required", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "optional", void 0);
 __decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTimePickerLabelRenderer.prototype, "disabled", void 0);
@@ -1870,6 +1873,16 @@ const VegaTimePicker = class {
      * @vegaVersion 1.12.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 the interval between each selectable minute value
      *    in the time picker.

package/dist/cjs/vega-toggle-switch.cjs.entry.js

@@ -3,26 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
-const vegaEventId = require('./vega-event-id-39dedd17.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-5fd6e54a.js');
+const vegaEventId = require('./vega-event-id-37c1716f.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-146316b2.js');
 const accessibility = require('./accessibility-88f8af84.js');
 const component = require('./component-1e352960.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 formFieldControllerSlimmer = require('./form-field-controller-slimmer-430b4f02.js');
 const toggleSwitchRequiredRule = require('./toggle-switch-required-rule-88a51b36.js');
-const staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./dom-node-subject-observer-factory-ba6a95f3.js');
+require('./dom-node-subject-observer-factory-c82df135.js');
 require('./observer-f49483e8.js');
-require('./ui-3727d685.js');
-require('./internal-vega-event-manager-c515cf5e.js');
+require('./ui-c91c37a7.js');
+require('./internal-vega-event-manager-6e49d1ca.js');
 require('./try-get-document-c0ebd39a.js');
 require('./string-39438062.js');
 require('./misc-3d30df91.js');
 require('./vega-internal-event-id-e138d4d6.js');
-require('./internal-translation-controller-a1250419.js');
+require('./internal-translation-controller-5582d789.js');
 require('./index-592b4052.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
@@ -33,7 +33,7 @@ require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-aa93ab4f.js');
+require('./sub-state-observer-slimmer-5bfe8e97.js');
 
 const vegaToggleSwitchCss = ":host{display:inline-block}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}div.vega-container{display:flex;justify-content:flex-start;align-items:center;border-radius:9999px;position:relative;box-sizing:content-box;height:24px;width:48px;padding:4px;background-color:rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))}div.vega-container:hover{background-color:rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))}div.vega-container.vega-container-checked{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}div.vega-container.vega-container-checked:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}div.vega-container.vega-container-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}div.vega-container.vega-container-checked.vega-container-disabled{background-color:rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))}div.vega-container-small-size{box-sizing:border-box;height:20px;width:32px;padding:2px}div.vega-container>span{margin-left:0px;transition-property:margin;transition-duration:0.1s;transition-timing-function:linear}div.vega-container:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}div.vega-container-checked>span{margin-left:24px}div.vega-container-checked.vega-container-small-size>span{margin-left:12px}div.vega-container>input{position:absolute;cursor:pointer;opacity:0;left:0px;top:0px;width:100%;height:100%;margin:0px;-webkit-tap-highlight-color:transparent}div.vega-container input:disabled{cursor:default}div.vega-container>span{display:inline-block;border-radius:9999px;box-shadow:var(--v-shadow-form-field, 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1));width:24px;height:24px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));box-shadow:var(--v-shadow-form-field, 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1));transition-property:margin;transition-duration:0.1s;transition-timing-function:linear}div.vega-container-small-size{height:20px}div.vega-container-small-size>span{width:16px;height:16px}div{align-self:center}";
 
@@ -95,6 +95,16 @@ const VegaToggleSwitch = class {
      * @vegaVersion 2.25.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;
     /**
      * Specifies whether the toggle switch is disabled.
      *
@@ -173,7 +183,7 @@ const VegaToggleSwitch = class {
     return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("vega-flex", { gap: "size-8", ref: (node) => (this.toggleSwitchContainer = node) }, index.h("div", { class: `${divContainerCss} vega-flex-shrink-0 v-min-w-min` }, index.h("input", { type: "checkbox", name: "switch", disabled: this.disabled, checked: this.checked, onChange: this.updateValue, "aria-label": this.label || 'No label defined', role: 'button', tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }), index.h("span", { class: this.disabled ? 'v-bg-tertiary' : 'v-bg-primary' })), this.renderLabelDom())), this.host);
   }
   renderLabelDom() {
-    return this.label ? (index.h("div", { class: "vega-flex-basis-0 vega-flex-grow" }, index.h("vega-field-label", { onClick: this.toggleSwitch, disabled: this.disabled, label: this.label, isFieldRequired: this.required }))) : null;
+    return this.label ? (index.h("div", { class: "vega-flex-basis-0 vega-flex-grow" }, index.h("vega-field-label", { onClick: this.toggleSwitch, disabled: this.disabled, label: this.label, isFieldRequired: this.required, optional: this.optional }))) : null;
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -4,33 +4,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
-const injectKeyboardManager = require('./inject-keyboard-manager-acaf1530.js');
+const injectKeyboardManager = require('./inject-keyboard-manager-3ccf1cb6.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-d04aa177.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-e95427b5.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-300a3929.js');
-require('./keyboard-manager-6821709a.js');
-require('./ui-3727d685.js');
-require('./type-guard-424efe26.js');
+require('./keyboard-manager-5babfda8.js');
+require('./ui-c91c37a7.js');
+require('./type-guard-474dec0d.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-a1250419.js');
+require('./internal-translation-controller-5582d789.js');
 require('./change-manager-a297e4d2.js');
-require('./static-subject-title-5829a298.js');
+require('./static-subject-title-70c73b16.js');
 require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./number-4816603d.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./try-get-document-c0ebd39a.js');
-require('./responsive-format-facade-bf330592.js');
+require('./responsive-format-facade-cc368403.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./feature-flag-controller-5fa21654.js');
 require('./index-3ca118c4.js');
 require('./observer-f49483e8.js');
-require('./dom-node-subject-observer-factory-ba6a95f3.js');
+require('./dom-node-subject-observer-factory-c82df135.js');
 require('./vega-internal-event-id-e138d4d6.js');
 require('./object-b53e9416.js');