fix(input): only apply the shape to the outline fill in ionic theme (#29482)

Issue number: internal

---------

## What is the current behavior?
The shape styles are being applied when the `fill` is unset in the
`ionic` theme. This is incorrect per the input UX requirements as shape
should only apply when `fill` is set to `"outline"`. This is made
apparent when looking at the existing styles for `disabled`.

## What is the new behavior?
- Only apply the shape styles to the `"outline"` fill
- Move the use of the `--background` css variable to the native wrapper
since this is what we use to style both the disabled and readonly states

| Before | After |
| ---| ---|
|
![before](https://github.com/ionic-team/ionic-framework/assets/6577830/44b6e7e4-70f4-49d5-844f-a015b7284ed5)
|
![after](https://github.com/ionic-team/ionic-framework/assets/6577830/06ac9431-17f4-4741-8ceb-19b40d8ba7d9)
|

I am not sure why this wasn't caught with the shape additions, but it's
probably because the minimum pixel ratio was not met.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

core/src/components.d.ts

@@ -1471,7 +1471,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
+          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
@@ -6751,7 +6751,7 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
+          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**

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

@@ -53,6 +53,13 @@
    * input + label.
    */
   border-bottom: none;
+
+  /**
+   * Do not show a background on the input wrapper as
+   * this includes the label, instead we apply the
+   * background to the native wrapper.
+   */
+  background: transparent;
 }
 
 :host(.input-fill-outline.input-shape-round) .label-text-wrapper {
@@ -80,9 +87,16 @@
 }
 
 :host(.input-fill-outline) .native-wrapper {
+  @include border-radius(inherit);
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   min-height: 40px;
+
+  /**
+  * Apply the background to the native input
+  * wrapper to only style the input.
+  */
+  background: var(--background);
 }
 
 // Input Fill: Outline, Outline Container
@@ -128,21 +142,19 @@
   margin-inline-start: 8px;
 }
 
-// Input - Disabled
+// Input Shapes
-// ----------------------------------------------------------------
+// --------------------------------------------------
 
-:host(.input-fill-outline.input-disabled) {
+:host(.input-fill-outline.input-shape-soft) {
-  // color for the text within the input
+  --border-radius: #{$ionic-border-radius-rounded-medium};
-  --color: #{$ionic-color-neutral-400};
-  --background: transparent;
 }
 
-:host(.input-fill-outline.input-disabled) .native-wrapper {
+:host(.input-fill-outline.input-shape-round) {
-  --background: #{$ionic-color-neutral-10};
+  --border-radius: #{$ionic-border-radius-rounded-full};
+}
 
-  @include border-radius(inherit);
+:host(.input-fill-outline.input-shape-rectangular) {
-
+  --border-radius: #{$ionic-border-radius-square};
-  background: var(--background);
 }
 
 // Input Focus

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

@@ -101,21 +101,6 @@
   display: none;
 }
 
-// Ionic Input Shapes
-// --------------------------------------------------
-
-:host(.input-shape-soft) {
-  --border-radius: #{$ionic-border-radius-rounded-medium};
-}
-
-:host(.input-shape-round) {
-  --border-radius: #{$ionic-border-radius-rounded-full};
-}
-
-:host(.input-shape-rectangular) {
-  --border-radius: #{$ionic-border-radius-square};
-}
-
 // Input Bottom Content
 // ----------------------------------------------------------------
 

core/src/components/input/input.tsx

@@ -249,6 +249,7 @@ export class Input implements ComponentInterface {
    * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully
    * rounded corners, or `"rectangular"` for an input without rounded corners.
    * Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
+   * Only applies when the fill is set to `"solid"` or `"outline"`.
    */
   @Prop() shape?: 'soft' | 'round' | 'rectangular';