lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/input/input.js

@@ -1,6 +1,4 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
-import labelInputFileBodyText from '@salesforce/label/LightningInputFile.bodyText';
-import labelInputFileButtonLabel from '@salesforce/label/LightningInputFile.buttonLabel';
 import labelMessageToggleActive from '@salesforce/label/LightningControl.activeCapitalized';
 import labelMessageToggleInactive from '@salesforce/label/LightningControl.inactiveCapitalized';
 import labelRequired from '@salesforce/label/LightningControl.required';
@@ -13,20 +11,17 @@ import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helpt
 import userTimeZone from '@salesforce/i18n/timeZone';
 import formFactor from '@salesforce/client/formFactor';
 
-import { api, LightningElement, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     classListMutation,
-    getRealDOMId,
     reflectAttribute,
-    isSafari,
     isNativeComponent,
-    isNotUndefinedOrNull,
     isUndefinedOrNull,
     normalizeAriaAttribute,
     normalizeBoolean,
-    normalizeKeyValue,
     normalizeString,
     synchronizeAttrs,
     decorateInputForDragon,
@@ -34,7 +29,6 @@ import {
     computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import AriaObserver from 'lightning/ariaObserver';
-import { normalizeInput } from './normalize';
 import {
     normalizeDate,
     normalizeDateTimeToUTC,
@@ -47,26 +41,14 @@ import {
     InteractingState,
     normalizeVariant,
     VARIANT,
-} from 'lightning/inputUtils';
-import {
-    calculateFractionDigitsFromStep,
-    formatNumber,
-    fromIsoDecimal,
-    hasValidNumberShortcut,
-    hasValidNumberSymbol,
-    increaseNumberByStep,
+    normalizeInput,
     isValidNumber,
-    isValidNumberCharacter,
-    stringifyNumber,
-    toIsoDecimal,
-} from './numberUtil';
-import { isValidEmail, isValidMultipleEmails } from './emailUtil';
-import { InputSelectionCache } from './selection';
+    isValidEmail,
+    isValidMultipleEmails,
+} from 'lightning/inputUtils';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
-    inputFileBodyText: labelInputFileBodyText,
-    inputFileButtonLabel: labelInputFileButtonLabel,
     messageToggleActive: labelMessageToggleActive,
     messageToggleInactive: labelMessageToggleInactive,
     numberIncrementCounter: labelNumberIncrementCounter,
@@ -106,30 +88,12 @@ const VALID_NUMBER_FORMATTERS = [
     'percent-fixed',
     'currency',
 ];
-const DEFAULT_COLOR = '#000000';
 const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
-/**
- * Returns an aria string with all the non-autolinked values removed
- * @param {String} values space sperated list of ids
- * @returns {String} The aria values with the non-auto linked ones removed
- */
-function filterNonAutoLink(values) {
-    const ariaValues = values && values.split(/\s+/);
-    return (
-        ariaValues &&
-        ariaValues
-            .filter((value) => {
-                return !!value.match(/^auto-link/);
-            })
-            .join(' ')
-    );
-}
-
 /**
  * Represents interactive controls that accept user input depending on the type attribute.
  */
-export default class LightningInput extends LightningElement {
+export default class LightningInput extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     /**
@@ -318,12 +282,12 @@ export default class LightningInput extends LightningElement {
     @track _ariaInvalid;
     @track _autocomplete;
 
+    _shouldShowHelpMessage = true;
+    _helpMessageChanged = false;
     _formatter = DEFAULT_FORMATTER;
     _showRawNumber = false;
     _initialValueSet = false;
-    _files = null;
     _rendered;
-    _selectionCache;
 
     constructor() {
         super();
@@ -331,15 +295,11 @@ export default class LightningInput extends LightningElement {
 
         // Native Shadow Root will return [native code].
         // Our synthetic method will return the function source.
-        this.isNative = isNativeComponent(this);
-
-        // The selection cache allows us an input to remember what text was selected
-        // in cases where we change the text on blur or in browsers (Safari) that
-        // don't track it properly.
-        this._selectionCache = new InputSelectionCache();
+        this._isNativeShadow = isNativeComponent(this);
     }
 
     connectedCallback() {
+        super.connectedCallback();
         if (!this.ariaObserver) {
             this.ariaObserver = new AriaObserver(this);
         }
@@ -351,15 +311,11 @@ export default class LightningInput extends LightningElement {
 
         this.classList.add('slds-form-element');
 
-        this._updateClassList();
-        this._validateRequiredAttributes();
+        this.updateClassListForVariant();
+        this.validateRequiredAttributes();
 
         this.interactingState = new InteractingState();
         this.interactingState.onleave(() => this.reportValidity());
-
-        if (this.isTypeNumber) {
-            this._updateNumberValue(this._value);
-        }
     }
 
     disconnectedCallback() {
@@ -373,22 +329,25 @@ export default class LightningInput extends LightningElement {
     }
 
     renderedCallback() {
-        // For W-7962838: In Safari, focus doesn't scroll input into view.
-        // Attach the event listener used to cache the selected text when selection changes.
-        if (isSafari) {
-            this._inputElement.addEventListener(
-                'select',
-                this.handleSelect.bind(this)
-            );
+        if (this.isConnected) {
+            this.ariaObserver.sync(this.isNativeShadow);
+
+            // If the help message changed, the help message element needs to be (un)related
+            if (this._helpMessageChanged) {
+                this.connectAriaDescribedBy();
+                this._helpMessageChanged = false;
+            }
+
+            if (!this._rendered) {
+                this.connectAriaDescribedBy();
+                this.connectAriaLabelledBy();
+                this.connectAriaControls();
+            }
         }
 
         if (!this._initialValueSet && this._inputElement) {
             this._rendered = true;
 
-            if (this.isTypeNumber) {
-                this._numberRawValue = fromIsoDecimal(this._value);
-            }
-
             this._setInputValue(this._displayedValue);
             if (this.isTypeCheckable) {
                 this._inputElement.checked = this._checked;
@@ -396,9 +355,6 @@ export default class LightningInput extends LightningElement {
             this._initialValueSet = true;
         }
 
-        if (this.isConnected) {
-            this.ariaObserver.sync();
-        }
         this._synchronizeA11y();
     }
 
@@ -407,17 +363,7 @@ export default class LightningInput extends LightningElement {
      * @type {number}
      *
      */
-    @api
-    get formatFractionDigits() {
-        return this._formatFractionDigits;
-    }
-
-    set formatFractionDigits(value) {
-        this._formatFractionDigits = value;
-        if (this._rendered && this.isTypeNumber) {
-            this._setInputValue(this._displayedValue);
-        }
-    }
+    @api formatFractionDigits;
 
     /**
      * A space-separated list of element IDs whose presence or content is controlled by the
@@ -541,6 +487,9 @@ export default class LightningInput extends LightningElement {
 
     set ariaControls(references) {
         this._ariaControls = references;
+        if (this._rendered) {
+            this.connectAriaControls();
+        }
         reflectAttribute(this, ARIA_CONTROLS, references);
     }
 
@@ -550,21 +499,17 @@ export default class LightningInput extends LightningElement {
      */
     @api
     get ariaLabelledBy() {
-        // native version returns the auto linked value
-        if (this.isNative && this._rendered) {
-            const ariaValues = this._inputElement.getAttribute(ARIA_LABELLEDBY);
-            return filterNonAutoLink(ariaValues);
-        }
-        return this._ariaLabelledBy;
+        // native shadow version returns the mirrored values
+        return this._rendered && this.isNativeShadow
+            ? this._inputElement.getAttribute(ARIA_LABELLEDBY)
+            : this._ariaLabelledBy;
     }
 
     set ariaLabelledBy(references) {
         this._ariaLabelledBy = references;
-        this.ariaObserver.connect({
-            targetSelector: 'input',
-            attribute: ARIA_LABELLEDBY,
-            ids: references,
-        });
+        if (this._rendered) {
+            this.connectAriaLabelledBy();
+        }
     }
 
     /**
@@ -573,26 +518,66 @@ export default class LightningInput extends LightningElement {
      */
     @api
     get ariaDescribedBy() {
-        if (this.isNative) {
-            // in native case return the linked value
-            const ariaValues =
-                this._inputElement.getAttribute(ARIA_DESCRIBEDBY);
-            return filterNonAutoLink(ariaValues);
-        }
-        return this._ariaDescribedBy;
+        // native shadow version returns the mirrored values
+        return this._rendered && this.isNativeShadow
+            ? this._inputElement.getAttribute(ARIA_DESCRIBEDBY)
+            : this._ariaDescribedBy;
     }
 
     set ariaDescribedBy(references) {
         this._ariaDescribedBy = references;
-        this.ariaObserver.connect({
-            targetSelector: 'input',
-            attribute: ARIA_DESCRIBEDBY,
-            ids: references,
-        });
+        if (this._rendered) {
+            this.connectAriaDescribedBy();
+        }
+    }
+
+    get isNativeShadow() {
+        return this._primitiveComponent?.isNativeShadow || this._isNativeShadow;
     }
 
     /**
-     * A boolean value that controls whether accessibility tools read empty required textboxes as invalid. Default value is false.
+     * Connect aria-labelledby to the ariaObserver.
+     */
+    connectAriaLabelledBy() {
+        if (this._primitiveComponent) {
+            this.ariaObserver.connect({
+                attribute: ARIA_LABELLEDBY,
+                targetNode: this._inputElement,
+                relatedNodes: this._primitiveComponent.ariaLabelledByElements,
+                relatedNodeIds: this._ariaLabelledBy,
+            });
+        }
+    }
+
+    /**
+     * Connect aria-describedby to the ariaObserver.
+     */
+    connectAriaDescribedBy() {
+        if (this._primitiveComponent) {
+            this.ariaObserver.connect({
+                attribute: ARIA_DESCRIBEDBY,
+                targetNode: this._inputElement,
+                relatedNodes: this._primitiveComponent.ariaDescribedByElements,
+                relatedNodeIds: this._ariaDescribedBy,
+            });
+        }
+    }
+
+    /**
+     * Connect aria-controls to the ariaObserver.
+     */
+    connectAriaControls() {
+        if (this._primitiveComponent) {
+            this.ariaObserver.connect({
+                attribute: ARIA_CONTROLS,
+                targetNode: this._inputElement,
+                relatedNodeIds: this._ariaControls,
+            });
+        }
+    }
+
+    /**
+     * A Boolean value for aria-invalid.
      * @type {boolean}
      */
     @api
@@ -622,15 +607,22 @@ export default class LightningInput extends LightningElement {
      */
     @api
     get formatter() {
+        // Formatters are applicable to the number type
+        // If the primitive exists, retrieve value from primitive-input-simple
+        if (this.isTypeNumber && this._primitiveComponent) {
+            return this._primitiveComponent.formatter;
+        }
         return this._formatter;
     }
 
     set formatter(value) {
-        this._formatter = normalizeString(value, {
-            fallbackValue: DEFAULT_FORMATTER,
-            validValues: VALID_NUMBER_FORMATTERS,
-        });
-        this._updateInputDisplayValueIfTypeNumber();
+        this._formatter = value;
+
+        // If the primitive exists, retrieve value from primitive-input-simple
+        // The primitive will normalize the value
+        if (this.isTypeNumber && this._primitiveComponent) {
+            this._primitiveComponent.formatter = this._formatter;
+        }
     }
 
     /**
@@ -659,10 +651,10 @@ export default class LightningInput extends LightningElement {
             // from text to 'checkbox', so we need to set the initial value again
             this._initialValueSet = false;
 
-            if (this.isTypeNumber) {
-                // If the type has changed, we need to re-parse the value as a number
-                this._updateNumberValue(this._value);
-            }
+            // Reconnect aria attributes as the parentSelector is based on the input type
+            this.connectAriaLabelledBy();
+            this.connectAriaDescribedBy();
+            this.connectAriaControls();
         }
 
         this._updateProxyInputAttributes([
@@ -814,7 +806,6 @@ export default class LightningInput extends LightningElement {
         }
 
         this._updateProxyInputAttributes('step');
-        this._updateInputDisplayValueIfTypeNumber();
     }
 
     /**
@@ -836,7 +827,11 @@ export default class LightningInput extends LightningElement {
         this._checked = normalizeBoolean(value);
 
         if (this._rendered) {
-            this._inputElement.checked = this._checked;
+            if (this.isTypeCheckbox) {
+                this._primitiveComponent.checked = this._checked;
+            } else {
+                this._inputElement.checked = this._checked;
+            }
         }
 
         // Update proxy input should be set after _inputElement is updated.
@@ -867,29 +862,29 @@ export default class LightningInput extends LightningElement {
      */
     @api
     get value() {
+        if (this.isTypeSimple) {
+            const subcomponent = this._primitiveComponent;
+            if (subcomponent) {
+                return subcomponent.value;
+            }
+        }
         return this._value;
     }
 
     set value(value) {
-        const previousValue = this._value;
-
-        this._value = normalizeInput(value);
-
-        if (this._rendered && this.isTypeNumber) {
-            this._value = stringifyNumber(value);
-            // the extra check for whether the value has changed is done for cases
-            // when the same value is set back in a change handler, this is to avoid
-            // the raw number from changing formatting under the user
-            // (eg. if the user typed 1,000 we want to preserve that formatting as the user
-            // types the value)
-            if (this.validity.badInput || this._value !== previousValue) {
-                this._updateNumberValue(value);
-            }
-        }
-
-        this._updateProxyInputAttributes('value');
         // Setting value of a type='file' isn't allowed
         if (!this.isTypeFile) {
+            this._value = normalizeInput(value);
+
+            if (this.isTypeSimple) {
+                const subcomponent = this._primitiveComponent;
+                if (subcomponent) {
+                    subcomponent.value = this._value;
+                }
+            }
+
+            this._updateProxyInputAttributes('value');
+
             // Again, due to the interop layer we need to check whether the value being set
             // is different, otherwise we're duplicating the sets on the input, which result
             // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
@@ -920,7 +915,7 @@ export default class LightningInput extends LightningElement {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
-        this._updateClassList();
+        this.updateClassListForVariant();
         reflectAttribute(this, 'variant', this._variant);
     }
 
@@ -1024,7 +1019,7 @@ export default class LightningInput extends LightningElement {
     @api
     get files() {
         if (this.isTypeFile) {
-            return this._files;
+            return this._primitiveComponent.files;
         }
         return null;
     }
@@ -1039,6 +1034,14 @@ export default class LightningInput extends LightningElement {
         return this._constraint.validity;
     }
 
+    /**
+     * Not moving selectionStart and selectionEnd to the inner component. Looks like
+     * one of the expected error/fail cases is that the component throws an error in the console,
+     * if the user attempts to set it on a non-supported type (like range, file, checkbox).
+     * That can only happen from `lightning-input`. To avoid duplicating code, it's best to keep
+     * this here.
+     */
+
     /**
      * Specifies the index of the first character to select in the input element.
      * This attribute is supported only for text type.
@@ -1104,11 +1107,22 @@ export default class LightningInput extends LightningElement {
     @api
     reportValidity() {
         return this._constraint.reportValidity((message) => {
+            if (this.isTypeDesktopTime) {
+                reflectAttribute(
+                    this._inputElement.comboboxComponent,
+                    'invalid',
+                    !this.checkValidity()
+                );
+            }
             if (this._rendered && !this.isNativeInput) {
                 this._inputElement.showHelpMessage(message);
-            } else {
-                this._helpMessage = message;
+                return;
             }
+            if (this._rendered && this.isTypePrimitiveInput) {
+                this._shouldShowHelpMessage = false;
+                this._helpMessageChanged = true;
+            }
+            this._helpMessage = message;
         });
     }
 
@@ -1141,211 +1155,51 @@ export default class LightningInput extends LightningElement {
         }
     }
 
-    get isAutoCompleteSupported() {
-        return (
-            this.isTypeTelephone ||
-            this.isTypeUrl ||
-            this.isTypeSearch ||
-            this.isTypeEmail ||
-            this.isTypeText
-        );
-    }
-
-    get isNativeInput() {
-        return !(
-            this.isTypeDesktopDate ||
-            this.isTypeDesktopDateTime ||
-            this.isTypeDesktopTime
-        );
-    }
-
-    get computedAriaLabel() {
-        const ariaValues = [];
-
-        // merge all date & time arias on mobile since it's displayed as a single field
-        if (this.isTypeMobileDateTime) {
-            ariaValues.push(this.dateAriaLabel);
-            ariaValues.push(this.timeAriaLabel);
-        }
-        if (this.ariaLabel) {
-            ariaValues.push(this.ariaLabel);
-        }
-
-        return normalizeAriaAttribute(ariaValues);
-    }
-
-    get computedAriaLabelledBy() {
-        const ariaValues = [];
-
-        if (this.isTypeFile) {
-            ariaValues.push(this.computedUniqueFileElementLabelledById);
-        }
-        // merge all date & time arias on mobile since it's displayed as a single field
-        if (this.isTypeMobileDateTime) {
-            ariaValues.push(this.dateAriaLabelledBy);
-            ariaValues.push(this.timeAriaLabelledBy);
+    get primitiveSelector() {
+        if (this.isTypeSimple) {
+            return 'lightning-primitive-input-simple';
         }
-        if (this.ariaLabelledBy) {
-            ariaValues.push(this.ariaLabelledBy);
+        if (this.isTypeCheckboxButton) {
+            return 'lightning-primitive-input-checkbox-button';
         }
-
-        return normalizeAriaAttribute(ariaValues);
-    }
-
-    get computedAriaDescribedBy() {
-        const ariaValues = [];
-
-        if (this._helpMessage) {
-            ariaValues.push(this.computedUniqueHelpElementId);
-        }
-        // The toggle type is described by a secondary element
         if (this.isTypeToggle) {
-            ariaValues.push(this.computedUniqueToggleElementDescribedById);
-        }
-        // merge all date & time arias on mobile since it's displayed as a single field
-        if (this.isTypeMobileDateTime) {
-            ariaValues.push(this.dateAriaDescribedBy);
-            ariaValues.push(this.timeAriaDescribedBy);
-        }
-        if (this.ariaDescribedBy) {
-            ariaValues.push(this.ariaDescribedBy);
+            return 'lightning-primitive-input-toggle';
         }
-
-        return normalizeAriaAttribute(ariaValues);
-    }
-
-    get computedAriaInvalid() {
-        // W-8796658: aria-invalid should always follow the visual indication of errors
-        return computeAriaInvalid(
-            this._helpMessage,
-            this.value,
-            this.ariaInvalid
-        );
-    }
-
-    get isLabelHidden() {
-        return this.variant === VARIANT.LABEL_HIDDEN;
-    }
-
-    get isLabelStacked() {
-        return this.variant === VARIANT.LABEL_STACKED;
-    }
-
-    get accesskey() {
-        return this._accesskey;
-    }
-
-    get colorInputElementValue() {
-        return this.validity.valid && this.value ? this.value : DEFAULT_COLOR;
-    }
-
-    get colorInputStyle() {
-        return `background: ${this.value || '#5679C0'};`;
-    }
-
-    get computedUniqueHelpElementId() {
-        return getRealDOMId(this.template.querySelector('[data-help-message]'));
-    }
-
-    get computedUniqueToggleElementDescribedById() {
-        if (this.isTypeToggle) {
-            const toggle = this.template.querySelector(
-                '[data-toggle-description]'
-            );
-            return getRealDOMId(toggle);
+        if (this.isTypeColor) {
+            return 'lightning-primitive-input-color';
         }
-        return null;
-    }
-
-    get computedUniqueFormLabelId() {
-        if (this.isTypeFile) {
-            const formLabel = this.template.querySelector('[data-form-label]');
-            return getRealDOMId(formLabel);
+        if (this.isTypeCheckbox) {
+            return 'lightning-primitive-input-checkbox';
         }
-        return null;
-    }
-
-    get computedUniqueFileSelectorLabelId() {
-        if (this.isTypeFile) {
-            const fileBodyLabel = this.template.querySelector(
-                '[data-file-selector-label]'
-            );
-            return getRealDOMId(fileBodyLabel);
+        if (this.isTypeRadio) {
+            return 'lightning-primitive-input-radio';
         }
-        return null;
-    }
-
-    get computedUniqueFileElementLabelledById() {
         if (this.isTypeFile) {
-            const labelIds = [
-                this.computedUniqueFormLabelId,
-                this.computedUniqueFileSelectorLabelId,
-            ];
-            return labelIds.join(' ');
+            return 'lightning-primitive-input-file';
         }
         return null;
     }
 
-    get computedFormElementClass() {
-        const classes = classSet('slds-form-element__control slds-grow');
-
-        if (this.isTypeSearch) {
-            classes.add('slds-input-has-icon slds-input-has-icon_left-right');
-        }
-
-        return classes.toString();
-    }
-
-    get i18n() {
-        return i18n;
-    }
-
-    get computedLabelClass() {
-        const classnames = classSet('slds-form-element__label');
-        if (this.isTypeCheckable || this.isTypeFile) {
-            // do nothing
-        } else if (this.isTypeToggle) {
-            classnames.add('slds-m-bottom_none');
-        } else {
-            classnames.add('slds-no-flex');
-        }
-        return classnames
-            .add({ 'slds-assistive-text': this.isLabelHidden })
-            .toString();
-    }
-
-    get computedNumberClass() {
-        return classSet('slds-input')
-            .add({ 'slds-is-disabled': this.disabled })
-            .toString();
-    }
-
-    get computedColorLabelClass() {
-        return classSet(
-            'slds-form-element__label slds-color-picker__summary-label'
-        )
-            .add({ 'slds-assistive-text': this.isLabelHidden })
-            .toString();
-    }
-
-    get computedCheckboxClass() {
-        return classSet('slds-checkbox')
-            .add({ 'slds-checkbox_standalone': !this.isStandardVariant })
-            .toString();
+    get shouldShowHelpMessage() {
+        return this._shouldShowHelpMessage && this._helpMessage;
     }
 
-    get computedHelpMessageClass() {
-        return classSet('slds-form-element__help')
-            .add({ 'slds-m-left_none': this.variant !== VARIANT.LABEL_INLINE })
-            .toString();
-    }
+    /************************* INPUT TYPE GETTERS *************************/
 
-    get normalizedMax() {
-        return this._normalizeDateTimeString(this.max);
+    get isTypePrimitiveInput() {
+        return (
+            this.isTypeSimple ||
+            this.isTypeCheckboxButton ||
+            this.isTypeCheckbox ||
+            this.isTypeToggle ||
+            this.isTypeColor ||
+            this.isTypeRadio ||
+            this.isTypeFile
+        );
     }
 
-    get normalizedMin() {
-        return this._normalizeDateTimeString(this.min);
+    get isTypeNumber() {
+        return this.type === 'number';
     }
 
     get isTypeTelephone() {
@@ -1356,10 +1210,6 @@ export default class LightningInput extends LightningElement {
         return this.type === 'url';
     }
 
-    get isTypeNumber() {
-        return this.type === 'number';
-    }
-
     get isTypeEmail() {
         // To test against native change this to type="emails"
         return this.type === 'email';
@@ -1374,10 +1224,6 @@ export default class LightningInput extends LightningElement {
         );
     }
 
-    get isTypeSearch() {
-        return this.type === 'search';
-    }
-
     get isTypeToggle() {
         return this.type === 'toggle';
     }
@@ -1456,6 +1302,85 @@ export default class LightningInput extends LightningElement {
         );
     }
 
+    get isNativeInput() {
+        return !(
+            this.isTypeDesktopDate ||
+            this.isTypeDesktopDateTime ||
+            this.isTypeDesktopTime
+        );
+    }
+
+    get _primitiveComponent() {
+        return this.template.querySelector(this.primitiveSelector);
+    }
+    /************************* GETTERS *************************/
+
+    /*** Accessibility ***/
+
+    get computedAriaLabel() {
+        const ariaValues = [];
+
+        // merge all date & time arias on mobile since it's displayed as a single field
+        if (this.isTypeMobileDateTime) {
+            ariaValues.push(this.dateAriaLabel);
+            ariaValues.push(this.timeAriaLabel);
+        }
+        if (this.ariaLabel) {
+            ariaValues.push(this.ariaLabel);
+        }
+
+        return normalizeAriaAttribute(ariaValues);
+    }
+
+    get computedAriaInvalid() {
+        // W-8796658: aria-invalid should always follow the visual indication of errors
+        return computeAriaInvalid(
+            this._helpMessage,
+            this.value,
+            this.ariaInvalid
+        );
+    }
+
+    /****** ******/
+
+    get isLabelHidden() {
+        return this.variant === VARIANT.LABEL_HIDDEN;
+    }
+
+    get isLabelStacked() {
+        return this.variant === VARIANT.LABEL_STACKED;
+    }
+
+    get accesskey() {
+        return this._accesskey;
+    }
+
+    get i18n() {
+        return i18n;
+    }
+
+    get computedLabelClass() {
+        const classnames = classSet('slds-form-element__label');
+        if (this.isTypeCheckable || this.isTypeFile) {
+            // do nothing
+        } else if (this.isTypeToggle) {
+            classnames.add('slds-m-bottom_none');
+        } else {
+            classnames.add('slds-no-flex');
+        }
+        return classnames
+            .add({ 'slds-assistive-text': this.isLabelHidden })
+            .toString();
+    }
+
+    get normalizedMax() {
+        return this._normalizeDateTimeString(this.max);
+    }
+
+    get normalizedMin() {
+        return this._normalizeDateTimeString(this.min);
+    }
+
     get _inputElement() {
         if (!this._cachedInputElement || this._inputElementRefreshNeeded) {
             this._inputDragonDecorated = false;
@@ -1472,6 +1397,8 @@ export default class LightningInput extends LightningElement {
                 inputElement = this.template.querySelector(
                     'lightning-timepicker'
                 );
+            } else if (this.isTypePrimitiveInput) {
+                inputElement = this._primitiveComponent.inputElement;
             } else {
                 inputElement = this.template.querySelector('input');
                 this._inputDragonDecorated = true;
@@ -1510,34 +1437,8 @@ export default class LightningInput extends LightningElement {
 
     get _displayedValue() {
         if (this.isTypeNumber) {
-            // When only a symbol is entered by the user, set the display value as the user's input.
-            // This will not affect the value dispatched by input via the change event, as it only dispatches a valid decimal number.
-            // Due to the above, in integrations like input-field, the user's initial input of a symbol
-            // like a minus sign will not be overwritten by an empty string value.
-            // See description in PR for more details: https://github.com/salesforce-experience-platform-emu/lightning-components/pull/3843
-            if (
-                this._inputElement.value.length === 1 &&
-                hasValidNumberSymbol(this._inputElement.value)
-            ) {
-                return this._inputElement.value;
-            }
-
-            // If the number is not valid (bad input, step mismatch, etc.) show the raw number as
-            // well, otherwise the formatted value ends up being 'NaN' which makes it hard to
-            // see mistakes
-            if (this._showRawNumber || !this.validity.valid) {
-                if (
-                    hasValidNumberShortcut(this._numberRawValue) &&
-                    isValidNumber(this._numberRawValue)
-                ) {
-                    this._numberRawValue = fromIsoDecimal(this._value);
-                }
-                return this._numberRawValue;
-            }
-            return formatNumber(
-                this._value,
-                this._buildFormatNumberOptions(this.formatter)
-            );
+            const subcomponent = this._primitiveComponent;
+            return subcomponent.getDisplayedValue();
         }
 
         if (
@@ -1551,18 +1452,6 @@ export default class LightningInput extends LightningElement {
         return this._value;
     }
 
-    /**
-     * Gets the value for the actual 'type' attribute on the input element.
-     */
-    get _internalType() {
-        // Maps number->text to support shorthand input strings like '1k'.
-        if (this.isTypeNumber || this.isTypeEmail) {
-            return 'text';
-        }
-
-        return this._type;
-    }
-
     get isStandardVariant() {
         return (
             this.variant === VARIANT.STANDARD ||
@@ -1570,34 +1459,14 @@ export default class LightningInput extends LightningElement {
         );
     }
 
-    get _showClearButton() {
-        return (
-            this.isTypeSearch &&
-            isNotUndefinedOrNull(this._value) &&
-            this._value !== ''
-        );
-    }
-
     get _ignoreRequired() {
         // If uploading via the drop zone or via the input directly, we should
         // ignore the required flag as a file has been uploaded
         return (
-            this.isTypeFile &&
-            this._required &&
-            (this.fileUploadedViaDroppableZone ||
-                (this._files && this._files.length > 0))
+            this.isTypeFile && this._required && this.files && this.files.length
         );
     }
 
-    get _inputMode() {
-        if (this.isTypeNumber) {
-            return 'decimal';
-        } else if (this.isTypeEmail) {
-            return 'email';
-        }
-        return null;
-    }
-
     get _constraint() {
         if (!this._constraintApi) {
             const overrides = {
@@ -1727,35 +1596,18 @@ export default class LightningInput extends LightningElement {
         return formatLabel(i18n.helpTextAlternativeText, this.label);
     }
 
-    handleFileClick() {
-        this._setInputValue(null);
-        this._updateValueAndValidityAttribute(null);
-    }
-
-    handleDropFiles(event) {
-        // drop doesn't trigger focus nor blur, so set state to interacting
-        // and auto leave when there's no more action
-        this.interactingState.interacting();
-
-        this.fileUploadedViaDroppableZone = true;
-        this._files = event.dataTransfer && event.dataTransfer.files;
-
-        this._updateProxyInputAttributes('required');
-
-        this._dispatchChangeEventWithDetail({
-            files: this._files,
-        });
+    get isAutoCompleteSupported() {
+        return (
+            this.isTypeTelephone ||
+            this.isTypeUrl ||
+            this.isTypeSearch ||
+            this.isTypeEmail ||
+            this.isTypeText
+        );
     }
 
-    /**
-     * Handle text selection.
-     * Dynamically bound to the select event by `renderedCallback`.
-     * This allows us to cache text selection in Safari, which doesn't preserve selection.
-     */
-    handleSelect() {
-        if (isSafari) {
-            this._selectionCache.preserve(this._inputElement);
-        }
+    get templateRootNode() {
+        return this.template.host.getRootNode();
     }
 
     handleFocus() {
@@ -1765,24 +1617,11 @@ export default class LightningInput extends LightningElement {
             this._isColorPickerPanelOpen = false;
         }
 
-        // Focusing a number input causes the value displayed to be modified.
-        // Changing the value resets selection, so we save and restore selection.
-        if (this._rendered && this.isTypeNumber) {
-            this._showRawNumber = true;
-            this._selectionCache.preserve(this._inputElement);
-            this._inputElement.value = this._displayedValue;
-            this._selectionCache.restore(this._inputElement);
-        }
-
         this.dispatchEvent(new CustomEvent('focus'));
     }
 
     handleBlur(event) {
         this.interactingState.leave();
-        if (this._rendered && this.isTypeNumber) {
-            this._showRawNumber = false;
-            this._setInputValue(this._displayedValue);
-        }
 
         if (
             !event.relatedTarget ||
@@ -1800,87 +1639,34 @@ export default class LightningInput extends LightningElement {
 
     handleChange(event) {
         event.stopPropagation();
-
         this._dispatchCommitEvent();
-
-        if (this.isTypeSimple && this.value === event.target.value) {
-            return;
-        }
-
         this._dispatchChangeEvent();
     }
 
-    handleInput(event) {
-        event.stopPropagation();
-
-        if (this.isTypeNumber) {
-            // for invalid numbers the value might stay the same as the user
-            // changed the invalid input, so we need to update the raw value
-            this._numberRawValue = this._inputElement.value;
-        }
-
-        if (this.isTypeSimple && this.value === event.target.value) {
-            return;
-        }
-
-        this._dispatchChangeEvent();
+    handleCommit() {
+        this._dispatchCommitEvent();
     }
 
-    handleKeyDown(event) {
-        if (this.isTypeNumber) {
-            // we're letting "Shift" through to prevent capital letters, other special symbols for type="number"
-            const hasMetaOrCtrlModifier = event.metaKey || event.ctrlKey;
-            // need to check that event.key is valid for "autofill" cases
-            if (!hasMetaOrCtrlModifier && !this.readOnly && event.key) {
-                const key = normalizeKeyValue(event.key);
-
-                if (key.length === 1 && !isValidNumberCharacter(key)) {
-                    event.preventDefault();
-                }
-
-                if (key === 'ArrowUp') {
-                    event.preventDefault();
-                    this._numberStepUpAndDispatchEvents(1);
-                } else if (key === 'ArrowDown') {
-                    event.preventDefault();
-                    this._numberStepUpAndDispatchEvents(-1);
-                }
-            }
-        }
-    }
+    handlePrimitiveInputFileChange() {
+        const detail = {
+            files: this.files,
+            value: this._inputElement.value,
+        };
+        this._updateProxyInputAttributes('required');
+        this._updateValueAndValidityAttribute(detail.value);
 
-    handleColorChange(event) {
-        const selectedColor = event.detail.color;
-        if (selectedColor !== this._inputElement.value) {
-            this._setInputValue(selectedColor);
-            this._updateValueAndValidityAttribute(selectedColor);
-            this.focus();
-            this._dispatchChangeEventWithDetail({ value: selectedColor });
-            this._dispatchCommitEvent();
-        }
-        this.template
-            .querySelector('lightning-primitive-colorpicker-button')
-            .focus();
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                composed: true,
+                bubbles: true,
+                detail,
+            })
+        );
     }
 
-    _clearAndSetFocusOnInput(event) {
-        // TODO: Discuss this, it seems the wrong thing to do.
-        // button is removed from template, but
-        // event still is propagated, For example, captured by panel,
-        // then cause panel think is clicked outside.
-        event.stopPropagation();
-
+    handlePrimitiveInputSimpleChange() {
         this.interactingState.enter();
-        this._setInputValue('');
-        this._updateValueAndValidityAttribute('');
-
-        this._inputElement.focus();
-
-        this._dispatchChangeEventWithDetail({
-            value: this._value,
-        });
-
-        this._dispatchCommitEvent();
+        this._updateProxyInputAttributes('value');
     }
 
     _dispatchCommitEvent() {
@@ -1917,7 +1703,11 @@ export default class LightningInput extends LightningElement {
         }
     }
 
-    _validateRequiredAttributes() {
+    /**
+     * Label is a required attribute.
+     * Throw error if an invalid value is passed to the label attribute
+     */
+    validateRequiredAttributes() {
         const { label } = this;
         assert(
             typeof label === 'string' && label.length,
@@ -1939,6 +1729,8 @@ export default class LightningInput extends LightningElement {
     }
 
     _dispatchChangeEvent() {
+        // TODO: investigate removing this in a future update
+        // possibly phase out the interactingState entirely
         this.interactingState.enter();
 
         const detail = {};
@@ -1946,20 +1738,10 @@ export default class LightningInput extends LightningElement {
         if (this.isTypeCheckable) {
             this._updateCheckedAndValidityAttribute(this._inputElement.checked);
             detail.checked = this._checked;
-        } else if (this.isTypeFile) {
-            this._files = this._inputElement.files;
-
-            // LWC does not proxy dom elements any more. So there is no need to call lwc.unwrap here anymore
-            detail.files = this._files;
-
-            this._updateProxyInputAttributes('required');
         }
 
         if (!this.isTypeCheckable) {
-            if (this.isTypeNumber) {
-                this._numberRawValue = this._inputElement.value;
-                detail.value = toIsoDecimal(this._inputElement.value);
-            } else {
+            if (!this.isTypeNumber) {
                 detail.value = this._inputElement.value;
             }
 
@@ -2013,36 +1795,9 @@ export default class LightningInput extends LightningElement {
     }
 
     /**
-     * Increases (if increment is positive, decreases otherwise) the number value of the input by the increment
-     * multiple of the given 'step'. Additionally dispatches the 'change' and 'commit' events.
-     *
-     * @param {Number} increment A multiple of the step to increase, when step is 'any',
-     * the step is assumed to be 1.
-     * @private
+     * Updates the class list on the host element based on the variant
      */
-    _numberStepUpAndDispatchEvents(increment) {
-        if (this._readOnly || this._disabled) {
-            return;
-        }
-        this._value = increaseNumberByStep({
-            value: this._value,
-            step: this.step,
-            increment,
-            fractionDigits: this._buildFormatNumberOptions(this.formatter)
-                .minimumFractionDigits,
-        });
-
-        // Raw value is the value the user entered (we preserve a user's input),
-        // since we're generating a new value we're overriding it
-        this._numberRawValue = fromIsoDecimal(this._value);
-
-        this._setInputValue(this._displayedValue);
-
-        this._dispatchChangeEvent();
-        this._dispatchCommitEvent();
-    }
-
-    _updateClassList() {
+    updateClassListForVariant() {
         classListMutation(this.classList, {
             'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
             'slds-form-element_horizontal':
@@ -2050,39 +1805,6 @@ export default class LightningInput extends LightningElement {
         });
     }
 
-    _updateNumberValue(value) {
-        const newValue = stringifyNumber(value);
-        this._value = newValue;
-        this._numberRawValue = fromIsoDecimal(newValue);
-    }
-
-    _buildFormatNumberOptions(formatter) {
-        const options = {
-            style: formatter,
-        };
-        // Use the min/max fraction digits from the formatFractionDigits provided by the user if available.
-        // Otherwise, use the number of digits calculated from step
-        if (this._formatFractionDigits !== undefined) {
-            options.minimumFractionDigits = this._formatFractionDigits;
-            options.maximumFractionDigits = this._formatFractionDigits;
-        } else {
-            let digitsFromStep = calculateFractionDigitsFromStep(this._step);
-            // if formatting percentages, when calculating digits from step, take into
-            // consideration that the formatted number is effectively multiplied by 10^2, ie. 0.1 is 10%
-            // so we need to subtract 2 digits;
-            if (formatter === 'percent' && typeof digitsFromStep === 'number') {
-                digitsFromStep -= 2;
-                if (digitsFromStep < 0) {
-                    digitsFromStep = 0;
-                }
-            }
-
-            options.minimumFractionDigits = digitsFromStep;
-            options.maximumFractionDigits = digitsFromStep;
-        }
-        return options;
-    }
-
     _normalizeDateTimeString(value) {
         let result = value;
         if (this.isTypeDate) {
@@ -2095,19 +1817,11 @@ export default class LightningInput extends LightningElement {
         return result;
     }
 
-    _updateInputA11y(elem) {
-        synchronizeAttrs(elem, {
-            [ARIA_LABELLEDBY]: this.computedAriaLabelledBy,
-            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
-            [ARIA_LABEL]: this.computedAriaLabel,
-        });
-    }
-
     _updateDateOrTimePickerA11y(elem) {
         synchronizeAttrs(elem, {
-            ariaLabelledByElement: this.ariaLabelledBy,
-            ariaDescribedByElements: this.ariaDescribedBy,
-            ariaControlsElement: this.ariaControls,
+            ariaLabelledByElement: this._ariaLabelledBy,
+            ariaDescribedByElements: this._ariaDescribedBy,
+            ariaControlsElement: this._ariaControls,
             [ARIA_LABEL]: this.computedAriaLabel,
         });
     }
@@ -2130,7 +1844,6 @@ export default class LightningInput extends LightningElement {
     _synchronizeA11y() {
         // each of these templates are mutually exclusive and are selected
         // depending on the [type] of input.
-        const input = this.template.querySelector('input');
         const datepicker = this.template.querySelector('lightning-datepicker');
         const timepicker = this.template.querySelector('lightning-timepicker');
         const datetimepicker = this.template.querySelector(
@@ -2138,9 +1851,7 @@ export default class LightningInput extends LightningElement {
         );
         // determine which template type is present,
         // and update a11y props accordingly
-        if (input) {
-            this._updateInputA11y(input);
-        } else if (datepicker) {
+        if (datepicker) {
             this._updateDateOrTimePickerA11y(datepicker);
         } else if (timepicker) {
             this._updateDateOrTimePickerA11y(timepicker);