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

core/api.txt

@@ -616,7 +616,7 @@ 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
-ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
+ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,undefined,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
@@ -629,6 +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" | "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
@@ -658,6 +659,7 @@ ion-input,css-prop,--placeholder-color
 ion-input,css-prop,--placeholder-font-style
 ion-input,css-prop,--placeholder-font-weight
 ion-input,css-prop,--placeholder-opacity
+ion-input,css-prop,--text-color-invalid
 
 ion-input-password-toggle,shadow
 ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true

core/src/components.d.ts

@@ -1419,9 +1419,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. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * 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 ("...").  Defaults to "stacked" for the ionic theme, or "start" for all other themes.  In the ionic theme, only the values "stacked" and "floating" are supported.
          */
-        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
@@ -1474,6 +1474,10 @@ export namespace Components {
           * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * 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"?: 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -6675,7 +6679,7 @@ 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. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * 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 ("...").  Defaults to "stacked" for the ionic theme, or "start" for all other themes.  In the ionic theme, only the values "stacked" and "floating" are supported.
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -6742,6 +6746,10 @@ declare namespace LocalJSX {
           * The shape of the input. If "round" it will have an increased border radius.
          */
         "shape"?: 'round';
+        /**
+          * 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"?: 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */

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

@@ -0,0 +1,148 @@
+@import "./input.vars";
+@import "../../foundations/ionic.vars";
+
+// Input Fill: Outline (Ionic Theme)
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline) {
+  --border-radius: #{$ionic-border-radius-rounded-small};
+  --padding-start: 12px;
+  --padding-end: 12px;
+}
+
+:host(.input-fill-outline.input-size-large.input-shape-round) {
+  --padding-start: 16px;
+  --padding-end: 16px;
+}
+
+/**
+ * The bottom content should never have
+ * a border with the outline style.
+ */
+:host(.input-fill-outline) .input-bottom {
+  border-top: none;
+}
+
+:host(.input-fill-outline.input-shape-round) .input-bottom,
+:host(.input-fill-outline.input-label-placement-floating) .input-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text input.
+   */
+  @include padding-horizontal(var(--padding-start), var(--padding-end));
+}
+
+:host(.input-fill-outline) .input-wrapper {
+  /**
+   * For the ionic theme, the padding needs to sit on the
+   * native wrapper instead, so that it sits within the
+   * outline container but does not always affect the
+   * label text.
+   */
+  @include padding(0);
+
+  /**
+   * Outline inputs do not have a bottom border.
+   * Instead, they have a border that wraps the
+   * input + label.
+   */
+  border-bottom: none;
+}
+
+:host(.input-fill-outline.input-shape-round) .label-text-wrapper {
+  @include padding(null, var(--padding-end), null, var(--padding-start));
+}
+
+:host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
+  @include transform-origin(start, top);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% - var(--padding-start) - var(--padding-end));
+}
+
+:host(.input-fill-outline) .label-text-wrapper {
+  /**
+   * The label should appear on top of an outline
+   * container that overlaps it so it is always clickable.
+   */
+  position: relative;
+
+  color: #{$ionic-color-neutral-700};
+}
+
+:host(.input-fill-outline) .native-wrapper {
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
+  min-height: 40px;
+}
+
+// Input Fill: Outline, Outline Container
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline) .input-outline {
+  @include position(0, 0, 0, 0);
+  @include border-radius(var(--border-radius));
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  pointer-events: none;
+
+  border: var(--border-width) var(--border-style) var(--border-color);
+}
+
+// Input Fill: Outline, Label Placement: Stacked
+// ----------------------------------------------------------------
+
+// This makes the label sit above the input.
+:host(.label-floating.input-fill-outline.input-label-placement-stacked) .label-text-wrapper {
+  @include transform(translateY(0), scale(#{$form-control-label-stacked-scale}));
+  @include margin(0);
+
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc((100% - var(--padding-start) - var(--padding-end)) / #{$form-control-label-stacked-scale});
+}
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline) ::slotted([slot="start"]) {
+  margin-inline-end: 8px;
+}
+
+:host(.input-fill-outline) ::slotted([slot="end"]) {
+  margin-inline-start: 8px;
+}
+
+// Input - Disabled
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline.input-disabled) {
+  // color for the text within the input
+  --color: #{$ionic-color-neutral-400};
+  --background: transparent;
+}
+
+:host(.input-fill-outline.input-disabled) .native-wrapper {
+  --background: #{$ionic-color-neutral-10};
+
+  @include border-radius(inherit);
+
+  background: var(--background);
+}
+
+// Input Focus
+// ----------------------------------------------------------------
+
+:host(.input-fill-outline.has-focus) {
+  --border-width: #{tokens.$ionic-border-size-medium};
+}