diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss index d2e7cfe1ab5..338adc517e4 100644 --- a/core/src/components/input/input.ios.scss +++ b/core/src/components/input/input.ios.scss @@ -2,16 +2,19 @@ @import "./input.ios.vars"; :host { - --padding-top: #{$input-ios-padding-top}; - --padding-end: #{$input-ios-padding-end}; - --padding-bottom: #{$input-ios-padding-bottom}; - --padding-start: #{$input-ios-padding-start}; --border-width: #{$hairlines-width}; --border-color: #{$item-ios-border-color}; font-size: $input-ios-font-size; } +:host(.legacy-input) { + --padding-top: #{$input-ios-padding-top}; + --padding-end: #{$input-ios-padding-end}; + --padding-bottom: #{$input-ios-padding-bottom}; + --padding-start: #{$input-ios-padding-start}; +} + :host-context(.item-label-stacked), :host-context(.item-label-floating) { --padding-top: 8px; @@ -27,3 +30,20 @@ background-size: $input-ios-input-clear-icon-size; } + +// Input Wrapper +// ---------------------------------------------------------------- + +.input-wrapper { + min-height: 44px; +} + +/** + * Since the label sits on top of the element, + * the component needs to be taller otherwise the + * label will appear too close to the input text. + */ +:host(.input-label-placement-floating) .input-wrapper, +:host(.input-label-placement-stacked) .input-wrapper { + min-height: 56px; +} diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 6e58b9deae8..d8dfa9fbf5a 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -6,16 +6,19 @@ // -------------------------------------------------- :host { - --padding-top: #{$input-md-padding-top}; - --padding-end: #{$input-md-padding-end}; - --padding-bottom: #{$input-md-padding-bottom}; - --padding-start: #{$input-md-padding-start}; --border-width: 1px; --border-color: #{$item-md-border-color}; font-size: $input-md-font-size; } +:host(.legacy-input) { + --padding-top: #{$input-md-padding-top}; + --padding-end: #{$input-md-padding-end}; + --padding-bottom: #{$input-md-padding-bottom}; + --padding-start: #{$input-md-padding-start}; +} + :host-context(.item-label-stacked), :host-context(.item-label-floating) { --padding-top: 8px; @@ -37,3 +40,10 @@ .input-bottom .counter { letter-spacing: .0333333333em; } + +// Input Wrapper +// ---------------------------------------------------------------- + +.input-wrapper { + min-height: 56px; +} diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index b9db51ecc23..78414b0ce86 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -32,10 +32,10 @@ --placeholder-font-style: initial; --placeholder-font-weight: initial; --placeholder-opacity: .5; - --padding-top: 0; - --padding-end: 0; - --padding-bottom: 0; - --padding-start: 0; + --padding-top: 0px; + --padding-end: 0px; + --padding-bottom: 0px; + --padding-start: 0px; --background: transparent; --color: initial; --border-style: solid; @@ -43,6 +43,8 @@ --highlight-color-valid: #{ion-color(success, base)}; --highlight-color-invalid: #{ion-color(danger, base)}; + display: block; + position: relative; width: 100%; @@ -65,6 +67,10 @@ align-items: center; } +:host(.legacy-input) .native-input { + @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); +} + :host-context(ion-item:not(.item-label)) { --padding-start: 0; } @@ -78,7 +84,7 @@ .native-input { @include border-radius(var(--border-radius)); - @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + @include padding(0, 0, 0, 0); @include text-inherit(); display: inline-block; @@ -211,11 +217,17 @@ // Input Wrapper // ---------------------------------------------------------------- .input-wrapper { + @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + display: flex; flex-grow: 1; - align-items: center; + align-items: stretch; + + height: 100%; + + background: inherit; } // Input Bottom Content @@ -276,3 +288,140 @@ padding-inline-start: 16px; } + +// Input Label +// ---------------------------------------------------------------- + +.input-wrapper label { + /** + * The margin between the label and + * the input should be on the end + * when the label sits at the start. + */ + @include margin(0, 8px, 0, 0); + + /** + * This causes the label to take up + * the entire height of its container + * while still keeping the text centered. + */ + display: flex; + + align-items: center; + + transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); +} + +.input-wrapper input { + /** + * When the floating label appears on top of the + * input, we need to fade the input out so that the + * label does not overlap with the placeholder. + */ + transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +// Input Label Placement +// ---------------------------------------------------------------- + +/** + * Label is on the left of the input in LTR and + * on the right in RTL. + */ +:host(.input-label-placement-start) .input-wrapper { + flex-direction: row; +} + +/** + * Label is on the right of the input in LTR and + * on the left in RTL. + */ +:host(.input-label-placement-end) .input-wrapper { + flex-direction: row-reverse; +} + +/** + * The margin between the label and + * the input should be on the start + * when the label sits at the end. + */ +:host(.input-label-placement-end) label { + @include margin(0, 0, 0, 8px); +} + +/** + * Label is on the left of the input in LTR and + * on the right in RTL. Label also has a fixed width. + */ +:host(.input-label-placement-fixed) label { + @include margin(0, 0, 0, 0); + + flex: 0 0 100px; + + width: 100px; + min-width: 100px; + max-width: 200px; +} + +/** + * Stacked: Label sits above the input and is scaled down. + * Floating: Label sits over the input when the input has no + * value and is blurred. Label sits above the input and is scaled + * down when the input is focused or has a value. + * + */ +:host(.input-label-placement-stacked) .input-wrapper, +:host(.input-label-placement-floating) .input-wrapper { + flex-direction: column; + align-items: start; +} + +/** + * Ensures that the label animates + * up and to the left in LTR or + * up and to the right in RTL. + */ +:host(.input-label-placement-stacked) label, +:host(.input-label-placement-floating) label { + @include transform-origin(start, top); +} + +/** + * Ensures the input does not + * overlap the label. + */ +:host(.input-label-placement-stacked) input, +:host(.input-label-placement-floating) input { + @include margin(1px, 0, 0, 0); +} + +/** + * This makes the label sit over the input + * when the input is blurred and has no value. + */ +:host(.input-label-placement-floating) label { + @include transform(translateY(100%), scale(1)); +} + +/** + * The input should be hidden when the label + * is on top of the input. This prevents the label + * from overlapping any placeholder value. + */ +:host(.input-label-placement-floating) input { + opacity: 0; +} + +:host(.has-focus.input-label-placement-floating) input, +:host(.has-value.input-label-placement-floating) input { + opacity: 1; +} + +/** + * This makes the label sit above the input. + */ +:host(.input-label-placement-stacked) label, +:host(.has-focus.input-label-placement-floating) label, +:host(.has-value.input-label-placement-floating) label { + @include transform(translateY(50%), scale(.75)); +} diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index e1e0198987a..af2a5d3c8ff 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -555,7 +555,7 @@ export class Input implements ComponentInterface { } private renderInput() { - const { disabled, readonly, inputId } = this; + const { disabled, readonly, inputId, labelPlacement } = this; const mode = getIonMode(this); const value = this.getValue(); @@ -566,6 +566,7 @@ export class Input implements ComponentInterface { [mode]: true, 'has-value': this.hasValue(), 'has-focus': this.hasFocus, + [`input-label-placement-${labelPlacement}`]: true, })} >
diff --git a/core/src/components/input/test/a11y/index.html b/core/src/components/input/test/a11y/index.html index 0090accecdb..13480465cd9 100644 --- a/core/src/components/input/test/a11y/index.html +++ b/core/src/components/input/test/a11y/index.html @@ -17,6 +17,8 @@

Input - a11y

+ + diff --git a/core/src/components/input/test/bottom-content/index.html b/core/src/components/input/test/bottom-content/index.html index 377c232b7c4..fc6c2a6f6d7 100644 --- a/core/src/components/input/test/bottom-content/index.html +++ b/core/src/components/input/test/bottom-content/index.html @@ -73,6 +73,7 @@

Custom Error Color

error-text="Please enter a valid email" >
+

Counter

diff --git a/core/src/components/input/test/label-placement/index.html b/core/src/components/input/test/label-placement/index.html new file mode 100644 index 00000000000..f6a0062ed39 --- /dev/null +++ b/core/src/components/input/test/label-placement/index.html @@ -0,0 +1,95 @@ + + + + + Input - Label Placement + + + + + + + + + + + + + + Input - Label Placement + + + + +
+
+

Start

+ +
+ +
+

End

+ +
+ +
+

Fixed

+ +
+ +
+

Floating

+ +
+ +
+

Floating, No Value

+ +
+ +
+

Stacked

+ +
+ +
+

Stacked, No Value

+ +
+
+ + + + diff --git a/core/src/components/input/test/label-placement/input.e2e.ts b/core/src/components/input/test/label-placement/input.e2e.ts new file mode 100644 index 00000000000..f5ba3ad88a6 --- /dev/null +++ b/core/src/components/input/test/label-placement/input.e2e.ts @@ -0,0 +1,94 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('input: label placement start', () => { + test('label should appear on the starting side of the input', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-placement-start-${page.getSnapshotSettings()}.png`); + }); +}); + +test.describe('input: label placement end', () => { + test('label should appear on the ending side of the input', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-placement-end-${page.getSnapshotSettings()}.png`); + }); +}); + +test.describe('input: label placement fixed', () => { + test('label should appear on the starting side of the input and have a fixed width', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-placement-fixed-${page.getSnapshotSettings()}.png`); + }); +}); + +test.describe('input: label placement stacked', () => { + test('label should appear above the input when there is a value', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-placement-stacked-value-${page.getSnapshotSettings()}.png`); + }); + test('label should appear above the input when there is a no value', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot( + `input-placement-stacked-no-value-${page.getSnapshotSettings()}.png` + ); + }); +}); + +test.describe('input: label placement floating', () => { + test('label should appear above the input when there is a value', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot( + `input-placement-floating-value-${page.getSnapshotSettings()}.png` + ); + }); + test('label should appear on top of the input and hide the input when there is a no value', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot( + `input-placement-floating-no-value-${page.getSnapshotSettings()}.png` + ); + }); + test('label should appear on top of the input when the input is focused', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + const nativeInput = input.locator('input'); + + await nativeInput.click(); + await page.waitForChanges(); + + expect(await input.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `input-focused-placement-floating-no-value-${page.getSnapshotSettings()}.png` + ); + }); +}); diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f799bc38708 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2f2c2c3b57b Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..48cbf306775 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e5a39b46de9 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..7ee2d48582d Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..43b48c2ec20 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c5b813855b1 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5e5c44c5347 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..130562236d0 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8584876bcc5 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e8c5524a8a7 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5005c0437c0 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-focused-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c20de9df3f1 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..909895568ad Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b3b956a5b26 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..90f1366ebd9 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9caea3646e5 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..63fa7af24fd Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..96207600735 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..b0e85b6ebd3 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9bbd45f988f Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7a76cbfe648 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1d0a0f3d1b9 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..7c7ab6403da Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c863dc219f4 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..51f2c0bf3f4 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9e8f80ff20f Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4d1af9636ac Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c06aed9130d Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..28f1c3ae180 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..efe238be1f6 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..1b9f1148ad0 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..6bede250988 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f0ef13171ad Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..3eac19c0414 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..71a735144cd Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-fixed-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4bdf2d71f7e Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..69500f1ce1a Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ec9093dd837 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f5c03db7f80 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..18e513fbb1f Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..72c2c76d1ae Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b3bf56a8364 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e888ae849d0 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b42f8ec62d4 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..93da6fdd3de Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..7408b4e884d Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..86091d2f635 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-no-value-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..99e6783d75c Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..df4c7e25d78 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0881b9d3da0 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c9cc27e78ff Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..cdce9bf3fc9 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2f649ab992d Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..97a0051f359 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4769a907477 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1b1b1f900b5 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1da924bcdef Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..10d7e472784 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ad76b93324c Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-floating-value-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..cf510762113 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c5dbf12e8c4 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e2d224547df Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9f96ea856ec Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4ad361b6e4d Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..efb2efe2282 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..7ec3be222f6 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0092bcf99a9 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..afd164db3d5 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..403e06a5139 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..97acd064002 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a88dbaa44e4 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-no-value-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..99e6783d75c Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..df4c7e25d78 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0881b9d3da0 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c9cc27e78ff Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..cdce9bf3fc9 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2f649ab992d Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..97a0051f359 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4769a907477 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1b1b1f900b5 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1da924bcdef Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..10d7e472784 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ad76b93324c Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-stacked-value-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..3a4cf4dd2ba Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..9682c7b6956 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..de02528edd2 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8ed62ae00f0 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5779de2e971 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e59e29f49d7 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e261f92ecda Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e1914eabc29 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..976390c829d Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a9b9795d41f Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4641f7cc8e3 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..3183c47c753 Binary files /dev/null and b/core/src/components/input/test/label-placement/input.e2e.ts-snapshots/input-placement-start-md-rtl-Mobile-Safari-linux.png differ