@globalpayments/vega 2.77.0 → 2.78.0

package/dist/cjs/vega-input-passcode.cjs.entry.js

@@ -6,41 +6,41 @@ const index = require('./index-58ea899e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
 const component = require('./component-1e352960.js');
-const vegaEventId = require('./vega-event-id-ee01d8dd.js');
+const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-062cdcb8.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-0cc0c1c7.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-cc6d2919.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-102f37c7.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-c84121c8.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-b44f0dc9.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-dd0bb8b6.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-73f5849e.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 require('./observer-f49483e8.js');
 require('./ui-234ea151.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-f7ecf3d4.js');
+require('./internal-vega-event-manager-cc0f511c.js');
 require('./try-get-document-c0ebd39a.js');
-require('./keyboard-manager-055e9f67.js');
-require('./type-guard-407ba0b8.js');
+require('./keyboard-manager-7de7ecfd.js');
+require('./type-guard-a0d9ff1f.js');
 require('./breakpoints-ebde4837.js');
-require('./ui-32e69595.js');
+require('./ui-024696c0.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-053eb0f1.js');
+require('./internal-translation-controller-24df468f.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-9129ef52.js');
 require('./index-f054eb5d.js');
 require('./string-39438062.js');
 require('./misc-3d30df91.js');
-require('./vega-internal-event-id-f2465f1b.js');
+require('./vega-internal-event-id-e0aeac45.js');
 require('./index-592b4052.js');
-require('./page-resize-observer-slimmer-7f065ee1.js');
-require('./breakpoints-751d433a.js');
+require('./page-resize-observer-slimmer-e050cd26.js');
+require('./breakpoints-a8ff22f0.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-1dfbc4c3.js');
+require('./sub-state-observer-slimmer-e692d849.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -134,7 +134,7 @@ class VegaInputPasscodeRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.inputPasscodeContainerRef;
   }
   render() {
-    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index$1) => (index.h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index$1, tabIndex: index$1 !== 0 ? -1 : null, showClearIcon: false, disabled: this.disabled, value: this.vegaInputValues.get(index$1) || '', autocomplete: index$1 === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
+    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index$1) => (index.h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index$1, "data-tabindex": index$1 !== 0 ? -1 : 0, showClearIcon: false, disabled: this.disabled, "data-aria-hidden": String(!this.isInputAccessibleForScreenReader(index$1)), "data-aria-label": `Passcode input ${index$1 + 1} of ${this.length}`, value: this.vegaInputValues.get(index$1) || '', autocomplete: index$1 === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
         this.vegaInputRefs[index$1] = ref;
         domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaFocus, this.handleVegaFocus(index$1));
         domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaBlur, this.handleVegaBlur(index$1));
@@ -146,12 +146,40 @@ class VegaInputPasscodeRenderer extends globalSlimmerRegistry.VegaSlimmer {
       } })));
     return (index.h(index.Host, null,
       this.label && this.renderLabel(),
-      index.h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
+      index.h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", role: "group", "aria-label": this.label || 'One-time password input', ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
       this.hint && index.h("vega-hint", null, this.hint)));
   }
   renderLabel() {
     return (index.h("vega-field-label", { onClick: this.focusInputPasscode, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
   }
+  /**
+   * Find the index of the first empty input box for rendering purposes. If all boxes are filled, return -1.
+   *
+   * @param {number} inputLength - the input length of the passcode, which is also the number of input boxes to render
+   * @returns {number} - the index of the first empty input box, or -1 if all boxes are filled
+   */
+  getFirstEmptyIndexForRender(inputLength) {
+    for (let index = 0; index < inputLength; index++) {
+      const currentValue = this.vegaInputValues.get(index);
+      if (!currentValue) {
+        return index;
+      }
+    }
+    return -1;
+  }
+  /**
+   * Determine whether the input box at the given index should be accessible to screen readers. Only the boxes up to and including the first empty box should be accessible, as screen readers will read out all accessible boxes and we don't want them to read out empty boxes that come before filled boxes.
+   *
+   * @param {number} index - the index of the input box to check
+   * @returns {boolean} - true if the input box should be accessible to screen readers, false otherwise
+   */
+  isInputAccessibleForScreenReader(index) {
+    const firstEmptyIndexForRender = this.getFirstEmptyIndexForRender(this.length);
+    if (firstEmptyIndexForRender === -1) {
+      return true;
+    }
+    return index <= firstEmptyIndexForRender;
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-passcode-on-input-value-input}
@@ -347,6 +375,7 @@ class VegaInputPasscodeKeyboardController extends keyboardManagerSlimmer.Keyboar
       {
         keyCode: ['ArrowLeft', 'ArrowRight'],
         activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
+        eventName: 'keydown',
         callback: 
         /* istanbul ignore next */
         /* eslint-disable jsdoc/require-jsdoc */
@@ -393,6 +422,7 @@ class VegaInputPasscodeKeyboardController extends keyboardManagerSlimmer.Keyboar
    * @param {KeyboardEvent} event - the keyboard event of ArrowLeft and ArrowRight
    */
   controlDirectionByKeyboard(event) {
+    event.preventDefault();
     const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
     const vegaInputRefs = this.inputPasscodeRenderer.getVegaInputRefs();
     if (event.key === 'ArrowLeft' && currentIndex > 0) {
@@ -599,79 +629,122 @@ const VegaInputPasscode = class {
       this.vegaInputValues = newArr;
     });
     /**
-     * Specifies the label or title for the input passcode.
-     *
-     * It provides descriptive text that helps identify the
-     *    purpose or content expected in the input passcode.
+     * Specifies the visible label text rendered above the passcode input.
+     * The label identifies the purpose of the field (e.g., "Enter verification
+     * code") and serves as the accessible name for screen readers.
      *
+     * @default ''
      * @vegaVersion 2.66.0
      */
     this.label = '';
     /**
-     * Determines whether the input passcode is disabled.
+     * Specifies whether the passcode input is disabled. When `true`, all
+     * individual input boxes become non-interactive — the user cannot type,
+     * paste, or focus any box.
      *
+     * @default false
      * @vegaVersion 2.66.0
      */
     this.disabled = false;
     /**
-     * Defines the size of the input passcode,
-     *    specifying its width or length.
+     * Controls the visual size of the passcode input boxes.
+     *
+     * - `'medium'` — Standard height, suitable for most form layouts.
+     * - `'small'` — Compact height, useful for dense UIs.
      *
+     * @default 'medium'
      * @vegaVersion 2.66.0
      */
     this.size = 'medium';
     /**
-     * Provides a supplementary prompt message that assists users in
-     *    understanding the expected value for the input passcode.
+     * Supplementary helper message displayed below the passcode input that
+     * assists users in understanding the expected input. For example,
+     * `'Enter the 4-digit code sent to your email'`.
      *
+     * @default ''
      * @vegaVersion 2.66.0
      */
     this.hint = '';
     /**
-     * Specifies the number of input boxes to display.
+     * Specifies the number of individual input boxes rendered for the passcode.
+     * Each box accepts a single character. Common values are `4` for a PIN and
+     * `6` for a two-factor authentication code.
      *
+     * @default 4
      * @vegaVersion 2.66.0
      */
     this.length = 4;
     /**
-     * Specifies the input type of the input passcode
-     *    Numeric type: only 0-9 are accepted
-     *    Text type: any non-space character is accepted
-     *    Spaces are rejected for all types
+     * Specifies the type of characters accepted by each passcode box.
+     *
+     * - `'numeric'` — Only digits `0`–`9` are accepted.
+     * - `'text'` — Any non-space character is accepted.
+     *
+     * Spaces are always rejected regardless of the selected type.
      *
+     * @default 'numeric'
      * @vegaVersion 2.66.0
      */
     this.inputType = 'numeric';
     /**
-     * Specifies the value of the input passcode.
+     * The current value of the passcode input, represented as a concatenated
+     * string of all box values (e.g., `'1234'` for a 4-digit passcode).
      *
+     * This property is mutable and reflected to the host element attribute.
+     * It updates as the user types into the boxes and can be set externally
+     * to pre-populate or reset the field.
+     *
+     * @default ''
      * @vegaVersion 2.66.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = '';
     /**
-     * Determines whether the input passcode field is required.
+     * Determines whether the passcode field must have a value before the form
+     * can be submitted. When `true`, the built-in `RequiredFieldRule` is
+     * applied during validation and a required indicator is shown on the label.
      *
+     * @default false
      * @vegaVersion 2.66.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
     /**
-     * Defines custom validation rules for the input passcode.
+     * An array of custom validation rules applied to the passcode input in
+     * addition to the built-in `RequiredFieldRule`. Each rule must implement
+     * the `FormFieldValidationRule` interface.
+     *
+     * Rules are evaluated in order when `autoValidation` is enabled or when
+     * validation is triggered programmatically.
      *
+     * @default []
      * @vegaVersion 2.66.0
      */
     this.validationRules = [];
     /**
-     * Determines whether the input passcode should undergo automatic validation
-     *    during the user's input.
+     * Determines whether the passcode input should be validated automatically
+     * as the user types. When `true`, validation rules (including `required`
+     * and custom `validationRules`) are evaluated and the `isValid` property
+     * is updated accordingly.
+     *
+     * Set to `false` to handle validation manually.
      *
+     * @default true
      * @vegaVersion 2.66.0
      */
     this.autoValidation = true;
     /**
-     * Specifies the validation status of the input passcode.
+     * Reflects the current validation status of the passcode input.
+     *
+     * - `true` — the field value passes all validation rules.
+     * - `false` — one or more validation rules have failed.
+     * - `null` — the field has not been validated yet (initial state).
+     *
+     * This property is mutable: it is updated automatically when
+     * `autoValidation` is enabled, but can also be set manually to override
+     * the validation state.
      *
+     * @default null
      * @vegaVersion 2.66.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */

package/dist/cjs/vega-input-phone-number.cjs.entry.js

@@ -7,20 +7,20 @@ const component = require('./component-1e352960.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
-const vegaEventId = require('./vega-event-id-ee01d8dd.js');
+const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 const internalIconManager = require('./internal-icon-manager-c989189a.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
-const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
+const vegaInternalEventId = require('./vega-internal-event-id-e0aeac45.js');
 const featureFlagController = require('./feature-flag-controller-9129ef52.js');
-const stringFormatStrategy_abstract = require('./string-format-strategy.abstract-f2575647.js');
-const typeGuard = require('./type-guard-407ba0b8.js');
+const stringFormatStrategy_abstract = require('./string-format-strategy.abstract-814d66c4.js');
+const typeGuard = require('./type-guard-a0d9ff1f.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-102f37c7.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-73f5849e.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-062cdcb8.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-c84121c8.js');
 const inputPhoneNumberRequiredRule = require('./input-phone-number-required-rule-2668fdf1.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-cc6d2919.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-dd0bb8b6.js');
 require('./observer-f49483e8.js');
 require('./ui-234ea151.js');
 require('./icon-manager-c12c6ea9.js');
@@ -29,20 +29,20 @@ require('./dynamic-slimmer-f31fdfd7.js');
 require('./misc-3d30df91.js');
 require('./index-f054eb5d.js');
 require('./breakpoints-ebde4837.js');
-require('./ui-32e69595.js');
+require('./ui-024696c0.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-053eb0f1.js');
+require('./internal-translation-controller-24df468f.js');
 require('./string-39438062.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
-require('./page-resize-observer-slimmer-7f065ee1.js');
-require('./breakpoints-751d433a.js');
+require('./page-resize-observer-slimmer-e050cd26.js');
+require('./breakpoints-a8ff22f0.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-1dfbc4c3.js');
-require('./internal-vega-event-manager-f7ecf3d4.js');
+require('./sub-state-observer-slimmer-e692d849.js');
+require('./internal-vega-event-manager-cc0f511c.js');
 require('./vega-env-manager-23b8b23c.js');
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -5971,95 +5971,145 @@ const VegaInputPhoneNumber = class {
     });
     this.phoneNumberInputValue = '';
     /**
-     * Specifies the label or title for the phone number input field.
-     *
-     * It provides descriptive text that helps identify the
-     *    purpose or content expected in the input field.
+     * Specifies the visible label text rendered above the phone number input.
+     * The label identifies the purpose of the field and serves as the
+     * accessible name for screen readers.
      *
+     * @default ''
      * @vegaVersion 2.18.0
      */
     this.label = '';
     /**
-     * Specifies the size of the phone number input field.
+     * Controls the visual size of the phone number input field.
+     *
+     * - `'default'` — Standard height, suitable for most form layouts.
+     * - `'small'` — Compact height, useful for dense UIs.
      *
+     * @default 'default'
      * @vegaVersion 2.18.0
      */
     this.size = 'default';
     /**
-     * Determines whether the phone number input field is required.
+     * Determines whether the phone number input field must have a value before
+     * the form can be submitted. When `true`, the built-in
+     * `InputPhoneNumberRequiredRule` is applied during validation and a
+     * required indicator is shown on the label.
      *
+     * @default false
      * @vegaVersion 2.18.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
     /**
-     * Determines whether the phone number input field is disabled.
+     * Specifies whether the phone number input field is disabled. When `true`,
+     * both the country selector and the phone number text field become
+     * non-interactive — the user cannot type, select a country, or focus
+     * any part of the component.
      *
+     * @default false
      * @vegaVersion 2.18.0
      */
     this.disabled = false;
     /**
-     * Specifies the default country calling code using the two-letter uppercase country code.
+     * Specifies the currently selected country using a two-letter uppercase
+     * ISO 3166-1 alpha-2 code (e.g., `'US'`, `'GB'`, `'CN'`). The country
+     * code determines the flag icon and calling code prefix displayed in the
+     * country selector. Changing this value updates the phone number prefix
+     * accordingly.
      *
+     * @default 'US'
      * @vegaVersion 2.18.0
-     * @defaultValue US
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.countryCode = CountrySelectController.defaultCountryCode;
     /**
-     * Specifies the countries available for selection.
+     * An array of country codes available for selection in the country
+     * dropdown. Each entry must be a two-letter uppercase ISO 3166-1 alpha-2
+     * code.
      *
-     * Note: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes.
+     * By default all 245 supported codes are loaded, but providing a smaller
+     * subset improves initial render performance.
      *
+     * @default VegaCountryCode[] (all 245 codes)
      * @vegaVersion 2.18.0
-     * @defaultValue ['US', 'CN', ...]{@link VegaCountryCode}
      */
     this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
     /**
-     * Specifies whether the phone number input field can be set to an empty value.
-     * - `true`:
-     *      The value property is cleared when the input field is empty.
-     * - `false`:
-     *      The value property is `+1` when no phone number is entered.
+     * Controls whether the `value` property can be an empty string.
      *
+     * - `true` — The `value` property is cleared to `''` when the user
+     *   deletes all digits from the input field.
+     * - `false` — The `value` property always retains at least the country
+     *   calling code prefix (e.g., `'+1'` for US) even when no phone number
+     *   digits have been entered.
+     *
+     * @default false
      * @vegaVersion 2.35.0
      */
     this.emptyValueEnabled = false;
     /**
-     * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
+     * The current value of the phone number input in
+     * [E.164](https://en.wikipedia.org/wiki/E.164) format (e.g., `'+14155552671'`).
+     *
+     * This property is mutable and reflected to the host element attribute.
+     * It updates as the user types and can be set externally to pre-populate
+     * or reset the field. When `emptyValueEnabled` is `false` and no digits
+     * have been entered, the value defaults to the country calling code
+     * prefix (e.g., `'+1'` for US).
      *
-     * @VegaWarning - Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`.
-     *              - For example, if the default country code is US, the default value will be `+1`.
+     * @default '+1'
      * @vegaVersion 2.18.0
-     * @defaultValue +1
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = `+${getCountryCallingCode(this.countryCode)}`;
     /**
-     * Specifies custom validation rules for the phone number input field.
+     * An array of custom validation rules applied to the phone number input in
+     * addition to the built-in rules (`InputPhoneNumberRequiredRule`,
+     * `ValidPhoneNumberRule`). Each rule must implement the
+     * `FormFieldValidationRule` interface.
      *
+     * Rules are evaluated in order when `autoValidation` is enabled or when
+     * validation is triggered programmatically.
+     *
+     * @default []
      * @vegaVersion 2.18.0
      */
     this.validationRules = [];
     /**
-     * Indicates whether the current value in the field is considered valid
-     *    based on the defined validation rules.
+     * Reflects the current validation status of the phone number input.
+     *
+     * - `true` — the field value passes all validation rules.
+     * - `false` — one or more validation rules have failed.
+     * - `null` — the field has not been validated yet (initial state).
      *
+     * This property is mutable: it is updated automatically when
+     * `autoValidation` is enabled, but can also be set manually to override
+     * the validation state.
+     *
+     * @default null
      * @vegaVersion 2.18.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
     /**
-     * Determines whether the phone number input field should undergo automatic validation
-     *    during the user's input.
+     * Determines whether the phone number input should be validated
+     * automatically as the user interacts with it. When `true`, validation
+     * rules (including `required`, `ValidPhoneNumberRule`, and custom
+     * `validationRules`) are evaluated and the `isValid` property is updated
+     * accordingly.
+     *
+     * Set to `false` to handle validation manually.
      *
+     * @default true
      * @vegaVersion 2.18.0
      */
     this.autoValidation = true;
     /**
-     * Provides a supplementary prompt message that assists users in
-     *    understanding the expected value for the input field.
+     * Supplementary helper message displayed below the phone number input that
+     * assists users in understanding the expected value or provides additional
+     * context (e.g., `'We will send a verification code to this number'`).
      *
+     * @default ''
      * @vegaVersion 2.18.0
      */
     this.hint = '';

package/dist/cjs/vega-input-range.cjs.entry.js

@@ -6,35 +6,35 @@ const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-062cdcb8.js');
-const vegaEventId = require('./vega-event-id-ee01d8dd.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-102f37c7.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-c84121c8.js');
+const vegaEventId = require('./vega-event-id-c08ce3d3.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-73f5849e.js');
 const array = require('./array-249289f2.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const ui = require('./ui-234ea151.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-cc6d2919.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-dd0bb8b6.js');
 const inputRangeRequiredRule = require('./input-range-required-rule-5b9c2a95.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const translationSlimmer = require('./translation-slimmer-4533bd67.js');
+const translationSlimmer = require('./translation-slimmer-3fa03d81.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-f7ecf3d4.js');
+require('./internal-vega-event-manager-cc0f511c.js');
 require('./try-get-document-c0ebd39a.js');
 require('./string-39438062.js');
 require('./observer-f49483e8.js');
 require('./misc-3d30df91.js');
-require('./vega-internal-event-id-f2465f1b.js');
-require('./internal-translation-controller-053eb0f1.js');
+require('./vega-internal-event-id-e0aeac45.js');
+require('./internal-translation-controller-24df468f.js');
 require('./index-592b4052.js');
-require('./page-resize-observer-slimmer-7f065ee1.js');
-require('./breakpoints-751d433a.js');
-require('./ui-32e69595.js');
+require('./page-resize-observer-slimmer-e050cd26.js');
+require('./breakpoints-a8ff22f0.js');
+require('./ui-024696c0.js');
 require('./breakpoints-ebde4837.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./sub-state-observer-slimmer-1dfbc4c3.js');
+require('./sub-state-observer-slimmer-e692d849.js');
 require('./number-4816603d.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-9129ef52.js');
@@ -260,6 +260,7 @@ class VegaInputRangeInputRenderer extends globalSlimmerRegistry.VegaSlimmer {
       'type': 'number',
       'data-index': index,
       'placeholder': this.getPlaceholderByIndex(index),
+      'data-aria-label': this.getDataAriaLabel(index),
       'showClearIcon': false,
       'disabled': this.disabled,
       'size': this.size,
@@ -278,6 +279,17 @@ class VegaInputRangeInputRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const placeholder = this.placeholder || VegaInputRangeInputRenderer.defaultPlaceholder;
     return this.translationSlimmer.t(placeholder[index]);
   }
+  /**
+   * Get the data aria label for the input range input by the input range index
+   *
+   * @param {number} index the range index 0|1
+   * @returns {string} the data aria label for the input range input
+   */
+  // TODO: should guarantee all the a11y label is integrated with our translation api, https://gethired.atlassian.net/browse/VD-8327
+  getDataAriaLabel(index) {
+    const inputRangeLabel = this.label || 'Input range';
+    return `${inputRangeLabel} ${index === 0 ? 'start' : 'end'}`;
+  }
   /**
    * get the input value by the input range index
    *
@@ -311,6 +323,9 @@ __decorate$2([
 __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputRangeInputRenderer.prototype, "placeholder", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputRangeInputRenderer.prototype, "label", void 0);
 __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputRangeInputRenderer.prototype, "showClearIcon", void 0);