@aurodesignsystem/auro-formkit 3.3.0-beta.2 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # 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)
+
+
+### Bug Fixes
+
+* improved touched state handling ([07ae52f](https://github.com/AlaskaAirlines/auro-formkit/commit/07ae52f6e2c9de4a99d3ed820dec9dc86fb6e091))
+* match `typeof event` to duplicate to bubble up in combobox [#576](https://github.com/AlaskaAirlines/auro-formkit/issues/576) ([0b6231b](https://github.com/AlaskaAirlines/auro-formkit/commit/0b6231bd52346d91a04088198fe6e8921c7ac299))
+* pr feedback Apr 28, 2025 ([2dcd705](https://github.com/AlaskaAirlines/auro-formkit/commit/2dcd70543c206229286a69364b7e503c6e12fb5f))
+* properly transport input on `strategy-change` in combobox ([23e079d](https://github.com/AlaskaAirlines/auro-formkit/commit/23e079d3f4ba5f22aaa8bd28cc80dd096c74e9b0))
+* render match word in bold in a combobox with dynamic menu [#551](https://github.com/AlaskaAirlines/auro-formkit/issues/551) ([63b8dac](https://github.com/AlaskaAirlines/auro-formkit/commit/63b8dac663377a4af4038ed2c5e09e34bf155409))
+
+
+### Features
+
+* implement touched state for radio and select components on user interaction ([2f4b8f6](https://github.com/AlaskaAirlines/auro-formkit/commit/2f4b8f66f097cfb932a07e5d37dd05fb6fbafaab))
+* surface fullscreenBreakpoint with new `disabled` value ([4f00b48](https://github.com/AlaskaAirlines/auro-formkit/commit/4f00b4808254490419ca6ae387344e49834ca896))
+* update form validation to be based on pristine/dirty instead of undefined and '' values ([fc0bade](https://github.com/AlaskaAirlines/auro-formkit/commit/fc0bade112a8b4e801b2851c27069592b0f024bc))
+
+
+### Performance Improvements
+
+* remove unnecessary variables ([87f3f80](https://github.com/AlaskaAirlines/auro-formkit/commit/87f3f80e17d6884a69726893bc4fc066d6934a94))
+
 # [3.3.0-beta.2](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2025-05-09)
 
 

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.2.8/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.min.js

@@ -149,6 +149,7 @@ class AuroCheckbox extends i$2 {
     this.disabled = false;
     this.error = false;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -225,6 +226,17 @@ class AuroCheckbox extends i$2 {
       value: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the checkbox has been interacted with.
+       * @type {boolean}
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -279,6 +291,7 @@ class AuroCheckbox extends i$2 {
    * @returns {void}
    */
   handleFocusin() {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
       bubbles: true,
       cancelable: false,
@@ -307,6 +320,7 @@ class AuroCheckbox extends i$2 {
   reset() {
     this.checked = false;
     this.error = false;
+    this.touched = false;
   }
 
   firstUpdated() {
@@ -796,6 +810,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -933,7 +948,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -1003,11 +1018,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -1028,7 +1049,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1039,7 +1060,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1118,7 +1139,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1398,6 +1419,14 @@ class AuroCheckboxGroup extends i$2 {
     this.horizontal = false;
     this.onDark = false;
 
+    /**
+     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    this.touched = false;
+
     /**
      * @private
      */
@@ -1587,6 +1616,8 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     this.addEventListener('auroCheckbox-focusin', () => {
+      this.touched = true;
+
       if (!this.value) {
         this.value = [];
       }

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

@@ -141,6 +141,7 @@ class AuroCheckbox extends i$2 {
     this.disabled = false;
     this.error = false;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -217,6 +218,17 @@ class AuroCheckbox extends i$2 {
       value: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the checkbox has been interacted with.
+       * @type {boolean}
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -271,6 +283,7 @@ class AuroCheckbox extends i$2 {
    * @returns {void}
    */
   handleFocusin() {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
       bubbles: true,
       cancelable: false,
@@ -299,6 +312,7 @@ class AuroCheckbox extends i$2 {
   reset() {
     this.checked = false;
     this.error = false;
+    this.touched = false;
   }
 
   firstUpdated() {
@@ -788,6 +802,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -925,7 +940,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -995,11 +1010,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -1020,7 +1041,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -1031,7 +1052,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1110,7 +1131,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1390,6 +1411,14 @@ class AuroCheckboxGroup extends i$2 {
     this.horizontal = false;
     this.onDark = false;
 
+    /**
+     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    this.touched = false;
+
     /**
      * @private
      */
@@ -1579,6 +1608,8 @@ class AuroCheckboxGroup extends i$2 {
     };
 
     this.addEventListener('auroCheckbox-focusin', () => {
+      this.touched = true;
+
       if (!this.value) {
         this.value = [];
       }

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.2.8/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-group.d.ts

@@ -91,6 +91,13 @@ export class AuroCheckboxGroup extends LitElement {
     required: boolean;
     horizontal: boolean;
     onDark: boolean;
+    /**
+     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    private touched;
     /**
      * @private
      */

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

@@ -55,6 +55,12 @@ export class AuroCheckbox extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * Indicates whether the checkbox has been interacted with.
+         * @type {boolean}
+         * @private
+         */
+        touched: boolean;
     };
     /**
      * This will register this element with the browser.
@@ -69,6 +75,7 @@ export class AuroCheckbox extends LitElement {
     disabled: boolean;
     error: boolean;
     onDark: boolean;
+    touched: boolean;
     /**
      * @private
      */

package/components/checkbox/dist/index.js

@@ -101,6 +101,7 @@ class AuroCheckbox extends LitElement {
     this.disabled = false;
     this.error = false;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -177,6 +178,17 @@ class AuroCheckbox extends LitElement {
       value: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the checkbox has been interacted with.
+       * @type {boolean}
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -231,6 +243,7 @@ class AuroCheckbox extends LitElement {
    * @returns {void}
    */
   handleFocusin() {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
       bubbles: true,
       cancelable: false,
@@ -259,6 +272,7 @@ class AuroCheckbox extends LitElement {
   reset() {
     this.checked = false;
     this.error = false;
+    this.touched = false;
   }
 
   firstUpdated() {
@@ -741,6 +755,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -878,7 +893,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -948,11 +963,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -973,7 +994,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -984,7 +1005,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1063,7 +1084,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1343,6 +1364,14 @@ class AuroCheckboxGroup extends LitElement {
     this.horizontal = false;
     this.onDark = false;
 
+    /**
+     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    this.touched = false;
+
     /**
      * @private
      */
@@ -1532,6 +1561,8 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     this.addEventListener('auroCheckbox-focusin', () => {
+      this.touched = true;
+
       if (!this.value) {
         this.value = [];
       }

package/components/checkbox/dist/registered.js

@@ -101,6 +101,7 @@ class AuroCheckbox extends LitElement {
     this.disabled = false;
     this.error = false;
     this.onDark = false;
+    this.touched = false;
 
     /**
      * @private
@@ -177,6 +178,17 @@ class AuroCheckbox extends LitElement {
       value: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the checkbox has been interacted with.
+       * @type {boolean}
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -231,6 +243,7 @@ class AuroCheckbox extends LitElement {
    * @returns {void}
    */
   handleFocusin() {
+    this.touched = true;
     this.dispatchEvent(new CustomEvent('auroCheckbox-focusin', {
       bubbles: true,
       cancelable: false,
@@ -259,6 +272,7 @@ class AuroCheckbox extends LitElement {
   reset() {
     this.checked = false;
     this.error = false;
+    this.touched = false;
   }
 
   firstUpdated() {
@@ -741,6 +755,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -878,7 +893,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -948,11 +963,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -973,7 +994,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -984,7 +1005,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -1063,7 +1084,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -1343,6 +1364,14 @@ class AuroCheckboxGroup extends LitElement {
     this.horizontal = false;
     this.onDark = false;
 
+    /**
+     * Indicates whether the checkbox group is in a dirty state (has been interacted with).
+     * @type {boolean}
+     * @default false
+     * @private
+     */
+    this.touched = false;
+
     /**
      * @private
      */
@@ -1532,6 +1561,8 @@ class AuroCheckboxGroup extends LitElement {
     };
 
     this.addEventListener('auroCheckbox-focusin', () => {
+      this.touched = true;
+
       if (!this.value) {
         this.value = [];
       }

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.2.8/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).