- add fill solid to ionic theme input;

- move input.outline.scss to input.ionic.scss;
- add fill solid to states page;

Author: JoaoFerreira-FrontEnd

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

@@ -1,26 +1,128 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @use "./input.common";
-@forward "./input.ionic.outline.scss";
-
+@forward "./input.ionic.solid.scss";
 // Ionic Input
 // --------------------------------------------------
 
 :host {
   --color: #{globals.$ion-primitives-neutral-1200};
   --border-width: #{globals.$ion-border-size-025};
   --border-color: #{globals.$ion-primitives-neutral-500};
+  --border-radius: #{globals.$ion-border-radius-100};
   --highlight-color-valid: #{globals.$ion-semantics-success-900};
-  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
+  --highlight-color-invalid: #{globals.$ion-border-danger-default};
+  --padding-start: #{globals.$ion-space-300};
+  --padding-end: #{globals.$ion-space-300};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
   --background: #{globals.$ion-primitives-base-white};
 
   @include globals.typography(globals.$ion-body-md-regular);
 }
 
+// Input Outline Container
+// ----------------------------------------------------------------
+
+.input-outline {
+  @include globals.position(0, 0, 0, 0);
+  @include globals.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 Label Placement: Stacked
+// ----------------------------------------------------------------
+
+// This makes the label sit above the input.
+:host(.label-floating.input-label-placement-stacked) .label-text-wrapper {
+  @include globals.margin(0);
+  @include globals.padding(globals.$ion-space-100, null);
+}
+
+.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 globals.padding(0);
+
+  /**
+   * Outline inputs do not have a bottom border.
+   * Instead, they have a border that wraps the
+   * 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;
+}
+
+.label-text-wrapper {
+  /**
+   * The label should appear on top of an outline
+   * container that overlaps it so it is always clickable.
+   */
+  position: relative;
+}
+
+:host(.input-label-placement-stacked) .label-text-wrapper {
+  @include globals.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));
+}
+
+/**
+ * The bottom content should never have
+ * a border with the outline style.
+ */
+.input-bottom {
+  border-top: none;
+}
+
+.native-wrapper {
+  @include globals.border-radius(inherit);
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
+  min-height: globals.$ion-scale-1000;
+
+  /**
+  * Apply the background to the native input
+  * wrapper to only style the input.
+  */
+  background: var(--background);
+}
+
+
 // Ionic Input Sizes
 // --------------------------------------------------
 
+:host(.input-size-large) {
+  --padding-start: #{globals.$ion-space-400};
+  --padding-end: #{globals.$ion-space-400};
+}
+
+:host(.input-size-xlarge) {
+  --padding-start: #{globals.$ion-space-500};
+  --padding-end: #{globals.$ion-space-500};
+}
+
 :host(.input-size-medium) .native-wrapper {
   min-height: globals.$ion-scale-1000;
 }
@@ -33,6 +135,21 @@
   min-height: globals.$ion-scale-1400;
 }
 
+// Input Shapes
+// --------------------------------------------------
+
+:host(.input-shape-soft) {
+  --border-radius: #{globals.$ion-border-radius-200};
+}
+
+:host(.input-shape-round) {
+  --border-radius: #{globals.$ion-border-radius-400};
+}
+
+:host(.input-shape-rectangular) {
+  --border-radius: #{globals.$ion-border-radius-0};
+}
+
 // Ionic Input Password Toggle Sizes
 // --------------------------------------------------
 
@@ -50,7 +167,8 @@
 
 // Target area
 // --------------------------------------------------
-:host .native-wrapper::after {
+
+.native-wrapper::after {
   @include globals.position(50%, 0, null, 0);
 
   position: absolute;
@@ -78,6 +196,17 @@
   z-index: 2;
 }
 
+// Start/End Slots
+// ----------------------------------------------------------------
+
+::slotted([slot="start"]) {
+  margin-inline-end: globals.$ion-space-200;
+}
+
+::slotted([slot="end"]) {
+  margin-inline-start: globals.$ion-space-200;
+}
+
 // Input Clear Button
 // ----------------------------------------------------------------
 
@@ -225,6 +354,7 @@
 
 :host(.has-focus) {
   --border-color: #{globals.$ion-border-focus-default};
+  --border-width: #{globals.$ion-border-size-050};
 }
 
 :host(.has-focus) .input-highlight {

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

@@ -0,0 +1,51 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+// Input Fill: Solid
+// ----------------------------------------------------------------
+
+:host(.input-fill-solid) {
+  --background: #{globals.$ion-bg-input-bold-default};
+  --border-color: #{globals.$ion-bg-input-bold-default};
+}
+
+/**
+ * If the input has a validity state, the
+ * border should reflect that as a color.
+ */
+:host(.has-focus.input-fill-solid.ion-valid) .native-wrapper,
+:host(.input-fill-solid.ion-touched.ion-invalid) .native-wrapper{
+  --border-color: var(--highlight-color);
+}
+
+/**
+ * Background and border should be
+ * slightly darker on hover.
+ */
+@media (any-hover: hover) {
+  :host(:hover){
+    --border-color: #{globals.$ion-border-focus-default};
+  }
+}
+
+// Input - Disabled
+// ----------------------------------------------------------------
+
+:host(.input-fill-solid.input-disabled){
+  --background: #{globals.$ion-bg-input-bold-disabled};
+  --placeholder-color: #{globals.$ion-text-disabled};
+}
+
+// Input - Readonly
+// ----------------------------------------------------------------
+
+:host(.input-fill-solid.input-readonly) {
+  --background: #{globals.$ion-bg-input-bold-read-only};
+  --border-color: #{globals.$ion-bg-input-bold-read-only};
+}
+
+/**
+ * Background and border should be
+ * much darker on focus.
+ */
+:host(.input-fill-solid.has-focus){
+  --border-color: #{globals.$ion-border-focus-default};
+}