feat(input): add ionic theme styles and size property

core/api.txt

@@ -629,7 +629,7 @@ ion-input,prop,placeholder,string | undefined,undefined,false,false
 ion-input,prop,readonly,boolean,false,false,true
 ion-input,prop,required,boolean,false,false,false
 ion-input,prop,shape,"round" | undefined,undefined,false,false
-ion-input,prop,size,"large" | undefined,undefined,false,false
+ion-input,prop,size,"large" | "medium" | undefined,'medium',false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,theme,"ios" | "md" | "ionic",undefined,false,false

core/src/components.d.ts

@@ -1475,9 +1475,9 @@ export namespace Components {
          */
         "shape"?: 'round';
         /**
-          * The size of the input. If "large", it will have an increased height. By default the size is unset. This property only applies to the `"ionic"` theme.
+          * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
          */
-        "size"?: 'large';
+        "size"?: 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -6747,9 +6747,9 @@ declare namespace LocalJSX {
          */
         "shape"?: 'round';
         /**
-          * The size of the input. If "large", it will have an increased height. By default the size is unset. This property only applies to the `"ionic"` theme.
+          * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
          */
-        "size"?: 'large';
+        "size"?: 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */

core/src/components/input/input.ionic.scss

@@ -19,10 +19,46 @@
 // Ionic Input Sizes
 // --------------------------------------------------
 
+:host(.input-size-medium) .native-wrapper {
+  min-height: 40px;
+}
+
 :host(.input-size-large) .native-wrapper {
   min-height: 48px;
 }
 
+// Target area
+// --------------------------------------------------
+:host .native-wrapper::after {
+  @include position(50%, 0, null, 0);
+
+  position: absolute;
+
+  height: 100%;
+  min-height: 48px;
+
+  transform: translateY(-50%);
+
+  content: "";
+
+  // Cursor should match the native input when hovering over the target area.
+  cursor: text;
+
+  z-index: 1;
+}
+
+::slotted([slot="start"]),
+::slotted([slot="end"]),
+.input-clear-icon {
+  /**
+   * The target area has a z-index of 1, so the slotted elements 
+   * should be higher. Otherwise, the slotted elements will not 
+   * be interactable. This is especially important for the clear
+   * button, which should be clickable.
+   */
+  z-index: 2;
+}
+
 // Input Clear Button
 // ----------------------------------------------------------------
 

core/src/components/input/input.tsx

@@ -263,9 +263,9 @@ export class Input implements ComponentInterface {
 
   /**
    * The size of the input. If "large", it will have an increased height. By default the
-   * size is unset. This property only applies to the `"ionic"` theme.
+   * size is medium. This property only applies to the `"ionic"` theme.
    */
-  @Prop() size?: 'large';
+  @Prop() size?: 'medium' | 'large' = 'medium';
 
   /**
    * The type of control to display. The default type is text.

core/src/components/input/test/size/index.html

@@ -58,6 +58,18 @@ <h2>Outline: No Size</h2>
             <ion-input fill="outline" label="Email"></ion-input>
           </div>
 
+          <div class="grid-item">
+            <h2>No Fill: No Size, Round Shape</h2>
+            <ion-input shape="round" label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Outline: No Size, Round Shape</h2>
+            <ion-input fill="outline" shape="round" label="Email"></ion-input>
+          </div>
+        </div>
+
+        <div class="grid">
           <div class="grid-item">
             <h2>No Fill: Large Size</h2>
             <ion-input size="large" label="Email"></ion-input>

core/src/components/input/test/size/input.e2e.ts

@@ -6,6 +6,71 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input: size'), () => {
+    test.describe('input: size medium', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            label="Email"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-medium`));
+      });
+      test('should render correctly with stacked label', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-medium-label-stacked`));
+      });
+      test('should not have visual regressions with fill outline', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            fill="outline"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-medium-outline`));
+      });
+      test('should not have visual regressions with fill outline and round shape', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-input
+            fill="outline"
+            shape="round"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-input>
+        `,
+          config
+        );
+
+        const input = page.locator('ion-input');
+        await expect(input).toHaveScreenshot(screenshot(`input-size-medium-outline-round`));
+      });
+    });
+
     test.describe('input: size large', () => {
       test('should not have visual regressions', async ({ page }) => {
         await page.setContent(