@globalpayments/vega 2.87.0 → 2.89.0

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

@@ -89,6 +89,16 @@ export class VegaSelectionTileGroup {
      * @vegaVersion 2.7.0
      */
     this.layout = 'vertical';
+    /**
+     * 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;
     /**
      * Defines custom validation rules for the selection tile group field.
      *
@@ -275,6 +285,30 @@ export class VegaSelectionTileGroup {
       "attribute": "required",
       "reflect": false
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/renderers/written-mode-renderer.js

@@ -33,7 +33,7 @@ export class WrittenModeRenderer extends VegaSlimmer {
       this.renderFooter()));
   }
   renderLabel() {
-    return (this.label && (h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled })));
+    return (this.label && (h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled, optional: this.optional })));
   }
   renderContainer() {
     return (h("div", { class: {
@@ -83,6 +83,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], WrittenModeRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], WrittenModeRenderer.prototype, "showClearBtn", void 0);

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

@@ -71,6 +71,16 @@ export class VegaSignatureCapture {
      * @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.
      *
@@ -230,6 +240,30 @@ export class VegaSignatureCapture {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "showClearBtn": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-text/slimmers/renderers/vega-text-tooltip-renderer.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
-import { getElementComputedStyle, isTextWrapped } from '../../../../utils/ui';
 import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
 /** The vega-text tooltip renderer slimmer */
 export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
@@ -23,9 +22,6 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
       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();
         }
       },
@@ -50,10 +46,25 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
       // 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 (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
@@ -69,28 +80,16 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
               return;
             }
             this.host.style.minWidth = 'auto';
-            if (this.tooltipRef) {
-              this.tooltipRef.innerText = this.content;
-            }
-            if (!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();
       }
     };
     /**
@@ -99,69 +98,100 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
      * @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(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 (isTextWrapped(this.tooltipRef)) {
-        for (let i = textLength; i >= 1; i--) {
-          this.tooltipRef.textContent = this.truncateStringWithEllipsis(i);
-          if (!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
@@ -177,6 +207,63 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
       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
@@ -196,10 +283,12 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
     this.host.style.minWidth = placeholder.getBoundingClientRect().width + 'px';
   }
 }
-VegaTextTooltipRenderer.DEFAULT_FONT_SIZE = 16;
 __decorate([
   MapToComponentField()
 ], VegaTextTooltipRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTextTooltipRenderer.prototype, "text", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTextTooltipRenderer.prototype, "tooltip", void 0);
@@ -209,6 +298,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaTextTooltipRenderer.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchText')
+], VegaTextTooltipRenderer.prototype, "watchText", null);
 __decorate([
   MapToComponentMethod('watchTooltip')
 ], VegaTextTooltipRenderer.prototype, "watchTooltip", null);

package/dist/collection/components/vega-text/vega-text.css

@@ -5,12 +5,49 @@
  */
 :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;
 }

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

@@ -27,6 +27,21 @@ export class VegaText {
      * @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() {
+    methodPlaceholder();
   }
   /**
    * The below method is e2e-test covered in
@@ -40,11 +55,20 @@ export class VegaText {
   componentDidLoad() {
     methodPlaceholder();
   }
+  /**
+   * 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 (h(Host, { class: {
         'vega-container-text-ellipsis': this.overflow === 'ellipsis',
         'vega-container-text-newline': this.overflow === 'newline',
       } },
+      h("span", { class: "placeholder-text" }, this.text),
+      h("span", { class: "width-checker" }),
       h("slot", null)));
   }
   static get is() { return "vega-text"; }
@@ -77,6 +101,27 @@ export class VegaText {
       "reflect": false,
       "defaultValue": "'newline'"
     },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Specifies the text content to display."
+      },
+      "attribute": "text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
     "tooltip": {
       "type": "unknown",
       "mutable": false,
@@ -103,6 +148,9 @@ export class VegaText {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "text",
+      "methodName": "watchText"
+    }, {
       "propName": "tooltip",
       "methodName": "watchTooltip"
     }]; }

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

@@ -200,6 +200,16 @@ export class VegaTextarea {
      * @vegaVersion 1.11.0
      */
     this.minLength = null;
+    /**
+     * 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.88.0
+     */
+    this.optional = false;
     /**
      * Determines whether the user can vertically resize the text area by
      * dragging its bottom-right corner. When `false`, the resize handle is
@@ -237,7 +247,7 @@ export class VegaTextarea {
         this.showCounter && this.renderCharacterCounter()));
     };
     this.renderHintMessage = () => {
-      return h("vega-text", null, this.hint);
+      return h("vega-text", { text: this.hint });
     };
     this.renderCharacterCounter = () => {
       return (h("div", { class: {
@@ -312,7 +322,7 @@ export class VegaTextarea {
       this.hint && this.renderHintMessage()), this.host);
   }
   renderLabelDom() {
-    return (h("vega-field-label", { onClick: this.inputFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
+    return (h("vega-field-label", { onClick: this.inputFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label, optional: this.optional, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
       } }));
   }
@@ -620,6 +630,30 @@ export class VegaTextarea {
       "reflect": true,
       "defaultValue": "null"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "resizable": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-time-picker/slimmers/renderers/vega-time-picker-label-renderer.js

@@ -25,7 +25,7 @@ export class VegaTimePickerLabelRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("vega-field-label", { onClick: this.onTimePickerFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { onClick: this.onTimePickerFocus, "is-field-required": this.required, optional: this.optional, disabled: this.disabled, label: this.label }));
   }
 }
 __decorate([
@@ -37,6 +37,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTimePickerLabelRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTimePickerLabelRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTimePickerLabelRenderer.prototype, "disabled", void 0);

package/dist/collection/components/vega-time-picker/vega-time-picker.js

@@ -115,6 +115,16 @@ export class VegaTimePicker {
      * @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.
@@ -342,6 +352,30 @@ export class VegaTimePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,