@globalpayments/vega 2.95.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,
@@ -698,7 +730,7 @@ export class VegaComboBox {
             "name": "vegaVersion",
             "text": "2.95.0"
           }],
-        "text": "An event emitter notifying that the Select All option in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+        "text": "An event emitter only fired when the Select All checkbox in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
       },
       "complexType": {
         "original": "boolean",
@@ -719,7 +751,7 @@ export class VegaComboBox {
             "name": "vegaVersion",
             "text": "2.95.0"
           }],
-        "text": "An event emitter notifying that the Select All option in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+        "text": "An event emitter only fired when the Select All checkbox in the dropdown has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
       },
       "complexType": {
         "original": "boolean",

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-dropdown/vega-dropdown.js

@@ -234,10 +234,33 @@ export class VegaDropdown {
      */
     this.isLazyLoading = false;
     /**
-     * Determines whether the dropdown position is calculated relative to the screen.
+     * Determines whether the dropdown uses viewport-based positioning (`position: fixed`) or container-based positioning (`position: absolute`).
      *
-     * @VegaWarning - It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
-     * 			    - Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
+     * **Technical Implementation:**
+     *
+     * - When `false` (default): The dropdown content box renders with `position: absolute` and its coordinates are calculated relative to the nearest positioned ancestor. Combined with `positionRelativeTo`, you can specify which ancestor to measure from, which ensures the menu scrolls together with that ancestor.
+     *
+     * - When `true`: The dropdown content box renders with `position: fixed` and its coordinates are calculated from the viewport. The menu is visually anchored to the trigger element via JavaScript and moves with it on scroll, even though it is not part of the document flow. `positionRelativeTo` has no effect in this mode.
+     *
+     * When to set `isScreenPosition` to `true`:
+     *
+     * - Dropdowns that need to break out of container constraints (non-Shadow-DOM only):
+     *    When you want the dropdown to appear outside its container's boundaries (e.g., to avoid being clipped by a parent's
+     *    `overflow: hidden` or small dimensions), viewport-based positioning allows it to render freely.
+     *    This only works for regular (non-Shadow-DOM) containers. Shadow DOM boundaries cannot be escaped with `position: fixed`.
+     *
+     * - Dropdowns in fixed or sticky positioned containers:
+     *    When the dropdown trigger is inside a fixed or sticky positioned container, viewport-based positioning ensures correct alignment.
+     *
+     * When to keep `isScreenPosition` as `false` (default):
+     *
+     * - Simple layouts where the dropdown and its trigger are not inside scrollable containers
+     * - When you want the dropdown to scroll naturally with its container (using `position: absolute`)
+     * - When you need `positionRelativeTo` to control which ancestor the dropdown is positioned relative to
+     * - When `matchContainerHeight` is needed (this property is overridden when `isScreenPosition` is `true`)
+     *
+     * @VegaWarning - Setting this to `true` override the `positionRelativeTo` and `matchContainerHeight` properties, rendering them ineffective.
+     * 			    - Currently, when set to `true`, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
      * @vegaVersion 2.36.0
      */
     this.isScreenPosition = false;
@@ -982,12 +1005,12 @@ export class VegaDropdown {
       "docs": {
         "tags": [{
             "name": "VegaWarning",
-            "text": "- It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.\n- Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
+            "text": "- Setting this to `true` override the `positionRelativeTo` and `matchContainerHeight` properties, rendering them ineffective.\n- Currently, when set to `true`, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
           }, {
             "name": "vegaVersion",
             "text": "2.36.0"
           }],
-        "text": "Determines whether the dropdown position is calculated relative to the screen."
+        "text": "Determines whether the dropdown uses viewport-based positioning (`position: fixed`) or container-based positioning (`position: absolute`).\n\n**Technical Implementation:**\n\n- When `false` (default): The dropdown content box renders with `position: absolute` and its coordinates are calculated relative to the nearest positioned ancestor. Combined with `positionRelativeTo`, you can specify which ancestor to measure from, which ensures the menu scrolls together with that ancestor.\n\n- When `true`: The dropdown content box renders with `position: fixed` and its coordinates are calculated from the viewport. The menu is visually anchored to the trigger element via JavaScript and moves with it on scroll, even though it is not part of the document flow. `positionRelativeTo` has no effect in this mode.\n\nWhen to set `isScreenPosition` to `true`:\n\n- Dropdowns that need to break out of container constraints (non-Shadow-DOM only):\n   When you want the dropdown to appear outside its container's boundaries (e.g., to avoid being clipped by a parent's\n   `overflow: hidden` or small dimensions), viewport-based positioning allows it to render freely.\n   This only works for regular (non-Shadow-DOM) containers. Shadow DOM boundaries cannot be escaped with `position: fixed`.\n\n- Dropdowns in fixed or sticky positioned containers:\n   When the dropdown trigger is inside a fixed or sticky positioned container, viewport-based positioning ensures correct alignment.\n\nWhen to keep `isScreenPosition` as `false` (default):\n\n- Simple layouts where the dropdown and its trigger are not inside scrollable containers\n- When you want the dropdown to scroll naturally with its container (using `position: absolute`)\n- When you need `positionRelativeTo` to control which ancestor the dropdown is positioned relative to\n- When `matchContainerHeight` is needed (this property is overridden when `isScreenPosition` is `true`)"
       },
       "attribute": "is-screen-position",
       "reflect": false,
@@ -1155,7 +1178,7 @@ export class VegaDropdown {
             "name": "vegaVersion",
             "text": "2.93.0"
           }],
-        "text": "An event emitter notifying that the Select All option has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+        "text": "An event emitter only fired when the Select All checkbox has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
       },
       "complexType": {
         "original": "boolean",
@@ -1176,7 +1199,7 @@ export class VegaDropdown {
             "name": "vegaVersion",
             "text": "2.93.0"
           }],
-        "text": "An event emitter notifying that the Select All option has been clicked.\n\nThe event's `detail` property is `true` when all items become selected,\nand `false` when Select All is cleared."
+        "text": "An event emitter only fired when the Select All checkbox has been clicked.\n\nThe event's `detail` property is `true` when the Select All checkbox is clicked to select all items,\n   and `false` when the Select All checkbox is clicked to clear all selected items."
       },
       "complexType": {
         "original": "boolean",

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,