diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss
index d749926339..cccc28bc26 100644
--- a/core/src/components/input/input.ionic.outline.scss
+++ b/core/src/components/input/input.ionic.outline.scss
@@ -20,6 +20,16 @@
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
diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 411599422f..42e9d5bb51 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -9,6 +9,7 @@
:host {
--border-width: #{$ionic-border-size-small};
--border-color: #{$ionic-color-neutral-300};
+ --highlight-color-valid: #{$ionic-color-success-400};
--highlight-color-invalid: #{$ionic-color-error-400};
--text-color-invalid: #{$ionic-color-error-600};
}
@@ -20,6 +21,16 @@
min-height: 48px;
}
+// Input Bottom Content
+// ----------------------------------------------------------------
+
+.input-bottom {
+ @include padding-horizontal(0, 0);
+
+ // TODO(FW-6112): Update it to `$ionic-font-weight-medium` when it's available
+ font-weight: var(--ionic-font-weight-medium, 500);
+}
+
// Input Hint Text
// ----------------------------------------------------------------
@@ -27,6 +38,10 @@
color: tokens.$ionic-color-neutral-600;
}
+:host(.has-focus.ion-valid) .helper-text {
+ color: #{tokens.$ionic-color-success-800};
+}
+
:host(.ion-touched.ion-invalid) .error-text {
color: var(--text-color-invalid);
}
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png
index fc24853efb..c77e59c992 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 502516f9bc..1085660dc4 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png
index 22af658a60..b7c2a42370 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 79257c241b..d5a4c17b82 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a11cdc1bca..64efa12213 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png
index 23fd2f4e72..006ad74a31 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 9501df02e7..ed47fe5a3b 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 75c38b841a..6cbeffc8eb 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index e2a501d68b..4c05452d1e 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-error-custom-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b760f53d3f..b886c5f36d 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
index f3bbf2e529..6c98b6b677 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
index 4f74da008a..a52f12c342 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 08ca55434e..fbb9485547 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 93e76e9194..6f94fc3e5e 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
index e47733f1a5..1d67fb7d1e 100644
Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts b/core/src/components/input/test/highlight/input.e2e.ts
index 60ac42fe31..ef540e2d04 100644
--- a/core/src/components/input/test/highlight/input.e2e.ts
+++ b/core/src/components/input/test/highlight/input.e2e.ts
@@ -348,6 +348,25 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('input: highlights'), () => {
test.describe('input: no fill', () => {
+ test('should render valid state correctly', async ({ page }) => {
+ await page.setContent(
+ `
+