diff --git a/demo/api.html b/demo/api.html
index 6e2c3f6..c99bbe6 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -27,7 +27,6 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js"></script>
     <script type="module">
       import { initExamples } from "./api.min.js";
       initExamples();
diff --git a/demo/api.js b/demo/api.js
index 3b5b362..ac4e601 100644
--- a/demo/api.js
+++ b/demo/api.js
@@ -3,6 +3,9 @@ import { customError } from "../apiExamples/error";
 import { setReadonlyValue } from "../apiExamples/readonly";
 import { swapInputValues } from "../apiExamples/swapValue";
 import { programmaticallySetValue } from "../apiExamples/value";
+import { AuroInput } from '../src/auro-input.js';
+
+AuroInput.register();
 
 export function initExamples(initCount) {
   initCount = initCount || 0;
diff --git a/demo/api.min.js b/demo/api.min.js
index a8f2dd0..04bf93c 100644
--- a/demo/api.min.js
+++ b/demo/api.min.js
@@ -1,3 +1,15 @@
+import { html } from 'lit/static-html.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { css, LitElement } from 'lit';
+import Cleave from 'cleave.js';
+import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js';
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
+
 /**
  * Function used for the lang switch demo
  * @private
@@ -69,6 +81,1209 @@ function programmaticallySetValue() {
   });
 }
 
+const watchedItems = new Set();
+
+
+/**
+ * Function for setting the value of the lang attribute.
+ * @private
+ * @param {object} item - Individual DOM node from set of watchedItems.
+ * @param {string} lang - Current language set for the document.
+ */
+function setLang(item, lang) {
+
+  /**
+   * It is desired that if the lang is `en` to maintain `undefined` as not to
+   * add the `lang` attribute to the individual element.
+   */
+  item.lang = lang === 'en' ? undefined : lang;
+}
+
+/**
+ * Change handler for MutationObserver() callback.
+ * @private
+ * @param {MutationRecord[]} mutationList - Observed list of mutations.
+ */
+function handleChange(mutationList) {
+  const [mutation] = mutationList;
+  const lang = mutation.target.getAttribute('lang');
+  watchedItems.forEach((item) => {
+    setLang(item, lang);
+  });
+}
+
+if (typeof window !== "undefined") {
+  if (window.MutationObserver) {
+    const observer = new MutationObserver(handleChange);
+    observer.observe(document.documentElement, { attributes: true,
+      attributeFilter: ['lang'] });
+  }
+}
+
+const stringsES = {
+  'optional': 'opcional',
+  'validCard': 'Por favor, introduzca un número de tarjeta de crédito válida.',
+  'email': 'Introduzca una dirección de correo electrónico válida (nombre@dominio.com).',
+  'password': `Las contraseñas válidas deben constar de al menos 8 caracteres, incluyendo al menos una letra mayúscula, una letra minúscula y un número.`,
+  'creditcard': 'Por favor, introduzca un número de tarjeta de crédito válida.',
+  'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA',
+  'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA',
+  'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA',
+  'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD'
+};
+
+const stringsEN = {
+  'optional': 'optional',
+  'validCard': 'Please enter a valid credit card number.',
+  'email': 'Please enter a valid email address (name@domain.com).',
+  'password': 'Valid passwords must consist of at least 8 characters, including at least one uppercase letter, one lowercase letter, and one number.',
+  'creditcard': 'Please enter a valid credit card number.',
+  'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY',
+  'dateMMYY': 'Please enter a complete date in the format MM/YY',
+  'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY',
+  'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD'
+};
+
+/**
+ * Function to support the selected of a string in the set lang.
+ * @param {string} lang - Requested lang for content return.
+ * @param {string} requestedString - String requested in context.
+ * @private
+ * @returns {string} Value of string request.
+ */
+function i18n(lang, requestedString) {
+  if (lang === 'es') {
+    return stringsES[requestedString];
+  }
+
+  return stringsEN[requestedString];
+}
+
+/**
+ * @private
+ * @param {object} element - Pass in the scope of the element in use.
+ */
+function notifyOnLangChange(element) {
+  if (!element.lang) {
+    setLang(element, document.documentElement.lang);
+  }
+  watchedItems.add(element);
+}
+
+/**
+ * @private
+ * @param {object} element - Pass in the scope of the element in use.
+ */
+function stopNotifyingOnLangChange(element) {
+  watchedItems.delete(element);
+}
+
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.clearBtn{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{height:calc(var(--ds-size-300, 1.5rem));width:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;padding:0;border:0;background:unset;cursor:pointer;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{visibility:hidden;height:0;width:0;overflow:hidden;margin:0;padding:0}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{border-style:solid;overflow:hidden;position:relative}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{display:block;content:"";position:absolute;inset:0;pointer-events:none;border-bottom-style:solid;border-bottom-width:1px}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host label.withValue{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{flex:1;position:relative;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);outline:none}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{pointer-events:none;background:none}`;
+
+var colorCss = css`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+
+var tokensCss = css`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+/**
+ * Auro-input provides users a way to enter data into a text field.
+ *
+ * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position.
+ * @attr {String}  autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]
+ * @attr {String}  autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+ * @attr {String}  autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box.
+ * @attr {Boolean} bordered - Applies bordered UI variant.
+ * @attr {Boolean} borderless - Applies borderless UI variant.
+ * @attr {Boolean} disabled - If set, disables the input.
+ * @attr {String}  error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+ * @prop {String}  errorMessage - Contains the help text message for the current validity error.
+ * @attr {String}  helpText - Deprecated, see `slot`.
+ * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
+ * @attr {String}  id - Sets the unique ID of the element.
+ * @attr {String}  isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
+ * @attr {String}  label - Deprecated, see `slot`.
+ * @attr {String}  lang - defines the language of an element.
+ * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {Number}  maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+ * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
+ * @attr {Number}  minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`.
+ * @attr {String}  name - Populates the `name` attribute on the input.
+ * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
+ * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically.
+ * @prop {Boolean} ready - When false the component API should not be called.
+ * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
+ * @attr {String}  pattern - Specifies a regular expression the form control's value should match.
+ * @attr {String}  placeholder - Define custom placeholder text, only supported by date input formats.
+ * @attr {String}  setCustomValidity - Sets a custom help text message to display for all validityStates.
+ * @attr {String}  setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
+ * @attr {String}  setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
+ * @attr {String}  setCustomValidityBadInput - Custom help text message to display when validity = `badInput`.
+ * @attr {String}  setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`.
+ * @attr {String}  setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`.
+ * @attr {String}  setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails.
+ * @attr {String}  setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`.
+ * @attr {String}  setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`.
+ * @attr {String}  spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+ * @attr {String}  type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`.
+ * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input.
+ * @attr {String}  validity - Specifies the `validityState` this element is in.
+ * @attr {String}  value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
+ *
+ * @slot helptext - Sets the help text displayed below the input.
+ * @slot label - Sets the label text for the input.
+ *
+ * @csspart wrapper - Use for customizing the style of the root element
+ * @csspart label - Use for customizing the style of the label element
+ * @csspart helpText - Use for customizing the style of the helpText element
+ * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
+ * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
+ * @event input - Event fires when the value of an `auro-input` has been changed.
+ * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
+ */
+
+class BaseInput extends LitElement {
+
+  constructor() {
+    super();
+
+    this.isValid = false;
+
+    this.icon = false;
+    this.disabled = false;
+    this.required = false;
+    this.noValidate = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.maxLength = undefined;
+    this.minLength = undefined;
+    this.label = 'Input label is undefined';
+    this.ready = false;
+    this.activeLabel = false;
+
+    this.setCustomValidityForType = undefined;
+  }
+
+  /**
+   * Internal Defaults.
+   * @private
+   * @returns {void}
+   */
+  privateDefaults() {
+    this.validation = new AuroFormValidation();
+    this.inputIconName = undefined;
+    this.showPassword = false;
+    this.validationCCLength = undefined;
+    this.hasValue = false;
+
+    this.allowedInputTypes = [
+      "text",
+      "email",
+      "password",
+      "credit-card",
+      "month-day-year",
+      "year-month-day",
+      "month-year"
+    ];
+
+    this.dateInputTypes = [
+      "month-day-year",
+      "year-month-day",
+      "month-year",
+      "month-fullYear"
+    ];
+
+    this.autoFormattingTypes = [
+      'credit-card',
+      'month-day-year',
+      'month-year',
+      'month-fullyear',
+      'year-month-day'
+    ];
+
+    /**
+     * Credit Card is not included as this caused cursor placement issues.
+     * The Safari issue.
+     */
+    this.setSelectionInputTypes = [
+      "text",
+      "password",
+      "email",
+    ];
+
+    const idLength = 36;
+    const idSubstrEnd = 8;
+    const idSubstrStart = 2;
+
+    this.uniqueId = Math.random()
+      .toString(idLength)
+      .substring(idSubstrStart, idSubstrEnd);
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      id:                      { type: String },
+      label:                   { type: String },
+      name:                    { type: String },
+      type:                    { type: String,
+        reflect: true },
+      value:                   { type: String },
+      lang:                    { type: String },
+      pattern:                 {
+        type: String,
+        reflect: true
+      },
+      icon:                    { type: Boolean },
+      disabled:                { type: Boolean },
+      required:                { type: Boolean },
+      noValidate:              { type: Boolean },
+      helpText:                { type: String },
+      spellcheck:              { type: String },
+      autocorrect:             { type: String },
+      autocapitalize:          { type: String },
+      autocomplete:            {
+        type: String,
+        reflect: true
+      },
+      placeholder:             { type: String },
+      activeLabel:             {
+        type: Boolean,
+        reflect: true
+      },
+      max:               { type: String },
+      min:               { type: String },
+      maxLength:               { type: Number },
+      minLength:               { type: Number },
+
+      /**
+       * @ignore
+       */
+      showPassword:            { state: true },
+      validateOnInput:         { type: Boolean },
+      readonly:                { type: Boolean },
+      ready:                   { type: Boolean },
+      error:                   {
+        type: String,
+        reflect: true
+      },
+      errorMessage:            { type: String },
+      isValid: {
+        type: String,
+        reflect: true
+      },
+      validity:                {
+        type: String,
+        reflect: true
+      },
+      setCustomValidity:               { type: String },
+      setCustomValidityCustomError:    { type: String },
+      setCustomValidityValueMissing:   { type: String },
+      setCustomValidityBadInput:       { type: String },
+      setCustomValidityTooShort:       { type: String },
+      setCustomValidityTooLong:        { type: String },
+      setCustomValidityRangeOverflow:  { type: String},
+      setCustomValidityRangeUnderflow: { type: String},
+      customValidityTypeEmail:         { type: String }
+    };
+  }
+
+  static get styles() {
+    return [
+      css`${styleCss}`,
+      css`${colorCss}`,
+      css`${tokensCss}`
+    ];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.privateDefaults();
+
+    notifyOnLangChange(this);
+
+    // Process auto-formatting if defined for CleaveJS
+    if (this.type) {
+      let config = null;
+
+      // Set config for credit card
+      switch (this.type) {
+        case 'number':
+          config = {
+            numeral: true,
+            delimiter: ''
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'credit-card':
+          config = {
+            creditCard: true
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month-day-year':
+          config = {
+            date: true,
+            delimiter: '/',
+            datePattern: [
+              'm',
+              'd',
+              'Y'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'year-month-day':
+          config = {
+            date: true,
+            delimiter: '/',
+            datePattern: [
+              'Y',
+              'm',
+              'd'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month-year':
+          config = {
+            date: true,
+            datePattern: [
+              'm',
+              'y'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month-fullYear':
+          config = {
+            date: true,
+            datePattern: [
+              'm',
+              'Y'
+            ]
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+          // Do nothing
+      }
+
+      // initialize CleaveJS if we have a defined config for the requested format
+      if (config) {
+        // eslint-disable-next-line no-unused-vars
+        new Cleave(this, config);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    stopNotifyingOnLangChange(this);
+  }
+
+  firstUpdated() {
+    // add attribute for query selectors when auro-input is registered under a custom name
+    if (this.tagName.toLowerCase() !== 'auro-input') {
+      this.setAttribute('auro-input', true);
+    }
+
+    this.inputElement = this.renderRoot.querySelector('input');
+    this.labelElement = this.shadowRoot.querySelector('label');
+
+    // use validity message override if declared when initializing the component
+    if (this.hasAttribute('setCustomValidity')) {
+      this.ValidityMessageOverride = this.setCustomValidity;
+    }
+
+    // if setCustomValidityForType is not set, use our default
+    if (!this.setCustomValidityForType) {
+      if (this.type === 'password') {
+        this.setCustomValidityForType = i18n(this.lang, 'password');
+      } else if (this.type === 'credit-card') {
+        this.setCustomValidityForType = i18n(this.lang, 'creditcard');
+      } else if (this.type === 'email') {
+        this.setCustomValidityForType = i18n(this.lang, 'email');
+      } else if (this.type === 'month-day-year') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY');
+      } else if (this.type === 'month-year') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMMYY');
+      } else if (this.type === 'month-fullyear') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY');
+      } else if (this.type === 'year-month-day') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD');
+      }
+    }
+
+    this.addEventListener('keydown', (evt) => {
+      if (this.autoFormattingTypes.includes(this.type)) {
+        if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
+          if (evt.key.length === 1) {
+            const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart;
+
+            if (numCharSelected > 1) {
+              this.cursorPosition = this.inputElement.selectionStart + 1;
+            } else if (numCharSelected === 1) {
+              this.cursorPosition = this.inputElement.selectionEnd;
+            } else {
+              this.cursorPosition = this.inputElement.selectionEnd + 1;
+            }
+          } else if (evt.key === 'Backspace') {
+            this.cursorPosition = this.inputElement.selectionEnd - 1;
+          } else if (evt.key === 'Delete') {
+            this.cursorPosition = this.inputElement.selectionEnd;
+          }
+        }
+
+        if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") {
+          if (evt.key === 'ArrowUp') {
+            this.cursorPosition = 0;
+          } else if (evt.key === 'ArrowDown') {
+            this.cursorPosition = this.value.length;
+          } else if (evt.key === 'ArrowLeft') {
+            this.cursorPosition = this.inputElement.selectionEnd - 1;
+          } else if (evt.key === 'ArrowRight') {
+            this.cursorPosition = this.inputElement.selectionEnd + 1;
+          }
+        }
+      }
+    });
+
+    this.notifyReady();
+  }
+
+  /**
+   * LitElement lifecycle method. Called after the DOM has been updated.
+   * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (this.type === 'password') {
+      this.spellcheck = 'false';
+    }
+
+    if (this.spellcheck === 'false') {
+      this.autocorrect = 'off';
+      this.autocapitalize = 'none';
+    } else {
+      this.autocorrect = this.autocorrect ? this.autocorrect : undefined;
+      this.autocapitalize = undefined;
+    }
+
+    if (changedProperties.has('readonly')) {
+      if (this.readonly) {
+        this.inputElement.setAttribute('readonly', true);
+        this.inputElement.setAttribute('aria-readonly', true);
+      } else {
+        this.inputElement.removeAttribute('readonly');
+        this.inputElement.removeAttribute('aria-readonly');
+      }
+    }
+
+    if (changedProperties.has('type')) {
+      this.configureDataForType();
+    }
+
+    if (changedProperties.has('value')) {
+      if (this.value && this.value.length > 0) {
+        this.hasValue = true;
+        this.requestUpdate();
+      } else {
+        this.hasValue = false;
+        this.requestUpdate();
+      }
+
+      if (this.value !== this.inputElement.value) {
+        if (this.value) {
+          this.inputElement.value = this.value;
+        } else {
+          this.inputElement.value = '';
+        }
+
+        if (!this.shadowRoot.contains(this.getActiveElement())) {
+          this.validation.validate(this);
+        }
+
+        this.notifyValueChanged();
+      }
+      this.autoFormatHandling();
+    }
+
+    if (changedProperties.has('error')) {
+      this.validation.validate(this, true);
+    }
+
+    if (changedProperties.has('validity')) {
+      this.notifyValidityChange();
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void} Handles cursor position when input auto-formats.
+   */
+  autoFormatHandling() {
+    if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) {
+      if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') {
+        this.cursorPosition += 1;
+      } else if (this.dateInputTypes.includes(this.type)) {
+        const divider = '/';
+        const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider;
+
+        if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) {
+          this.cursorPosition += 1;
+        } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider
+                  && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak
+          this.cursorPosition += 2;
+        }
+      }
+
+      this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition);
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void} Notify validity state changed via event.
+   */
+  notifyValidityChange() {
+    this.dispatchEvent(new CustomEvent('auroInput-validityChange', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  /**
+   * @private
+   * @returns {void} Marks the component as ready and sends event.
+   */
+  notifyReady() {
+    this.ready = true;
+
+    this.dispatchEvent(new CustomEvent('auroInput-ready', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  /**
+   * @private
+   * @returns {string}
+   */
+  definePattern() {
+    if (this.type === 'credit-card' && !this.noValidate && this.maxLength) {
+      return `.{${this.maxLength},${this.maxLength}}`;
+    }
+
+    return this.pattern;
+  }
+
+  /**
+   * Function to set element focus.
+   * @private
+   * @return {void}
+   */
+  focus() {
+    this.inputElement.focus();
+  }
+
+  /**
+   * Required to convert SVG icons from data to HTML string.
+   * @private
+   * @param {string} icon HTML string for requested icon.
+   * @returns {object} Appended HTML for SVG.
+   */
+  getIconAsHtml(icon) {
+    const dom = new DOMParser().parseFromString(icon.svg, 'text/html');
+
+    return dom.body.firstChild;
+  }
+
+  /**
+   * Sends event notifying that the input has changed it's value.
+   * @private
+   * @returns {void}
+   */
+  notifyValueChanged() {
+    let inputEvent = null;
+
+    inputEvent = new Event('input', {
+      bubbles: true,
+      composed: true,
+    });
+
+    // Dispatched event to alert outside shadow DOM context of event firing.
+    this.dispatchEvent(inputEvent);
+  }
+
+  /**
+   * Handles event of clearing input content by clicking the X icon.
+   * @private
+   * @return {void}
+   */
+  handleClickClear() {
+    this.inputElement.value = "";
+    this.value = undefined;
+    this.labelElement.classList.remove('inputElement-label--sticky');
+    this.focus();
+    this.validation.validate(this);
+    this.notifyValueChanged();
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  handleInput() {
+    // Prevent non-numeric characters from being entered on credit card fields.
+    if (this.type === 'credit-card') {
+      this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, '');
+    }
+
+    // Sets value property to value of element value (el.value).
+    this.value = this.inputElement.value;
+
+    // Validation on blur or input.
+    if (this.validateOnInput) {
+      this.validation.validate(this);
+    }
+
+    // Prevents cursor jumping in Safari.
+    const { selectionStart } = this.inputElement;
+
+    if (this.setSelectionInputTypes.includes(this.type)) {
+      this.updateComplete.then(() => {
+        try {
+          this.inputElement.setSelectionRange(selectionStart, selectionStart);
+        } catch (error) { // eslint-disable-line
+          // do nothing
+        }
+      });
+    }
+  }
+
+  /**
+   * Function to support @focusin event.
+   * @private
+   * @return {void}
+   */
+  handleFocusin() {
+
+    /**
+     * The input is considered to be in it's initial state based on
+     * if this.value === undefined. The first time we interact with the
+     * input manually, by applying focusin, we need to flag the
+     * input as no longer in the initial state.
+     */
+    if (this.value === undefined) {
+      this.value = '';
+    }
+  }
+
+  /**
+   * Function to support @blur event.
+   * @private
+   * @return {void}
+   */
+  handleBlur() {
+    this.inputElement.scrollLeft = 100;
+
+    if (!this.noValidate) {
+      this.validation.validate(this);
+    }
+  }
+
+  /**
+   * Returns focused element, even if it's in the shadow DOM.
+   * @private
+   * @param {Object} root - Element to check for focus.
+   * @returns {Object}
+   */
+  getActiveElement(root = document) {
+    const activeEl = root.activeElement;
+
+    if (!activeEl) {
+      return null;
+    }
+
+    if (activeEl.shadowRoot) {
+      return this.getActiveElement(activeEl.shadowRoot);
+    }
+
+    return activeEl;
+  }
+
+  /**
+   * Public method force validation of input.
+   * @returns {void}
+   */
+  validate() {
+    this.validation.validate(this);
+  }
+
+
+  /**
+   * Sets configuration data used elsewhere based on the `type` attribute.
+   * @private
+   * @returns {void}
+   */
+  configureDataForType() {
+    if (this.type === 'month-day-year' || this.type === 'year-month-day') {
+      this.dateStrLength = 10;
+    } else if (this.type === 'month-year') {
+      this.dateStrLength = 5;
+    } else if (this.type === 'month-fullYear') {
+      this.dateStrLength = 7;
+    }
+  }
+
+  /**
+   * Validates against list of supported this.allowedInputTypes; return type=text if invalid request.
+   * @private
+   * @param {string} type Value entered into component prop.
+   * @returns {string} Iterates over allowed types array.
+   */
+  getInputType(type) {
+    if (this.allowedInputTypes.includes(type)) {
+      return type;
+    }
+
+    return "text";
+  }
+
+  /**
+   * Determines default help text string.
+   * @private
+   * @param {string} type Value entered into component prop.
+   * @returns {string} Evaluates pre-determined help text.
+   */
+  getHelpText(type) {
+    if (type === 'password') {
+      this.helpText = i18n(this.lang, 'password');
+    } else if (type === 'email') {
+      this.helpText = i18n(this.lang, 'email');
+    } else if (type === 'credit-card') {
+      this.helpText = i18n(this.lang, 'creditcard');
+    } else if (type === 'month-day-year') {
+      this.helpText = i18n(this.lang, 'dateMMDDYYYY');
+    } else if (type === 'month-year') {
+      this.helpText = i18n(this.lang, 'dateMMYY');
+    } else if (type === 'month-fullyear') {
+      this.helpText = i18n(this.lang, 'dateMMYYYY');
+    } else if (type === 'year-month-day') {
+      this.helpText = i18n(this.lang, 'dateYYYYMMDD');
+    } else {
+      this.helpText = '';
+    }
+
+    return this.helpText;
+  }
+
+  /**
+   * Function to support show-password feature.
+   * @private
+   * @returns {void}
+   */
+  handleClickShowPassword() {
+    this.showPassword = !this.showPassword;
+    this.focus();
+  }
+
+  /**
+   * Support placeholder text.
+   * @private
+   * @returns {string}
+   */
+  getPlaceholder() {
+    if (this.type === 'month-day-year') {
+      return !this.placeholder ? 'MM/DD/YYYY' : this.placeholder;
+    } else if (this.type === 'month-year') {
+      return !this.placeholder ? 'MM/YY' : this.placeholder;
+    } else if (this.type === 'month-fullYear') {
+      return !this.placeholder ? 'MM/YYYY' : this.placeholder;
+    } else if (this.type === 'year-month-day') {
+      return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder;
+    }
+
+    return ifDefined(this.placeholder);
+  }
+
+  /**
+   * Defines placement of input icon based on type, used with classMap.
+   * @private
+   * @returns {boolean}
+   */
+  defineInputIcon() {
+    if (this.icon && this.type === 'credit-card') {
+      return true;
+    } else if (this.dateInputTypes.includes(this.type)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Defines padding of input label based on type, used with classMap.
+   * @private
+   * @returns {boolean}
+   */
+  defineLabelPadding() {
+    if (this.icon && this.type === 'credit-card' && (this.value === "" || this.value === undefined)) {
+      return true;
+    } else if (this.dateInputTypes.includes(this.type)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // Functions specific to Credit Card component support
+  // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+
+  /**
+   * Function to support credit-card feature type.
+   * @private
+   * @returns {void}
+   */
+  processCreditCard() {
+    const card = this.matchInputValueToCreditCard();
+
+    this.maxLength = card.formatLength;
+    this.minLength = card.formatMinLength;
+
+    this.setCustomValidity = card.setCustomValidity;
+
+    if (this.icon) {
+      this.inputIconName = card.cardIcon;
+    }
+  }
+
+  /**
+   * Function to support credit-card feature type.
+   * @private
+   * @returns {object} JSON with data for credit card formatting.
+   */
+  matchInputValueToCreditCard() {
+    const CreditCardValidationMessage = `${i18n(this.lang, 'validCard')}`;
+
+    const creditCardTypes = [
+      {
+        name: 'Airlines',
+        regex: /^(?<num>1|2)\d{0}/u,
+        formatMinLength: 17,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'credit-card'
+      },
+      {
+        name: 'Commercial',
+        regex: /^(?<num>2)\d{0}/u,
+        formatMinLength: 8,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'credit-card'
+      },
+      {
+        name: 'Alaska Commercial',
+        regex: /^(?<num>27)\d{0}/u,
+        formatMinLength: 8,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-alaska'
+      },
+      {
+        name: 'American Express',
+        regex: /^(?<num>34|37)\d{0}/u,
+        formatLength: 17,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-amex'
+      },
+      {
+        name: 'Diners club',
+        regex: /^(?<num>36|38)\d{0}/u,
+        formatLength: 16,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'credit-card'
+      },
+      {
+        name: 'Visa',
+        regex: /^(?<num>4)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-visa'
+      },
+      {
+        name: 'Alaska Airlines Visa',
+        regex: /^(?<num>4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-alaska'
+      },
+      {
+        name: 'Master Card',
+        regex: /^(?<num>5)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-mastercard'
+      },
+      {
+        name: 'Discover Card',
+        regex: /^(?<num>6)\d{0}/u,
+        formatLength: 19,
+        setCustomValidity: CreditCardValidationMessage,
+        cardIcon: 'cc-discover'
+      }
+    ];
+
+    let type = {
+      name: 'Default Card',
+      formatLength: 19,
+      setCustomValidity: CreditCardValidationMessage,
+      cardIcon: 'credit-card'
+    };
+
+    creditCardTypes.forEach((cardType) => {
+      if (cardType.regex.exec(this.value)) {
+        type = cardType;
+      }
+    });
+
+    this.validationCCLength = type.formatLength;
+
+    return type;
+  }
+}
+
+var iconVersion = '5.0.0';
+
+var buttonVersion = '8.0.0';
+
+// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// build the component class
+class AuroInput extends BaseInput {
+  constructor() {
+    super();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-input"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroInput.register("custom-input") // this will register this element to <custom-input/>
+   *
+   */
+  static register(name = "auro-input") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroInput);
+  }
+
+  /**
+   * Function to determine if the input is meant to render an icon visualizing the input type.
+   * @private
+   * @returns {boolean} - Returns true if the input type is meant to render an icon.
+   */
+  hasTypeIcon() {
+    const typesWithIcons = [
+      'month-day-year',
+      'month-year',
+      'year-month-day',
+      'month-fullYear'
+    ];
+
+    if (this.icon || typesWithIcons.includes(this.type)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
+    const labelClasses = {
+      'is-disabled': this.disabled,
+      'withIcon': this.hasTypeIcon(),
+      'withValue': this.value && this.value.length > 0
+    };
+
+    return html`
+      <div class="wrapper" part="wrapper">
+        <div class="main">
+          <div class="typeIcon">
+            ${this.type === 'credit-card' ? this.processCreditCard() : undefined}
+
+            <!-- The repeat() method is used below in order to force auro-icon to re-render when the name value is updated.
+               This should be cleaned up when auro-icon issue #31 is resolved. -->
+            ${this.inputIconName
+            ? repeat([this.inputIconName], (val) => val, (name) => html`
+              <${this.iconTag}
+                class="accentIcon"
+                category="payment"
+                name="${name}"
+                part="accentIcon"
+                ?disabled="${this.disabled}">
+              </${this.iconTag}>
+            `) : undefined
+            }
+
+            ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear'
+            ? html`
+              <${this.iconTag}
+                class="accentIcon"
+                category="interface"
+                name="calendar"
+                part="accentIcon"
+                ?disabled="${this.disabled}">
+              </${this.iconTag}>`
+            : undefined
+            }
+          </div>
+          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+            <slot name="label">
+              ${this.label}
+            </slot>
+            ${this.required ? '' : ` (${i18n(this.lang, 'optional')})`}
+          </label>
+          <input
+            @input="${this.handleInput}"
+            @focusin="${this.handleFocusin}"
+            @blur="${this.handleBlur}"
+            id="${this.id}"
+            name="${ifDefined(this.name)}"
+            type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
+            pattern="${ifDefined(this.definePattern())}"
+            maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
+            minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
+            inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            aria-describedby="${this.uniqueId}"
+            aria-invalid="${this.validity !== 'valid'}"
+            placeholder=${this.getPlaceholder()}
+            lang="${ifDefined(this.lang)}"
+            ?activeLabel="${this.activeLabel}"
+            spellcheck="${ifDefined(this.spellcheck ? this.spellcheck : undefined)}"
+            autocorrect="${ifDefined(this.autocorrect ? this.autocorrect : undefined)}"
+            autocapitalize="${ifDefined(this.autocapitalize ? this.autocapitalize : undefined)}"
+            autocomplete="${ifDefined(this.autocomplete ? this.autocomplete : undefined)}"
+            part="input"
+            />
+        </div>
+        <div
+          class="notificationIcons"
+          part="notificationIcons"
+          ?hasValue="${this.hasValue}">
+          ${this.validity && this.validity !== 'valid' ? html`
+            <div class="notification alertNotification">
+              <${this.iconTag}
+                category="alert"
+                name="error-stroke"
+                customSize
+                error>
+              </${this.iconTag}>
+            </div>
+          ` : undefined}
+          ${this.hasValue ? html`
+            ${this.type === 'password' ? html`
+              <div class="notification">
+                <${this.buttonTag}
+                  variant="flat"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  @click="${this.handleClickShowPassword}"
+                  class="notificationBtn passwordBtn">
+                  <${this.iconTag}
+                    category="interface"
+                    name="hide-password-stroke"
+                    customSize
+                    customColor
+                    ?hidden=${!this.showPassword}>
+                  </${this.iconTag}>
+                  <${this.iconTag}
+                    category="interface"
+                    name="view-password-stroke"
+                    customSize
+                    customColor
+                    ?hidden=${this.showPassword}>
+                  </${this.iconTag}>
+                </${this.buttonTag}>
+              </div>
+            ` : undefined}
+            ${!this.disabled && !this.readonly ? html`
+              <div class="notification">
+                <${this.buttonTag}
+                  variant="flat"
+                  class="notificationBtn clearBtn"
+                  aria-hidden="true"
+                  tabindex="-1"
+                  @click="${this.handleClickClear}">
+                  <${this.iconTag}
+                    customColor
+                    category="interface"
+                    name="x-lg"
+                    customSize>
+                  </${this.iconTag}>
+                </${this.buttonTag}>
+              </div>
+            ` : undefined}
+          ` : undefined}
+        </div>
+      </div>
+      <!-- Help text and error message template -->
+      ${!this.validity || this.validity === undefined || this.validity === 'valid'
+      ? html`
+        <p class="inputElement-helpText" id="${this.uniqueId}" part="helpText">
+          <slot name="helptext">${this.getHelpText(this.type)}</slot>
+        </p>`
+      : html`
+        <p class="inputElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+          ${this.errorMessage}
+        </p>`
+
+      }
+    `;
+  }
+}
+
+AuroInput.register();
+
 function initExamples(initCount) {
   initCount = initCount || 0;
 
diff --git a/demo/index.js b/demo/index.js
index 84360a8..0c79aac 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -1,6 +1,7 @@
 import { changeLang } from "../apiExamples/changeLang";
 import { AuroInput } from '../src/auro-input.js';
 
+AuroInput.register();
 AuroInput.register('custom-input');
 
 export function initExamples(initCount) {
diff --git a/demo/index.min.js b/demo/index.min.js
index c5243a2..8ac2c1d 100644
--- a/demo/index.min.js
+++ b/demo/index.min.js
@@ -1228,6 +1228,7 @@ class AuroInput extends BaseInput {
   }
 }
 
+AuroInput.register();
 AuroInput.register('custom-input');
 
 function initExamples(initCount) {