Specific input mode similar to type

Author: bjarnef

packages/uui-input/lib/uui-input.element.ts

@@ -24,6 +24,16 @@ export type InputType =
   | 'number'
   | 'color';
 
+export type InputMode =
+  | 'text'
+  | 'none'
+  | 'decimal'
+  | 'numeric'
+  | 'tel'
+  | 'search'
+  | 'email'
+  | 'url';
+
 /**
  * Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.
  * @element uui-input
@@ -169,7 +179,7 @@ export class UUIInputElement extends UUIFormControlMixin(
 
   /**
    * This property specifies the type of input that will be rendered.
-   * @type {'text' | 'tel'| 'url'| 'email'| 'password'| 'date'| 'month'| 'week'| 'time'| 'datetime-local'| 'number'| 'color'}
+   * @type {'text' | 'tel' | 'url' | 'email' | 'password' | 'date' | 'month' | 'week' | 'time' | 'datetime-local' | 'number' | 'color'}
    * @attr
    * @default text
    */
@@ -182,26 +192,33 @@ export class UUIInputElement extends UUIFormControlMixin(
   }
 
   /**
-   * Validates the input based on the Regex pattern
-   * @type {string}
+   * The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode|MDN} for further information
+   * @type {'text' | 'none' | 'decimal' | 'number' | 'tel' | 'search' | 'email' | 'url'}
    * @attr
+   * @default text
    */
   @property({ type: String })
-  pattern?: string;
+  get inputMode(): InputMode {
+    return this._inputMode;
+  }
+  set inputMode(value: InputMode) {
+    this._inputMode = value;
+  }
 
   /**
-   * The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode|MDN} for further information
+   * Validates the input based on the Regex pattern
    * @type {string}
    * @attr
    */
   @property({ type: String })
-  inputMode = '';
+  pattern?: string;
 
   @query('#input')
   _input!: HTMLInputElement;
 
   private _type: InputType = 'text';
+  private _inputMode: InputMode = 'text';
 
   constructor() {
     super();

packages/uui-input/lib/uui-input.story.ts

@@ -33,6 +33,18 @@ const meta: Meta = {
         'wha',
       ],
     },
+    inputMode: {
+      options: [
+        'text',
+        'none',
+        'decimal',
+        'numeric',
+        'tel',
+        'search',
+        'email',
+        'url',
+      ],
+    },
   },
   parameters: {
     readme: {