From 621dc13f43e16b4b19281a90cb8b44269393bb01 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 31 Oct 2022 15:38:03 +0000
Subject: [PATCH 1/8] feat(input): add new js and css props

---
 angular/src/directives/proxies.ts    |  4 +-
 core/api.txt                         | 15 +++++++
 core/src/components.d.ts             | 64 ++++++++++++++++++++++++++++
 core/src/components/input/input.scss |  9 ++++
 core/src/components/input/input.tsx  | 48 +++++++++++++++++++++
 packages/vue/src/proxies.ts          |  8 ++++
 6 files changed, 146 insertions(+), 2 deletions(-)

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index c72ceeb3a28..d95669949a8 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -856,14 +856,14 @@ where the user's interaction is typing.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'justify', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
   selector: 'ion-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value']
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'justify', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
 })
 export class IonInput {
   protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index 17fd18ae3c6..815479b9f37 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -527,10 +527,17 @@ ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-input,prop,counter,boolean,false,false,false
+ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-input,prop,debounce,number,0,false,false
 ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
+ion-input,prop,errorText,string | undefined,undefined,false,false
+ion-input,prop,helperText,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
+ion-input,prop,justify,"end" | "space-between" | "start",'start',false,false
+ion-input,prop,label,string | undefined,undefined,false,false
+ion-input,prop,labelPlacement,"end" | "floating" | "stacked" | "start",'start',false,false
 ion-input,prop,max,number | string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,number | string | undefined,undefined,false,false
@@ -542,6 +549,7 @@ ion-input,prop,pattern,string | undefined,undefined,false,false
 ion-input,prop,placeholder,string | undefined,undefined,false,false
 ion-input,prop,readonly,boolean,false,false,false
 ion-input,prop,required,boolean,false,false,false
+ion-input,prop,shape,"round" | undefined,undefined,false,false
 ion-input,prop,size,number | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
@@ -554,7 +562,14 @@ ion-input,event,ionChange,InputChangeEventDetail,true
 ion-input,event,ionFocus,FocusEvent,true
 ion-input,event,ionInput,Event | InputEvent,true
 ion-input,css-prop,--background
+ion-input,css-prop,--border-color
+ion-input,css-prop,--border-radius
+ion-input,css-prop,--border-style
+ion-input,css-prop,--border-width
 ion-input,css-prop,--color
+ion-input,css-prop,--highlight-color-focused
+ion-input,css-prop,--highlight-color-invalid
+ion-input,css-prop,--highlight-color-valid
 ion-input,css-prop,--padding-bottom
 ion-input,css-prop,--padding-end
 ion-input,css-prop,--padding-start
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 27d3d7405e3..32b8a504e8a 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1073,6 +1073,14 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+         */
+        "counter": boolean;
+        /**
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+         */
+        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
@@ -1085,14 +1093,34 @@ export namespace Components {
           * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
          */
         "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Text that is placed under the input and displayed when an error is detected.
+         */
+        "errorText"?: string;
         /**
           * Returns the native `<input>` element used under the hood.
          */
         "getInputElement": () => Promise<HTMLInputElement>;
+        /**
+          * Text that is placed under the input and displayed when no error is detected.
+         */
+        "helperText"?: string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. In other words, this property is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+         */
+        "justify": 'start' | 'end' | 'space-between';
+        /**
+          * The visible label associated with the input.
+         */
+        "label"?: string;
+        /**
+          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+         */
+        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked';
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
@@ -1141,6 +1169,10 @@ export namespace Components {
           * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The shape of the input. If "round" it will have increased border radius.
+         */
+        "shape"?: 'round';
         /**
           * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
          */
@@ -4879,6 +4911,14 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+         */
+        "counter"?: boolean;
+        /**
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+         */
+        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
@@ -4891,10 +4931,30 @@ declare namespace LocalJSX {
           * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
          */
         "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Text that is placed under the input and displayed when an error is detected.
+         */
+        "errorText"?: string;
+        /**
+          * Text that is placed under the input and displayed when no error is detected.
+         */
+        "helperText"?: string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. In other words, this property is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+         */
+        "justify"?: 'start' | 'end' | 'space-between';
+        /**
+          * The visible label associated with the input.
+         */
+        "label"?: string;
+        /**
+          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+         */
+        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked';
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
@@ -4959,6 +5019,10 @@ declare namespace LocalJSX {
           * If `true`, the user must fill in a value before submitting a form.
          */
         "required"?: boolean;
+        /**
+          * The shape of the input. If "round" it will have increased border radius.
+         */
+        "shape"?: 'round';
         /**
           * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
          */
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index b08914f1b1d..570407df233 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -18,6 +18,15 @@
    * @prop --placeholder-font-style: Font style of the input placeholder text
    * @prop --placeholder-font-weight: Font weight of the input placeholder text
    * @prop --placeholder-opacity: Opacity of the input placeholder text
+   *
+   * @prop --highlight-color-focused: The color of the highlight on the input when focused
+   * @prop --highlight-color-valid: The color of the highlight on the input when valid
+   * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
+   *
+   * @prop --border-color: Color of the input border
+   * @prop --border-radius: Radius of the input border
+   * @prop --border-style: Style of the input border
+   * @prop --border-width: Width of the input border
    */
   --placeholder-color: initial;
   --placeholder-font-style: initial;
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 528871a9a5c..4aaa0656c81 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -90,6 +90,17 @@ export class Input implements ComponentInterface {
    */
   @Prop() clearOnEdit?: boolean;
 
+  /**
+   * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+   */
+  @Prop() counter = false;
+
+  /**
+   * A callback used to format the counter text.
+   * By default the counter text is set to "itemLength / maxLength".
+   */
+  @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
+
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
    */
@@ -117,6 +128,11 @@ export class Input implements ComponentInterface {
    */
   @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 
+  /**
+   * Text that is placed under the input and displayed when an error is detected.
+   */
+  @Prop() errorText?: string;
+
   /**
    * A hint to the browser for which keyboard to display.
    * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
@@ -124,6 +140,33 @@ export class Input implements ComponentInterface {
    */
   @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
 
+  /**
+   * Text that is placed under the input and displayed when no error is detected.
+   */
+  @Prop() helperText?: string;
+
+  /**
+   * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. In other words, this property is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`.
+   * `'start'`: The label and input are packed on the left in LTR and on the right in RTL.
+   * `'end'`: The label and input are packed on the right in LTR and on the left in RTL.
+   * `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+   */
+  @Prop() justify: 'start' | 'end' | 'space-between' = 'start';
+
+  /**
+   * The visible label associated with the input.
+   */
+  @Prop() label?: string;
+
+  /**
+   * Where to place the label relative to the input.
+   * `'start'`: The label will appear to the left of the input in LTR and to the right in RTL.
+   * `'end'`: The label will appear to the right of the input in LTR and to the left in RTL.
+   * `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.
+   * `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+   */
+  @Prop() labelPlacement: 'start' | 'end' | 'floating' | 'stacked' = 'start';
+
   /**
    * The maximum value, which must not be less than its minimum (min attribute) value.
    */
@@ -176,6 +219,11 @@ export class Input implements ComponentInterface {
    */
   @Prop() required = false;
 
+  /**
+   * The shape of the input. If "round" it will have increased border radius.
+   */
+  @Prop() shape?: 'round';
+
   /**
    * If `true`, the element will have its spelling and grammar checked.
    */
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 38214f38e75..98a532e14cd 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -396,10 +396,17 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
   'autofocus',
   'clearInput',
   'clearOnEdit',
+  'counter',
+  'counterFormatter',
   'debounce',
   'disabled',
   'enterkeyhint',
+  'errorText',
   'inputmode',
+  'helperText',
+  'justify',
+  'label',
+  'labelPlacement',
   'max',
   'maxlength',
   'min',
@@ -410,6 +417,7 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
   'placeholder',
   'readonly',
   'required',
+  'shape',
   'spellcheck',
   'step',
   'size',

From d24428c5bfdfe93efbfacaa6cd17dc8ec7447f56 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 31 Oct 2022 15:43:37 +0000
Subject: [PATCH 2/8] chore(): copy updates

---
 core/src/components.d.ts            | 4 ++--
 core/src/components/input/input.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 32b8a504e8a..43b4dfa2c04 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1110,7 +1110,7 @@ export namespace Components {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. In other words, this property is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
@@ -4944,7 +4944,7 @@ declare namespace LocalJSX {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. In other words, this property is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 4aaa0656c81..306ac6eff9f 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -146,7 +146,7 @@ export class Input implements ComponentInterface {
   @Prop() helperText?: string;
 
   /**
-   * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. In other words, this property is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`.
+   * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`.
    * `'start'`: The label and input are packed on the left in LTR and on the right in RTL.
    * `'end'`: The label and input are packed on the right in LTR and on the left in RTL.
    * `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.

From 8d7f0c42d5db721074d9879ae2730263c5ec420d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 31 Oct 2022 15:00:53 -0400
Subject: [PATCH 3/8] feat(input): add missing fixed label

---
 core/api.txt                        | 2 +-
 core/src/components.d.ts            | 8 ++++----
 core/src/components/input/input.tsx | 3 ++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 815479b9f37..7b77cb42331 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -537,7 +537,7 @@ ion-input,prop,helperText,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,justify,"end" | "space-between" | "start",'start',false,false
 ion-input,prop,label,string | undefined,undefined,false,false
-ion-input,prop,labelPlacement,"end" | "floating" | "stacked" | "start",'start',false,false
+ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
 ion-input,prop,max,number | string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,number | string | undefined,undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 43b4dfa2c04..0f31b61bd3d 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1118,9 +1118,9 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
-        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked';
+        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
@@ -4952,9 +4952,9 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+          * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
-        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked';
+        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 306ac6eff9f..a829e6a4b6e 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -164,8 +164,9 @@ export class Input implements ComponentInterface {
    * `'end'`: The label will appear to the right of the input in LTR and to the left in RTL.
    * `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.
    * `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+   * `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
    */
-  @Prop() labelPlacement: 'start' | 'end' | 'floating' | 'stacked' = 'start';
+  @Prop() labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed' = 'start';
 
   /**
    * The maximum value, which must not be less than its minimum (min attribute) value.

From 563f177ed581bb6768d6549b2bd4897c31d7da9e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 1 Nov 2022 11:48:15 -0400
Subject: [PATCH 4/8] Update core/src/components/input/input.tsx

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
---
 core/src/components/input/input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index a829e6a4b6e..baa65bd7e99 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -149,7 +149,7 @@ export class Input implements ComponentInterface {
    * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`.
    * `'start'`: The label and input are packed on the left in LTR and on the right in RTL.
    * `'end'`: The label and input are packed on the right in LTR and on the left in RTL.
-   * `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+   * `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element is on can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
    */
   @Prop() justify: 'start' | 'end' | 'space-between' = 'start';
 

From e1696aff2043b37bdc1569f8e5adf3f454feed1e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 1 Nov 2022 15:49:41 +0000
Subject: [PATCH 5/8] chore(): run build

---
 core/src/components.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 0f31b61bd3d..c2be0bfcbfc 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1110,7 +1110,7 @@ export namespace Components {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element is on can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
@@ -4944,7 +4944,7 @@ declare namespace LocalJSX {
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
         /**
-          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
+          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element is on can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**

From f556aee5c77ee8074b5c07690a0c67acd5f1bc9d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 1 Nov 2022 16:23:00 +0000
Subject: [PATCH 6/8] chore(input): remove justify property

---
 angular/src/directives/proxies.ts   | 4 ++--
 core/api.txt                        | 1 -
 core/src/components.d.ts            | 8 --------
 core/src/components/input/input.tsx | 8 --------
 packages/vue/src/proxies.ts         | 1 -
 5 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index d95669949a8..4be734e7c5e 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -856,14 +856,14 @@ where the user's interaction is typing.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'justify', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
   selector: 'ion-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'justify', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
 })
 export class IonInput {
   protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index 7b77cb42331..e45617bfd70 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -535,7 +535,6 @@ ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "sea
 ion-input,prop,errorText,string | undefined,undefined,false,false
 ion-input,prop,helperText,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
-ion-input,prop,justify,"end" | "space-between" | "start",'start',false,false
 ion-input,prop,label,string | undefined,undefined,false,false
 ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
 ion-input,prop,max,number | string | undefined,undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c2be0bfcbfc..da8910c01b8 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1109,10 +1109,6 @@ export namespace Components {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-        /**
-          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element is on can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
-         */
-        "justify": 'start' | 'end' | 'space-between';
         /**
           * The visible label associated with the input.
          */
@@ -4943,10 +4939,6 @@ declare namespace LocalJSX {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-        /**
-          * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`. `'start'`: The label and input are packed on the left in LTR and on the right in RTL. `'end'`: The label and input are packed on the right in LTR and on the left in RTL. `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element is on can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
-         */
-        "justify"?: 'start' | 'end' | 'space-between';
         /**
           * The visible label associated with the input.
          */
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index baa65bd7e99..0e8a606f1bd 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -145,14 +145,6 @@ export class Input implements ComponentInterface {
    */
   @Prop() helperText?: string;
 
-  /**
-   * How to pack the label and the input within a line. This property only applies when the input and label are on the same line. As a result, it is ignored when `labelPlacement` is set to `'floating'` or `'stacked'`.
-   * `'start'`: The label and input are packed on the left in LTR and on the right in RTL.
-   * `'end'`: The label and input are packed on the right in LTR and on the left in RTL.
-   * `'space-between'`: The label and input are placed at either end of the line with empty space between the elements. Which end each element is on can be configured using the `'start'` or `'end'` values on the `labelPlacement` property.
-   */
-  @Prop() justify: 'start' | 'end' | 'space-between' = 'start';
-
   /**
    * The visible label associated with the input.
    */
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 98a532e14cd..bd8918c5269 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -404,7 +404,6 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
   'errorText',
   'inputmode',
   'helperText',
-  'justify',
   'label',
   'labelPlacement',
   'max',

From 6b8131a968b8a0db9f867778acb7230d6706f70c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 2 Nov 2022 13:48:35 -0400
Subject: [PATCH 7/8] Update core/src/components/input/input.tsx

Co-authored-by: Sean Perkins <sean@ionic.io>
---
 core/src/components/input/input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 0e8a606f1bd..d9a5dd05346 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -213,7 +213,7 @@ export class Input implements ComponentInterface {
   @Prop() required = false;
 
   /**
-   * The shape of the input. If "round" it will have increased border radius.
+   * The shape of the input. If "round" it will have an increased border radius.
    */
   @Prop() shape?: 'round';
 

From e0b5cd6dcecc834cf9c5e363001e81f864d98e9a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 2 Nov 2022 17:51:39 +0000
Subject: [PATCH 8/8] feat(input): add missing fill property

---
 angular/src/directives/proxies.ts   |  4 ++--
 core/api.txt                        |  1 +
 core/src/components.d.ts            | 12 ++++++++++--
 core/src/components/input/input.tsx |  6 ++++++
 packages/vue/src/proxies.ts         |  1 +
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 4be734e7c5e..97c1ef3c149 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -856,14 +856,14 @@ where the user's interaction is typing.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
   selector: 'ion-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
+  inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
 })
 export class IonInput {
   protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index e45617bfd70..64229865812 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -533,6 +533,7 @@ ion-input,prop,debounce,number,0,false,false
 ion-input,prop,disabled,boolean,false,false,false
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-input,prop,errorText,string | undefined,undefined,false,false
+ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-input,prop,helperText,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,label,string | undefined,undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index da8910c01b8..4b5a222fc83 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1097,6 +1097,10 @@ export namespace Components {
           * Text that is placed under the input and displayed when an error is detected.
          */
         "errorText"?: string;
+        /**
+          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+         */
+        "fill"?: 'outline' | 'solid';
         /**
           * Returns the native `<input>` element used under the hood.
          */
@@ -1166,7 +1170,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The shape of the input. If "round" it will have increased border radius.
+          * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
         /**
@@ -4931,6 +4935,10 @@ declare namespace LocalJSX {
           * Text that is placed under the input and displayed when an error is detected.
          */
         "errorText"?: string;
+        /**
+          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+         */
+        "fill"?: 'outline' | 'solid';
         /**
           * Text that is placed under the input and displayed when no error is detected.
          */
@@ -5012,7 +5020,7 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * The shape of the input. If "round" it will have increased border radius.
+          * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
         /**
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index d9a5dd05346..5c5ec9cd2f6 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -133,6 +133,12 @@ export class Input implements ComponentInterface {
    */
   @Prop() errorText?: string;
 
+  /**
+   * The fill for the item. If `'solid'` the item will have a background. If
+   * `'outline'` the item will be transparent with a border. Only available in `md` mode.
+   */
+  @Prop() fill?: 'outline' | 'solid';
+
   /**
    * A hint to the browser for which keyboard to display.
    * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index bd8918c5269..420bbe8ff20 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -402,6 +402,7 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
   'disabled',
   'enterkeyhint',
   'errorText',
+  'fill',
   'inputmode',
   'helperText',
   'label',