@globalpayments/vega 2.96.0 → 2.98.0

package/dist/collection/components/vega-backdrop/slimmers/controller/vega-backdrop-visible-controller.js

@@ -9,10 +9,41 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
  * VegaBackdrop visible controller
  */
 export class VegaBackdropVisibleController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.hasBeenVisible = false;
+    /**
+     * Hides the backdrop display after opacity transition completes.
+     *
+     * @param {TransitionEvent} event - Browser transition event.
+     */
+    this.handleOpacityTransitionEnd = (event) => {
+      if (event.propertyName !== 'opacity') {
+        return;
+      }
+      if (!this.visible) {
+        this.host.style.display = 'none';
+      }
+    };
+  }
+  /**
+   * Clean up listeners when backdrop is disconnected.
+   */
+  disconnectedCallback() {
+    this.host.removeEventListener('transitionend', this.handleOpacityTransitionEnd);
+  }
+  /**
+   * Set deterministic hidden defaults before first paint to avoid flash.
+   */
+  componentWillLoad() {
+    this.host.style.opacity = '0';
+    this.host.style.display = 'none';
+  }
   /**
    * During the loading process of the component, the background style is updated.
    */
   componentDidLoad() {
+    this.host.addEventListener('transitionend', this.handleOpacityTransitionEnd);
     this.updateBackdropStyle();
   }
   /**
@@ -27,20 +58,38 @@ export class VegaBackdropVisibleController extends VegaSlimmer {
    */
   updateBackdropStyle() {
     if (this.visible) {
+      this.hasBeenVisible = true;
       this.host.style.display = 'block';
-      setTimeout(() => {
-        this.host.style.opacity = '1';
-      });
+      this.host.style.opacity = '1';
     }
     else {
       this.host.style.opacity = '0';
-      setTimeout(() => {
-        if (!this.visible) {
-          this.host.style.display = 'none';
-        }
-      }, this.duration);
+      if (!this.hasBeenVisible || !this.hasOpacityTransition()) {
+        this.host.style.display = 'none';
+        return;
+      }
     }
   }
+  /**
+   * Checks whether opacity transition is enabled on the backdrop element.
+   *
+   * @returns {boolean} True when opacity transitions are active.
+   */
+  hasOpacityTransition() {
+    var _a, _b;
+    const computedStyle = getComputedStyle(this.host);
+    const transitionProperties = ((_a = computedStyle.transitionProperty) !== null && _a !== void 0 ? _a : '')
+      .split(',')
+      .map((token) => token.trim());
+    const transitionTimes = ((_b = computedStyle.transitionDuration) !== null && _b !== void 0 ? _b : '')
+      .split(',')
+      .map((token) => token.trim());
+    const hasOpacityProperty = transitionProperties.some((property) => property === 'opacity' || property === 'all');
+    if (!hasOpacityProperty) {
+      return false;
+    }
+    return transitionTimes.some((durationToken) => Number.parseFloat(durationToken) > 0);
+  }
 }
 __decorate([
   MapToComponentField()
@@ -51,6 +100,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaBackdropVisibleController.prototype, "duration", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaBackdropVisibleController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaBackdropVisibleController.prototype, "componentWillLoad", null);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaBackdropVisibleController.prototype, "componentDidLoad", null);

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

@@ -14,6 +14,8 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { VegaActionButtonClick, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * Banners are prominent and persistent elements that display important messages, calls to action, or promotional content.
+ *
  * @vegaVersion 1.9.1
  */
 export class VegaBanner {

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

@@ -16,6 +16,8 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { formatFlexStyles } from '../../helpers/formatter/style-formatter';
 import { VegaBoxResponsiveStyleController } from './slimmers/controllers/vega-box-responsive-style-controller';
 /**
+ * The Box component is a low-level utility container that allows you to easily set predefined size tokens for padding and margins.
+ *
  * @vegaVersion 1.27.0
  */
 export class VegaBox {

package/dist/collection/components/vega-brand-logo/vega-brand-logo.js

@@ -12,6 +12,8 @@ import { VegaBrandLogoRenderer } from './slimmers/renderers/vega-brand-logo-rend
 import { DarkModeStateControllerSlimmer } from '../../helpers/slimmers/dark-mode-state-controller-slimmer';
 import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
 /**
+ * The Brand Logo component is a collection of official Global Payments logos in pre-approved sizes, available in light and dark mode variants.
+ *
  * @vegaVersion 2.47.0
  */
 export class VegaBrandLogo {

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

@@ -17,6 +17,8 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { ComponentGlobalStyleSlimmer } from '../../helpers/slimmers/component-global-style-slimmer';
 import breadcrumbGlobalCss from './vega-breadcrumb.global.css';
 /**
+ * The Breadcrumb component shows users their current location within a site's hierarchy and provides a quick way to backtrack to a previous level.
+ *
  * @vegaVersion 1.41.0
  */
 export class VegaBreadcrumb {

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

@@ -22,6 +22,8 @@ import { findParent } from '../../utils/ui';
 import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 /**
+ * Buttons are used for triggering actions.
+ *
  * @vegaVersion 1.0.0
  */
 export class VegaButton {

package/dist/collection/components/vega-button-circle/vega-button-circle.js

@@ -20,6 +20,8 @@ import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/ev
 import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
+ * A circular button with an icon.
+ *
  * @vegaVersion 1.0.2
  */
 export class VegaButtonCircle {

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

@@ -16,6 +16,8 @@ import { VegaButtonGroupAllItemsDisabledController } from './slimmers/controller
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonGroupRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-group/runtime-metrics-payload-definition';
 /**
+ * A Button Group is used to group multiple related actions together.
+ *
  * @vegaVersion 2.5.0
  */
 export class VegaButtonGroup {

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -15,6 +15,8 @@ import { VegaButtonLinkRuntimeMetricsPayloadDefinition } from '../../constants/r
 import { emptySanitizeStrategy, htmlSanitizer } from '../../utils/sanitize';
 import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
+ * The Button Link is a subtle and lightweight button that doesn't have a background or border. It is also referred to as a Tertiary or Ghost button.
+ *
  * @vegaVersion 1.0.2
  */
 export class VegaButtonLink {

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

@@ -40,6 +40,8 @@ import { VegaCalendarDayViewFocusSlimmer } from './slimmers/common/controllers/v
 import { EventPreviewActionsController } from './slimmers/common/controllers/vega-calendar-event-preview-actions-controller';
 import { VegaCalendarKeyboardController } from './slimmers/common/controllers/vega-calendar-keyboard-controller';
 /**
+ * A Calendar component displays events in a day, week, or month view.
+ *
  * @vegaVersion 2.14.0
  */
 export class VegaCalendar {

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

@@ -14,6 +14,8 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaCardRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-card/runtime-metrics-payload-definition';
 /**
+ * A Card component is a styled container that groups or highlights semantically related content.
+ *
  * @vegaVersion 1.0.4
  */
 export class VegaCard {

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

@@ -20,6 +20,8 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { VegaCarouselRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-carousel/runtime-metrics-payload-definition';
 import { tryGetDocument } from '../../utils/try-get-document';
 /**
+ * A Carousel presents a sequence of items in a horizontal rotation, showcasing images, text, or cards within a limited space.
+ *
  * @vegaVersion 1.0.2
  */
 export class VegaCarousel {

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

@@ -11,7 +11,7 @@ import { ComponentLoadRequired } from '../../../decorators/method-decorators/com
 import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_USER_INTERACTION, CHECKBOX_VALUE_CHANGE, FORM_ELEMENT_VALUE_CHANGE, } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../../helpers/change-manager/change-manager';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form/form-field-controller-slimmer';
 import { ChildNodesNotifyObserverSlimmer, } from '../../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaChange, VegaUserChange } from '../../../helpers/event-manager/event-id/vega-event-id';
@@ -93,6 +93,14 @@ export class VegaCheckboxGroup {
      * @vegaVersion 2.90.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Provides a supplementary prompt message that
      *    assists users in selecting the appropriate
@@ -389,6 +397,30 @@ export class VegaCheckboxGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "hint": {
       "type": "string",
       "mutable": false,

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

@@ -12,7 +12,7 @@ import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_USER_INTERACTION, CHECKBOX_VAL
 import { Observer } from '../../helpers/change-manager/observer/observer';
 import { arrayToClassString, findParent } from '../../utils/ui';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange, VegaUserChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaCheckboxShowErrorController } from './slimmers/controllers/vega-checkbox-show-error-controller';
@@ -20,6 +20,8 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
 /**
+ * Checkboxes are typically used in a Checkbox Group to select one or multiple choices from a range of options. It may also be used as a standalone element to represents a binary true or false value.
+ *
  * @vegaVersion 1.0.7
  */
 export class VegaCheckbox {
@@ -132,6 +134,14 @@ export class VegaCheckbox {
      * @vegaVersion 1.3.0
      */
     this.required = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies the validation status of the checkbox component.
      *
@@ -294,7 +304,7 @@ export class VegaCheckbox {
           this.showError && 'error',
           this.size && `size-${this.size}`,
         ]), ref: (e) => (this.inputContainerRef = e), onClick: this.onLabelClick },
-        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: this.onInputKeyDown }),
+        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, name: this.name, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: this.onInputKeyDown }),
         h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1, "aria-hidden": "true" }, this.renderIconDom()),
         h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) },
           this.renderLabelDom(),
@@ -526,6 +536,30 @@ export class VegaCheckbox {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,

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

@@ -19,6 +19,8 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaChipRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-chip/runtime-metrics-payload-definition';
 /**
+ * Chips are small compact elements which are designed to represent attributes, actions, or inputs made by a user.
+ *
  * @vegaVersion 1.11.0
  */
 export class VegaChip {

package/dist/collection/components/vega-code-block/slimmers/controllers/code-highlight-parser.abstract.js

@@ -15,6 +15,7 @@ export class CodeHighlightParser extends VegaSlimmer {
    * Split the HTML tag to avoid the content render to a html element.
    *
    * @example <div> -> ['<', 'div', '>']
+   * @example a&nbsp;b -> ['a', '&', 'nbsp;', 'b']
    * @param {string} text - The code content.
    * @returns {string[]} - The code content array.
    */
@@ -22,21 +23,7 @@ export class CodeHighlightParser extends VegaSlimmer {
     if (!this.hasSpecialCharacter(text) || text.length < 2) {
       return [text];
     }
-    else {
-      const result = [];
-      const textArray = text.split('');
-      let nextIndex = 0;
-      textArray.forEach((item) => {
-        if (item === '<' || item === '>' || item === '/') {
-          result.push(item);
-          nextIndex = result.length;
-        }
-        else {
-          result[nextIndex] = result[nextIndex] ? result[nextIndex] + item : item;
-        }
-      });
-      return result;
-    }
+    return text.split(/([<>&/])/).filter(Boolean);
   }
   /**
    * Check the current language is a preset language and the language is not plain text.
@@ -76,10 +63,10 @@ export class CodeHighlightParser extends VegaSlimmer {
    * Check the text has special character.
    *
    * @param {string} text - The test text.
-   * @returns {boolean} - Return true is the text has <, > , /.
+   * @returns {boolean} - Return true is the text has <, > , /, &.
    */
   hasSpecialCharacter(text) {
-    return /[<|>|\\/]/.test(text);
+    return /[<>&/]/.test(text);
   }
 }
 __decorate([

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

@@ -9,7 +9,7 @@ import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-
 import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { arrayToClassString, getHexFromShorthand, hexToRGB } from '../../utils/ui';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -18,6 +18,8 @@ import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaColorPickerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-color-picker/runtime-metrics-payload-definition';
 /**
+ * The color picker component is used to select a color from a predefined palette.
+ *
  * @vegaVersion 1.13.0
  */
 export class VegaColorPicker {
@@ -76,6 +78,14 @@ export class VegaColorPicker {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies the label or title for the color picker.
      *
@@ -333,6 +343,30 @@ export class VegaColorPicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "label": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/vega-color-swatch-picker.js

@@ -9,7 +9,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
 import { RequiredFieldRule } from '../../../helpers/validator/rules/required-field-rule';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
-import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form/form-field-controller-slimmer';
 import { ColorSwatchPickerRenderer } from './slimmers/renderers/color-swatch-picker-renderer';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
@@ -82,6 +82,14 @@ export class VegaColorSwatchPicker {
      * @vegaVersion 2.84.0
      */
     this.required = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies the validation status of the color swatch picker.
      *
@@ -275,6 +283,30 @@ export class VegaColorSwatchPicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,

package/dist/collection/components/vega-combo-box/vega-combo-box.js

@@ -9,7 +9,7 @@ import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-
 import { sanitizeVegaComponent } from '../../utils/component';
 import { isArrayOfType, isDropdownSourceItemType } from '../../types/type-guard';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange, VegaCreate, VegaDropdownSelectAllClick, VegaSearch, } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -25,6 +25,8 @@ import { VegaComboBoxItemsSlotController } from './slimmers/controllers/vega-com
 import { VegaComboBoxSourceController } from './slimmers/controllers/vega-combo-box-source-controller';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 /**
+ * The Combo Box is an input field with the ability to select multiple predefined values.
+ *
  * @vegaVersion 1.11.0
  */
 export class VegaComboBox {
@@ -91,6 +93,14 @@ export class VegaComboBox {
      * @vegaVersion 2.88.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies the source data used to populate the
      *    dropdown menu associated with the combo box.
@@ -294,6 +304,30 @@ export class VegaComboBox {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "source": {
       "type": "unknown",
       "mutable": true,

package/dist/collection/components/vega-counter-badge/vega-counter-badge.js

@@ -9,6 +9,8 @@ import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * A Counter Badge visually indicates unread alerts or a count of items, and draws the user's attention through a small emblem or count overlay.
+ *
  * @vegaVersion 1.15.0
  */
 export class VegaCounterBadge {

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

@@ -10,7 +10,7 @@ import { DateRequiredRule } from '../../helpers/validator/rules/date-required-ru
 import { DateRangeRule } from '../../helpers/validator/rules/date-range-rule';
 import { MinAndMaxDateRule } from '../../helpers/validator/rules/min-and-max-date-rule';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { VegaDatePickerRenderer } from './slimmers/renderers/vega-date-picker-renderer';
 import { VegaDatePickerSingleInputRenderer } from './slimmers/renderers/vega-date-picker-single-input-renderer';
 import { VegaDatePickerRangeInputRenderer } from './slimmers/renderers/vega-date-picker-range-input-renderer';
@@ -29,6 +29,8 @@ import { DeviceType } from '../../types/ui.type';
 import { getDeviceType } from '../../utils/ui';
 import { VegaDatePickerCalendarOpenStateController } from './slimmers/controllers/vega-date-picker-calendar-open-state-controller';
 /**
+ * The Date Picker allows users to select a date or date range, either by entering a text value or through a calendar interface.
+ *
  * @vegaVersion 1.3.0
  */
 export class VegaDatePicker {
@@ -120,6 +122,14 @@ export class VegaDatePicker {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Specifies the validation status of the date picker component.
      *
@@ -424,6 +434,30 @@ export class VegaDatePicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,