@aurodesignsystem/auro-formkit 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+# [3.4.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.3.0...v3.4.0) (2025-05-12)
+
+
+### Features
+
+* expose inputmode attribute for auro-input ([2066d3a](https://github.com/AlaskaAirlines/auro-formkit/commit/2066d3a174a2e37c2ad5e33f867710c8da5ed0ca))
+
 # [3.3.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.2.8...v3.3.0) (2025-05-12)
 
 

package/components/checkbox/README.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/api.md

@@ -56,7 +56,6 @@ Custom element for the purpose of allowing users to select one or more options o
 | [id](#id)       | `id`       | `string`  |         | Sets the individual `id` per element.            |
 | [name](#name)     | `name`     | `string`  |         | Accepts any string and is used to identify related checkboxes when submitting form data. |
 | [onDark](#onDark)   | `onDark`   | `boolean` | false   | Sets onDark styles for component.                |
-| [touched](#touched)  | `touched`  | `boolean` | false   | Indicates whether the checkbox has been interacted with. |
 | [value](#value)    | `value`    | `string`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods

package/components/checkbox/demo/api.min.js

@@ -231,10 +231,12 @@ class AuroCheckbox extends i$2 {
       /**
        * Indicates whether the checkbox has been interacted with.
        * @type {boolean}
+       * @private
        */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/checkbox/demo/index.min.js

@@ -223,10 +223,12 @@ class AuroCheckbox extends i$2 {
       /**
        * Indicates whether the checkbox has been interacted with.
        * @type {boolean}
+       * @private
        */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/checkbox/demo/readme.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/dist/auro-checkbox.d.ts

@@ -58,6 +58,7 @@ export class AuroCheckbox extends LitElement {
         /**
          * Indicates whether the checkbox has been interacted with.
          * @type {boolean}
+         * @private
          */
         touched: boolean;
     };

package/components/checkbox/dist/index.js

@@ -183,10 +183,12 @@ class AuroCheckbox extends LitElement {
       /**
        * Indicates whether the checkbox has been interacted with.
        * @type {boolean}
+       * @private
        */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/checkbox/dist/registered.js

@@ -183,10 +183,12 @@ class AuroCheckbox extends LitElement {
       /**
        * Indicates whether the checkbox has been interacted with.
        * @type {boolean}
+       * @private
        */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/combobox/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/demo/api.md

@@ -13,6 +13,7 @@
 | [disabled](#disabled)                      | `disabled`                      | `boolean` |                | If set, disables the combobox.                   |
 | [error](#error)                         | `error`                         | `string`  |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [inputmode](#inputmode)                     | `inputmode`                     | `string`  |                | Exposes inputmode attribute for input.           |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
 | [noFilter](#noFilter)                      | `noFilter`                      | `boolean` |                | If set, combobox will not filter menuoptions based in input. |
 | [noFlip](#noFlip)                        | `noFlip`                        | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
@@ -317,6 +318,49 @@ If set, disables the combobox.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Input Mode
+
+You can manually set the input mode for the input.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
+  <auro-combobox inputmode="numeric">
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="1" id="option-0">1</auro-menuoption>
+      <auro-menuoption value="2" id="option-1">2</auro-menuoption>
+      <auro-menuoption value="3" id="option-2">3</auro-menuoption>
+      <auro-menuoption value="4" id="option-3">4</auro-menuoption>
+      <auro-menuoption value="5" id="option-4">5</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inputmode.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
+
+```html
+<auro-combobox inputmode="numeric">
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="1" id="option-0">1</auro-menuoption>
+    <auro-menuoption value="2" id="option-1">2</auro-menuoption>
+    <auro-menuoption value="3" id="option-2">3</auro-menuoption>
+    <auro-menuoption value="4" id="option-3">4</auro-menuoption>
+    <auro-menuoption value="5" id="option-4">5</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### noFilter
 
 If set, combobox will not do suggestion filtering of the menuoptions. This option is useful when the `<auro-menuoption>` elements are being pre-filtered externally to combobox (e.g. using the citysearch API).

package/components/combobox/demo/api.min.js

@@ -9836,6 +9836,13 @@ class BaseInput extends i$2 {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -10401,9 +10408,9 @@ class BaseInput extends i$2 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -11761,7 +11768,7 @@ class AuroInput extends BaseInput {
             pattern="${o(this.definePattern())}"
             maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -12820,6 +12827,13 @@ class AuroCombobox extends i$2 {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -13700,6 +13714,7 @@ class AuroCombobox extends i$2 {
             setCustomValidityCustomError="${this.setCustomValidityCustomError}"
             .autocomplete="${this.autocomplete}"
             .type="${this.type}"
+            inputmode="${o(this.inputmode)}"
             @input="${this.handleInputValueChange}">
           </${this.inputTag}>
 

package/components/combobox/demo/index.min.js

@@ -9694,6 +9694,13 @@ class BaseInput extends i$2 {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -10259,9 +10266,9 @@ class BaseInput extends i$2 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -11619,7 +11626,7 @@ class AuroInput extends BaseInput {
             pattern="${o(this.definePattern())}"
             maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -12678,6 +12685,13 @@ class AuroCombobox extends i$2 {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -13558,6 +13572,7 @@ class AuroCombobox extends i$2 {
             setCustomValidityCustomError="${this.setCustomValidityCustomError}"
             .autocomplete="${this.autocomplete}"
             .type="${this.type}"
+            inputmode="${o(this.inputmode)}"
             @input="${this.handleInputValueChange}">
           </${this.inputTag}>
 

package/components/combobox/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/dist/auro-combobox.d.ts

@@ -62,6 +62,12 @@ export class AuroCombobox extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /** Exposes inputmode attribute for input.  */
+        inputmode: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
         /**
          * If set, combobox will not filter menuoptions based in input.
          */

package/components/combobox/dist/index.js

@@ -9612,6 +9612,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -10177,9 +10184,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -11537,7 +11544,7 @@ class AuroInput extends BaseInput {
             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)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -12596,6 +12603,13 @@ class AuroCombobox extends LitElement {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -13476,6 +13490,7 @@ class AuroCombobox extends LitElement {
             setCustomValidityCustomError="${this.setCustomValidityCustomError}"
             .autocomplete="${this.autocomplete}"
             .type="${this.type}"
+            inputmode="${ifDefined(this.inputmode)}"
             @input="${this.handleInputValueChange}">
           </${this.inputTag}>
 

package/components/combobox/dist/registered.js

@@ -9612,6 +9612,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -10177,9 +10184,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -11537,7 +11544,7 @@ class AuroInput extends BaseInput {
             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)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -12596,6 +12603,13 @@ class AuroCombobox extends LitElement {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -13476,6 +13490,7 @@ class AuroCombobox extends LitElement {
             setCustomValidityCustomError="${this.setCustomValidityCustomError}"
             .autocomplete="${this.autocomplete}"
             .type="${this.type}"
+            inputmode="${ifDefined(this.inputmode)}"
             @input="${this.handleInputValueChange}">
           </${this.inputTag}>
 

package/components/counter/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/counter/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/README.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/demo/api.md

@@ -16,6 +16,7 @@
 | [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [format](#format)                          | `format`                          |           | `string`   | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)            | `fullscreenBreakpoint`            |           | `string`   | "sm"                                             | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [inputmode](#inputmode)                       | `inputmode`                       |           | `string`   |                                                  | Exposes inputmode attribute for input.           |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)         | `largeFullscreenHeadline`         |           | `boolean`  | false                                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
 | [maxDate](#maxDate)                         | `maxDate`                         |           | `string`   |                                                  | Maximum date. All dates after will be disabled.  |
 | [minDate](#minDate)                         | `minDate`                         |           | `string`   |                                                  | Minimum date. All dates before will be disabled. |
@@ -222,6 +223,35 @@ export function errorExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Input Mode
+
+You can manually set the input mode for the input.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
+  <auro-datepicker inputmode="numeric">
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inputmode.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
+
+```html
+<auro-datepicker inputmode="numeric">
+  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### calendarStartDate & calendarEndDate
 
 The `calendarStartDate` and `calendarEndDate` properties may be used to explicitly control which calendar months _may_ be rendered in the calendar.

package/components/datepicker/demo/api.min.js

@@ -21306,6 +21306,13 @@ class BaseInput extends i$2 {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -21871,9 +21878,9 @@ class BaseInput extends i$2 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -23231,7 +23238,7 @@ class AuroInput extends BaseInput {
             pattern="${o(this.definePattern())}"
             maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -23545,6 +23552,13 @@ class AuroDatePicker extends i$2 {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
@@ -24395,6 +24409,7 @@ class AuroDatePicker extends i$2 {
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
               ?disabled="${this.disabled}"
+              inputmode="${o(this.inputmode)}"
               part="input">
               <span slot="label"><slot name="fromLabel"></slot></span>
             </${this.inputTag}>

package/components/datepicker/demo/index.min.js

@@ -21047,6 +21047,13 @@ class BaseInput extends i$2 {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -21612,9 +21619,9 @@ class BaseInput extends i$2 {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -22972,7 +22979,7 @@ class AuroInput extends BaseInput {
             pattern="${o(this.definePattern())}"
             maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -23286,6 +23293,13 @@ class AuroDatePicker extends i$2 {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
@@ -24136,6 +24150,7 @@ class AuroDatePicker extends i$2 {
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
               ?disabled="${this.disabled}"
+              inputmode="${o(this.inputmode)}"
               part="input">
               <span slot="label"><slot name="fromLabel"></slot></span>
             </${this.inputTag}>

package/components/datepicker/demo/readme.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -89,6 +89,12 @@ export class AuroDatePicker extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /** Exposes inputmode attribute for input.  */
+        inputmode: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
         /**
          * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600.

package/components/datepicker/dist/index.js

@@ -20983,6 +20983,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -21548,9 +21555,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -22908,7 +22915,7 @@ class AuroInput extends BaseInput {
             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)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -23222,6 +23229,13 @@ class AuroDatePicker extends LitElement {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
@@ -24072,6 +24086,7 @@ class AuroDatePicker extends LitElement {
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
               ?disabled="${this.disabled}"
+              inputmode="${ifDefined(this.inputmode)}"
               part="input">
               <span slot="label"><slot name="fromLabel"></slot></span>
             </${this.inputTag}>

package/components/datepicker/dist/registered.js

@@ -20983,6 +20983,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -21548,9 +21555,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -22908,7 +22915,7 @@ class AuroInput extends BaseInput {
             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)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -23222,6 +23229,13 @@ class AuroDatePicker extends LitElement {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If declared, make bib.fullscreen.headline in HeadingDisplay.
        * Otherwise, Heading 600.
@@ -24072,6 +24086,7 @@ class AuroDatePicker extends LitElement {
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
               ?disabled="${this.disabled}"
+              inputmode="${ifDefined(this.inputmode)}"
               part="input">
               <span slot="label"><slot name="fromLabel"></slot></span>
             </${this.inputTag}>

package/components/dropdown/README.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/readme.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/README.md

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/demo/readme.md

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/README.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/demo/api.md

@@ -30,6 +30,7 @@ Generate unique names for dependency components.
 | [format](#format)                          | `format`                          | `string`  |             | Specifies the input mask format.                 |
 | [icon](#icon)                            | `icon`                            | `boolean` | false       | 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. |
 | [id](#id)                              | `id`                              | `string`  |             | Sets the unique ID of the element.               |
+| [inputmode](#inputmode)                       | `inputmode`                       | `string`  |             | Exposes inputmode attribute for input.           |
 | [lang](#lang)                            | `lang`                            | `string`  |             | Defines the language of an element.              |
 | [max](#max)                             | `max`                             | `string`  | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
 | [maxLength](#maxLength)                       | `maxLength`                       | `number`  | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
@@ -179,6 +180,29 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Input Mode
+
+Set the input mode for the input.
+
+*IMPORTANT:* If you are also passing a `type`, most browsers will use the `type` attribute to determine what keyboard to display on mobile devices and ignore the `inputmode` attribute.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
+  <auro-input bordered inputmode="tel" />
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inputmode.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
+
+```html
+<auro-input bordered inputmode="tel" />
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Placeholder <a name="placeholder"></a>
 Use the `placeholder` attribute to add a custom placeholder message within the element.
 

package/components/input/demo/api.min.js

@@ -5162,6 +5162,13 @@ class BaseInput extends i {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5727,9 +5734,9 @@ class BaseInput extends i {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -7087,7 +7094,7 @@ class AuroInput extends BaseInput {
             pattern="${o$3(this.definePattern())}"
             maxlength="${o$3(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o$3(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o$3(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o$3(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

package/components/input/demo/index.min.js

@@ -5087,6 +5087,13 @@ class BaseInput extends i {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5652,9 +5659,9 @@ class BaseInput extends i {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -7012,7 +7019,7 @@ class AuroInput extends BaseInput {
             pattern="${o$3(this.definePattern())}"
             maxlength="${o$3(this.maxLength ? this.maxLength : undefined)}"
             minlength="${o$3(this.minLength ? this.minLength : undefined)}"
-            inputMode="${o$3(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${o$3(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

package/components/input/demo/readme.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/dist/base-input.d.ts

@@ -107,6 +107,12 @@ export default class BaseInput extends LitElement {
         id: {
             type: StringConstructor;
         };
+        /** Exposes inputmode attribute for input.  */
+        inputmode: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
         /**
          * Defines the language of an element.
          */
@@ -442,6 +448,7 @@ export default class BaseInput extends LitElement {
      */
     private configureDataForType;
     lengthForType: any;
+    inputmode: any;
     /**
      * Validates against list of supported this.allowedInputTypes; return type=text if invalid request.
      * @private

package/components/input/dist/index.js

@@ -5011,6 +5011,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5576,9 +5583,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -6936,7 +6943,7 @@ class AuroInput extends BaseInput {
             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)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

package/components/input/dist/registered.js

@@ -5011,6 +5011,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -5576,9 +5583,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -6936,7 +6943,7 @@ class AuroInput extends BaseInput {
             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)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"

package/components/menu/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/README.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/demo/api.md

@@ -63,7 +63,6 @@
 | [onDark](#onDark)   | `onDark`   | `Boolean` | false   | If set to true, the component will render with a dark theme. |
 | [required](#required) | `required` | `Boolean` | false   | Defines element as required.                     |
 | [tabIndex](#tabIndex) | `tabIndex` | `number`  | -1      |                                                  |
-| [touched](#touched)  | `touched`  | `boolean` | false   |                                                  |
 | [value](#value)    | `value`    | `string`  |         |                                                  |
 
 ## Methods

package/components/radio/demo/api.min.js

@@ -220,9 +220,15 @@ class AuroRadio extends i$2 {
         type: Number,
         reflect: true
       },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/radio/demo/index.min.js

@@ -195,9 +195,15 @@ class AuroRadio extends i$2 {
         type: Number,
         reflect: true
       },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/radio/demo/readme.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/dist/auro-radio.d.ts

@@ -49,9 +49,14 @@ export class AuroRadio extends LitElement {
             type: NumberConstructor;
             reflect: boolean;
         };
+        /**
+         * Whether or not the radio button has been touched by the user.
+         * @private
+         */
         touched: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: boolean;
         };
     };
     /**

package/components/radio/dist/index.js

@@ -155,9 +155,15 @@ class AuroRadio extends LitElement {
         type: Number,
         reflect: true
       },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/radio/dist/registered.js

@@ -155,9 +155,15 @@ class AuroRadio extends LitElement {
         type: Number,
         reflect: true
       },
+
+      /**
+       * Whether or not the radio button has been touched by the user.
+       * @private
+       */
       touched: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: false
       }
     };
   }

package/components/select/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0-beta.2/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.3.0/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {