add enterkeyhint

cspell.json

@@ -31,6 +31,7 @@
     "Docsify",
     "dropdowns",
     "easings",
+    "enterkeyhint",
     "eqeqeq",
     "erroneou",
     "esbuild",

docs/resources/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `button` part to `<sl-radio-button>`
 - Added custom validity examples and tests to `<sl-checkbox>`, `<sl-radio>`, and `<sl-radio-button>`
+- Added `enterkeyhint` attribute to `<sl-input>` and `<sl-textarea>`
 - Fixed a bug that prevented `setCustomValidity()` from working with `<sl-radio-button>`
 - Fixed a bug where the right border of a checked `<sl-radio-button>` was the wrong color
 - Fixed a bug that prevented a number of properties, methods, etc. from being documented in `<sl-radio>` and `<sl-radio-button>`

src/components/input/input.ts

@@ -132,6 +132,12 @@ export default class SlInput extends LitElement {
   /** The input's autofocus attribute. */
   @property({ type: Boolean }) autofocus: boolean;
 
+  /**
+   * The input's enterkeyhint attribute. This can be used to customize the label or icon of the Enter key on virtual
+   * keyboards.
+   */
+  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+
   /** Enables spell checking on the input. */
   @property({ type: Boolean }) spellcheck: boolean;
 
@@ -350,6 +356,7 @@ export default class SlInput extends LitElement {
               ?autofocus=${this.autofocus}
               spellcheck=${ifDefined(this.spellcheck)}
               pattern=${ifDefined(this.pattern)}
+              enterkeyhint=${ifDefined(this.enterkeyhint)}
               inputmode=${ifDefined(this.inputmode)}
               aria-describedby="help-text"
               aria-invalid=${this.invalid ? 'true' : 'false'}

src/components/textarea/textarea.ts

@@ -101,6 +101,12 @@ export default class SlTextarea extends LitElement {
   /** The textarea's autofocus attribute. */
   @property({ type: Boolean }) autofocus: boolean;
 
+  /**
+   * The input's enterkeyhint attribute. This can be used to customize the label or icon of the Enter key on virtual
+   * keyboards.
+   */
+  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+
   /** Enables spell checking on the textarea. */
   @property({ type: Boolean }) spellcheck: boolean;
 
@@ -309,6 +315,7 @@ export default class SlTextarea extends LitElement {
               autocorrect=${ifDefined(this.autocorrect)}
               ?autofocus=${this.autofocus}
               spellcheck=${ifDefined(this.spellcheck)}
+              enterkeyhint=${ifDefined(this.enterkeyhint)}
               inputmode=${ifDefined(this.inputmode)}
               aria-describedby="help-text"
               @change=${this.handleChange}