@globalpayments/vega 2.96.0 → 2.97.0

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';
@@ -91,6 +91,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 +302,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-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';
@@ -120,6 +120,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 +432,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,

package/dist/collection/components/vega-file-uploader/vega-file-uploader.js

@@ -15,7 +15,7 @@ import { VegaFileUploaderFileStatusRenderer } from './slimmers/renderers/vega-fi
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange, VegaPreview, VegaRemove, VegaRetry, VegaSelectFileChange, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaFileUploaderValueController } from './slimmers/controllers/vega-file-uploader-value-controller';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { FileUploaderRequiredRule } from '../../helpers/validator/rules/file-uploader-required-rule';
 import { DropFileAcceptFilterSlimmer } from '../../helpers/slimmers/drop-file-accept-filter-slimmer';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
@@ -113,6 +113,14 @@ export class VegaFileUploader {
      * @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 = '';
     /**
      * Defines custom validation rules for the File Uploader field.
      *
@@ -342,6 +350,30 @@ export class VegaFileUploader {
       "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": "''"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/vega-form/slimmers/controllers/vega-form-field-controller.js

@@ -10,11 +10,11 @@ import { isElementVisible, isParent } from '../../../../utils/ui';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { FORM_ELEMENT_VALIDATE, FORM_ELEMENT_VALUE_CHANGE, FORM_FIELD_ELEMENT_DISCONNECTED, FORM_FIELD_PENDING_VALID_CHANGE, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
-import { FormFieldControllerSlimmer } from '../../../../helpers/slimmers/form-field-controller-slimmer';
 import { ChildNodesNotifyObserverSlimmer, } from '../../../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { isObjectArrayLike } from '../../../../utils/array';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalValid } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { getFormFieldKey, isValidFormField } from '../../../../helpers/slimmers/form/utils/form-field-key';
 /**
  * The form field controller for vega form to manage the form field states.
  */
@@ -47,13 +47,12 @@ export class VegaFormFieldController extends VegaSlimmer {
       if (payload.host !== this.host) {
         const target = payload.host;
         const isElementValid = payload.detail;
-        if (FormFieldControllerSlimmer.isValidFormField(target) &&
-          this.shouldVisitElement(target, false, false)) {
+        if (isValidFormField(target) && this.shouldVisitElement(target, false, false)) {
           if (isElementValid) {
             this.invalidFieldPathMap.delete(target);
           }
           else {
-            this.invalidFieldPathMap.set(target, target.dataset['vegaForm']);
+            this.invalidFieldPathMap.set(target, getFormFieldKey(target));
           }
         }
       }
@@ -166,13 +165,14 @@ export class VegaFormFieldController extends VegaSlimmer {
     this.isTouched = isTouched;
   }
   /**
-   * It returns the value of data-vega-form that the given element is associated with.
+   * It returns the form field key that the given element is associated with.
+   * Returns the value of data-vega-form if present, otherwise returns the value of the name attribute.
    *
    * @param {HTMLElement} element - The element that is being validated.
-   * @returns {string} The name of the field.
+   * @returns {string} The form field key.
    */
   getFormFieldName(element) {
-    return element.dataset['vegaForm'];
+    return getFormFieldKey(element);
   }
   /**
    * Check if the given element is part of the current form.
@@ -197,7 +197,7 @@ export class VegaFormFieldController extends VegaSlimmer {
   async navigateVegaFormChildren(visitor, option, startElementNode = this.host) {
     const promiseQueue = [];
     Array.from(startElementNode.children).forEach((child) => {
-      if (FormFieldControllerSlimmer.isValidFormField(child)) {
+      if (isValidFormField(child)) {
         if (this.shouldVisitElement(child, option === null || option === void 0 ? void 0 : option.skipDisabled, option === null || option === void 0 ? void 0 : option.skipInvisible)) {
           promiseQueue.push(visitor(child, child.tagName === 'VEGA-FORM'));
         }
@@ -241,7 +241,7 @@ export class VegaFormFieldController extends VegaSlimmer {
       this.pendingValidFieldPathMap.delete(payload.host);
     }
     else {
-      this.pendingValidFieldPathMap.set(payload.host, payload.host.dataset['vegaForm']);
+      this.pendingValidFieldPathMap.set(payload.host, getFormFieldKey(payload.host));
     }
   }
   /**

package/dist/collection/components/vega-form/slimmers/controllers/vega-form-field-validation-state-controller.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { FIELD_ERROR_MESSAGE_CHANGE, FORM_ELEMENT_VALIDATE, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
-import { FormFieldControllerSlimmer } from '../../../../helpers/slimmers/form-field-controller-slimmer';
+import { isValidFormField } from '../../../../helpers/slimmers/form/utils/form-field-key';
 /**
  * The field error controller for vega form to set validation errors on form fields.
  */
@@ -19,8 +19,8 @@ export class VegaFormFieldValidationStateController extends VegaSlimmer {
    */
   setValidationStates(states) {
     if (states.length === 0) {
-      Array.from(this.host.querySelectorAll('[data-vega-form]'))
-        .filter((child) => FormFieldControllerSlimmer.isValidFormField(child))
+      Array.from(this.host.querySelectorAll('[data-vega-form], [name]'))
+        .filter((child) => isValidFormField(child))
         .forEach((fieldHost) => {
         this.updateFieldValidationState(fieldHost, { isValid: true });
       });
@@ -46,8 +46,8 @@ export class VegaFormFieldValidationStateController extends VegaSlimmer {
     const fields = fieldName.split('.');
     let currentHost = this.host;
     for (const fieldName of fields) {
-      const element = currentHost.querySelector(`[data-vega-form="${fieldName}"]`);
-      if (FormFieldControllerSlimmer.isValidFormField(element)) {
+      const element = currentHost.querySelector(`[data-vega-form="${fieldName}"], [name="${fieldName}"]`);
+      if (isValidFormField(element)) {
         currentHost = element;
       }
       else {

package/dist/collection/components/vega-form/slimmers/renderers/native-form-renderer.js

@@ -14,7 +14,7 @@ export class NativeFormRenderer extends VegaSlimmer {
     return this.nativeFormRef;
   }
   render() {
-    return (h("form", { action: this.action, method: this.method, ref: (ref) => {
+    return (h("form", { action: this.action, method: this.method, name: this.name, ref: (ref) => {
         if (ref) {
           this.nativeFormRef = ref;
         }
@@ -28,3 +28,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], NativeFormRenderer.prototype, "action", void 0);
+__decorate([
+  MapToComponentField()
+], NativeFormRenderer.prototype, "name", void 0);

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

@@ -110,6 +110,14 @@ export class VegaForm {
      * @vegaVersion 2.64.0
      */
     this.method = 'get';
+    /**
+     * 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 = '';
   }
   watchIsValid() {
     this.validateEventEmitter.emit(this.isValid);
@@ -314,6 +322,30 @@ export class VegaForm {
       "attribute": "method",
       "reflect": false,
       "defaultValue": "'get'"
+    },
+    "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": "''"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/vega-image-uploader/vega-image-uploader.js

@@ -19,7 +19,7 @@ import { VegaImageUploaderUploadingContentRenderer } from './slimmers/renderers/
 import { VegaImageUploaderDefaultContentRenderer } from './slimmers/renderers/vega-image-uploader-default-content-renderer';
 import { VegaImageUploaderRemoveController } from './slimmers/controllers/vega-image-uploader-remove-controller';
 import { DropFileAcceptFilterSlimmer } from '../../helpers/slimmers/drop-file-accept-filter-slimmer';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { VegaImageUploaderActionsVisibilityController } from './slimmers/controllers/vega-image-uploader-actions-visibility-controller';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaCancel, VegaChange, VegaClick, VegaRemove, } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -125,6 +125,14 @@ export class VegaImageUploader {
      * @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.
      *
@@ -406,6 +414,30 @@ export class VegaImageUploader {
       "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-input/vega-input.js

@@ -14,7 +14,7 @@ import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-
 import { sanitizeVegaComponent } from '../../utils/component';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/component-load-required';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlaceholder, } 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 { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaNativeInputChange, VegaPaste, VegaSuggestionItemClick, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInputCopyPasteController } from './slimmers/controllers/vega-input-copy-paste-controller';
@@ -201,7 +201,8 @@ export class VegaInput {
      */
     this.type = 'text';
     /**
-     * Sets the `name` attribute on the underlying native `<input>` element.
+     * 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.
      *
      * This is used to identify the field when submitting form data and is also
      * used by the browser's autocomplete feature to recall previously entered values.
@@ -716,10 +717,10 @@ export class VegaInput {
             "name": "vegaVersion",
             "text": "1.0.5"
           }],
-        "text": "Sets the `name` attribute on the underlying native `<input>` element.\n\nThis is used to identify the field when submitting form data and is also\nused by the browser's autocomplete feature to recall previously entered values."
+        "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.\n\nThis is used to identify the field when submitting form data and is also\nused by the browser's autocomplete feature to recall previously entered values."
       },
       "attribute": "name",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "autocomplete": {

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

@@ -10,7 +10,7 @@ import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-
 import { ValidCreditCardNumberRule } from '../../helpers/validator/rules/valid-credit-card-number-rule';
 import { sanitizeVegaComponent } from '../../utils/component';
 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 { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -70,6 +70,14 @@ export class VegaInputCreditCard {
      * @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 = '';
     /**
      * Determines whether the credit card input field is disabled.
      *
@@ -149,7 +157,7 @@ export class VegaInputCreditCard {
     this.renderInputContainer = () => {
       var _a;
       const iconName = ((_a = this.getCreditCardType(this.value)) === null || _a === void 0 ? void 0 : _a.iconName) || 'regular-credit-card';
-      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, optional: this.optional, showClearIcon: false, ref: (ref) => {
+      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, optional: this.optional, name: this.name, showClearIcon: false, ref: (ref) => {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
             this.handleVegaChange(input);
@@ -271,6 +279,30 @@ export class VegaInputCreditCard {
       "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": "''"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-input-numeric/vega-input-numeric.js

@@ -14,7 +14,7 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaInputNumericValueController } from './slimmers/controllers/vega-input-numeric-value-controller';
 import { VegaInputNumericKeyboardController } from './slimmers/controllers/vega-input-numeric-keyboard-controller';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { MinNumberRule } from '../../helpers/validator/rules/min-number-rule';
@@ -158,6 +158,14 @@ export class VegaInputNumeric {
      * @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 = '';
     /**
      * An array of custom validation rules applied to the numeric input in
      * addition to the built-in rules (`RequiredFieldRule`, `MinNumberRule`,
@@ -610,6 +618,30 @@ export class VegaInputNumeric {
       "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": "''"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/vega-input-passcode/vega-input-passcode.js

@@ -14,7 +14,7 @@ import { VegaChange, VegaComplete } from '../../helpers/event-manager/event-id/v
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaInputPasscodeKeyboardController } from './slimmers/controllers/vega-input-passcode-keyboard-controller';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { ImmutableArray } from '../../helpers/immutable/immutable-array';
 /**
@@ -137,6 +137,14 @@ export class VegaInputPasscode {
      * @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 = '';
     /**
      * An array of custom validation rules applied to the passcode input in
      * addition to the built-in `RequiredFieldRule`. Each rule must implement
@@ -418,6 +426,30 @@ export class VegaInputPasscode {
       "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": "''"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -14,7 +14,7 @@ import { getCountryCallingCode } from '../../polyfill/libphonenumber';
 import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { ValidPhoneNumberRule } from '../../helpers/validator/rules/valid-phone-number-rule';
 import { CountrySelectController } from './slimmers/controllers/country-select-controller';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -109,6 +109,14 @@ export class VegaInputPhoneNumber {
      * @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 whether the phone number input field is disabled. When `true`,
      * both the country selector and the phone number text field become
@@ -343,6 +351,30 @@ export class VegaInputPhoneNumber {
       "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": "''"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,