No Hint
@@ -73,6 +148,8 @@
Error Text
Error Text: Stacked
Error Text: Stacked
Error Text: Custom Color
Counter: with Helper
Counter: with Error
/**
* Rendering is different across modes
*/
-configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('input: helper text rendering'), () => {
test('should not have visual regressions when rendering helper text', async ({ page }) => {
await page.setContent(` {
);
const input = page.locator('ion-input');
- await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-solid-custom`));
+ await expect(input).toHaveScreenshot(screenshot(`input-fill-solid-custom`));
});
});
test.describe('input: fill outline', () => {
@@ -130,41 +109,23 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
const input = page.locator('ion-input');
await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-label-floating`));
});
- test('should not have visual regressions with shaped outline', async ({ page }) => {
- await page.setContent(
- `
- {
);
const input = page.locator('ion-input');
- await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-outline-custom`));
+ await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-custom`));
});
});
});
@@ -248,3 +209,42 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
});
});
});
+
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('input: ionic theme fill'), () => {
+ test('should not have visual regressions with outline fill and stacked label placement', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-outline-custom-highlight`));
+ });
+ });
+ });
+});
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..184760403c3
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..82789e75669
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..efd557f27a4
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8d6255b156c
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..420fa30805b
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..15d153567ff
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9b42ae50ce4
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c3534b0a286
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..002a26b91c0
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..184760403c3
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..82789e75669
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..efd557f27a4
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8d6255b156c
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..420fa30805b
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..15d153567ff
Binary files /dev/null and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/shape/index.html b/core/src/components/input/test/shape/index.html
new file mode 100644
index 00000000000..0977c62f6e8
--- /dev/null
+++ b/core/src/components/input/test/shape/index.html
@@ -0,0 +1,102 @@
+
+
+
+ Input - Shape
+
+
+
+ Input - Shape
+
+
+
+
+
+
+
Default Shape
+
+
+
Soft Shape
+
+
+
Round Shape
+
+
+
Rectangular Shape
+
+
+
+
+
diff --git a/core/src/components/input/test/shape/input.e2e.ts b/core/src/components/input/test/shape/input.e2e.ts
new file mode 100644
index 00000000000..4f78c4a05f6
--- /dev/null
+++ b/core/src/components/input/test/shape/input.e2e.ts
@@ -0,0 +1,196 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('input: shape'), () => {
+ /**
+ * Solid fill is only available in the md theme
+ */
+ test.describe('solid fill', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+ Input - Size
+
+
+
+ Input - Size
+
+
+
+
+
+
+
No Fill: No Size
+
+
+
+
Outline: No Size
+
+
+
+
No Fill: No Size, Round Shape
+
+
+
+
Outline: No Size, Round Shape
+
+
+
+
No Fill: Large Size
+
+
+
+
Outline: Large Size
+
+
+
+
No Fill: Large Size, Round Shape
+
+
+
+
Outline: Large Size, Round Shape
+
+
+
+
No Fill: XLarge Size
+
+
+
+
Outline: XLarge Size
+
+
+
+
No Fill: XLarge Size, Round Shape
+
+
+
+
Outline: XLarge Size, Round Shape
+
+
+
+
+
diff --git a/core/src/components/input/test/size/input.e2e.ts b/core/src/components/input/test/size/input.e2e.ts
new file mode 100644
index 00000000000..bd225d60e36
--- /dev/null
+++ b/core/src/components/input/test/size/input.e2e.ts
@@ -0,0 +1,212 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Size is only available in the Ionic theme
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('input: size'), () => {
+ test.describe('input: size medium', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+ Outline / Floating Label
+
+
+
No Fill / Stacked Label
+
+
+
+
+
+
+
+
Solid / Stacked Label
+
+
+
+
+
+
+
+
Outline / Stacked Label
+
+
+
+
+
Async Slot Content
diff --git a/core/src/components/input/test/slot/input.e2e.ts b/core/src/components/input/test/slot/input.e2e.ts
index f14d14cc4af..7414a8b02f3 100644
--- a/core/src/components/input/test/slot/input.e2e.ts
+++ b/core/src/components/input/test/slot/input.e2e.ts
@@ -47,6 +47,25 @@ configs().forEach(({ title, screenshot, config }) => {
});
});
+configs({ modes: ['ionic-md'] }).forEach(({ title, config, screenshot }) => {
+ test.describe(title('input: start and end slots (visual checks for ionic theme)'), () => {
+ test('should not have visual regressions with a stacked label and outline fill', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const input = page.locator('ion-input');
+ await expect(input).toHaveScreenshot(screenshot(`input-slots-label-stacked-fill-outline`));
+ });
+ });
+});
+
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('input: start and end slots (functionality checks)'), () => {
test('should raise floating label when there is content in the start slot', async ({ page }) => {
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6675197a681
Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6091e100595
Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..61aff9b4cae
Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e1c25630b8a
Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f8563c6d346
Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6222513f179
Binary files /dev/null and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/index.html b/core/src/components/input/test/states/index.html
index 7e5ebcf9c69..92bab83332d 100644
--- a/core/src/components/input/test/states/index.html
+++ b/core/src/components/input/test/states/index.html
@@ -2,7 +2,7 @@
Input - Disabled
+ Input - States
- Input - Disabled
+ Input - States
+ Readonly
-
Readonly
+ No Fill
-
-
Disabled
+ Outline
-
+
+
+
Outline: Color
+
+
+
+
+
Solid
+
+
+
+
+
Solid: Color
+
+
+
+
+ Disabled
+
+
+
No Fill
+
+
+
+
+
No Fill, Valid
+
+
+
+
+
No Fill, Invalid
+
+
+
+
+
No Fill, Color (ionic theme only)
+
+
+
+
+
Outline
+
+
+
+
+
Outline, Valid
+
+
+
+
+
Outline, Invalid
+
+
+
+
+
Outline, Color (ionic theme only)
+
+
+
+
+
Solid
+
+
+
+
+
Solid, Valid
+
+
+
+
+
Solid, Invalid
+
+
+
+
+
Solid, Color (ionic theme only)
+
+
+
Focused
+
+
+
No Fill
+
+
+
+
+
Outline
+
+
+
+
+
Solid
+
+
diff --git a/core/src/components/input/test/states/input.e2e.ts b/core/src/components/input/test/states/input.e2e.ts
index 33d33d91cf0..a35e1527011 100644
--- a/core/src/components/input/test/states/input.e2e.ts
+++ b/core/src/components/input/test/states/input.e2e.ts
@@ -92,3 +92,291 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
});
});
});
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('input: states'), () => {
+ test.describe(title('disabled'), () => {
+ test.describe(title('no fill'), () => {
+ test('should render disabled input correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-disabled-no-fill`));
+ });
+ });
+
+ test.describe(title('outline'), () => {
+ test('should render disabled input correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-disabled-outline`));
+ });
+ });
+ test.describe(title('solid'), () => {
+ test('should render disabled input correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-disabled-solid`));
+ });
+ });
+ });
+
+ test.describe(title('focused'), () => {
+ test('should render focused input correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-focused`));
+ });
+ });
+
+ test.describe(title('readonly'), () => {
+ test.describe(title('no fill'), () => {
+ test('should render readonly input correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-readonly-no-fill`));
+ });
+ });
+
+ test.describe(title('outline'), () => {
+ test('should render readonly input correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-readonly-outline`));
+ });
+ });
+
+ test.describe(title('solid'), () => {
+ test('should render readonly input correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ `,
+ config
+ );
+
+ const container = page.locator('.container');
+ await expect(container).toHaveScreenshot(screenshot(`input-readonly-solid`));
+ });
+ });
+ });
+ });
+});
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f09e8be2dc6
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..485d5ba508f
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..38eedfd053b
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f09e8be2dc6
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..485d5ba508f
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..38eedfd053b
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..11e790559f0
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ea750df56de
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f0d0d3eb2dc
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1a1bdaca444
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9b8e19bfb89
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0e8b1a79df3
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1e2fb567f8e
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c362f0c6c1b
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3bc9b5b49fa
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1e2fb567f8e
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c362f0c6c1b
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3bc9b5b49fa
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ec490d9ce6c
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7b28c8a16cb
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9b70a7e5a6d
Binary files /dev/null and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss
index 3f05c4499d3..d6d9007011e 100644
--- a/core/src/components/item-divider/item-divider.ios.scss
+++ b/core/src/components/item-divider/item-divider.ios.scss
@@ -21,24 +21,37 @@
font-weight: $item-divider-ios-font-weight;
}
-
// iOS Item Divider Slots
// --------------------------------------------------
:host([slot="start"]) {
- @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start);
+ @include margin(
+ $item-ios-slot-start-margin-top,
+ $item-ios-slot-start-margin-end,
+ $item-ios-slot-start-margin-bottom,
+ $item-ios-slot-start-margin-start
+ );
}
:host([slot="end"]) {
- @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
+ @include margin(
+ $item-ios-slot-end-margin-top,
+ $item-ios-slot-end-margin-end,
+ $item-ios-slot-end-margin-bottom,
+ $item-ios-slot-end-margin-start
+ );
}
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]) {
- @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
+ @include margin(
+ $item-ios-icon-slot-margin-top,
+ $item-ios-icon-slot-margin-end,
+ $item-ios-icon-slot-margin-bottom,
+ $item-ios-icon-slot-margin-start
+ );
}
-
// iOS Item Divider Content
// --------------------------------------------------
@@ -58,7 +71,12 @@
}
::slotted(p) {
- @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
+ @include margin(
+ $item-ios-paragraph-margin-top,
+ $item-ios-paragraph-margin-end,
+ $item-ios-paragraph-margin-bottom,
+ $item-ios-paragraph-margin-start
+ );
color: $item-ios-paragraph-text-color;
@@ -71,8 +89,7 @@
overflow: inherit;
}
-::slotted(h2:last-child)
-::slotted(h3:last-child),
+::slotted(h2:last-child) ::slotted(h3:last-child),
::slotted(h4:last-child),
::slotted(h5:last-child),
::slotted(h6:last-child),
diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss
index b8c2b5020c0..89901c1f13e 100644
--- a/core/src/components/item-divider/item-divider.ios.vars.scss
+++ b/core/src/components/item-divider/item-divider.ios.vars.scss
@@ -1,26 +1,26 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
@import "../item/item.ios.vars";
// iOS Item Divider
// --------------------------------------------------
/// @prop - Minimum height for the divider
-$item-divider-ios-min-height: 28px;
+$item-divider-ios-min-height: 28px;
/// @prop - Font size of the item
-$item-divider-ios-font-size: dynamic-font(17px);
+$item-divider-ios-font-size: dynamic-font(17px);
/// @prop - Font weight of the item
-$item-divider-ios-font-weight: 600;
+$item-divider-ios-font-weight: 600;
/// @prop - Background for the divider
-$item-divider-ios-background: $background-color-step-100;
+$item-divider-ios-background: $background-color-step-100;
/// @prop - Color for the divider
-$item-divider-ios-color: $text-color-step-150;
+$item-divider-ios-color: $text-color-step-150;
/// @prop - Padding start for the divider
-$item-divider-ios-padding-start: $item-ios-padding-start;
+$item-divider-ios-padding-start: $item-ios-padding-start;
/// @prop - Padding end for the divider
-$item-divider-ios-padding-end: $item-ios-padding-end;
+$item-divider-ios-padding-end: $item-ios-padding-end;
diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss
index 9da42310b2b..02ead8975e6 100644
--- a/core/src/components/item-divider/item-divider.md.scss
+++ b/core/src/components/item-divider/item-divider.md.scss
@@ -18,7 +18,6 @@
font-size: dynamic-font($item-divider-md-font-size);
}
-
// Material Design Item Divider Slots
// --------------------------------------------------
@@ -30,7 +29,6 @@
@include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
}
-
// Material Design Slotted Label
// --------------------------------------------------
@@ -38,7 +36,6 @@
@include margin(13px, 0, 10px, 0);
}
-
// Material Design Slotted Icon
// --------------------------------------------------
@@ -55,11 +52,16 @@
}
:host(.ion-color) ::slotted(ion-icon) {
- color: current-color(contrast);
+ color: current-color(contrast);
}
::slotted(ion-icon[slot]) {
- @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
+ @include margin(
+ $item-md-icon-slot-margin-top,
+ $item-md-icon-slot-margin-end,
+ $item-md-icon-slot-margin-bottom,
+ $item-md-icon-slot-margin-start
+ );
}
::slotted(ion-icon[slot="start"]) {
@@ -70,7 +72,6 @@
@include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end);
}
-
// Material Design Slotted Note
// --------------------------------------------------
@@ -83,7 +84,12 @@
}
::slotted(ion-note[slot]) {
- @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start);
+ @include padding(
+ $item-md-note-slot-padding-top,
+ $item-md-note-slot-padding-end,
+ $item-md-note-slot-padding-bottom,
+ $item-md-note-slot-padding-start
+ );
}
// Material Design Item Divider Avatar
@@ -106,7 +112,12 @@
::slotted(ion-avatar),
::slotted(ion-thumbnail) {
- @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start);
+ @include margin(
+ $item-md-media-slot-margin-top,
+ $item-md-media-slot-margin-end,
+ $item-md-media-slot-margin-bottom,
+ $item-md-media-slot-margin-start
+ );
}
::slotted(ion-avatar[slot="start"]),
@@ -119,7 +130,6 @@
@include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
}
-
// Material Design Item Divider Content
// --------------------------------------------------
diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss
index 3688b88ea65..97a58f09b24 100644
--- a/core/src/components/item-divider/item-divider.md.vars.scss
+++ b/core/src/components/item-divider/item-divider.md.vars.scss
@@ -1,26 +1,26 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
@import "../item/item.md.vars";
// Material Design Item Divider
// --------------------------------------------------
/// @prop - Minimum height for the divider
-$item-divider-md-min-height: 30px;
+$item-divider-md-min-height: 30px;
/// @prop - Color for the divider
-$item-divider-md-color: $text-color-step-600;
+$item-divider-md-color: $text-color-step-600;
/// @prop - Background for the divider
-$item-divider-md-background: $background-color;
+$item-divider-md-background: $background-color;
/// @prop - Font size for the divider
-$item-divider-md-font-size: 14px;
+$item-divider-md-font-size: 14px;
/// @prop - Border bottom for the divider
-$item-divider-md-border-bottom: 1px solid $item-md-border-color;
+$item-divider-md-border-bottom: 1px solid $item-md-border-color;
/// @prop - Padding start for the divider
-$item-divider-md-padding-start: $item-md-padding-start;
+$item-divider-md-padding-start: $item-md-padding-start;
/// @prop - Padding end for the divider
-$item-divider-md-padding-end: $item-md-padding-end;
+$item-divider-md-padding-end: $item-md-padding-end;
diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss
index 58ff5a1118f..aaae4b93d40 100644
--- a/core/src/components/item-divider/item-divider.scss
+++ b/core/src/components/item-divider/item-divider.scss
@@ -1,5 +1,4 @@
-@import "../../themes/ionic.globals";
-
+@import "../../themes/native/native.globals";
// Item Divider
// --------------------------------------------------
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index 0febf393300..1773d93a3d3 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -2,11 +2,12 @@ import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Prop, h } from '@stencil/core';
import { createColorClasses } from '@utils/theme';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import type { Color } from '../../interface';
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*
* @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.
@@ -20,6 +21,7 @@ import type { Color } from '../../interface';
styleUrls: {
ios: 'item-divider.ios.scss',
md: 'item-divider.md.scss',
+ ionic: 'item-divider.md.scss',
},
shadow: true,
})
@@ -43,11 +45,11 @@ export class ItemDivider implements ComponentInterface {
@Prop() sticky = false;
render() {
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
return (
{
const el = (ev.target as HTMLElement).closest('ion-item-option');
if (el) {
@@ -87,10 +106,28 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
}
};
+ private getShape(): string | undefined {
+ const theme = getIonTheme(this);
+ const { shape } = this;
+
+ // TODO(ROU-10841): Remove theme check when shapes are defined for all themes.
+ if (theme !== 'ionic') {
+ return undefined;
+ }
+
+ if (shape === undefined) {
+ return 'round';
+ }
+
+ return shape;
+ }
+
render() {
- const { disabled, expandable, href } = this;
+ const { disabled, expandable, href, hue } = this;
const TagType = href === undefined ? 'button' : ('a' as any);
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
+ const shape = this.getShape();
+
const attrs =
TagType === 'button'
? { type: this.type }
@@ -104,7 +141,9 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
);
diff --git a/core/src/components/item-option/item-option.vars.scss b/core/src/components/item-option/item-option.vars.scss
index bf9f10b8674..03ffac65548 100644
--- a/core/src/components/item-option/item-option.vars.scss
+++ b/core/src/components/item-option/item-option.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/native/native.globals";
// Item Option
// --------------------------------------------------
diff --git a/core/src/components/item-options/item-options.common.scss b/core/src/components/item-options/item-options.common.scss
new file mode 100644
index 00000000000..a4bfc71e919
--- /dev/null
+++ b/core/src/components/item-options/item-options.common.scss
@@ -0,0 +1,89 @@
+@import "../../themes/mixins";
+
+// Item Options
+// --------------------------------------------------
+
+ion-item-options {
+ @include multi-dir() {
+ /* stylelint-disable property-disallowed-list */
+ top: 0;
+ right: 0;
+ /* stylelint-enable property-disallowed-list */
+ }
+
+ @include ltr() {
+ justify-content: flex-end;
+ }
+
+ @include rtl() {
+ justify-content: flex-start;
+
+ &:not(.item-options-end) {
+ /* stylelint-disable property-disallowed-list */
+ right: auto;
+ left: 0;
+ /* stylelint-enable property-disallowed-list */
+
+ justify-content: flex-end;
+ }
+ }
+
+ display: none;
+ position: absolute;
+
+ height: 100%;
+
+ user-select: none;
+}
+
+.item-options-start {
+ @include multi-dir() {
+ /* stylelint-disable property-disallowed-list */
+ right: auto;
+ left: 0;
+ /* stylelint-enable property-disallowed-list */
+ }
+
+ @include ltr() {
+ justify-content: flex-start;
+ }
+
+ @include rtl() {
+ justify-content: flex-end;
+ }
+}
+
+/* stylelint-disable property-disallowed-list */
+[dir="ltr"] .item-options-start ion-item-option:first-child,
+[dir="rtl"] .item-options-start ion-item-option:last-child {
+ padding-left: var(--ion-safe-area-left);
+}
+
+[dir="ltr"] .item-options-end ion-item-option:last-child,
+[dir="rtl"] .item-options-end ion-item-option:first-child {
+ padding-right: var(--ion-safe-area-right);
+}
+/* stylelint-enable property-disallowed-list */
+
+.item-sliding-active-slide {
+ @include rtl() {
+ &.item-sliding-active-options-start ion-item-options:not(.item-options-end) {
+ width: 100%;
+
+ visibility: visible;
+ }
+ }
+
+ ion-item-options {
+ display: flex;
+
+ visibility: hidden;
+ }
+
+ &.item-sliding-active-options-start .item-options-start,
+ &.item-sliding-active-options-end ion-item-options:not(.item-options-start) {
+ width: 100%;
+
+ visibility: visible;
+ }
+}
diff --git a/core/src/components/item-options/item-options.ionic.scss b/core/src/components/item-options/item-options.ionic.scss
new file mode 100644
index 00000000000..39971a51546
--- /dev/null
+++ b/core/src/components/item-options/item-options.ionic.scss
@@ -0,0 +1,43 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./item-options.common";
+
+// Ionic Item Options
+// --------------------------------------------------
+
+ion-item-options {
+ z-index: 1;
+}
+
+.item-options-ionic {
+ align-items: center;
+
+ background: #{globals.$ion-bg-surface-default};
+
+ gap: globals.$ion-space-100;
+}
+
+/* stylelint-disable property-disallowed-list */
+[dir="ltr"] .item-options-start ion-item-option:last-child,
+[dir="rtl"] .item-options-start ion-item-option:first-child {
+ margin-right: globals.$ion-space-200;
+}
+
+[dir="ltr"] .item-options-start ion-item-option:first-child,
+[dir="rtl"] .item-options-start ion-item-option:last-child {
+ margin-left: calc(globals.$ion-space-200 + var(--ion-safe-area-left, 0));
+
+ padding-left: initial;
+}
+
+[dir="ltr"] .item-options-end ion-item-option:first-child,
+[dir="rtl"] .item-options-end ion-item-option:last-child {
+ margin-left: globals.$ion-space-200;
+}
+
+[dir="ltr"] .item-options-end ion-item-option:last-child,
+[dir="rtl"] .item-options-end ion-item-option:first-child {
+ margin-right: calc(globals.$ion-space-200 + var(--ion-safe-area-right, 0));
+
+ padding-right: initial;
+}
+/* stylelint-enable property-disallowed-list */
diff --git a/core/src/components/item-options/item-options.ios.scss b/core/src/components/item-options/item-options.ios.scss
index 2a6c319dcbf..625fb3b7e27 100644
--- a/core/src/components/item-options/item-options.ios.scss
+++ b/core/src/components/item-options/item-options.ios.scss
@@ -1,4 +1,4 @@
-@import "./item-options";
+@import "./item-options.native";
@import "./item-options.ios.vars";
// iOS Item Options
@@ -14,8 +14,6 @@
}
}
-
-
// iOS No Lines List
// --------------------------------------------------
@@ -23,7 +21,6 @@
border-bottom-width: 0;
}
-
// iOS Full/Inset Lines List
// --------------------------------------------------
diff --git a/core/src/components/item-options/item-options.ios.vars.scss b/core/src/components/item-options/item-options.ios.vars.scss
index 3f465ef3326..36b7b62465c 100644
--- a/core/src/components/item-options/item-options.ios.vars.scss
+++ b/core/src/components/item-options/item-options.ios.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
@import "../item/item.ios.vars";
// iOS Item Options
diff --git a/core/src/components/item-options/item-options.md.scss b/core/src/components/item-options/item-options.md.scss
index 39bb207c056..4dd00d358f2 100644
--- a/core/src/components/item-options/item-options.md.scss
+++ b/core/src/components/item-options/item-options.md.scss
@@ -1,4 +1,4 @@
-@import "./item-options";
+@import "./item-options.native";
@import "./item-options.md.vars";
// Material Design Item Options
@@ -10,7 +10,6 @@
border-bottom-color: $item-md-border-bottom-color;
}
-
// Material Design No Lines List
// --------------------------------------------------
@@ -18,7 +17,6 @@
border-bottom-width: 0;
}
-
// Material Design Full/Inset Lines List
// --------------------------------------------------
diff --git a/core/src/components/item-options/item-options.md.vars.scss b/core/src/components/item-options/item-options.md.vars.scss
index dd746708d0c..20bf116b098 100644
--- a/core/src/components/item-options/item-options.md.vars.scss
+++ b/core/src/components/item-options/item-options.md.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
@import "../item/item.md.vars";
// Material Design Item Options
diff --git a/core/src/components/item-options/item-options.native.scss b/core/src/components/item-options/item-options.native.scss
new file mode 100644
index 00000000000..491690d31e0
--- /dev/null
+++ b/core/src/components/item-options/item-options.native.scss
@@ -0,0 +1,6 @@
+@import "./item-options.common";
+@import "./item-options.native.vars";
+
+ion-item-options {
+ z-index: $z-index-item-options;
+}
diff --git a/core/src/components/item-options/item-options.native.vars.scss b/core/src/components/item-options/item-options.native.vars.scss
new file mode 100644
index 00000000000..85cea21e14a
--- /dev/null
+++ b/core/src/components/item-options/item-options.native.vars.scss
@@ -0,0 +1,4 @@
+@import "../../themes/native/native.globals";
+
+// Item Options
+// --------------------------------------------------
diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss
deleted file mode 100644
index 0449ee42cad..00000000000
--- a/core/src/components/item-options/item-options.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@import "./item-options.vars";
-
-// Item Options
-// --------------------------------------------------
-
-ion-item-options {
- @include multi-dir() {
- /* stylelint-disable property-disallowed-list */
- top: 0;
- right: 0;
- /* stylelint-enable property-disallowed-list */
- }
-
- @include ltr() {
- justify-content: flex-end;
- }
-
- @include rtl() {
- justify-content: flex-start;
-
- &:not(.item-options-end) {
- /* stylelint-disable property-disallowed-list */
- right: auto;
- left: 0;
- /* stylelint-enable property-disallowed-list */
-
- justify-content: flex-end;
- }
- }
-
- display: none;
- position: absolute;
-
- height: 100%;
-
- user-select: none;
- z-index: $z-index-item-options;
-}
-
-.item-options-start {
- @include multi-dir() {
- /* stylelint-disable property-disallowed-list */
- right: auto;
- left: 0;
- /* stylelint-enable property-disallowed-list */
- }
-
- @include ltr() {
- justify-content: flex-start;
- }
-
- @include rtl() {
- justify-content: flex-end;
- }
-}
-
-/* stylelint-disable property-disallowed-list */
-[dir="ltr"] .item-options-start ion-item-option:first-child,
-[dir="rtl"] .item-options-start ion-item-option:last-child {
- padding-left: var(--ion-safe-area-left);
-}
-
-[dir="ltr"] .item-options-end ion-item-option:last-child,
-[dir="rtl"] .item-options-end ion-item-option:first-child {
- padding-right: var(--ion-safe-area-right);
-}
-/* stylelint-enable property-disallowed-list */
-
-.item-sliding-active-slide {
- @include rtl() {
- &.item-sliding-active-options-start ion-item-options:not(.item-options-end) {
- width: 100%;
-
- visibility: visible;
- }
- }
-
- ion-item-options {
- display: flex;
-
- visibility: hidden;
- }
-
- &.item-sliding-active-options-start .item-options-start,
- &.item-sliding-active-options-end ion-item-options:not(.item-options-start) {
- width: 100%;
-
- visibility: visible;
- }
-}
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index d495580d7a5..d25c30d4bc6 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -2,14 +2,19 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
import { isEndSide } from '@utils/helpers';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import type { Side } from '../menu/menu-interface';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
@Component({
tag: 'ion-item-options',
styleUrls: {
ios: 'item-options.ios.scss',
md: 'item-options.md.scss',
+ ionic: 'item-options.ionic.scss',
},
})
export class ItemOptions implements ComponentInterface {
@@ -35,15 +40,15 @@ export class ItemOptions implements ComponentInterface {
}
render() {
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
const isEnd = isEndSide(this.side);
return (
;
+ private animationAbortController?: AbortController;
private leftOptions?: HTMLIonItemOptionsElement;
private rightOptions?: HTMLIonItemOptionsElement;
private optsDirty = true;
@@ -50,6 +73,12 @@ export class ItemSliding implements ComponentInterface {
private contentEl: HTMLElement | null = null;
private initialContentScrollY = true;
private mutationObserver?: MutationObserver;
+ private leftExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
+ private rightExpandableBaseWidth = IONIC_ACTION_BASE_WIDTH;
+
+ private isIonicTheme(): boolean {
+ return getIonTheme(this) === 'ionic';
+ }
@Element() el!: HTMLIonItemSlidingElement;
@@ -73,7 +102,6 @@ export class ItemSliding implements ComponentInterface {
async connectedCallback() {
const { el } = this;
-
this.item = el.querySelector('ion-item');
this.contentEl = findClosestIonContent(el);
@@ -109,6 +137,15 @@ export class ItemSliding implements ComponentInterface {
this.gesture = undefined;
}
+ if (this.tmr !== undefined) {
+ clearTimeout(this.tmr);
+ this.tmr = undefined;
+ }
+
+ // Abort any in-progress animation. The abort handler rejects the pending
+ // promise, causing animateFullSwipe's finally block to run cleanup.
+ this.animationAbortController?.abort();
+
this.item = null;
this.leftOptions = this.rightOptions = undefined;
@@ -149,6 +186,10 @@ export class ItemSliding implements ComponentInterface {
*/
@Method()
async open(side: Side | undefined) {
+ if ((this.state & SlidingState.AnimatingFullSwipe) !== 0) {
+ return;
+ }
+
/**
* It is possible for the item to be added to the DOM
* after the item-sliding component was created. As a result,
@@ -212,6 +253,9 @@ export class ItemSliding implements ComponentInterface {
*/
@Method()
async close() {
+ if ((this.state & SlidingState.AnimatingFullSwipe) !== 0) {
+ return;
+ }
this.setOpenAmount(0, true);
}
@@ -244,6 +288,323 @@ export class ItemSliding implements ComponentInterface {
}
}
+ /**
+ * Check if the given item options element contains at least one expandable, non-disabled option.
+ */
+ private hasExpandableOptions(options: HTMLIonItemOptionsElement | undefined): boolean {
+ if (!options) return false;
+
+ const optionElements = options.querySelectorAll('ion-item-option');
+ return Array.from(optionElements).some((option: any) => {
+ return option.expandable === true && !option.disabled;
+ });
+ }
+
+ /**
+ * Returns a Promise that resolves after `ms` milliseconds, or rejects if the
+ * given AbortSignal is fired before the timer expires.
+ */
+ private delay(ms: number, signal: AbortSignal): Promise {
+ return new Promise((resolve, reject) => {
+ const id = setTimeout(resolve, ms);
+ signal.addEventListener(
+ 'abort',
+ () => {
+ clearTimeout(id);
+ reject(new DOMException('Animation cancelled', 'AbortError'));
+ },
+ { once: true }
+ );
+ });
+ }
+
+ /**
+ * Animate the item to a specific position using CSS transitions.
+ * Returns a Promise that resolves when the animation completes, or rejects if
+ * the given AbortSignal is fired.
+ */
+ private animateToPosition(position: number, duration: number, signal: AbortSignal): Promise {
+ return new Promise((resolve, reject) => {
+ if (!this.item) {
+ return resolve();
+ }
+
+ this.el.classList.add('item-sliding-full-swipe-transition');
+ this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
+
+ const id = setTimeout(resolve, duration);
+ signal.addEventListener(
+ 'abort',
+ () => {
+ clearTimeout(id);
+ reject(new DOMException('Animation cancelled', 'AbortError'));
+ },
+ { once: true }
+ );
+ });
+ }
+
+ /**
+ * Calculate the swipe threshold distance required to trigger a full swipe animation.
+ * Returns the maximum options width plus a margin to ensure it's achievable.
+ */
+ private getSwipeThreshold(direction: 'start' | 'end'): number {
+ const maxWidth = direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
+ return maxWidth + SWIPE_MARGIN;
+ }
+
+ /**
+ * Native (ios/md) full swipe: off-screen → fire swipe → return.
+ * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
+ */
+ private async animateFullSwipe(direction: 'start' | 'end') {
+ const abortController = new AbortController();
+ this.animationAbortController = abortController;
+ const { signal } = abortController;
+
+ // Prevent interruption during animation
+ if (this.gesture) {
+ this.gesture.enable(false);
+ }
+
+ try {
+ const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+
+ // Trigger expandable state without moving the item
+ // Set state directly so expandable option fills its container, starting from
+ // the exact position where the user released, without any visual snap.
+ this.state =
+ direction === 'end'
+ ? SlidingState.End | SlidingState.SwipeEnd | SlidingState.AnimatingFullSwipe
+ : SlidingState.Start | SlidingState.SwipeStart | SlidingState.AnimatingFullSwipe;
+
+ await this.delay(100, signal);
+
+ // Animate off-screen while maintaining the expanded state
+ const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
+ await this.animateToPosition(offScreenDistance, FULL_SWIPE_TRANSITION_MS, signal);
+
+ // Trigger action
+ if (options) {
+ options.fireSwipeEvent();
+ }
+
+ // Small delay before returning
+ await this.delay(300, signal);
+
+ // Return to closed state
+ await this.animateToPosition(0, FULL_SWIPE_TRANSITION_MS, signal);
+ } catch {
+ // Animation was aborted (e.g. component disconnected). finally handles cleanup.
+ } finally {
+ this.animationAbortController = undefined;
+
+ // Reset state
+ this.el.classList.remove('item-sliding-full-swipe-transition');
+ if (this.item) {
+ this.item.style.transform = '';
+ }
+ this.openAmount = 0;
+ this.state = SlidingState.Disabled;
+
+ if (openSlidingItem === this.el) {
+ openSlidingItem = undefined;
+ }
+
+ if (this.gesture) {
+ this.gesture.enable(!this.disabled);
+ }
+ }
+ }
+
+ private queryExpandableOption(options?: HTMLIonItemOptionsElement): HTMLIonItemOptionElement | undefined {
+ if (!options) {
+ return undefined;
+ }
+ const expandableOptions = Array.from(
+ options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR)
+ );
+ if (expandableOptions.length === 0) {
+ return undefined;
+ }
+ if (expandableOptions.length === 1) {
+ return expandableOptions[0];
+ }
+ const isRTL = document.dir === 'rtl';
+ const isEndSide = options.classList.contains('item-options-end');
+ // Match native edge behavior for multi-expandable configs
+ const pickLast = (isEndSide && !isRTL) || (!isEndSide && isRTL);
+ return pickLast ? expandableOptions[expandableOptions.length - 1] : expandableOptions[0];
+ }
+
+ private getExpandableOption(direction: 'start' | 'end'): HTMLIonItemOptionElement | undefined {
+ return this.queryExpandableOption(direction === 'end' ? this.rightOptions : this.leftOptions);
+ }
+
+ private getOpenDirectionFromAmount(openAmount: number): 'start' | 'end' | undefined {
+ if (openAmount > 0) {
+ return 'end';
+ }
+ if (openAmount < 0) {
+ return 'start';
+ }
+ return undefined;
+ }
+
+ private getOptionsWidthForDirection(direction: 'start' | 'end'): number {
+ return direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
+ }
+
+ private getExpandableBaseWidth(direction: 'start' | 'end'): number {
+ return direction === 'end' ? this.rightExpandableBaseWidth : this.leftExpandableBaseWidth;
+ }
+
+ private setIonicExpandableWidth(direction: 'start' | 'end', width: number) {
+ const expandableOption = this.getExpandableOption(direction);
+ if (!expandableOption) {
+ return;
+ }
+
+ const style = expandableOption.style;
+ const baseWidth = this.getExpandableBaseWidth(direction);
+
+ style.width = `${Math.max(baseWidth, width)}px`;
+ }
+
+ private resetIonicExpandableOptions() {
+ [this.leftOptions, this.rightOptions].forEach((options) => {
+ if (!options) {
+ return;
+ }
+ options.querySelectorAll(EXPANDABLE_OPTION_SELECTOR).forEach((node) => {
+ node.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
+ });
+ const expandableOption = this.queryExpandableOption(options);
+ if (!expandableOption) {
+ return;
+ }
+ expandableOption.style.width = '';
+ expandableOption.classList.remove(
+ 'item-sliding-expandable-open',
+ 'item-sliding-expandable-snapback',
+ 'item-sliding-expandable-width-in',
+ 'item-sliding-expandable-width-back'
+ );
+ });
+ }
+
+ private updateIonicExpandableFromOpenAmount(openAmount: number, isFinal: boolean, previousOpenAmount: number) {
+ if ((this.state & SlidingState.AnimatingFullSwipe) !== 0) {
+ return;
+ }
+
+ const direction = this.getOpenDirectionFromAmount(openAmount);
+ if (direction === undefined) {
+ const previousDirection = this.getOpenDirectionFromAmount(previousOpenAmount);
+ if (previousDirection === undefined) {
+ this.resetIonicExpandableOptions();
+ return;
+ }
+
+ this.queryExpandableOption(previousDirection === 'end' ? this.rightOptions : this.leftOptions)?.classList.remove(
+ ITEM_OPTION_EXPAND_THRESHOLD_CLASS
+ );
+
+ this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection));
+ return;
+ }
+
+ const baseWidth = this.getExpandableBaseWidth(direction);
+ const optionsWidth = this.getOptionsWidthForDirection(direction);
+ const extraWidth = Math.max(0, Math.abs(openAmount) - optionsWidth);
+ const resistedExtraWidth = isFinal ? extraWidth : extraWidth * IONIC_EXPAND_RESISTANCE_FACTOR;
+ const targetWidth = baseWidth + resistedExtraWidth;
+
+ const expandableOption = this.getExpandableOption(direction);
+ if (expandableOption) {
+ if (!isFinal && extraWidth >= IONIC_EXPAND_TRIGGER) {
+ expandableOption.classList.add(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
+ } else {
+ expandableOption.classList.remove(ITEM_OPTION_EXPAND_THRESHOLD_CLASS);
+ }
+ }
+
+ this.setIonicExpandableWidth(direction, targetWidth);
+ }
+
+ private async animateIonicFullSwipe(direction: 'start' | 'end') {
+ const abortController = new AbortController();
+ this.animationAbortController = abortController;
+ const { signal } = abortController;
+ const expandableOption = this.getExpandableOption(direction);
+ const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+
+ if (this.gesture) {
+ this.gesture.enable(false);
+ }
+
+ try {
+ this.state =
+ direction === 'end'
+ ? SlidingState.End | SlidingState.AnimatingFullSwipe
+ : SlidingState.Start | SlidingState.AnimatingFullSwipe;
+
+ if (!this.item) {
+ return;
+ }
+
+ const itemWidth = this.el.offsetWidth || window.innerWidth;
+ const baseWidth = this.getExpandableBaseWidth(direction);
+ const expandableTargetWidth = Math.max(baseWidth, itemWidth - 16);
+ const offScreenPosition = direction === 'end' ? itemWidth : -itemWidth;
+
+ if (expandableOption) {
+ expandableOption.classList.remove('item-sliding-expandable-width-back');
+ expandableOption.classList.add('item-sliding-expandable-width-in');
+ expandableOption.style.width = `${expandableTargetWidth}px`;
+ }
+
+ this.el.classList.remove('item-sliding-confirm-item-back');
+ this.el.classList.add('item-sliding-confirm-item-in');
+ this.item.style.transform = `translate3d(${-offScreenPosition}px, 0, 0)`;
+ await this.delay(150, signal);
+
+ options?.fireSwipeEvent();
+ await this.delay(IONIC_CONFIRM_PAUSE, signal);
+
+ if (expandableOption) {
+ expandableOption.classList.remove('item-sliding-expandable-width-in');
+ expandableOption.classList.add('item-sliding-expandable-width-back');
+ expandableOption.style.width = `${baseWidth}px`;
+ }
+
+ this.el.classList.remove('item-sliding-confirm-item-in');
+ this.el.classList.add('item-sliding-confirm-item-back');
+ this.item.style.transform = 'translate3d(0, 0, 0)';
+ await this.delay(500, signal);
+ } catch {
+ // Animation was aborted. finally handles cleanup.
+ } finally {
+ this.animationAbortController = undefined;
+
+ this.el.classList.remove('item-sliding-confirm-item-in', 'item-sliding-confirm-item-back');
+ if (this.item) {
+ this.item.style.transform = '';
+ }
+ this.resetIonicExpandableOptions();
+ this.openAmount = 0;
+ this.state = SlidingState.Disabled;
+
+ if (openSlidingItem === this.el) {
+ openSlidingItem = undefined;
+ }
+
+ if (this.gesture) {
+ this.gesture.enable(!this.disabled);
+ }
+ }
+ }
+
private async updateOptions() {
const options = this.el.querySelectorAll('ion-item-options');
@@ -322,7 +683,11 @@ export class ItemSliding implements ComponentInterface {
}
this.initialOpenAmount = this.openAmount;
if (this.item) {
- this.item.style.transition = 'none';
+ if (this.isIonicTheme()) {
+ this.el.classList.remove('item-sliding-transition-open', 'item-sliding-transition-snapback');
+ } else {
+ this.el.classList.add('item-sliding-dragging');
+ }
}
}
@@ -348,23 +713,66 @@ export class ItemSliding implements ComponentInterface {
break;
}
- let optsWidth;
- if (openAmount > this.optsWidthRightSide) {
- optsWidth = this.optsWidthRightSide;
- openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
- } else if (openAmount < -this.optsWidthLeftSide) {
- optsWidth = -this.optsWidthLeftSide;
- openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+ if (this.isIonicTheme()) {
+ if (openAmount > this.optsWidthRightSide) {
+ const overDrag = openAmount - this.optsWidthRightSide;
+ openAmount = this.optsWidthRightSide + overDrag * IONIC_ELASTIC_FACTOR;
+ } else if (openAmount < -this.optsWidthLeftSide) {
+ const overDrag = openAmount + this.optsWidthLeftSide;
+ openAmount = -this.optsWidthLeftSide + overDrag * IONIC_ELASTIC_FACTOR;
+ }
+ } else {
+ let optsWidth: number;
+ if (openAmount > this.optsWidthRightSide) {
+ optsWidth = this.optsWidthRightSide;
+ openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+ } else if (openAmount < -this.optsWidthLeftSide) {
+ optsWidth = -this.optsWidthLeftSide;
+ openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+ }
}
this.setOpenAmount(openAmount, false);
}
private onEnd(gesture: GestureDetail) {
+ this.el.classList.remove('item-sliding-dragging');
+ this.restoreContentScrollAfterSlide();
+ if (this.isIonicTheme()) {
+ this.onEndIonic(gesture);
+ } else {
+ this.onEndNative(gesture);
+ }
+ }
+
+ private restoreContentScrollAfterSlide() {
const { contentEl, initialContentScrollY } = this;
if (contentEl) {
resetContentScrollY(contentEl, initialContentScrollY);
}
+ }
+
+ private onEndNative(gesture: GestureDetail) {
+ // Check for full swipe conditions with expandable options
+ const rawSwipeDistance = Math.abs(gesture.deltaX);
+ const direction = gesture.deltaX < 0 ? 'end' : 'start';
+ const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+ const hasExpandable = this.hasExpandableOptions(options);
+
+ const shouldTriggerFullSwipe =
+ hasExpandable &&
+ (rawSwipeDistance > this.getSwipeThreshold(direction) ||
+ (Math.abs(gesture.velocityX) > 0.5 &&
+ rawSwipeDistance > (direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide) * 0.5));
+
+ if (shouldTriggerFullSwipe) {
+ this.animateFullSwipe(direction).catch(() => {
+ if (this.gesture) {
+ this.gesture.enable(!this.disabled);
+ }
+ });
+ return;
+ }
const velocity = gesture.velocityX;
@@ -389,11 +797,68 @@ export class ItemSliding implements ComponentInterface {
}
}
+ private onEndIonic(gesture: GestureDetail) {
+ const velocity = gesture.velocityX;
+ const velocityX = velocity * 1000;
+ const activeDirection = this.getOpenDirectionFromAmount(this.openAmount);
+ if (activeDirection === undefined) {
+ this.setOpenAmount(0, true);
+ return;
+ }
+
+ const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
+ const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
+ const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
+
+ const closeDirection =
+ activeDirection === 'end'
+ ? velocityX > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD
+ : velocityX < -IONIC_FULL_SWIPE_VELOCITY_THRESHOLD;
+
+ if (closeDirection) {
+ this.setOpenAmount(0, true);
+ return;
+ }
+
+ if (
+ hasExpandable &&
+ (extraWidth >= IONIC_EXPAND_TRIGGER ||
+ (extraWidth > 0 && Math.abs(velocityX) > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD))
+ ) {
+ this.animateIonicFullSwipe(activeDirection).catch(() => {
+ if (this.gesture) {
+ this.gesture.enable(!this.disabled);
+ }
+ });
+ return;
+ }
+
+ const flickOpen =
+ activeDirection === 'end'
+ ? velocityX < -IONIC_OPEN_VELOCITY_THRESHOLD
+ : velocityX > IONIC_OPEN_VELOCITY_THRESHOLD;
+
+ const fullOpen = activeDirection === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
+ const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
+ const shouldSnapOpen = flickOpen || Math.abs(this.openAmount) > openThreshold;
+ const restingPoint = shouldSnapOpen ? fullOpen : 0;
+
+ this.setOpenAmount(restingPoint, true);
+ }
+
private calculateOptsWidth() {
this.optsWidthRightSide = 0;
if (this.rightOptions) {
this.rightOptions.style.display = 'flex';
this.optsWidthRightSide = this.rightOptions.offsetWidth;
+ const rightExpandable = this.queryExpandableOption(this.rightOptions);
+ if (rightExpandable) {
+ rightExpandable.style.width = '';
+ this.rightExpandableBaseWidth = Math.max(
+ IONIC_ACTION_BASE_WIDTH,
+ rightExpandable.getBoundingClientRect().width
+ );
+ }
this.rightOptions.style.display = '';
}
@@ -401,6 +866,11 @@ export class ItemSliding implements ComponentInterface {
if (this.leftOptions) {
this.leftOptions.style.display = 'flex';
this.optsWidthLeftSide = this.leftOptions.offsetWidth;
+ const leftExpandable = this.queryExpandableOption(this.leftOptions);
+ if (leftExpandable) {
+ leftExpandable.style.width = '';
+ this.leftExpandableBaseWidth = Math.max(IONIC_ACTION_BASE_WIDTH, leftExpandable.getBoundingClientRect().width);
+ }
this.leftOptions.style.display = '';
}
@@ -417,38 +887,31 @@ export class ItemSliding implements ComponentInterface {
}
const { el } = this;
-
const style = this.item.style;
+ const previousOpenAmount = this.openAmount;
this.openAmount = openAmount;
- if (isFinal) {
- style.transition = '';
+ if (this.isIonicTheme()) {
+ this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
+ }
+
+ if (this.isIonicTheme() && isFinal) {
+ const closing = Math.abs(openAmount) < Math.abs(previousOpenAmount);
+ if (closing) {
+ this.el.classList.add('item-sliding-transition-snapback');
+ } else {
+ this.el.classList.add('item-sliding-transition-open');
+ }
}
if (openAmount > 0) {
- this.state =
- openAmount >= this.optsWidthRightSide + SWIPE_MARGIN
- ? SlidingState.End | SlidingState.SwipeEnd
- : SlidingState.End;
+ const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
+ this.state = fullSwipe ? SlidingState.End | SlidingState.SwipeEnd : SlidingState.End;
} else if (openAmount < 0) {
- this.state =
- openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN
- ? SlidingState.Start | SlidingState.SwipeStart
- : SlidingState.Start;
+ const fullSwipe = !this.isIonicTheme() && openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN;
+ this.state = fullSwipe ? SlidingState.Start | SlidingState.SwipeStart : SlidingState.Start;
} else {
- /**
- * The sliding options should not be
- * clickable while the item is closing.
- */
el.classList.add('item-sliding-closing');
-
- /**
- * Item sliding cannot be interrupted
- * while closing the item. If it did,
- * it would allow the item to get into an
- * inconsistent state where multiple
- * items are then open at the same time.
- */
if (this.gesture) {
this.gesture.enable(false);
}
@@ -465,6 +928,7 @@ export class ItemSliding implements ComponentInterface {
style.transform = '';
return;
}
+
style.transform = `translate3d(${-openAmount}px,0,0)`;
this.ionDrag.emit({
amount: openAmount,
@@ -483,11 +947,11 @@ export class ItemSliding implements ComponentInterface {
}
render() {
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
return (
No Options
-
-
-
- Disabled Buttons
- Buttons should not be clickable
-
-
-
-
- Disabled
-
-
-
-
-
-
-
-
-
@@ -96,7 +75,7 @@ RIGHT/LEFT side - icons
-
+
@@ -126,7 +105,7 @@ RIGHT/LEFT side - many buttons
-
+
@@ -145,7 +124,7 @@ RIGHT/LEFT side - many buttons
-
+
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
index 908155f0ea5..de0ad68de65 100644
--- a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
+++ b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
@@ -1,6 +1,12 @@
import { expect } from '@playwright/test';
import { configs, dragElementBy, test } from '@utils/test/playwright';
+import {
+ DRAG_DISTANCE_SINGLE_OPTION,
+ DRAG_DISTANCE_MULTIPLE_OPTIONS,
+ DRAG_STEPS_UNDER_FULL_SWIPE,
+} from '../test.utils';
+
/**
* item-sliding doesn't have mode-specific styling,
* but the child components, item-options and item-option, do.
@@ -8,7 +14,7 @@ import { configs, dragElementBy, test } from '@utils/test/playwright';
* It is important to test all modes to ensure that the
* child components are being rendered correctly.
*/
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item-sliding: basic'), () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/item-sliding/test/basic`, config);
@@ -23,9 +29,9 @@ configs().forEach(({ title, screenshot, config }) => {
* Positive dragByX value to drag element from the left to the right
* to reveal the options on the left side.
*/
- const dragByX = config.direction === 'rtl' ? -150 : 150;
+ const dragByX = config.direction === 'rtl' ? -DRAG_DISTANCE_SINGLE_OPTION : DRAG_DISTANCE_SINGLE_OPTION;
- await dragElementBy(item, page, dragByX);
+ await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
await page.waitForChanges();
await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
@@ -42,9 +48,10 @@ configs().forEach(({ title, screenshot, config }) => {
* Positive dragByX value to drag element from the left to the right
* to reveal the options on the left side.
*/
- const dragByX = config.direction === 'rtl' ? 150 : -150;
+ const dragByX = config.direction === 'rtl' ? DRAG_DISTANCE_MULTIPLE_OPTIONS : -DRAG_DISTANCE_MULTIPLE_OPTIONS;
- await dragElementBy(item, page, dragByX);
+ await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
+ await page.waitForChanges();
await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
});
@@ -61,7 +68,16 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
await page.goto(`/src/components/item-sliding/test/basic`, config);
const item = page.locator('#item2');
- await dragElementBy(item, page, -150);
+ await dragElementBy(
+ item,
+ page,
+ -DRAG_DISTANCE_MULTIPLE_OPTIONS,
+ 0,
+ undefined,
+ undefined,
+ true,
+ DRAG_STEPS_UNDER_FULL_SWIPE
+ );
await page.waitForChanges();
// item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it
@@ -105,7 +121,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
* make sure the safe area padding is applied only to that side
* regardless of direction
*/
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item-sliding: basic'), () => {
test.describe('safe area left', () => {
test('should have padding on the left only', async ({ page }) => {
@@ -140,8 +156,8 @@ configs().forEach(({ title, screenshot, config }) => {
const direction = config.direction;
const item = page.locator('ion-item-sliding');
- const dragByX = direction == 'rtl' ? -150 : 150;
- await dragElementBy(item, page, dragByX);
+ const dragByX = direction == 'rtl' ? -DRAG_DISTANCE_MULTIPLE_OPTIONS : DRAG_DISTANCE_MULTIPLE_OPTIONS;
+ await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
await page.waitForChanges();
await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-left`));
@@ -181,8 +197,8 @@ configs().forEach(({ title, screenshot, config }) => {
const direction = config.direction;
const item = page.locator('ion-item-sliding');
- const dragByX = direction == 'rtl' ? 150 : -150;
- await dragElementBy(item, page, dragByX);
+ const dragByX = direction == 'rtl' ? DRAG_DISTANCE_MULTIPLE_OPTIONS : -DRAG_DISTANCE_MULTIPLE_OPTIONS;
+ await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
await page.waitForChanges();
await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-right`));
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c76a514c04e
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..724f7f65647
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..844f476066b
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f6c8b64da15
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..66f7fe81a85
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..605f0c41026
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png
index 32f91be928a..303faec5a19 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png
index aeeb34fdccc..cb08138d6c8 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png
index 310b64daa01..42b6d7b596e 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png
index 8d5e0710f22..4ef66dbd849 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Firefox-linux.png
index 75ae33cedfc..ca81937845b 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Safari-linux.png
index 4cd462c568e..bfadbfd2e56 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png
index 3abbbc23c78..4e8f3c319a0 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Safari-linux.png
index 34f1ba57509..f1b6b8d9c9f 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Safari-linux.png
index 3abbbc23c78..4e8f3c319a0 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fd4cd3747ec
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1012684c62a
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a5ca7a36c08
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..401e35bd253
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1218787e55b
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..be86ee6b3ae
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-left-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e30ea0b8d12
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..40ef31c118b
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..55ff6543e99
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ff38bb4d3ea
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e1f26619072
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..bec12a5759c
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-safe-area-right-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a4cd8a08042
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3eb9cdef649
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b64c92ecf62
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2f9b5feecb2
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3aa84f083f8
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f18d8c5f02b
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png
index 2f93b4dd54d..91980276159 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png
index ce1bf17cd50..9f9f9a8de6b 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png
index 45b5e005461..0bbc7488d98 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png
index 150177cd4fd..902a4735b75 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Firefox-linux.png
index e755712ff78..ad2d45123a8 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Safari-linux.png
index c8a6a7428c1..6da49e34560 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png
index 00c39b8437c..a31c87381f0 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png
index 4e06f45c6fe..bb5a75b3166 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png
index af58c57ce1e..c2cdad26b0f 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png
index 365c1e5a914..e5d9af21647 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Firefox-linux.png
index 65179df291b..033befc7e2c 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Safari-linux.png
index 67ffbb14e1a..e3755c29fca 100644
Binary files a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/full-swipe/index.html b/core/src/components/item-sliding/test/full-swipe/index.html
new file mode 100644
index 00000000000..1fface1300c
--- /dev/null
+++ b/core/src/components/item-sliding/test/full-swipe/index.html
@@ -0,0 +1,131 @@
+
+
+
+ Item Sliding - Full Swipe
+
+
+
+ Item Sliding - Full Swipe
+
+
+
+
+
+
Full Swipe - Expandable Options
+
+
+
+
+
+ Expandable End (Swipe Left)
+
+
+ Delete
+
+
+
+
+
+
+ Expandable Start (Swipe Right)
+
+
+ Archive
+
+
+
+
+
+
+ Expandable Both Sides
+
+
+ Archive
+
+
+ Delete
+
+
+
+
+
+
Non-Expandable Options (No Full Swipe)
+
+
+
+
+
+ Non-Expandable (Should Show Options)
+
+
+ Edit
+
+
+
+
+
+
+ Multiple Non-Expandable Options
+
+
+ Edit
+ Share
+ Delete
+
+
+
+
+
+
Mixed Scenarios
+
+
+
+
+
+ Expandable + Other Options
+
+
+ Edit
+ Delete
+
+
+
+
+
+
+
+
diff --git a/core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts b/core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts
new file mode 100644
index 00000000000..2841127fe50
--- /dev/null
+++ b/core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts
@@ -0,0 +1,316 @@
+import { expect } from '@playwright/test';
+import { configs, dragElementBy, test } from '@utils/test/playwright';
+
+/**
+ * When an item has at least one expandable option and the user swipes
+ * beyond the threshold (or with sufficient velocity), the item slides
+ * off-screen, fires ionSwipe, and returns to its closed position.
+ */
+
+// Full animation cycle duration (100ms expand + 250ms off-screen + 300ms delay + 250ms return)
+const FULL_ANIMATION_MS = 1100;
+
+configs().forEach(({ title, config }) => {
+ test.describe(title('item-sliding: full swipe'), () => {
+ test('should fire ionSwipe when expandable option is swiped fully (end side)', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Expandable End (Swipe Left)
+
+
+ Delete
+
+
+ `,
+ config
+ );
+
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const dragByX = config.direction === 'rtl' ? 190 : -190;
+
+ await dragElementBy(item, page, dragByX);
+ await ionSwipe.next();
+
+ expect(ionSwipe).toHaveReceivedEventTimes(1);
+ });
+
+ test('should fire ionSwipe when expandable option is swiped fully (start side)', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Expandable Start (Swipe Right)
+
+
+ Archive
+
+
+ `,
+ config
+ );
+
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const dragByX = config.direction === 'rtl' ? -190 : 190;
+
+ await dragElementBy(item, page, dragByX);
+ await ionSwipe.next();
+
+ expect(ionSwipe).toHaveReceivedEventTimes(1);
+ });
+
+ test('should return to closed state after full swipe animation completes', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Expandable End (Swipe Left)
+
+
+ Delete
+
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item-sliding');
+ const dragByX = config.direction === 'rtl' ? 190 : -190;
+
+ await dragElementBy(item, page, dragByX);
+ await page.waitForTimeout(FULL_ANIMATION_MS);
+
+ const openAmount = await item.evaluate((el: HTMLIonItemSlidingElement) => el.getOpenAmount());
+ expect(openAmount).toBe(0);
+ });
+
+ test('should NOT trigger full swipe animation for non-expandable options', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Non-Expandable (Should Show Options)
+
+
+ Edit
+
+
+ `,
+ config
+ );
+
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const dragByX = config.direction === 'rtl' ? 180 : -180;
+
+ await dragElementBy(item, page, dragByX);
+
+ await ionSwipe.next();
+ await page.waitForChanges();
+
+ // The full swipe animation closes the item (openAmount === 0) after completing.
+ // For a non-expandable item, no animation runs and the item stays open at optsWidth.
+ const openAmount = await item.evaluate((el: HTMLIonItemSlidingElement) => el.getOpenAmount());
+ expect(Math.abs(openAmount)).toBeGreaterThan(0);
+ });
+
+ test('should fire ionSwipe when non-expandable options are swiped past the threshold', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Non-Expandable (Should Show Options)
+
+
+ Edit
+
+
+ `,
+ config
+ );
+
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const dragByX = config.direction === 'rtl' ? 190 : -190;
+
+ await dragElementBy(item, page, dragByX);
+ await ionSwipe.next();
+
+ expect(ionSwipe).toHaveReceivedEventTimes(1);
+ });
+ });
+});
+
+/**
+ * Test for Ionic theme that has a different full swipe animation behavior.
+ */
+configs({ modes: ['ionic-md'] }).forEach(({ title, config }) => {
+ test.describe(title('item-sliding: full swipe'), () => {
+ test('should fire ionSwipe when expandable option is swiped fully (end side)', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Expandable End (Swipe Left)
+
+
+ Delete
+
+
+ `,
+ config
+ );
+
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const box = (await item.boundingBox())!;
+ const y = box.y + box.height / 2;
+
+ // 1) Peek open (distance-based; moderate steps is fine)
+ const peek = config.direction === 'rtl' ? 120 : -120;
+ await dragElementBy(item, page, peek);
+
+ // 2) Fast flick in the same direction as “full swipe” (low steps = high velocity)
+ const startX = config.direction === 'rtl' ? box.x + 40 : box.x + box.width - 40;
+ const flickBy = config.direction === 'rtl' ? box.width - 80 : -(box.width - 80);
+ await dragElementBy(item, page, flickBy, 0, startX, y, true, 2);
+ await ionSwipe.next();
+ expect(ionSwipe).toHaveReceivedEventTimes(1);
+ });
+
+ test('should fire ionSwipe when expandable option is swiped fully (start side)', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Expandable Start (Swipe Right)
+
+
+ Archive
+
+
+ `,
+ config
+ );
+
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const box = (await item.boundingBox())!;
+ const y = box.y + box.height / 2;
+
+ // 1) Peek open (distance-based; moderate steps is fine)
+ const peek = config.direction === 'rtl' ? -120 : 120;
+ await dragElementBy(item, page, peek);
+
+ // 2) Fast flick in the same direction as “full swipe” (low steps = high velocity)
+ const startX = config.direction === 'rtl' ? box.x + box.width - 40 : box.x + 40;
+ const flickBy = config.direction === 'rtl' ? -(box.width - 80) : box.width - 80;
+ await dragElementBy(item, page, flickBy, 0, startX, y, true, 2);
+ await ionSwipe.next();
+ expect(ionSwipe).toHaveReceivedEventTimes(1);
+ });
+
+ test('should return to closed state after full swipe animation completes', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Expandable End (Swipe Left)
+
+
+ Delete
+
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item-sliding');
+ const box = (await item.boundingBox())!;
+ const y = box.y + box.height / 2;
+
+ // 1) Peek open (distance-based; moderate steps is fine)
+ const peek = config.direction === 'rtl' ? -120 : 120;
+ await dragElementBy(item, page, peek);
+
+ // 2) Fast flick in the same direction as “full swipe” (low steps = high velocity)
+ const startX = config.direction === 'rtl' ? box.x + box.width - 40 : box.x + 40;
+ const flickBy = config.direction === 'rtl' ? -(box.width - 80) : box.width - 80;
+ await dragElementBy(item, page, flickBy, 0, startX, y, true, 2);
+ await page.waitForTimeout(FULL_ANIMATION_MS);
+
+ const openAmount = await item.evaluate((el: HTMLIonItemSlidingElement) => el.getOpenAmount());
+ expect(openAmount).toBe(0);
+ });
+
+ test('should NOT trigger full swipe animation for non-expandable options', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Non-Expandable (Should Show Options)
+
+
+ Edit
+
+
+ `,
+ config
+ );
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const dragByX = config.direction === 'rtl' ? 180 : -180;
+
+ await dragElementBy(item, page, dragByX);
+ await page.waitForChanges();
+
+ expect(ionSwipe).toHaveReceivedEventTimes(0);
+
+ const openAmount = await item.evaluate((el: HTMLIonItemSlidingElement) => el.getOpenAmount());
+
+ expect(Math.abs(openAmount)).toBeGreaterThan(0);
+ });
+ });
+});
+
+/**
+ * Velocity-based trigger: a fast short swipe should trigger the full animation
+ * even if the raw distance alone wouldn't exceed the threshold.
+ * This behavior does not vary across modes.
+ */
+configs({ modes: ['md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
+ test.describe(title('item-sliding: full swipe velocity'), () => {
+ test('should trigger full swipe animation with fast velocity', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Expandable End (Swipe Left)
+
+
+ Delete
+
+
+ `,
+ config
+ );
+
+ const ionSwipe = await page.spyOnEvent('ionSwipe');
+ const item = page.locator('ion-item-sliding');
+ const box = (await item.boundingBox())!;
+
+ // Few steps = high velocity gesture
+ const startX = config.direction === 'rtl' ? box.x + 30 : box.x + box.width - 10;
+ const startY = box.y + box.height / 2;
+ const dragByX = config.direction === 'rtl' ? box.width - 40 : -(box.width - 40);
+
+ await dragElementBy(item, page, dragByX, 0, startX, startY, true, 3);
+ await ionSwipe.next();
+
+ expect(ionSwipe).toHaveReceivedEventTimes(1);
+ });
+ });
+});
diff --git a/core/src/components/item-sliding/test/hue/index.html b/core/src/components/item-sliding/test/hue/index.html
new file mode 100644
index 00000000000..efc289edae8
--- /dev/null
+++ b/core/src/components/item-sliding/test/hue/index.html
@@ -0,0 +1,135 @@
+
+
+
+ Item Sliding - Hue
+
+
+
+ Item Sliding - Hue
+
+
+
+
+
+
+ Default Colors
+
+
+
+ Bold
+
+
+ Default
+
+
+
+
+
+ Subtle
+
+
+ Default
+
+
+
+
+ Core Colors
+
+
+
+ Bold
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+
+ Subtle
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+ Status Colors
+
+
+
+ Bold
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+
+ Subtle
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+ Neutral Colors
+
+
+
+ Bold
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+
+ Subtle
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts
new file mode 100644
index 00000000000..43e02a732b7
--- /dev/null
+++ b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts
@@ -0,0 +1,152 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+ test.describe(title('item-option: hue'), () => {
+ test('should render subtle item options', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Default Color
+
+
+
+ Default
+
+
+
+
+
+
+
+ Core Colors
+
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+
+
+
+ Status Colors
+
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+
+
+
+ Neutral Colors
+
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+ `,
+ config
+ );
+
+ await page.evaluate(() => {
+ const items = document.querySelectorAll('ion-item-sliding');
+ items.forEach((item: any) => item.open('start'));
+ });
+
+ // Wait for options to be visible
+ await page.waitForSelector('ion-item-options:visible', { state: 'visible' });
+
+ await expect(page.locator('ion-list')).toHaveScreenshot(screenshot('item-option-hue-subtle'));
+ });
+
+ test('should render bold item options', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Default Color
+
+
+
+ Default
+
+
+
+
+
+
+
+ Core Colors
+
+
+
+ Primary
+ Secondary
+ Tertiary
+
+
+
+
+
+
+
+ Status Colors
+
+
+
+ Success
+ Warning
+ Danger
+
+
+
+
+
+
+
+ Neutral Colors
+
+
+
+ Light
+ Medium
+ Dark
+
+
+
+
+ `,
+ config
+ );
+
+ await page.evaluate(() => {
+ const items = document.querySelectorAll('ion-item-sliding');
+ items.forEach((item: any) => item.open('start'));
+ });
+
+ // Wait for options to be visible
+ await page.waitForSelector('ion-item-options:visible', { state: 'visible' });
+
+ await expect(page.locator('ion-list')).toHaveScreenshot(screenshot('item-option-hue-bold'));
+ });
+ });
+});
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..87b02fecbb7
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..26bcbb8f377
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..34b0d31f9b7
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..14f98625589
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4cc278a7ce3
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2933bbbf234
Binary files /dev/null and b/core/src/components/item-sliding/test/hue/item-sliding.e2e.ts-snapshots/item-option-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/index.html b/core/src/components/item-sliding/test/icons/index.html
index 853fccf379c..e6e1165c214 100644
--- a/core/src/components/item-sliding/test/icons/index.html
+++ b/core/src/components/item-sliding/test/icons/index.html
@@ -32,8 +32,8 @@
-
-
+
@@ -43,14 +43,14 @@
Icons in Start Slot
-
-
-
+
+
+
@@ -59,14 +59,14 @@
Icons in End Slot
-
-
-
+
+
+
@@ -75,14 +75,18 @@
Icons in Top Slot
-
-
+
-
+
+
+
@@ -91,14 +95,18 @@
Icons in Bottom Slot
-
-
+
-
+
+
+
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
index 215457391e2..4716a3054c5 100644
--- a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
+++ b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
@@ -1,6 +1,8 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS, DRAG_STEPS_UNDER_FULL_SWIPE } from '../test.utils';
+
/**
* item-sliding doesn't have mode-specific styling,
* but the child components, item-options and item-option, do.
@@ -8,14 +10,15 @@ import { configs, test, dragElementBy } from '@utils/test/playwright';
* It is important to test all modes to ensure that the
* child components are being rendered correctly.
*/
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'ios', 'md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item-sliding: icons'), () => {
- test('should not have visual regressions', async ({ page }) => {
+ test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/item-sliding/test/icons`, config);
+ });
- const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
- for (const itemID of itemIDs) {
- const item = page.locator(`#${itemID}`);
+ ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'].forEach((position) => {
+ test(`${position} - should not have visual regressions`, async ({ page }) => {
+ const item = page.locator(`#${position}`);
/**
* Negative dragByX value to drag element from the right to the left
@@ -23,15 +26,15 @@ configs().forEach(({ title, screenshot, config }) => {
* Positive dragByX value to drag element from the left to the right
* to reveal the options on the left side.
*/
- const dragByX = config.direction === 'rtl' ? 150 : -150;
+ const dragByX = config.direction === 'rtl' ? DRAG_DISTANCE_MULTIPLE_OPTIONS : -DRAG_DISTANCE_MULTIPLE_OPTIONS;
- await dragElementBy(item, page, dragByX);
+ await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
await page.waitForChanges();
// Convert camelCase ids to kebab-case for screenshot file names
- const itemIDKebab = itemID.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
- await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemIDKebab}`));
- }
+ const positionKebab = position.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+ await expect(item).toHaveScreenshot(screenshot(`item-sliding-${positionKebab}`));
+ });
});
});
});
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..34eb0317a27
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e3bb72f497c
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..de6eda1ea8b
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..42066eda64e
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..efd8c67afb2
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a9c642d6cc1
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png
index a7d65c397c8..aefcdec10a3 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png
index 2549f16cbf0..65b6391fb71 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png
index ad10c3a83b1..994336beaea 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png
index dc4deb2133d..20d9467cf57 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png
index 0d0a6da1b44..ac780b9ad24 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png
index 9f2bbc660c3..ece025ec96d 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png
index 8520fadbbcf..9a2d3c4ccbc 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png
index 080ccf9bbdd..b7261feeeb6 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png
index 7ed28d062ed..0ef0bc6063b 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png
index c208da72078..8e9e9e6fcde 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png
index bd417f7418c..da280e65cd2 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png
index c956b6691a9..96c5dba7421 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f093a224712
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c26c74fcefe
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e7563ce0f92
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bb3aa116a10
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c08a821fb0a
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..dd89f050d3b
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png
index 2e23c90aacc..3997fab62f8 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png
index 1d0ef31853c..25c145e12a3 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png
index bdd282aac24..98266b35d01 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png
index 8f78bde81fd..1f1970e104c 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png
index 152b1824bf4..377809b6261 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png
index 4cdbb1c453d..0c075721021 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png
index 1bfdba84a58..dc32a8932a9 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png
index f06ea820e47..a0723798f0a 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png
index e1dfe2f1374..daaabcd6d84 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png
index e80296efdfd..3f87e7f3d0f 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png
index fe818a0a70f..2c74e19d4fe 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png
index 799363e3c9e..2f886b09c3e 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..19836857e47
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..07452b7fd18
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..65d3eea5cd7
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3627f5dc171
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5046a89c93f
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..32a7dfa86a7
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png
index cd418e391b7..5862aaa6c8e 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png
index 1406265e42f..0e141632a77 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png
index 417892db1b5..56fb9f72fe1 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png
index 8e42bb10227..ed9690ff536 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png
index 6bb3630fb57..e5256733cfa 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png
index f81c9197bc2..d338479cc14 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png
index 3cdc165b3d6..0d6c05af785 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png
index 41c88056b73..93b94ec59c4 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png
index e0b13ee16a6..892e8be89b3 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png
index 03947e8207b..e3c78372f1e 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png
index 390007cb5fd..aa42bf4bd25 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png
index d75b2ad0d9b..138cfb0b99e 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ac7efda45a1
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..de3292cc2cc
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..66e0fc4cbbf
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2f290b8587b
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d3b9a4cf242
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a948365592d
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png
index 7597cb3732d..4e784a0255d 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png
index deb8c30b81c..dad017915f6 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png
index abaee5dcc46..881a932a4ca 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png
index e9cd6bf5f63..3752fda58f9 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png
index 82f3f7271d7..75581467598 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png
index 99a449bf6aa..3b1221d33da 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png
index 8a5c64486ad..cf1e912b235 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png
index 58e5da8d0a4..d3330755e7f 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png
index 94ebca30074..e30c120390a 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png
index fc927961235..c0a7d6f61a1 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png
index d0efa53595b..4858288bc4f 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png
index 0a3f1d6f51b..0208b51fb33 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e72d46141cd
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6a51e71732f
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3066c0bb8e3
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b654668cedd
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..60b8b26c666
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..081a16b3eac
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png
index 1ba83c30f48..d8b796ea10b 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png
index a1d45c37809..ec8a0659120 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png
index 21d0b6fa407..c9707e637d9 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png
index 6b03c664169..f7330a6bc7e 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png
index a8b7f8127a8..c7e1a97be70 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png
index be8511d4c8d..f20542fdf4b 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png
index 51f56320a8d..2b4e270da23 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png
index 0738e2c0a7d..f76599de9ad 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png
index 4e49ac775a2..179919be560 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png
index ec1f008657c..c67d112a3b9 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png
index 59f775889f5..01575198a36 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png
index 05b326fe5cf..8ad226a1df0 100644
Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts b/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts
index 53772e7f02a..9fc0b5e9446 100644
--- a/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts
+++ b/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts
@@ -1,5 +1,8 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';
+
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS } from '../test.utils';
+
/**
* This behavior does not vary across modes/directions
*/
@@ -15,7 +18,15 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
- await dragElementBy(itemSlidingEl, page, -150, 0, undefined, undefined, false);
+ /**
+ * No need to increase steps to prevent the full swipe threshold
+ * from being crossed because:
+ * - we are not testing swipe behavior here
+ * - increasing steps is only in Webkit since it accumulates velocity
+ * faster than other browsers, and this test is skipped in Webkit, so
+ * the default step count is safe to use
+ */
+ await dragElementBy(itemSlidingEl, page, -DRAG_DISTANCE_MULTIPLE_OPTIONS, 0, undefined, undefined, false);
/**
* Do not use scrollToBottom() or other scrolling methods
diff --git a/core/src/components/item-sliding/test/shapes/index.html b/core/src/components/item-sliding/test/shapes/index.html
new file mode 100644
index 00000000000..05fdb9e97db
--- /dev/null
+++ b/core/src/components/item-sliding/test/shapes/index.html
@@ -0,0 +1,110 @@
+
+
+
+ Item Sliding - Shapes
+
+
+
+ Item Sliding - Shapes
+
+
+
+
+
+
+
+ Default
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Round
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Soft
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Rectangular
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts
new file mode 100644
index 00000000000..624196217a0
--- /dev/null
+++ b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts
@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
+
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS, DRAG_STEPS_UNDER_FULL_SWIPE } from '../test.utils';
+
+/**
+ * The shapes on the `item-option` do not vary by direction
+ * when they are not being dragged.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('item-sliding: shapes'), () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(`/src/components/item-sliding/test/shapes`, config);
+ });
+
+ ['round', 'soft', 'rectangular'].forEach((shape) => {
+ test(`${shape} - should not have visual regressions when not expanded`, async ({ page }) => {
+ const item = page.locator(`#${shape}`);
+
+ /**
+ * Negative dragByX value to drag element from the right to the left
+ * to reveal the options on the right side.
+ */
+ const dragByX = -DRAG_DISTANCE_MULTIPLE_OPTIONS;
+
+ await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, DRAG_STEPS_UNDER_FULL_SWIPE);
+ await page.waitForChanges();
+
+ await expect(item).toHaveScreenshot(screenshot(`item-sliding-${shape}`));
+ });
+ });
+ });
+});
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b9d10cae03b
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..57ceda4f05c
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e91360dc168
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e72d46141cd
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6a51e71732f
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3066c0bb8e3
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f403e9118af
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5802a7ee531
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cfa0c6d6a82
Binary files /dev/null and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/index.html b/core/src/components/item-sliding/test/states/index.html
new file mode 100644
index 00000000000..56610f8548e
--- /dev/null
+++ b/core/src/components/item-sliding/test/states/index.html
@@ -0,0 +1,42 @@
+
+
+
+ Item Sliding - States
+
+
+
+ Item Sliding - States
+
+
+
+
+
+
+
+ Disabled Options
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts
new file mode 100644
index 00000000000..f30660803db
--- /dev/null
+++ b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts
@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
+
+import { DRAG_DISTANCE_MULTIPLE_OPTIONS } from '../test.utils';
+
+/**
+ * This behavior does not vary across modes
+ */
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('item-sliding: states'), () => {
+ test.describe('state: disabled', () => {
+ test('should not have visual regressions for an option', async ({ page }) => {
+ await page.goto(`/src/components/item-sliding/test/states`, config);
+
+ const item = page.locator('#disabled-options');
+
+ /**
+ * Negative dragByX value to drag element from the right to the left
+ * to reveal the options on the right side.
+ */
+ const dragByX = -DRAG_DISTANCE_MULTIPLE_OPTIONS;
+
+ /**
+ * No need to increase steps to prevent the full swipe threshold from
+ * being crossed because the option is disabled, so the option will
+ * never expand fully regardless of drag speed.
+ */
+ await dragElementBy(item, page, dragByX);
+ await page.waitForChanges();
+
+ await expect(item).toHaveScreenshot(screenshot(`item-sliding-option-disabled`));
+ });
+ });
+ });
+});
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0ebcad066c7
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..73b8618969b
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d6c1eeb309c
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..05066bcef5e
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e7b1d49897c
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9c191e594e8
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..794bc05b156
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fcc0371664a
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2bb38daf416
Binary files /dev/null and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/test.utils.ts b/core/src/components/item-sliding/test/test.utils.ts
index 7bda6511efe..b18803b4af0 100644
--- a/core/src/components/item-sliding/test/test.utils.ts
+++ b/core/src/components/item-sliding/test/test.utils.ts
@@ -1,6 +1,21 @@
import { expect } from '@playwright/test';
import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
+/**
+ * Drag distances that reveal options without crossing the full swipe
+ * threshold (`optsWidth` + `SWIPE_MARGIN`). A narrower options panel
+ * requires a shorter drag.
+ */
+export const DRAG_DISTANCE_SINGLE_OPTION = 100;
+export const DRAG_DISTANCE_MULTIPLE_OPTIONS = 150;
+
+/**
+ * The number of drag steps used when revealing options. A higher step
+ * count slows the drag velocity, keeping it below the full swipe
+ * threshold in WebKit. See `dragElementBy` for more details.
+ */
+export const DRAG_STEPS_UNDER_FULL_SWIPE = 15;
+
/**
* Warning: This function will fail when in RTL mode.
* TODO(FW-3711): Remove the `directions` config when this issue preventing
diff --git a/core/src/components/item/item.common.scss b/core/src/components/item/item.common.scss
new file mode 100644
index 00000000000..044bf396531
--- /dev/null
+++ b/core/src/components/item/item.common.scss
@@ -0,0 +1,387 @@
+@import "../../themes/mixins";
+
+// Item
+// --------------------------------------------------
+
+:host {
+ /**
+ * @prop --background: Background of the item
+ * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
+ * @prop --background-activated-opacity: Opacity of the item background when pressed
+ * @prop --background-focused: Background of the item when focused with the tab key
+ * @prop --background-focused-opacity: Opacity of the item background when focused with the tab key
+ * @prop --background-hover: Background of the item on hover
+ * @prop --background-hover-opacity: Opacity of the background of the item on hover
+ *
+ * @prop --border-color: Color of the item border
+ * @prop --border-radius: Radius of the item border
+ * @prop --border-style: Style of the item border
+ * @prop --border-width: Width of the item border
+ *
+ * @prop --color: Color of the item
+ * @prop --color-activated: Color of the item when pressed
+ * @prop --color-focused: Color of the item when focused with the tab key
+ * @prop --color-hover: Color of the item on hover
+ *
+ * @prop --detail-icon-color: Color of the item detail icon
+ * @prop --detail-icon-opacity: Opacity of the item detail icon
+ * @prop --detail-icon-font-size: Font size of the item detail icon
+ *
+ * @prop --inner-border-width: Width of the item inner border
+ * @prop --inner-box-shadow: Box shadow of the item inner
+ * @prop --inner-padding-top: Top padding of the item inner
+ * @prop --inner-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
+ * @prop --inner-padding-bottom: Bottom padding of the item inner
+ * @prop --inner-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner
+ *
+ * @prop --min-height: Minimum height of the item
+ *
+ * @prop --padding-bottom: Bottom padding of the item
+ * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
+ * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
+ * @prop --padding-top: Top padding of the item
+ *
+ * @prop --transition: Transition of the item
+ *
+ * @prop --ripple-color: Color of the item ripple effect
+ *
+ */
+ --border-radius: 0px;
+ --border-width: 0px;
+ --border-style: solid;
+ --padding-top: 0px;
+ --padding-bottom: 0px;
+ --padding-end: 0px;
+ --padding-start: 0px;
+ --inner-border-width: 0px;
+ --inner-padding-top: 0px;
+ --inner-padding-bottom: 0px;
+ --inner-padding-start: 0px;
+ --inner-padding-end: 0px;
+ --inner-box-shadow: none;
+ --detail-icon-color: initial;
+ --detail-icon-font-size: 1.25em;
+ --detail-icon-opacity: 0.25;
+ --color-activated: var(--color);
+ --color-focused: var(--color);
+ --color-hover: var(--color);
+ --ripple-color: currentColor;
+
+ @include font-smoothing();
+
+ display: block;
+
+ position: relative;
+
+ align-items: center;
+ justify-content: space-between;
+
+ outline: none;
+
+ color: var(--color);
+
+ text-align: initial;
+ text-decoration: none;
+
+ overflow: hidden;
+ box-sizing: border-box;
+}
+
+// Item: Activated
+// --------------------------------------------------
+
+:host(.ion-activated) .item-native {
+ color: var(--color-activated);
+
+ &::after {
+ background: var(--background-activated);
+
+ opacity: var(--background-activated-opacity);
+ }
+}
+
+// Item: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .item-native {
+ color: var(--color-focused);
+
+ &::after {
+ background: var(--background-focused);
+
+ opacity: var(--background-focused-opacity);
+ }
+}
+
+// Item: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+ :host(.ion-activatable:not(.ion-focused):hover) .item-native {
+ color: var(--color-hover);
+
+ &::after {
+ background: var(--background-hover);
+
+ opacity: var(--background-hover-opacity);
+ }
+ }
+}
+
+// Item: Interactive
+// --------------------------------------------------
+
+// Inputs and textareas do not need the cursor, but other components like checkbox or toggle do.
+:host(.item-control-needs-pointer-cursor) {
+ cursor: pointer;
+}
+
+// Item: Disabled
+// --------------------------------------------------
+
+:host(.item-interactive-disabled:not(.item-multiple-inputs)) {
+ cursor: default;
+ pointer-events: none;
+}
+
+:host(.item-disabled) {
+ cursor: default;
+ opacity: 0.3;
+ pointer-events: none;
+}
+
+// Native Item
+// --------------------------------------------------
+
+.item-native {
+ @include border-radius(var(--border-radius));
+ @include margin(0);
+ @include padding(var(--padding-top), null, var(--padding-bottom));
+ @include text-inherit();
+
+ /* stylelint-disable */
+ @include ltr() {
+ padding-right: var(--padding-end);
+ padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+ }
+
+ @include rtl() {
+ padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+ padding-left: var(--padding-end);
+ }
+ /* stylelint-enable */
+
+ display: flex;
+ position: relative;
+
+ align-items: inherit;
+ justify-content: inherit;
+
+ width: 100%;
+ min-height: var(--min-height);
+
+ transition: var(--transition);
+
+ border-width: var(--border-width);
+ border-style: var(--border-style);
+ border-color: var(--border-color);
+
+ outline: none;
+
+ background: var(--background);
+
+ line-height: inherit;
+
+ overflow: inherit;
+
+ z-index: 1;
+
+ box-sizing: border-box;
+}
+
+.item-native::-moz-focus-inner {
+ border: 0;
+}
+
+.item-native::after {
+ @include button-state();
+
+ transition: var(--transition);
+
+ z-index: -1;
+}
+
+button,
+a {
+ cursor: pointer;
+ user-select: none;
+
+ -webkit-user-drag: none;
+}
+
+// Inner Item
+// --------------------------------------------------
+
+.item-inner {
+ @include margin(0);
+ @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom));
+
+ /* stylelint-disable */
+ @include ltr() {
+ padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+ padding-left: var(--inner-padding-start);
+ }
+
+ @include rtl() {
+ padding-right: var(--inner-padding-start);
+ padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+ }
+ /* stylelint-enable */
+
+ display: flex;
+
+ // This is required to work with an inset highlight
+ position: relative;
+
+ flex: 1;
+
+ flex-direction: inherit;
+
+ align-items: inherit;
+ align-self: stretch;
+
+ min-height: inherit;
+
+ border-width: var(--inner-border-width);
+ border-style: var(--border-style);
+ border-color: var(--border-color);
+
+ box-shadow: var(--inner-box-shadow);
+ overflow: inherit;
+ box-sizing: border-box;
+}
+
+// Item Detail Icon
+// --------------------------------------------------
+
+.item-detail-icon {
+ /**
+ * IonItem applies its own end padding. However,
+ * all IonIcons have the same bounding box meaning
+ * there may be white space for narrow icons. As
+ * a result, the white space gives the appearance
+ * that there is too much end margin. We move the default
+ * chevron icon over to account for this extra whitespace.
+ */
+ @include margin(null, -6px, null, calc(var(--inner-padding-end) / 2));
+
+ color: var(--detail-icon-color);
+
+ font-size: var(--detail-icon-font-size);
+
+ opacity: var(--detail-icon-opacity);
+}
+
+// Item Slots
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+ font-size: 1.6em;
+}
+
+::slotted(ion-button) {
+ --margin-top: 0;
+ --margin-bottom: 0;
+ --margin-start: 0;
+ --margin-end: 0;
+
+ z-index: 1;
+}
+
+::slotted(ion-label:not([slot="end"])) {
+ flex: 1;
+
+ // Setting width to min-content allows the label to
+ // shrink and wrap its text instead of moving to its
+ // own row if there are slotted elements next to it
+ width: min-content;
+
+ /**
+ * We allow labels in the default
+ * slot to grow. However, we do not
+ * want them to grow indefinitely.
+ */
+ max-width: 100%;
+}
+
+// Item Input
+// --------------------------------------------------
+
+:host(.item-input) {
+ align-items: center;
+}
+
+.input-wrapper {
+ display: flex;
+
+ // This flex property is required in order to keep
+ // the label from shrinking when there are wide
+ // elements next to it
+ flex: 1;
+
+ flex-direction: inherit;
+
+ align-items: inherit;
+ align-self: stretch;
+
+ text-overflow: ellipsis;
+
+ // Makes the wrapper a scroll container, which zeroes its automatic minimum
+ // size and lets long labels ellipsize
+ overflow: inherit;
+
+ box-sizing: border-box;
+}
+
+:host(.item-label-stacked),
+:host(.item-label-floating) {
+ align-items: start;
+}
+
+:host(.item-label-stacked) .input-wrapper,
+:host(.item-label-floating) .input-wrapper {
+ flex: 1;
+ flex-direction: column;
+}
+
+// Item w/ Multiple Inputs
+// --------------------------------------------------
+// Multiple inputs in an item should have the input
+// cover relative to themselves instead of the item
+
+:host(.item-multiple-inputs) ::slotted(ion-checkbox),
+:host(.item-multiple-inputs) ::slotted(ion-datetime),
+:host(.item-multiple-inputs) ::slotted(ion-radio) {
+ position: relative;
+}
+
+// Item Textarea
+// --------------------------------------------------
+
+:host(.item-textarea) {
+ align-items: stretch;
+}
+
+// Item Reorder
+// --------------------------------------------------
+
+::slotted(ion-reorder[slot]) {
+ @include margin(0, null);
+}
+
+// Item Button Ripple effect
+// --------------------------------------------------
+
+ion-ripple-effect {
+ color: var(--ripple-color);
+}
diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
new file mode 100644
index 00000000000..107480559a0
--- /dev/null
+++ b/core/src/components/item/item.ionic.scss
@@ -0,0 +1,110 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./item.common";
+
+// Item
+// --------------------------------------------------
+
+:host {
+ --background: #{globals.$ion-bg-surface-default};
+ --background-activated: #{globals.$ion-bg-neutral-subtlest-press};
+ --background-activated-opacity: 1;
+ --border-color: #{globals.$ion-primitives-neutral-300};
+ --border-style: #{globals.$ion-border-style-solid};
+ --border-width: #{0 0 globals.$ion-border-size-025 0};
+ --color: #{globals.$ion-text-default};
+ --detail-icon-font-size: #{globals.$ion-scale-600};
+ --detail-icon-opacity: 1;
+ --min-height: #{globals.$ion-scale-1800};
+ --padding-top: #{globals.$ion-space-200};
+ --padding-end: #{globals.$ion-space-400};
+ --padding-bottom: #{globals.$ion-space-200};
+ --padding-start: #{globals.$ion-space-400};
+
+ @include globals.typography(globals.$ion-body-lg-medium);
+}
+
+// Inner Item
+// --------------------------------------------------
+
+.item-inner {
+ // This prevents the padding/margin from
+ // being excluded from the height calculation.
+ min-height: initial;
+}
+
+// Item Detail Icon
+// --------------------------------------------------
+
+.item-detail-icon {
+ margin-inline-end: 0;
+}
+
+// Ionic Item Slots
+// --------------------------------------------------
+
+slot[name="start"]::slotted(*) {
+ @include globals.margin(null, #{globals.$ion-space-400}, null, null);
+}
+
+slot[name="end"]::slotted(*) {
+ @include globals.margin(null, null, null, #{globals.$ion-space-400});
+}
+
+::slotted(ion-icon:not(.item-detail-icon)) {
+ color: globals.$ion-primitives-neutral-1000;
+
+ font-size: globals.$ion-scale-1000;
+}
+
+// Item: Disabled
+// --------------------------------------------------
+
+:host(.item-disabled) .item-native::after {
+ @include globals.disabled-state();
+}
+
+// Item: Focused
+// --------------------------------------------------
+:host(.ion-focused) .item-native::after {
+ @include globals.border-radius(inherit);
+ @include globals.position(0, 0, 0, 0);
+ @include globals.focused-state(
+ globals.$ion-border-size-050,
+ globals.$ion-border-style-solid,
+ globals.$ion-border-focus-default
+ );
+
+ position: absolute;
+
+ outline-offset: calc(globals.$ion-border-size-050 * -1);
+
+ content: "";
+}
+
+// Ionic Item Lines
+// --------------------------------------------------
+
+// Full lines - apply the border to the item
+// Inset lines - apply the border to the item inner
+:host(.item-lines-full) {
+ --border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
+ globals.$ion-border-size-0};
+}
+
+:host(.item-lines-inset) {
+ --inner-border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
+ globals.$ion-border-size-0};
+}
+
+// Full lines - remove the border from the item inner (inset list items)
+// Inset lines - remove the border on the item (full list items)
+// No lines - remove the border on both (full / inset list items)
+:host(.item-lines-inset),
+:host(.item-lines-none) {
+ --border-width: #{globals.$ion-border-size-0};
+}
+
+:host(.item-lines-full),
+:host(.item-lines-none) {
+ --inner-border-width: #{globals.$ion-border-size-0};
+}
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index 54d897251a8..b6d2b0447d0 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -1,4 +1,4 @@
-@import "./item";
+@import "./item.native";
@import "./item.ios.vars";
// iOS Item
@@ -24,16 +24,15 @@
--background-activated: #{$text-color};
--background-focused: #{$text-color};
--background-hover: currentColor;
- --background-activated-opacity: .12;
- --background-focused-opacity: .15;
- --background-hover-opacity: .04;
+ --background-activated-opacity: 0.12;
+ --background-focused-opacity: 0.15;
+ --background-hover-opacity: 0.04;
--border-color: #{$item-ios-border-bottom-color};
--color: #{$item-ios-color};
font-size: $item-ios-font-size;
}
-
// iOS Item: States
// --------------------------------------------------
@@ -44,22 +43,20 @@
:host(.ion-color.ion-focused) .item-native::after {
background: #000;
- opacity: .15;
+ opacity: 0.15;
}
:host(.ion-color.ion-activated) .item-native {
&::after {
background: #000;
- opacity: .12;
+ opacity: 0.12;
}
}
-
// iOS Item Lines
// --------------------------------------------------
-
// Full lines - apply the border to the item
// Inset lines - apply the border to the item inner
:host(.item-lines-full) {
@@ -87,23 +84,36 @@
// --------------------------------------------------
::slotted([slot="start"]) {
- @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start);
+ @include margin(
+ $item-ios-slot-start-margin-top,
+ $item-ios-slot-start-margin-end,
+ $item-ios-slot-start-margin-bottom,
+ $item-ios-slot-start-margin-start
+ );
}
::slotted([slot="end"]) {
- @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
+ @include margin(
+ $item-ios-slot-end-margin-top,
+ $item-ios-slot-end-margin-end,
+ $item-ios-slot-end-margin-bottom,
+ $item-ios-slot-end-margin-start
+ );
}
-
// iOS Slotted Icon
// --------------------------------------------------
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]) {
- @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
+ @include margin(
+ $item-ios-icon-slot-margin-top,
+ $item-ios-icon-slot-margin-end,
+ $item-ios-icon-slot-margin-bottom,
+ $item-ios-icon-slot-margin-start
+ );
}
-
// iOS Slotted Toggle
// --------------------------------------------------
@@ -117,7 +127,12 @@
:host(.item-label-stacked) ::slotted([slot="end"]),
:host(.item-label-floating) ::slotted([slot="end"]) {
- @include margin($item-ios-label-slot-end-margin-top, $item-ios-label-slot-end-margin-end, $item-ios-label-slot-end-margin-bottom, $item-ios-label-slot-end-margin-start);
+ @include margin(
+ $item-ios-label-slot-end-margin-top,
+ $item-ios-label-slot-end-margin-end,
+ $item-ios-label-slot-end-margin-bottom,
+ $item-ios-label-slot-end-margin-start
+ );
}
// iOS Item Button
@@ -126,8 +141,8 @@
::slotted(.button-small) {
--padding-top: 1px;
--padding-bottom: 1px;
- --padding-start: .5em;
- --padding-end: .5em;
+ --padding-start: 0.5em;
+ --padding-end: 0.5em;
min-height: 24px;
@@ -157,7 +172,6 @@
@include margin(($item-ios-padding-end * 0.5));
}
-
// iOS Radio / Toggle Item Label
// -----------------------------------------
@@ -166,7 +180,6 @@
@include margin-horizontal(0px, null);
}
-
// iOS Slotted Label
// --------------------------------------------------
diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss
index 0823827d89a..223b08125f3 100644
--- a/core/src/components/item/item.ios.vars.scss
+++ b/core/src/components/item/item.ios.vars.scss
@@ -1,110 +1,109 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
// iOS Item
// --------------------------------------------------
/// @prop - Minimum height of the item
-$item-ios-min-height: 44px;
+$item-ios-min-height: 44px;
/// @prop - Font size of the item
-$item-ios-font-size: dynamic-font(16px);
+$item-ios-font-size: dynamic-font(16px);
/// @prop - Margin top of the item paragraph
-$item-ios-paragraph-margin-top: 0;
+$item-ios-paragraph-margin-top: 0;
/// @prop - Margin end of the item paragraph
-$item-ios-paragraph-margin-end: 0;
+$item-ios-paragraph-margin-end: 0;
/// @prop - Margin bottom of the item paragraph
-$item-ios-paragraph-margin-bottom: 2px;
+$item-ios-paragraph-margin-bottom: 2px;
/// @prop - Margin start of the item paragraph
-$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;
+$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;
/// @prop - Font size of the item paragraph
-$item-ios-paragraph-font-size: dynamic-font(14px);
+$item-ios-paragraph-font-size: dynamic-font(14px);
/// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);
+$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);
/// @prop - Width of the avatar in the item
-$item-ios-avatar-width: 36px;
+$item-ios-avatar-width: 36px;
/// @prop - Height of the avatar in the item
-$item-ios-avatar-height: $item-ios-avatar-width;
+$item-ios-avatar-height: $item-ios-avatar-width;
/// @prop - Size of the thumbnail in the item
-$item-ios-thumbnail-size: 56px;
+$item-ios-thumbnail-size: 56px;
/// @prop - Padding top for the item content
-$item-ios-padding-top: 10px;
+$item-ios-padding-top: 10px;
/// @prop - Padding end for the item content
-$item-ios-padding-end: 16px;
+$item-ios-padding-end: 16px;
/// @prop - Padding bottom for the item content
-$item-ios-padding-bottom: 10px;
+$item-ios-padding-bottom: 10px;
/// @prop - Padding start for the item content
-$item-ios-padding-start: 16px;
+$item-ios-padding-start: 16px;
/// @prop - Border bottom width for the item when lines are displayed
-$item-ios-border-bottom-width: $hairlines-width;
+$item-ios-border-bottom-width: $hairlines-width;
/// @prop - Border bottom style for the item when lines are displayed
-$item-ios-border-bottom-style: solid;
+$item-ios-border-bottom-style: solid;
/// @prop - Border bottom color for the item when lines are displayed
-$item-ios-border-bottom-color: $item-ios-border-color;
-
+$item-ios-border-bottom-color: $item-ios-border-color;
// Item Slots
// --------------------------------------------------
/// @prop - Margin top for the start slot
-$item-ios-slot-start-margin-top: 2px;
+$item-ios-slot-start-margin-top: 2px;
/// @prop - Margin end for the start slot
-$item-ios-slot-start-margin-end: $item-ios-padding-end;
+$item-ios-slot-start-margin-end: $item-ios-padding-end;
/// @prop - Margin bottom for the start slot
-$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top;
+$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top;
/// @prop - Margin start for the start slot
-$item-ios-slot-start-margin-start: 0;
+$item-ios-slot-start-margin-start: 0;
/// @prop - Margin top for the end slot
-$item-ios-slot-end-margin-top: null;
+$item-ios-slot-end-margin-top: null;
/// @prop - Margin end for the end slot
-$item-ios-slot-end-margin-end: null;
+$item-ios-slot-end-margin-end: null;
/// @prop - Margin bottom for the end slot
-$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top;
+$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top;
/// @prop - Margin start for the end slot
-$item-ios-slot-end-margin-start: null;
+$item-ios-slot-end-margin-start: null;
/// @prop - Margin top for an icon in the start/end slot
-$item-ios-icon-slot-margin-top: 7px;
+$item-ios-icon-slot-margin-top: 7px;
/// @prop - Margin end for an icon in the start/end slot
-$item-ios-icon-slot-margin-end: null;
+$item-ios-icon-slot-margin-end: null;
/// @prop - Margin bottom for an icon in the start/end slot
-$item-ios-icon-slot-margin-bottom: 7px;
+$item-ios-icon-slot-margin-bottom: 7px;
/// @prop - Margin start for an icon in the start/end slot
-$item-ios-icon-slot-margin-start: null;
+$item-ios-icon-slot-margin-start: null;
/// @prop - Margin top for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-top: 7px;
+$item-ios-label-slot-end-margin-top: 7px;
/// @prop - Margin end for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-end: null;
+$item-ios-label-slot-end-margin-end: null;
/// @prop - Margin bottom for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top;
+$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top;
/// @prop - Margin start for the end slot inside of a floating/stacked label
-$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end;
+$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end;
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 1083192e7c1..7ecb4dd009e 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -1,5 +1,5 @@
@use "sass:math";
-@import "./item";
+@import "./item.native";
@import "./item.md.vars";
@import "../label/label.md.vars";
@@ -13,8 +13,8 @@
--background-focused: currentColor;
--background-hover: currentColor;
--background-activated-opacity: 0;
- --background-focused-opacity: .12;
- --background-hover-opacity: .04;
+ --background-focused-opacity: 0.12;
+ --background-hover-opacity: 0.04;
--border-color: #{$item-md-border-bottom-color};
--color: #{$item-md-color};
--transition: opacity 15ms linear, background-color 15ms linear;
@@ -75,7 +75,12 @@
// Multi-line items should align the slotted content at the top
:host(.item-multi-line) ::slotted([slot="start"]),
:host(.item-multi-line) ::slotted([slot="end"]) {
- @include margin($item-md-multi-line-slot-margin-top, $item-md-multi-line-slot-margin-end, $item-md-multi-line-slot-margin-bottom, $item-md-multi-line-slot-margin-start);
+ @include margin(
+ $item-md-multi-line-slot-margin-top,
+ $item-md-multi-line-slot-margin-end,
+ $item-md-multi-line-slot-margin-bottom,
+ $item-md-multi-line-slot-margin-start
+ );
align-self: flex-start;
}
@@ -111,7 +116,12 @@
}
::slotted(ion-icon[slot]) {
- @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
+ @include margin(
+ $item-md-icon-slot-margin-top,
+ $item-md-icon-slot-margin-end,
+ $item-md-icon-slot-margin-bottom,
+ $item-md-icon-slot-margin-start
+ );
}
::slotted(ion-icon[slot="start"]) {
@@ -130,7 +140,6 @@
@include margin(0);
}
-
// Material Design Slotted Note
// --------------------------------------------------
@@ -143,7 +152,12 @@
}
::slotted(ion-note[slot]) {
- @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start);
+ @include padding(
+ $item-md-note-slot-padding-top,
+ $item-md-note-slot-padding-end,
+ $item-md-note-slot-padding-bottom,
+ $item-md-note-slot-padding-start
+ );
}
// Material Design Item Avatar
@@ -166,7 +180,12 @@
::slotted(ion-avatar),
::slotted(ion-thumbnail) {
- @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start);
+ @include margin(
+ $item-md-media-slot-margin-top,
+ $item-md-media-slot-margin-end,
+ $item-md-media-slot-margin-bottom,
+ $item-md-media-slot-margin-start
+ );
}
::slotted(ion-avatar[slot="start"]),
@@ -179,12 +198,16 @@
@include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
}
-
// Material Design Slotted Label
// --------------------------------------------------
::slotted(ion-label) {
- @include margin($item-md-label-margin-top, $item-md-label-margin-end, $item-md-label-margin-bottom, $item-md-label-margin-start);
+ @include margin(
+ $item-md-label-margin-top,
+ $item-md-label-margin-end,
+ $item-md-label-margin-bottom,
+ $item-md-label-margin-start
+ );
}
// Material Design Floating/Stacked Label
@@ -192,7 +215,12 @@
:host(.item-label-stacked) ::slotted([slot="end"]),
:host(.item-label-floating) ::slotted([slot="end"]) {
- @include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start);
+ @include margin(
+ $item-md-label-slot-end-margin-top,
+ $item-md-label-slot-end-margin-end,
+ $item-md-label-slot-end-margin-bottom,
+ $item-md-label-slot-end-margin-start
+ );
}
// Material Design Toggle/Radio Item
@@ -209,8 +237,8 @@
::slotted(.button-small) {
--padding-top: 2px;
--padding-bottom: 2px;
- --padding-start: .6em;
- --padding-end: .6em;
+ --padding-start: 0.6em;
+ --padding-end: 0.6em;
min-height: 25px;
diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss
index fd9087067aa..4e38c76ec26 100644
--- a/core/src/components/item/item.md.vars.scss
+++ b/core/src/components/item/item.md.vars.scss
@@ -1,185 +1,181 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
// Material Design Item
// --------------------------------------------------
/// @prop - Minimum height of the item
-$item-md-min-height: 48px;
+$item-md-min-height: 48px;
/// @prop - Color of the item paragraph
-$item-md-paragraph-text-color: $text-color-step-400;
+$item-md-paragraph-text-color: $text-color-step-400;
/// @prop - Font size of the item
-$item-md-font-size: 16px;
+$item-md-font-size: 16px;
/// @prop - Width of the avatar in the item
-$item-md-avatar-width: 40px;
+$item-md-avatar-width: 40px;
/// @prop - Height of the avatar in the item
-$item-md-avatar-height: $item-md-avatar-width;
+$item-md-avatar-height: $item-md-avatar-width;
/// @prop - Size of the thumbnail in the item
-$item-md-thumbnail-size: 56px;
+$item-md-thumbnail-size: 56px;
/// @prop - Padding top for the item content
-$item-md-padding-top: 10px;
+$item-md-padding-top: 10px;
/// @prop - Padding end for the item content
-$item-md-padding-end: 16px;
+$item-md-padding-end: 16px;
/// @prop - Padding bottom for the item content
-$item-md-padding-bottom: 11px;
+$item-md-padding-bottom: 11px;
/// @prop - Padding start for the item content
-$item-md-padding-start: 16px;
+$item-md-padding-start: 16px;
/// @prop - Border bottom width for the item when lines are displayed
-$item-md-border-bottom-width: 1px;
+$item-md-border-bottom-width: 1px;
/// @prop - Border bottom style for the item when lines are displayed
-$item-md-border-bottom-style: solid;
+$item-md-border-bottom-style: solid;
/// @prop - Border bottom color for the item when lines are displayed
-$item-md-border-bottom-color: $item-md-border-color;
+$item-md-border-bottom-color: $item-md-border-color;
// Item Label
// --------------------------------------------------
/// @prop - Margin top of the label
-$item-md-label-margin-top: 10px;
+$item-md-label-margin-top: 10px;
/// @prop - Margin end of the label
-$item-md-label-margin-end: 0;
+$item-md-label-margin-end: 0;
/// @prop - Margin bottom of the label
-$item-md-label-margin-bottom: 10px;
+$item-md-label-margin-bottom: 10px;
/// @prop - Margin start of the label
-$item-md-label-margin-start: 0;
-
+$item-md-label-margin-start: 0;
// Item Slots
// --------------------------------------------------
/// @prop - Margin start for the start slot
-$item-md-start-slot-margin-start: null;
+$item-md-start-slot-margin-start: null;
/// @prop - Margin end for the start slot
-$item-md-start-slot-margin-end: 16px;
+$item-md-start-slot-margin-end: 16px;
/// @prop - Margin start for the end slot
-$item-md-end-slot-margin-start: 16px;
+$item-md-end-slot-margin-start: 16px;
/// @prop - Margin end for the end slot
-$item-md-end-slot-margin-end: null;
+$item-md-end-slot-margin-end: null;
/// @prop - Margin top for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-top: 16px;
+$item-md-multi-line-slot-margin-top: 16px;
/// @prop - Margin end for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-end: null;
+$item-md-multi-line-slot-margin-end: null;
/// @prop - Margin bottom for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-bottom: 16px;
+$item-md-multi-line-slot-margin-bottom: 16px;
/// @prop - Margin start for content in the start/end slot in a multi-line item
-$item-md-multi-line-slot-margin-start: null;
-
+$item-md-multi-line-slot-margin-start: null;
// Icon Slots
// --------------------------------------------------
/// @prop - Margin top for an icon in the start/end slot
-$item-md-icon-slot-margin-top: 12px;
+$item-md-icon-slot-margin-top: 12px;
/// @prop - Margin end for an icon in the start/end slot
-$item-md-icon-slot-margin-end: null;
+$item-md-icon-slot-margin-end: null;
/// @prop - Margin bottom for an icon in the start/end slot
-$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top;
+$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top;
/// @prop - Margin start for an icon in the start/end slot
-$item-md-icon-slot-margin-start: null;
+$item-md-icon-slot-margin-start: null;
/// @prop - Margin start for an icon in the start slot
-$item-md-icon-start-slot-margin-start: null;
+$item-md-icon-start-slot-margin-start: null;
/// @prop - Margin end for an icon in the start slot
-$item-md-icon-start-slot-margin-end: 32px;
+$item-md-icon-start-slot-margin-end: 32px;
/// @prop - Margin end for an icon in the start slot
-$item-md-input-icon-start-slot-margin-end: 8px;
+$item-md-input-icon-start-slot-margin-end: 8px;
/// @prop - Margin start for an icon in the end slot
-$item-md-icon-end-slot-margin-start: 16px;
+$item-md-icon-end-slot-margin-start: 16px;
/// @prop - Margin end for an icon in the end slot
-$item-md-icon-end-slot-margin-end: null;
+$item-md-icon-end-slot-margin-end: null;
/// @prop - Color for an icon in the start/end slot
-$item-md-icon-slot-color: rgba($text-color-rgb, 0.54);
+$item-md-icon-slot-color: rgba($text-color-rgb, 0.54);
/// @prop - Font size of an icon in the start/end slot
-$item-md-icon-slot-font-size: 24px;
-
+$item-md-icon-slot-font-size: 24px;
// Label Slots
// --------------------------------------------------
/// @prop - Margin top for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-top: 7px;
+$item-md-label-slot-end-margin-top: 7px;
/// @prop - Margin end for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-end: null;
+$item-md-label-slot-end-margin-end: null;
/// @prop - Margin bottom for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top;
+$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top;
/// @prop - Margin start for the end slot inside of a floating/stacked label
-$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end;
-
+$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end;
// Note Slots
// --------------------------------------------------
/// @prop - Font size of a note in the start/end slot
-$item-md-note-slot-font-size: dynamic-font(11px);
+$item-md-note-slot-font-size: dynamic-font(11px);
/// @prop - Padding top for a note in the start/end slot
-$item-md-note-slot-padding-top: 18px;
+$item-md-note-slot-padding-top: 18px;
/// @prop - Padding end for a note in the start/end slot
-$item-md-note-slot-padding-end: 0;
+$item-md-note-slot-padding-end: 0;
/// @prop - Padding bottom for a note in the start/end slot
-$item-md-note-slot-padding-bottom: 10px;
+$item-md-note-slot-padding-bottom: 10px;
/// @prop - Padding start for a note in the start/end slot
-$item-md-note-slot-padding-start: $item-md-note-slot-padding-end;
+$item-md-note-slot-padding-start: $item-md-note-slot-padding-end;
// Avatar/Thumbnail Slots
// --------------------------------------------------
/// @prop - Margin top for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-top: 8px;
+$item-md-media-slot-margin-top: 8px;
/// @prop - Margin end for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-end: null;
+$item-md-media-slot-margin-end: null;
/// @prop - Margin bottom for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-bottom: 8px;
+$item-md-media-slot-margin-bottom: 8px;
/// @prop - Margin start for an avatar/thumbnail in the start/end slot
-$item-md-media-slot-margin-start: $item-md-media-slot-margin-end;
+$item-md-media-slot-margin-start: $item-md-media-slot-margin-end;
/// @prop - Margin start for an avatar/thumbnail in the start slot
-$item-md-media-start-slot-margin-start: null;
+$item-md-media-start-slot-margin-start: null;
/// @prop - Margin end for an avatar/thumbnail in the start slot
-$item-md-media-start-slot-margin-end: 16px;
+$item-md-media-start-slot-margin-end: 16px;
/// @prop - Margin start for an avatar/thumbnail in the end slot
-$item-md-media-end-slot-margin-start: 16px;
+$item-md-media-end-slot-margin-start: 16px;
/// @prop - Margin end for an avatar/thumbnail in the end slot
-$item-md-media-end-slot-margin-end: null;
+$item-md-media-end-slot-margin-end: null;
diff --git a/core/src/components/item/item.native.scss b/core/src/components/item/item.native.scss
new file mode 100644
index 00000000000..02a575bc13d
--- /dev/null
+++ b/core/src/components/item/item.native.scss
@@ -0,0 +1,65 @@
+@import "./item.common";
+@import "./item.vars";
+
+// Item
+// --------------------------------------------------
+
+:host {
+ font-family: $font-family-base;
+}
+
+// Item Focus Indicator Room
+// --------------------------------------------------
+// Widens the clip boundary so a focus indicator on a control in the default
+// slot isn't cut off. Scoped because the wider painted box overlaps end slot
+// content on items with nothing overhanging. The `ionic` theme draws its own
+// rings, so the room is only made for the `ios` and `md` indicators.
+
+:host(.item-focus-indicator-room) .input-wrapper {
+ @include margin-horizontal(-$item-input-focus-indicator-room);
+ @include padding-horizontal($item-input-focus-indicator-room);
+}
+
+// Item: Color
+// --------------------------------------------------
+
+:host(.ion-color) .item-native {
+ background: current-color(base);
+ color: current-color(contrast);
+}
+
+:host(.ion-color) .item-native,
+:host(.ion-color) .item-inner {
+ border-color: current-color(shade);
+}
+
+// Item: Activated
+// --------------------------------------------------
+
+:host(.ion-color.ion-activated) .item-native {
+ color: current-color(contrast);
+}
+
+// Item: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .item-native {
+ color: current-color(contrast);
+
+ &::after {
+ background: current-color(contrast);
+ }
+}
+
+// Item: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+ :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
+ color: #{current-color(contrast)};
+
+ &::after {
+ background: #{current-color(contrast)};
+ }
+ }
+}
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
deleted file mode 100644
index e51b931c610..00000000000
--- a/core/src/components/item/item.scss
+++ /dev/null
@@ -1,431 +0,0 @@
-@import "./item.vars";
-
-// Item
-// --------------------------------------------------
-
-:host {
- /**
- * @prop --background: Background of the item
- * @prop --background-activated: Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
- * @prop --background-activated-opacity: Opacity of the item background when pressed
- * @prop --background-focused: Background of the item when focused with the tab key
- * @prop --background-focused-opacity: Opacity of the item background when focused with the tab key
- * @prop --background-hover: Background of the item on hover
- * @prop --background-hover-opacity: Opacity of the background of the item on hover
- *
- * @prop --border-color: Color of the item border
- * @prop --border-radius: Radius of the item border
- * @prop --border-style: Style of the item border
- * @prop --border-width: Width of the item border
- *
- * @prop --color: Color of the item
- * @prop --color-activated: Color of the item when pressed
- * @prop --color-focused: Color of the item when focused with the tab key
- * @prop --color-hover: Color of the item on hover
- *
- * @prop --detail-icon-color: Color of the item detail icon
- * @prop --detail-icon-opacity: Opacity of the item detail icon
- * @prop --detail-icon-font-size: Font size of the item detail icon
- *
- * @prop --inner-border-width: Width of the item inner border
- * @prop --inner-box-shadow: Box shadow of the item inner
- * @prop --inner-padding-top: Top padding of the item inner
- * @prop --inner-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
- * @prop --inner-padding-bottom: Bottom padding of the item inner
- * @prop --inner-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner
- *
- * @prop --min-height: Minimum height of the item
- *
- * @prop --padding-bottom: Bottom padding of the item
- * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
- * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
- * @prop --padding-top: Top padding of the item
- *
- * @prop --transition: Transition of the item
- *
- * @prop --ripple-color: Color of the item ripple effect
- *
- */
- --border-radius: 0px;
- --border-width: 0px;
- --border-style: solid;
- --padding-top: 0px;
- --padding-bottom: 0px;
- --padding-end: 0px;
- --padding-start: 0px;
- --inner-border-width: 0px;
- --inner-padding-top: 0px;
- --inner-padding-bottom: 0px;
- --inner-padding-start: 0px;
- --inner-padding-end: 0px;
- --inner-box-shadow: none;
- --detail-icon-color: initial;
- --detail-icon-font-size: 1.25em;
- --detail-icon-opacity: 0.25;
- --color-activated: var(--color);
- --color-focused: var(--color);
- --color-hover: var(--color);
- --ripple-color: currentColor;
-
- @include font-smoothing();
-
- display: block;
-
- position: relative;
-
- align-items: center;
- justify-content: space-between;
-
- outline: none;
-
- color: var(--color);
-
- font-family: $font-family-base;
-
- text-align: initial;
- text-decoration: none;
-
- overflow: hidden;
- box-sizing: border-box;
-}
-
-// Item: Color
-// --------------------------------------------------
-
-:host(.ion-color) .item-native {
- background: current-color(base);
- color: current-color(contrast);
-}
-
-:host(.ion-color) .item-native,
-:host(.ion-color) .item-inner {
- border-color: current-color(shade);
-}
-
-// Item: Activated
-// --------------------------------------------------
-
-:host(.ion-activated) .item-native {
- color: var(--color-activated);
-
- &::after {
- background: var(--background-activated);
-
- opacity: var(--background-activated-opacity);
- }
-}
-
-:host(.ion-color.ion-activated) .item-native {
- color: current-color(contrast);
-}
-
-// Item: Focused
-// --------------------------------------------------
-
-:host(.ion-focused) .item-native {
- color: var(--color-focused);
-
- &::after {
- background: var(--background-focused);
-
- opacity: var(--background-focused-opacity);
- }
-}
-
-:host(.ion-color.ion-focused) .item-native {
- color: current-color(contrast);
-
- &::after {
- background: current-color(contrast);
- }
-}
-
-// Item: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
- :host(.ion-activatable:not(.ion-focused):hover) .item-native {
- color: var(--color-hover);
-
- &::after {
- background: var(--background-hover);
-
- opacity: var(--background-hover-opacity);
- }
- }
-
- :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
- color: #{current-color(contrast)};
-
- &::after {
- background: #{current-color(contrast)};
- }
- }
-}
-
-// Item: Interactive
-// --------------------------------------------------
-
-// Inputs and textareas do not need the cursor, but other components like checkbox or toggle do.
-:host(.item-control-needs-pointer-cursor) {
- cursor: pointer;
-}
-
-// Item: Disabled
-// --------------------------------------------------
-
-:host(.item-interactive-disabled:not(.item-multiple-inputs)) {
- cursor: default;
- pointer-events: none;
-}
-
-:host(.item-disabled) {
- cursor: default;
- opacity: 0.3;
- pointer-events: none;
-}
-
-// Native Item
-// --------------------------------------------------
-
-.item-native {
- @include border-radius(var(--border-radius));
- @include margin(0);
- @include padding(var(--padding-top), null, var(--padding-bottom));
- @include text-inherit();
-
- /* stylelint-disable */
- @include ltr() {
- padding-right: var(--padding-end);
- padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
- }
-
- @include rtl() {
- padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
- padding-left: var(--padding-end);
- }
- /* stylelint-enable */
-
- display: flex;
- position: relative;
-
- align-items: inherit;
- justify-content: inherit;
-
- width: 100%;
- min-height: var(--min-height);
-
- transition: var(--transition);
-
- border-width: var(--border-width);
- border-style: var(--border-style);
- border-color: var(--border-color);
-
- outline: none;
-
- background: var(--background);
-
- overflow: inherit;
-
- z-index: 1;
-
- box-sizing: border-box;
-}
-
-.item-native::-moz-focus-inner {
- border: 0;
-}
-
-.item-native::after {
- @include button-state();
-
- transition: var(--transition);
-
- z-index: -1;
-}
-
-button,
-a {
- cursor: pointer;
- user-select: none;
-
- -webkit-user-drag: none;
-}
-
-// Inner Item
-// --------------------------------------------------
-
-.item-inner {
- @include margin(0);
- @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom));
-
- /* stylelint-disable */
- @include ltr() {
- padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
- padding-left: var(--inner-padding-start);
- }
-
- @include rtl() {
- padding-right: var(--inner-padding-start);
- padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
- }
- /* stylelint-enable */
-
- display: flex;
-
- // This is required to work with an inset highlight
- position: relative;
-
- flex: 1;
-
- flex-direction: inherit;
-
- align-items: inherit;
- align-self: stretch;
-
- min-height: inherit;
-
- border-width: var(--inner-border-width);
- border-style: var(--border-style);
- border-color: var(--border-color);
-
- box-shadow: var(--inner-box-shadow);
- overflow: inherit;
- box-sizing: border-box;
-}
-
-// Item Detail Icon
-// --------------------------------------------------
-
-.item-detail-icon {
- /**
- * IonItem applies its own end padding. However,
- * all IonIcons have the same bounding box meaning
- * there may be white space for narrow icons. As
- * a result, the white space gives the appearance
- * that there is too much end margin. We move the default
- * chevron icon over to account for this extra whitespace.
- */
- @include margin(null, -6px, null, calc(var(--inner-padding-end) / 2));
-
- color: var(--detail-icon-color);
-
- font-size: var(--detail-icon-font-size);
-
- opacity: var(--detail-icon-opacity);
-}
-
-// Item Slots
-// --------------------------------------------------
-
-::slotted(ion-icon) {
- font-size: 1.6em;
-}
-
-::slotted(ion-button) {
- --margin-top: 0;
- --margin-bottom: 0;
- --margin-start: 0;
- --margin-end: 0;
-
- z-index: 1;
-}
-
-::slotted(ion-label:not([slot="end"])) {
- flex: 1;
-
- // Setting width to min-content allows the label to
- // shrink and wrap its text instead of moving to its
- // own row if there are slotted elements next to it
- width: min-content;
-
- /**
- * We allow labels in the default
- * slot to grow. However, we do not
- * want them to grow indefinitely.
- */
- max-width: 100%;
-}
-
-// Item Input
-// --------------------------------------------------
-
-:host(.item-input) {
- align-items: center;
-}
-
-.input-wrapper {
- display: flex;
-
- // This flex property is required in order to keep
- // the label from shrinking when there are wide
- // elements next to it
- flex: 1;
-
- flex-direction: inherit;
-
- align-items: inherit;
- align-self: stretch;
-
- text-overflow: ellipsis;
-
- // Makes the wrapper a scroll container, which zeroes its automatic minimum
- // size and lets long labels ellipsize
- overflow: inherit;
-
- box-sizing: border-box;
-}
-
-:host(.item-label-stacked),
-:host(.item-label-floating) {
- align-items: start;
-}
-
-:host(.item-label-stacked) .input-wrapper,
-:host(.item-label-floating) .input-wrapper {
- flex: 1;
- flex-direction: column;
-}
-
-// Item Focus Indicator Room
-// --------------------------------------------------
-// Widens the clip boundary so a focus indicator on a control in the default
-// slot isn't cut off. Scoped because the wider painted box overlaps end slot
-// content on items with nothing overhanging
-
-:host(.item-focus-indicator-room) .input-wrapper {
- @include margin-horizontal(-$item-input-focus-indicator-room);
- @include padding-horizontal($item-input-focus-indicator-room);
-}
-
-// Item w/ Multiple Inputs
-// --------------------------------------------------
-// Multiple inputs in an item should have the input
-// cover relative to themselves instead of the item
-
-:host(.item-multiple-inputs) ::slotted(ion-checkbox),
-:host(.item-multiple-inputs) ::slotted(ion-datetime),
-:host(.item-multiple-inputs) ::slotted(ion-radio) {
- position: relative;
-}
-
-// Item Textarea
-// --------------------------------------------------
-
-:host(.item-textarea) {
- align-items: stretch;
-}
-
-// Item Reorder
-// --------------------------------------------------
-
-::slotted(ion-reorder[slot]) {
- @include margin(0, null);
-}
-
-// Item Button Ripple effect
-// --------------------------------------------------
-
-ion-ripple-effect {
- color: var(--ripple-color);
-}
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 45eea6867d3..bcf9c56d447 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,3 +1,4 @@
+import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
import type { ComponentInterface } from '@stencil/core';
import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
@@ -6,14 +7,16 @@ import { inheritAttributes, raf } from '@utils/helpers';
import { createColorClasses, hostContext, openURL } from '@utils/theme';
import { chevronForward } from 'ionicons/icons';
-import { getIonMode } from '../../global/ionic-global';
+import { config } from '../../global/config';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
import type { RouterDirection } from '../router/utils/interface';
const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*
* @slot - Content is placed between the named slots if provided without a slot.
* @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
@@ -29,6 +32,7 @@ const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
styleUrls: {
ios: 'item.ios.scss',
md: 'item.md.scss',
+ ionic: 'item.ionic.scss',
},
shadow: true,
})
@@ -59,15 +63,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
@Prop() button = false;
/**
- * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
- * is `ios` and an `href` or `button` property is present.
+ * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `theme`
+ * is `"ios"` and an `href` or `button` property is present.
*/
@Prop() detail?: boolean;
/**
* The icon to use when `detail` is set to `true`.
*/
- @Prop() detailIcon = chevronForward;
+ @Prop() detailIcon?: string;
/**
* If `true`, the user cannot interact with the item.
@@ -320,12 +324,23 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
}
private canActivate(): boolean {
- return this.isClickable() || this.hasCover();
+ const theme = getIonTheme(this);
+ const mode = getIonMode(this);
+ const shouldActivate = this.isClickable() || this.hasCover();
+ if (theme !== 'ionic') {
+ return shouldActivate;
+ }
+ return mode === 'md' && shouldActivate;
}
private isFocusable(): boolean {
const focusableChild = this.el.querySelector('.ion-focusable');
- return this.canActivate() || focusableChild !== null;
+ // An item is focusable when it can receive keyboard focus: when it is
+ // clickable (has a `button` or `href`), when it has a single input cover
+ // (e.g. a radio or checkbox), or when it contains a focusable child.
+ // Focusable items get the `ion-focusable` class so the `ion-focused`
+ // class is applied while tabbing through them.
+ return this.isClickable() || this.hasCover() || focusableChild !== null;
}
private hasStartEl() {
@@ -342,15 +357,45 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
return controls[0];
}
+ get itemDetailIcon() {
+ // Return the icon if it is explicitly set
+ if (this.detailIcon != null) {
+ return this.detailIcon;
+ }
+
+ // Determine the theme and map to default icons
+ const theme = getIonTheme(this);
+ const defaultIcons = {
+ ios: chevronForward,
+ ionic: caretRightRegular,
+ md: chevronForward,
+ };
+
+ // Get the default icon based on the theme, falling back to 'md' icon if necessary
+ const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+
+ // Return the configured item detail icon or the default icon
+ return config.get('itemDetailIcon', defaultIcon);
+ }
+
+ /**
+ * The icon should be flipped when the app is RTL and
+ * the icon is a variation of chevron.
+ */
+ get shouldFlipIcon() {
+ return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
+ }
+
render() {
const {
detail,
- detailIcon,
download,
labelColorStyles,
lines,
disabled,
href,
+ itemDetailIcon,
+ shouldFlipIcon,
rel,
target,
routerAnimation,
@@ -359,7 +404,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
multipleInputs,
} = this;
const childStyles = {} as StyleEventDetail;
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
const clickable = this.isClickable();
const canActivate = this.canActivate();
const TagType = clickable ? (href === undefined ? 'button' : 'a') : ('div' as any);
@@ -423,7 +468,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
};
}
- const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
+ const showDetail = detail !== undefined ? detail : theme === 'ios' && clickable;
this.itemStyles.forEach((value) => {
Object.assign(childStyles, value);
});
@@ -452,7 +497,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
...labelColorStyles,
...createColorClasses(this.color, {
item: true,
- [mode]: true,
+ [theme]: true,
'item-lines-default': lines === undefined,
[`item-lines-${lines}`]: lines !== undefined,
'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
@@ -483,16 +528,16 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
- {canActivate && mode === 'md' &&
}
+ {canActivate && theme === 'md' &&
}
);
diff --git a/core/src/components/item/item.vars.scss b/core/src/components/item/item.vars.scss
index 2c48c677f05..5d31d2dd1f4 100644
--- a/core/src/components/item/item.vars.scss
+++ b/core/src/components/item/item.vars.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/native/native.globals";
// Item
// --------------------------------------------------
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png
index 93807f6c919..5f48983733a 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png
index 74466376010..83a0cf0476d 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png
index d2ace95a12d..3e671a92577 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png
index 9350d2910f2..0c49b646fa4 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png
index d49f451e2e2..9caf2e5aef7 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png
index 9d98155db44..1178d4b3f5b 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png
index 4f62e8d5248..cc5be4f2ad6 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png
index 735f0d61a5e..7f69a837765 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png
index 675045fb8bd..080a3a9b489 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png
index 88808118bba..5b349310f3b 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png
index 089ee9e4001..aee4dbd849e 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png
index 845742be7ff..eb9d8699659 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png
index fd7327df31b..bd1d3a696e3 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png
index 721cb14b887..aa07005d275 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png
index d47c8a69d54..f3c7a771982 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png
index 711c81d317f..d8f8c1436b9 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png
index fbf6bdee3bf..ff419b86173 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png
index 1e5ef5b04c6..860a6e50a76 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png
index cb7a98d9657..4a63c7c8d61 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png
index d9934edbd30..b3cf804b10b 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png
index 10618efdeb4..a725431351a 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png
index 8e3c5632252..7c1520a32b2 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png
index 8a667769f95..906c5cd088f 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png
index 7cf2854f4f5..529669a4ec1 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts b/core/src/components/item/test/disabled/item.e2e.ts
index 3e37ac267e1..22c64215f85 100644
--- a/core/src/components/item/test/disabled/item.e2e.ts
+++ b/core/src/components/item/test/disabled/item.e2e.ts
@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
/**
* This behavior does not vary across directions
*/
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item: disabled state'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/disabled`, config);
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a1e14da9fda
Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..63a3135dc31
Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..bedcfd26de1
Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png
index 5401cbae118..de18fba12b2 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png
index 0ccc7e7a2a2..7e75b1985eb 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png
index ec59bee89b1..1218315a058 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png
index 8c185f3e896..76620987e8a 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png
index ddee48745e8..9f980071ba5 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png
index 8defc50e4f4..634b8811ce9 100644
Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d5c5e82c563
Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5d2048bd3c4
Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fc87ba7469b
Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dd56e32d3f7
Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4de4870dd2f
Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e56bab2be8d
Binary files /dev/null and b/core/src/components/item/test/icons/item.e2e.ts-snapshots/item-icons-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts b/core/src/components/item/test/inputs/item.e2e.ts
index 29685e87521..3af6031059a 100644
--- a/core/src/components/item/test/inputs/item.e2e.ts
+++ b/core/src/components/item/test/inputs/item.e2e.ts
@@ -29,7 +29,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
popover = page.locator('ion-popover#optionsPopover');
});
- test('disabled controls should not have visual regressions', async ({ page }) => {
+ // TODO (FW-6769): Enable test when its fixed
+ test.skip('disabled controls should not have visual regressions', async ({ page }) => {
await page.click('#popover-trigger');
await ionPopoverDidPresent.next();
diff --git a/core/src/components/item/test/lines/item.e2e.ts b/core/src/components/item/test/lines/item.e2e.ts
index 7cdac80d2d2..afefcb11722 100644
--- a/core/src/components/item/test/lines/item.e2e.ts
+++ b/core/src/components/item/test/lines/item.e2e.ts
@@ -1,14 +1,210 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item: lines'), () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/item/test/lines`, config);
+ test.describe('default', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
- await page.setIonViewport();
+ const item = page.locator('ion-item');
- await expect(page).toHaveScreenshot(screenshot(`item-lines-diff`));
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-default`));
+ });
+
+ test('should not have visual regressions with slotted icons', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-default-icon`));
+ });
+
+ test('should not have visual regressions with color', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-color`));
+ });
+ });
+
+ test.describe('inset', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-inset`));
+ });
+
+ test('should not have visual regressions with slotted icons', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-inset-icon`));
+ });
+
+ test('should not have visual regressions with color', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-inset-color`));
+ });
+ });
+
+ test.describe('full', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-full`));
+ });
+
+ test('should not have visual regressions with slotted icons', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-full-icon`));
+ });
+
+ test('should not have visual regressions with color', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-full-color`));
+ });
+ });
+
+ test.describe('none', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-none`));
+ });
+
+ test('should not have visual regressions with slotted icons', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-none-icon`));
+ });
+
+ test('should not have visual regressions with color', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Label
+
+ `,
+ config
+ );
+
+ const item = page.locator('ion-item');
+
+ await expect(item).toHaveScreenshot(screenshot(`item-lines-none-color`));
+ });
});
});
});
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4d8f68170ac
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b935ca1e83c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f98712616cb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..03caee7d2ce
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3c99c998e57
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aff7abd1920
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f0176ce528f
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..eb4eb86493b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..90254efb9b9
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..71de4083e9d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d9b7d80db7d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..af9de611fe7
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8c9b7c53d62
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..39a8c485fd8
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..64939227dd3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8d5b768661b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2ba163252e5
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3bfae137c28
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4d8f68170ac
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b935ca1e83c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f98712616cb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..03caee7d2ce
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3c99c998e57
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aff7abd1920
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d6cda3b5fd2
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..172b50d95e9
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8961d53de98
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dd92800ea74
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2224169767e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c0e3d9282f8
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3bdad2c586a
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3f26e6ec2ae
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..daeb2991915
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..65487a7f491
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0642a7af850
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8c38c499f82
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-icon-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..89fec746cca
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d575e9060e5
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..52c55ff2afb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..684637443e3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..039a8533f7d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..372c7716dd7
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..23d69eddeb2
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2952d5ddbfc
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a1f97085edd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..086475faaf3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6e4e6615f19
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f1c7fb2e4e0
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5b328cdb119
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..105c41ba1b3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9a2e7b38a3b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0db0fe5eb3b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..647c97919dd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..73d3f0bf5f0
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-default-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-ios-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 4d1aec8c074..00000000000
Binary files a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-ios-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 394c746e7bc..00000000000
Binary files a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-md-ltr-Mobile-Firefox-linux.png
deleted file mode 100644
index 716b8b69f2c..00000000000
Binary files a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-md-rtl-Mobile-Firefox-linux.png
deleted file mode 100644
index 6fb64fdaec3..00000000000
Binary files a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4d8f68170ac
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b935ca1e83c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f98712616cb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..03caee7d2ce
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3c99c998e57
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aff7abd1920
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..21886b39e9d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fca8ea21170
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d622ff3fbfb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1c6992067d1
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..186a5d994e1
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0cd4f0a62f1
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6e98c20bf1d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..adba3980340
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..068e8fdadeb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4abbfcbf6d6
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f9023fca469
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1ef7969cf01
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4d8f68170ac
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b935ca1e83c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f98712616cb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..03caee7d2ce
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3c99c998e57
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aff7abd1920
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f8e203d56ea
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b65e307b897
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f61f0c7617b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a1cf0be8455
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..54ef9a6b8dd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c2470f6d886
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..52c58db6070
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d49f60cf257
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..442605e19f3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..30ae6449a74
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..57f365cb902
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d143d3191ed
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-icon-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..89fec746cca
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d575e9060e5
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..52c55ff2afb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..684637443e3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..039a8533f7d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..372c7716dd7
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7835774f2d9
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3c5dbd0f340
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..84c66955646
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..317625d29e4
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..94c6dc7ee1d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..99f2a35d24a
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..acd63e85f3b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..42354f9be4d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3f1b6be8460
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..05361aaffa8
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e2da7aadcc0
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..12650edc700
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-full-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..17b1adad453
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5587d7d66e2
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c6324f1f331
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8fdde2433cd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4f6453a4b03
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..987f79cf3b1
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f0176ce528f
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..eb4eb86493b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..90254efb9b9
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..71de4083e9d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d9b7d80db7d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..af9de611fe7
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8c9b7c53d62
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..39a8c485fd8
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..64939227dd3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8d5b768661b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2ba163252e5
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3bfae137c28
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..17b1adad453
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5587d7d66e2
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c6324f1f331
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8fdde2433cd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4f6453a4b03
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..987f79cf3b1
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d6cda3b5fd2
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..172b50d95e9
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8961d53de98
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dd92800ea74
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2224169767e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c0e3d9282f8
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3bdad2c586a
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3f26e6ec2ae
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..daeb2991915
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..65487a7f491
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0642a7af850
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8c38c499f82
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-icon-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dcce00a8f80
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1da3ca736be
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b3a45a17d6c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e9a34ea2a80
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e56a16b8561
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cf5bd1dd206
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..23d69eddeb2
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2952d5ddbfc
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a1f97085edd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..086475faaf3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6e4e6615f19
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f1c7fb2e4e0
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5b328cdb119
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..105c41ba1b3
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9a2e7b38a3b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0db0fe5eb3b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..647c97919dd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..73d3f0bf5f0
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-inset-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..50320c86f7c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0370a6584df
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f1d752eeb6e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f183e9dd613
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5ba84517b5d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9e051baa16f
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1ee8906cfdc
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..13d044054d0
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b4bd5af0c1e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6f2872f9790
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b0c4e961850
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..bdfb2e3ec3e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..70dee6770cb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..37b7e79f48a
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..dc443b3e651
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0fc4013c42e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2c4971a8c71
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7d0d5b0c132
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..50320c86f7c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0370a6584df
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f1d752eeb6e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f183e9dd613
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5ba84517b5d
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9e051baa16f
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e92c3a61b53
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ccd7008aa79
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e78b2836504
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..514f6e537cd
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..90b85dda555
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..55264feb5ac
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e2ce02fab1e
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1027d60f656
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2223177fd5c
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..003b947b6b8
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6df493f49fb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ebe047c51c5
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-icon-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bcb40ee3c07
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ab456208d8b
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..eba3dce28bc
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2f6a3dc78d7
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..83bc489a9fa
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..681f67ba149
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..24c3be571db
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9fcac7a1acb
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7ed66105d80
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2b68b0313db
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c0517858d48
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6a254365151
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d677758222a
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..41412bccd0f
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e7a7eadb6ef
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..785fd491a97
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..64a67f4291a
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fa18af9f1b7
Binary files /dev/null and b/core/src/components/item/test/lines/item.e2e.ts-snapshots/item-lines-none-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png
index 2afb6585542..b2de0bb327c 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png
index 76fdc553a5c..b65300e048f 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png
index 40957349a83..3632dad6da6 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png
index 5183c30919a..a5f82940113 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png
index 6cd15423e18..5952a95bd0c 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png
index 058f26dba5a..c7f1a6bd8ad 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png
index f1787f87b77..d5ab7e32413 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png
index 457a1489519..dc96ce9d2e5 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png
index f425b2729cc..65acf72c993 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png
index 7c0b2ffeaf9..b425136679b 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png
index 994cd813fa9..3b4139c7dfb 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png
index e304c089868..e20e3484c67 100644
Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts b/core/src/components/item/test/states/item.e2e.ts
index 0989ba971d0..d1602bc7672 100644
--- a/core/src/components/item/test/states/item.e2e.ts
+++ b/core/src/components/item/test/states/item.e2e.ts
@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
/**
* This behavior does not vary across directions
*/
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item: states'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/states`, config);
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ceb8da21633
Binary files /dev/null and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8bdf277b7dd
Binary files /dev/null and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..55eee2468a7
Binary files /dev/null and b/core/src/components/item/test/states/item.e2e.ts-snapshots/item-states-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/theme-ionic/index.html b/core/src/components/item/test/theme-ionic/index.html
new file mode 100644
index 00000000000..0e443dbf883
--- /dev/null
+++ b/core/src/components/item/test/theme-ionic/index.html
@@ -0,0 +1,219 @@
+
+
+
+
+
Item - Basic
+
+
+
+
+
+
+
+
+
+
+
+
+ Item - Basic
+
+
+
+
+
+
+ List Header
+
+
+ Item
+
+
+ Item Divider
+
+
+ Item
+
+
+
+
+ Plain Ol' div with some text
+
+
+
+
+ Single line text that should have ellipses when it doesn't all fit in the item
+
+
+
+
+ Single line item with no lines
+
+
+
+
+ Multiline text that should wrap when it is too long to fit on one line in the item. Attribute on ion-label
+
+
+
+
+
+ H1 Title Text
+ Paragraph line 1
+
+
+
+
+
+ H2 Title Text
+ Paragraph line 1
+
+
+
+
+
+
+ H3 Title Text
+
+ Paragraph line 1
+
+ Paragraph line 2 secondary
+
+
+
+
+
+
+ H4 Title Text
+ Paragraph line 1
+ Paragraph line 2
+ Paragraph line 3
+
+
+
+
+ Item using inner ion-label
+
+
+
+ Must enter 7 digits
+
+
+
+ Item with overflow scroll. Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing
+ commodo. Vulputate enim nulla aliquet porttitor. Fermentum dui faucibus in ornare quam viverra orci sagittis
+ eu. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras semper auctor neque vitae. Cursus
+ eget nunc scelerisque viverra mauris in aliquam. Non sodales neque sodales ut etiam sit amet. Sit amet nulla
+ facilisi morbi tempus. Accumsan in nisl nisi scelerisque eu. Sed elementum tempus egestas sed sed. Urna nunc
+ id cursus metus aliquam. Gravida dictum fusce ut placerat orci nulla pellentesque. Id diam maecenas
+ ultricies mi eget. Elementum nisi quis eleifend quam adipiscing vitae proin.
+
+
+
+ Item with details.
+
+
+
+
+ Heading
+ Normal paragraph
+
+
+
+
+ Start
+
+ Heading
+ Normal paragraph
+
+
+
+
+ Disabled Item
+
+
+
+
+ Heading
+ Normal paragraph
+
+
+
+
+ Start
+
+ Heading
+ Normal paragraph
+
+
+
+ Item activatable
+
+
+ Start
+
+ Heading
+ Normal paragraph
+
+
+
+ Item focused
+
+
+ Start
+
+ Heading
+ Normal paragraph
+
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss
index 8007a715dfc..48cadf30ce9 100644
--- a/core/src/components/label/label.ios.vars.scss
+++ b/core/src/components/label/label.ios.vars.scss
@@ -1,17 +1,17 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
@import "../item/item.ios.vars";
// iOS Label
// --------------------------------------------------
/// @prop - Text color of the stacked/floating label when it is focused
-$label-ios-text-color-focused: null;
+$label-ios-text-color-focused: null;
/// @prop - Font size of the label when the text wraps
-$label-ios-text-wrap-font-size: dynamic-font(14px);
+$label-ios-text-wrap-font-size: dynamic-font(14px);
/// @prop - Line height of the label when the text wraps
-$label-ios-text-wrap-line-height: 1.5;
+$label-ios-text-wrap-line-height: 1.5;
/// @prop - Color of the item paragraph
-$item-ios-paragraph-text-color: $text-color-step-600;
+$item-ios-paragraph-text-color: $text-color-step-600;
diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss
index b2f3b1e4748..d4f8dd26bcc 100644
--- a/core/src/components/label/label.md.scss
+++ b/core/src/components/label/label.md.scss
@@ -8,7 +8,6 @@
line-height: $label-md-text-wrap-line-height;
}
-
// Material Design Stacked & Floating Labels
// --------------------------------------------------
@@ -16,23 +15,23 @@
* When translating the label, we need to use translateY
* instead of translate3d due to a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=215731
*/
- :host(.label-stacked),
- :host(.label-floating) {
- @include margin(0, 0, 0, 0);
- /* stylelint-disable property-disallowed-list */
- transform-origin: top left;
- /* stylelint-enable property-disallowed-list */
- }
-
- :host(.label-stacked.label-rtl),
- :host(.label-floating.label-rtl) {
- /* stylelint-disable property-disallowed-list */
- transform-origin: top right;
- /* stylelint-enable property-disallowed-list */
- }
+:host(.label-stacked),
+:host(.label-floating) {
+ @include margin(0, 0, 0, 0);
+ /* stylelint-disable property-disallowed-list */
+ transform-origin: top left;
+ /* stylelint-enable property-disallowed-list */
+}
+
+:host(.label-stacked.label-rtl),
+:host(.label-floating.label-rtl) {
+ /* stylelint-disable property-disallowed-list */
+ transform-origin: top right;
+ /* stylelint-enable property-disallowed-list */
+}
:host(.label-stacked) {
- @include transform(translateY(50%), scale(.75));
+ @include transform(translateY(50%), scale(0.75));
transition: color 150ms $label-md-transition-timing-function;
}
@@ -40,16 +39,14 @@
:host(.label-floating) {
@include transform(translateY(96%));
- transition:
- color 150ms $label-md-transition-timing-function,
- transform 150ms $label-md-transition-timing-function;
+ transition: color 150ms $label-md-transition-timing-function, transform 150ms $label-md-transition-timing-function;
}
:host-context(.ion-focused).label-floating,
:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder:not(.item-input)).label-floating,
:host-context(.item-has-value).label-floating {
- @include transform(translateY(50%), scale(.75));
+ @include transform(translateY(50%), scale(0.75));
}
:host-context(.ion-focused).label-stacked:not(.ion-color),
diff --git a/core/src/components/label/label.md.vars.scss b/core/src/components/label/label.md.vars.scss
index 00136e716a2..16ee101e3c2 100644
--- a/core/src/components/label/label.md.vars.scss
+++ b/core/src/components/label/label.md.vars.scss
@@ -1,14 +1,14 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
@import "../item/item.md.vars";
// Material Design Label
// --------------------------------------------------
/// @prop - Text color of the stacked/floating label when it is focused
-$label-md-text-color-focused: ion-color(primary, base);
+$label-md-text-color-focused: ion-color(primary, base);
/// @prop - Line height of the label when the text wraps
-$label-md-text-wrap-line-height: 1.5;
+$label-md-text-wrap-line-height: 1.5;
/// @prop - Transition timing function of the label (stacked / focused)
-$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+$label-md-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/core/src/components/label/label.scss b/core/src/components/label/label.scss
index 103fcdfad08..1fb5ba654e9 100644
--- a/core/src/components/label/label.scss
+++ b/core/src/components/label/label.scss
@@ -1,5 +1,4 @@
-@import "../../themes/ionic.globals";
-
+@import "../../themes/native/native.globals";
// Label
// --------------------------------------------------
@@ -32,7 +31,7 @@
:host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
cursor: default;
- opacity: .3;
+ opacity: 0.3;
pointer-events: none;
}
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index cea7a844ec4..000f3c0a797 100644
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -2,17 +2,19 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import { createColorClasses, hostContext } from '@utils/theme';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import type { Color, StyleEventDetail } from '../../interface';
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*/
@Component({
tag: 'ion-label',
styleUrls: {
ios: 'label.ios.scss',
md: 'label.md.scss',
+ ionic: 'label.md.scss',
},
scoped: true,
})
@@ -104,11 +106,11 @@ export class Label implements ComponentInterface {
render() {
const position = this.position;
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
return (
diff --git a/core/src/components/list-header/test/basic/index.html b/core/src/components/list-header/test/basic/index.html
index e811ac915ad..165396b57a4 100644
--- a/core/src/components/list-header/test/basic/index.html
+++ b/core/src/components/list-header/test/basic/index.html
@@ -8,6 +8,7 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
- With list + button
+
+ Title
+ With list + button
+
Clear
@@ -34,7 +38,22 @@
- With list, no button
+
+ Title
+ With list + link
+
+ Clear
+
+
+ List item
+
+
+
+
+
+ Title
+ With list, no button, no link
+
List item
@@ -63,6 +82,10 @@
-
+
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts b/core/src/components/list-header/test/basic/list-header.e2e.ts
index 29fdf9e44de..390c52dcc23 100644
--- a/core/src/components/list-header/test/basic/list-header.e2e.ts
+++ b/core/src/components/list-header/test/basic/list-header.e2e.ts
@@ -1,7 +1,7 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('list-header: basic'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/list-header/test/basic`, config);
@@ -18,7 +18,7 @@ configs().forEach(({ title, screenshot, config }) => {
* make sure the safe area padding is applied only to that side
* regardless of direction
*/
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('list-header: basic'), () => {
test.describe('safe area', () => {
test('should have padding added by the safe area', async ({ page }) => {
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a30b82b8b32
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2c71c829b95
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..80e3df83f78
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..72df0acf409
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c2a1f1ed8db
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4997b555e42
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png
index 3de5b7cb2ad..0699116e710 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png
index 7e7ab153b79..be501ee0b24 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png
index a9d08a53d06..36a07ba175d 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png
index f0abea77d1d..3d5a64eb728 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png
index 2dc383d62a5..a5796821cde 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png
index 02656023ea0..773041c8119 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png
index 9fb804d8871..24e93b5afca 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png
index c21e0bb8c56..cc3f793b99b 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png
index 58d19320032..6d2d8d7597b 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png
index 73aee5a72bb..90af01cc6a2 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png
index babfd86bb9f..c965e086952 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png
index 9406dece579..38a40e24f13 100644
Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e91ff490a06
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ed2c38f0d32
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..00b32232163
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6779d2dfbe4
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6b308967e85
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..17ce8408e83
Binary files /dev/null and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-safe-area-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/list.common.scss b/core/src/components/list/list.common.scss
new file mode 100644
index 00000000000..1b93d1416b2
--- /dev/null
+++ b/core/src/components/list/list.common.scss
@@ -0,0 +1,14 @@
+@import "../../themes/mixins";
+
+// List
+// --------------------------------------------------
+
+ion-list {
+ @include margin(0);
+ @include padding(0);
+
+ display: block;
+
+ contain: content;
+ list-style-type: none;
+}
diff --git a/core/src/components/list/list.ionic.scss b/core/src/components/list/list.ionic.scss
new file mode 100644
index 00000000000..14e79f605bd
--- /dev/null
+++ b/core/src/components/list/list.ionic.scss
@@ -0,0 +1,135 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./list.common";
+
+// Ionic List
+// --------------------------------------------------
+
+// Ionic Inset List
+// --------------------------------------------------
+
+.list-ionic.list-inset {
+ @include globals.margin(globals.$ion-space-100);
+}
+
+// Ionic No Lines List
+// --------------------------------------------------
+
+.list-ionic-lines-none .item-lines-default {
+ --inner-border-width: 0px;
+ --border-width: 0px;
+}
+
+// Ionic Shapes
+//
+// The border radius is applied to the list, excluding
+// the header. The header is styled to appear as if
+// it is above the list.
+//
+// This makes the border radius appear to be applied
+// to the first element in the list (skips the header)
+// and the last element in the list. These elements
+// can be either `ion-item` or `ion-item-sliding`.
+// --------------------------------------------------
+
+.list-ionic:has(ion-list-header) {
+ /* Round */
+ &.list-round {
+ /**
+ * Only apply the border radius to the bottom of the list.
+ * The top of the list should not have a border radius because
+ * that would include the header.
+ */
+ @include globals.border-radius(initial, initial, globals.$ion-border-radius-400, globals.$ion-border-radius-400);
+ }
+
+ // Target the first element in the list after the header
+ &.list-round ion-list-header + * {
+ /**
+ * Only apply the border radius to the top of the first element.
+ * The bottom of the first element should not have a border radius
+ * because that would not look connected to the rest.
+ */
+ @include globals.border-radius(globals.$ion-border-radius-400, globals.$ion-border-radius-400, initial, initial);
+ }
+
+ /* Soft */
+ &.list-soft {
+ /**
+ * Only apply the border radius to the bottom of the list.
+ * The top of the list should not have a border radius because
+ * that would include the header.
+ */
+ @include globals.border-radius(initial, initial, globals.$ion-border-radius-200, globals.$ion-border-radius-200);
+ }
+
+ // Target the first element in the list after the header
+ &.list-soft ion-list-header + * {
+ /**
+ * Only apply the border radius to the top of the first element.
+ * The bottom of the first element should not have a border radius
+ * because that would not look connected to the rest.
+ */
+ @include globals.border-radius(globals.$ion-border-radius-200, globals.$ion-border-radius-200, initial, initial);
+ }
+
+ /* Rectangular */
+ &.list-rectangular {
+ /**
+ * Only apply the border radius to the bottom of the list.
+ * The top of the list should not have a border radius because
+ * that would include the header.
+ */
+ @include globals.border-radius(initial, initial, globals.$ion-border-radius-0, globals.$ion-border-radius-0);
+ }
+
+ // Target the first element in the list after the header
+ &.list-rectangular ion-list-header + * {
+ /**
+ * Only apply the border radius to the top of the first element.
+ * The bottom of the first element should not have a border radius
+ * because that would not look connected to the rest.
+ */
+ @include globals.border-radius(globals.$ion-border-radius-0, globals.$ion-border-radius-0, initial, initial);
+ }
+}
+
+.list-ionic:not(:has(ion-list-header)) {
+ /* Round */
+ &.list-round {
+ @include globals.border-radius(globals.$ion-border-radius-400);
+ }
+
+ /* Soft */
+ &.list-soft {
+ @include globals.border-radius(globals.$ion-border-radius-200);
+ }
+
+ /* Rectangular */
+ &.list-rectangular {
+ @include globals.border-radius(globals.$ion-border-radius-0);
+ }
+}
+
+// Ionic No Lines List
+// --------------------------------------------------
+
+.list-ionic-lines-none .item-lines-default {
+ --inner-border-width: #{globals.$ion-border-size-0};
+ --border-width: #{globals.$ion-border-size-0};
+}
+
+// Ionic Full Lines List
+// --------------------------------------------------
+
+.list-ionic-lines-full .item-lines-default {
+ --inner-border-width: #{globals.$ion-border-size-0};
+ --border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
+}
+
+// Ionic Inset Lines List
+// --------------------------------------------------
+
+.list-ionic-lines-inset .item-lines-default {
+ --inner-border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
+ --border-width: #{globals.$ion-border-size-0};
+}
diff --git a/core/src/components/list/list.ios.scss b/core/src/components/list/list.ios.scss
index ffccb9345ff..ee0d418c620 100644
--- a/core/src/components/list/list.ios.scss
+++ b/core/src/components/list/list.ios.scss
@@ -1,4 +1,4 @@
-@import "./list";
+@import "./list.native";
@import "./list.ios.vars";
// iOS List
@@ -10,12 +10,16 @@
background: $item-ios-background;
}
-
// iOS Inset List
// --------------------------------------------------
.list-ios.list-inset {
- @include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start);
+ @include margin(
+ $list-inset-ios-margin-top,
+ $list-inset-ios-margin-end,
+ $list-inset-ios-margin-bottom,
+ $list-inset-ios-margin-start
+ );
@include border-radius($list-inset-ios-border-radius);
}
@@ -42,7 +46,6 @@
@include margin(0, null, null, null);
}
-
// iOS No Lines List
// --------------------------------------------------
diff --git a/core/src/components/list/list.ios.vars.scss b/core/src/components/list/list.ios.vars.scss
index bc1a04f0c3a..00625681b54 100644
--- a/core/src/components/list/list.ios.vars.scss
+++ b/core/src/components/list/list.ios.vars.scss
@@ -1,35 +1,35 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
@import "../item/item.ios.vars";
// iOS List
// --------------------------------------------------
/// @prop - Margin top of the list
-$list-ios-margin-top: null;
+$list-ios-margin-top: null;
/// @prop - Margin end of the list
-$list-ios-margin-end: null;
+$list-ios-margin-end: null;
/// @prop - Margin bottom of the list
-$list-ios-margin-bottom: null;
+$list-ios-margin-bottom: null;
/// @prop - Margin start of the list
-$list-ios-margin-start: null;
+$list-ios-margin-start: null;
/// @prop - Border bottom of the item in a list
-$list-ios-item-border-bottom-width: $item-ios-border-bottom-width;
+$list-ios-item-border-bottom-width: $item-ios-border-bottom-width;
/// @prop - Margin top of the inset list
-$list-inset-ios-margin-top: 16px;
+$list-inset-ios-margin-top: 16px;
/// @prop - Margin end of the inset list
-$list-inset-ios-margin-end: 16px;
+$list-inset-ios-margin-end: 16px;
/// @prop - Margin bottom of the inset list
-$list-inset-ios-margin-bottom: 16px;
+$list-inset-ios-margin-bottom: 16px;
/// @prop - Margin start of the inset list
-$list-inset-ios-margin-start: 16px;
+$list-inset-ios-margin-start: 16px;
/// @prop - Border radius of the inset list
-$list-inset-ios-border-radius: 10px;
+$list-inset-ios-border-radius: 10px;
diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss
index 62a28273cc8..3e3b888ed49 100644
--- a/core/src/components/list/list.md.scss
+++ b/core/src/components/list/list.md.scss
@@ -1,4 +1,4 @@
-@import "./list";
+@import "./list.native";
@import "./list.md.vars";
// Material Design List
@@ -19,7 +19,12 @@
// --------------------------------------------------
.list-md.list-inset {
- @include margin($list-inset-md-margin-top, $list-inset-md-margin-end, $list-inset-md-margin-bottom, $list-inset-md-margin-start);
+ @include margin(
+ $list-inset-md-margin-top,
+ $list-inset-md-margin-end,
+ $list-inset-md-margin-bottom,
+ $list-inset-md-margin-start
+ );
@include border-radius($list-inset-md-border-radius);
}
@@ -27,8 +32,8 @@
* These selectors ensure the last item in the list
* has the correct border.
* We need to consider the following scenarios:
- 1. The last item in a list as long as it is not the only item.
- 2. The item in the last item-sliding in a list.
+ * 1. The last item in a list as long as it is not the only item.
+ * 2. The item in the last item-sliding in a list.
* Note that we do not select "ion-item-sliding ion-item:last-of-type"
* because that will cause the borders to disappear on
* items in an item-sliding when the item is the last
@@ -55,7 +60,6 @@
@include margin(0, null, null, null);
}
-
// Material Design No Lines List
// --------------------------------------------------
diff --git a/core/src/components/list/list.md.vars.scss b/core/src/components/list/list.md.vars.scss
index 2a219aa797b..d3d701dca7e 100644
--- a/core/src/components/list/list.md.vars.scss
+++ b/core/src/components/list/list.md.vars.scss
@@ -1,47 +1,47 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
@import "../item/item.md.vars";
// Material Design List
// --------------------------------------------------
/// @prop - Margin top of the list
-$list-md-margin-top: 0;
+$list-md-margin-top: 0;
/// @prop - Margin end of the list
-$list-md-margin-end: 0;
+$list-md-margin-end: 0;
/// @prop - Margin bottom of the list
-$list-md-margin-bottom: 0;
+$list-md-margin-bottom: 0;
/// @prop - Margin start of the list
-$list-md-margin-start: 0;
+$list-md-margin-start: 0;
/// @prop - Padding top of the list
-$list-md-padding-top: 8px;
+$list-md-padding-top: 8px;
/// @prop - Padding end of the list
-$list-md-padding-end: 0;
+$list-md-padding-end: 0;
/// @prop - Padding bottom of the list
-$list-md-padding-bottom: 8px;
+$list-md-padding-bottom: 8px;
/// @prop - Padding start of the list
-$list-md-padding-start: 0;
+$list-md-padding-start: 0;
/// @prop - Border bottom of the item in a list
-$list-md-item-border-bottom-width: $item-md-border-bottom-width;
+$list-md-item-border-bottom-width: $item-md-border-bottom-width;
/// @prop - Margin top of the inset list
-$list-inset-md-margin-top: 16px;
+$list-inset-md-margin-top: 16px;
/// @prop - Margin end of the inset list
-$list-inset-md-margin-end: 16px;
+$list-inset-md-margin-end: 16px;
/// @prop - Margin bottom of the inset list
-$list-inset-md-margin-bottom: 16px;
+$list-inset-md-margin-bottom: 16px;
/// @prop - Margin start of the inset list
-$list-inset-md-margin-start: 16px;
+$list-inset-md-margin-start: 16px;
/// @prop - Border radius of the inset list
-$list-inset-md-border-radius: 2px;
+$list-inset-md-border-radius: 2px;
diff --git a/core/src/components/list/list.native.scss b/core/src/components/list/list.native.scss
new file mode 100644
index 00000000000..4e9099f8561
--- /dev/null
+++ b/core/src/components/list/list.native.scss
@@ -0,0 +1,8 @@
+@import "./list.common";
+@import "../../themes/native/native.globals";
+
+ion-list.list-inset {
+ transform: translateZ(0);
+
+ overflow: hidden;
+}
diff --git a/core/src/components/list/list.scss b/core/src/components/list/list.scss
deleted file mode 100644
index 267b9023a23..00000000000
--- a/core/src/components/list/list.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "../../themes/ionic.globals";
-
-
-// List
-// --------------------------------------------------
-
-ion-list {
- @include margin(0);
- @include padding(0);
-
- display: block;
-
- contain: content;
- list-style-type: none;
-}
-
-ion-list.list-inset {
- transform: translateZ(0);
-
- overflow: hidden;
-}
diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx
index 11007ca269b..c684debf227 100644
--- a/core/src/components/list/list.tsx
+++ b/core/src/components/list/list.tsx
@@ -1,16 +1,18 @@
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Method, Prop, h } from '@stencil/core';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*/
@Component({
tag: 'ion-list',
styleUrls: {
ios: 'list.ios.scss',
md: 'list.md.scss',
+ ionic: 'list.ionic.scss',
},
})
export class List implements ComponentInterface {
@@ -26,6 +28,19 @@ export class List implements ComponentInterface {
*/
@Prop() inset = false;
+ /**
+ * Set to `"soft"` for slightly rounded corners,
+ * `"round"` for fully rounded corners,
+ * or `"rectangular"` for no rounded corners.
+ *
+ * Defaults to `"round"` for the `ionic` theme
+ * when inset is `true`
+ * defaults to `"rectangular"` for the `ionic`
+ * theme when inset is `false`,
+ * undefined for all other themes.
+ */
+ @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
/**
* If `ion-item-sliding` are used inside the list, this method closes
* any open sliding item.
@@ -41,21 +56,43 @@ export class List implements ComponentInterface {
return false;
}
+ private getShape(): string | undefined {
+ const theme = getIonTheme(this);
+ const { shape, inset } = this;
+
+ // TODO(ROU-10831): Remove theme check when shapes are defined for all themes.
+ if (theme !== 'ionic') {
+ return undefined;
+ }
+
+ if (shape === undefined && inset) {
+ return 'round';
+ }
+
+ if (shape === undefined) {
+ return 'rectangular';
+ }
+
+ return shape;
+ }
+
render() {
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
+ const shape = this.getShape();
const { lines, inset } = this;
+
return (
List - Basic
+ List - Inset
+
+ Lines: default
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-default`));
+ });
+
+ test('should not have visual regressions with item lines set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: default
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-default-item-lines`));
+ });
+
+ test('should not have visual regressions with item lines and color set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: default
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-default-item-lines-colors`));
+ });
+ });
+
+ test.describe('inset', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: inset
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-inset`));
+ });
+
+ test('should not have visual regressions with item lines set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: inset
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-inset-item-lines`));
+ });
+
+ test('should not have visual regressions with item lines and color set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: inset
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
- const list = page.locator('ion-list[lines="full"]');
+ const list = page.locator('ion-list');
- await expect(list).toHaveScreenshot(screenshot(`list-lines-full`));
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-inset-item-lines-colors`));
+ });
});
- test('lines="inset" should render correctly', async ({ page }) => {
- await page.goto(`/src/components/list/test/lines`, config);
- const list = page.locator('ion-list[lines="inset"]');
+ test.describe('full', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: full
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-full`));
+ });
- await expect(list).toHaveScreenshot(screenshot(`list-lines-inset`));
+ test('should not have visual regressions with item lines set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: full
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-full-item-lines`));
+ });
+
+ test('should not have visual regressions with item lines and color set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: full
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-full-item-lines-colors`));
+ });
});
- test('lines="none" should render correctly', async ({ page }) => {
- await page.goto(`/src/components/list/test/lines`, config);
- const list = page.locator('ion-list[lines="none"]');
+ test.describe('none', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: none
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ Item
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-none`));
+ });
+
+ test('should not have visual regressions with item lines set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: none
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
- await expect(list).toHaveScreenshot(screenshot(`list-lines-none`));
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-none-item-lines`));
+ });
+
+ test('should not have visual regressions with item lines and color set', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Lines: none
+
+
+ Item
+
+
+ Item Inset
+
+
+ Item Full
+
+
+ Item None
+
+
+ `,
+ config
+ );
+
+ const list = page.locator('ion-list');
+
+ await expect(list).toHaveScreenshot(screenshot(`list-lines-none-item-lines-colors`));
+ });
});
});
});
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..569f67cf0a7
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..758622fcde3
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..54af1deaa74
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ed7401a13f6
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..deb52134323
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..033fcea8731
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b565176aa93
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ae97d8a3ff7
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..de6469d53ff
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7cd8073f2f2
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9e6c215f91a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b50a42f2e21
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d653e18bffb
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ce8ee02d17d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9f8cea0fec3
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..41dcfe53c8b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..939440bd998
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..88a8a6109f7
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a82ff1b8511
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a5fc85fa7b0
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7fad555634d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1b62a41493d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..09e869cb115
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..509308090b4
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dff0e1ff7d5
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..277f8ae13c5
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1542900deff
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..de21786c6b7
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7cbeea8945b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4baa5cc377e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-colors-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d653e18bffb
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ce8ee02d17d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9f8cea0fec3
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..41dcfe53c8b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..939440bd998
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..88a8a6109f7
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..87d7358cdc8
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b76bf51cd15
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3a65f84b996
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f6b39d15592
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0256f1242e5
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e5c60d78926
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..32f284f8711
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7b89f292450
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8ece568d45c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ecf1fca1ed8
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0dc3b398c77
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4be8b19502c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-item-lines-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b312e78d63e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..88bc159e4eb
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fc1f010ced5
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bf862bb7c32
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1ef024ba12d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d1780ec7607
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-default-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f4be107b780
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..abda2689f1b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a3cac1bb2bb
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b5bd18b88be
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c2e7dcc0873
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..95e9af57773
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png
index 1799aa70990..7d0dbd16587 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png
index 44c62e11093..4237985b965 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png
index a2185c51d37..fed8a75aca9 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png
index 23503ede5fa..567be9bd3bd 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png
index ca6f16f3290..ef7568f57cc 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png
index fdca36840c6..fc7d78acb67 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..244a0406e0c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6f2ac77c3dd
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..322ef680da0
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..31726ada3b3
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4d5982ac3b9
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e81d13adc0c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e566af9285c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0a6f1103d2e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fede75f4111
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..660981cbcb7
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..97b9eea5f2e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..72df441635c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1cf7a4bca41
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4744d511527
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..85ab3ff029a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1d4a4332c01
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fbe8ee735a3
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a6a34312fd4
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-colors-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..244a0406e0c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6f2ac77c3dd
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..322ef680da0
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..31726ada3b3
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4d5982ac3b9
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e81d13adc0c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..060ab5a1f30
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..55c060abc94
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e270b23d0ae
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..78c2949d8f5
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b233527a6e4
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..61ee567d4de
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2fd1b685a51
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4371e1f7abc
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..bef5f3718e8
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f28f027c0ed
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4ff0abf18ed
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d8b6f31583f
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-item-lines-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png
index 9a88a219554..3b7b8a351d0 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png
index 16c75f47e8f..c579d10e6f9 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png
index 4bcf0a8f6a1..d2a4121f3f0 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png
index 6bc1cb7ec4c..2869fa7ccfd 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png
index e0d9ba00e96..da75a140246 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png
index fa9c1abca1a..54bf29eb63f 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6b7dab0f595
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d9013517a06
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..32b23063d90
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5db3256330b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4967045da1e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..918b982188b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png
index 54275c64803..153d421735d 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png
index 70f643c00a5..2046cd2afcf 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png
index 1550cd44d0c..f274ec47836 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png
index a6984180c46..a3772aad9bb 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png
index 33ba47b6c12..234c6489262 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png
index bc1885e6c99..49512ae21c3 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5284df77605
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..43dea4929dd
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d0476d615af
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fe99946886d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..02fffaa6196
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9d5ea772e3f
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..525601498c1
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..06d384af45d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ebc72cfdcea
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c03c1f8efbc
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4e2d886834e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..23590464e75
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9d46295c552
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..38b1296d966
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a0ca4ac648f
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7067afd5353
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1a678f1abb8
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ef544f2a3ca
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-colors-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5284df77605
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..43dea4929dd
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d0476d615af
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fe99946886d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..02fffaa6196
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9d5ea772e3f
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..46b3aad7ae3
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ad9d6d3ed37
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d201714661b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6942d523033
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d71e9d0408d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..47b1550e804
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dd5b3e72043
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c06cce20de5
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ca6c8b377db
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c1e91891a6a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6985d74318e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9f1e4e0419f
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-item-lines-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png
index 3c96bcc64f9..6cfd5c1ca2c 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png
index 573663cdb91..7916c1610a7 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png
index 927766e117e..0e79f86e628 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png
index d1afedea3f7..b6e3d756475 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png
index 415a9537dc9..e1f0d71c2e0 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png
index 951855560ae..7ec917efe48 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..37daefab980
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2df10823882
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1fd9dcc5550
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7bdb349221d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b81aa6e1968
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7c711ee5b95
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png
index 4bf595c3678..161bb497fb1 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png
index e8f1f124b7c..6bbcef1d12e 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png
index 3ed0d8e13b9..4e6ac6d6492 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png
index 4e80cc12948..3d271a486dd 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png
index 30f5527182f..f7746a80e43 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png
index 3542f05bbe3..69ecec55e8f 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..33c4a1722fb
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6639ada3d7c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..81a82dcdd54
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b8f48631f9d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a89f3d2a8ad
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..36d138e641a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0e146db7a5c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d271b005f4c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..83e6d43b8f4
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..894998cf313
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ce6f0919c89
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5adf4b58928
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..84c72ffc320
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4b2bee1022a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5f48914c126
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c824943db0d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a51a6e0d91d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5f9367fbe3d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-colors-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..33c4a1722fb
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6639ada3d7c
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..81a82dcdd54
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b8f48631f9d
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a89f3d2a8ad
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..36d138e641a
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7dbf1fc96d9
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9a52aa17bd5
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6df451880f1
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..57c3f57ec48
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d643a4c7d19
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cbf96a6c46b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fc8efca371f
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2ea26c576ee
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..55c09305182
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3218cf2fc0e
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7655272c90b
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f720f577eed
Binary files /dev/null and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-item-lines-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png
index 7486bd1afa3..5630f80ef8c 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png
index 3e3cecdc1ea..5ae3e73f4e0 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png
index 52e3a1d779f..e677c6e1d1c 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png
index 95c8f509d0f..cdbd300248d 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png
index d508a5aa009..1b1b4dba6e2 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png
index 46404fec5ee..953e0a06792 100644
Binary files a/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/shape/index.html b/core/src/components/list/test/shape/index.html
new file mode 100644
index 00000000000..f65d6052e94
--- /dev/null
+++ b/core/src/components/list/test/shape/index.html
@@ -0,0 +1,153 @@
+
+
+
+ List - Shape
+
+
+
+ List - Shape
+
+
+
+
+
+
+ Default with inset
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+
+
+ Default without inset
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+
+
+ Round
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+
+
+ Soft
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+
+
+ Rectangular
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+
+
+
diff --git a/core/src/components/list/test/shape/list.e2e.ts b/core/src/components/list/test/shape/list.e2e.ts
new file mode 100644
index 00000000000..76ca85311eb
--- /dev/null
+++ b/core/src/components/list/test/shape/list.e2e.ts
@@ -0,0 +1,237 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('list: shape'), () => {
+ test.describe(title('shape: round'), () => {
+ test('should render without header', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ `,
+ config
+ );
+
+ const listWrapper = page.locator('.wrapper');
+
+ await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-without-header`));
+ });
+
+ test('should render with header', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+ Header
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ `,
+ config
+ );
+
+ const listWrapper = page.locator('.wrapper');
+
+ await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-with-header`));
+ });
+ });
+
+ test.describe(title('shape: soft'), () => {
+ test('should render without header', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ `,
+ config
+ );
+
+ const listWrapper = page.locator('.wrapper');
+
+ await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-without-header`));
+ });
+
+ test('should render with header', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+ Header
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ `,
+ config
+ );
+
+ const listWrapper = page.locator('.wrapper');
+
+ await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-with-header`));
+ });
+ });
+
+ test.describe(title('shape: rectangular'), () => {
+ test('should render without header', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ `,
+ config
+ );
+
+ const listWrapper = page.locator('.wrapper');
+
+ await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-without-header`));
+ });
+
+ test('should render with header', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+ Header
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ Title
+ Subtitle
+
+
+
+
+ `,
+ config
+ );
+
+ const listWrapper = page.locator('.wrapper');
+
+ await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-with-header`));
+ });
+ });
+ });
+});
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7d6513aa270
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d656b64e440
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ad3a6958438
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b406fc1d672
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5be9d2f4e38
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4160b05211b
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-rectangular-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..127f1e10dc1
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..16f15b67176
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4b60b544ee1
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dd96d2534bb
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..45eda5047ef
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e29ec467fbb
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-round-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..09a618b8f0f
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..af0e30914be
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4762ab06317
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-with-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5fa9e673b31
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..404501895c7
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3d70a7de787
Binary files /dev/null and b/core/src/components/list/test/shape/list.e2e.ts-snapshots/list-shape-soft-without-header-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts
index 9dc7a1819a7..9a809effcc3 100644
--- a/core/src/components/loading/loading-interface.ts
+++ b/core/src/components/loading/loading-interface.ts
@@ -1,21 +1,16 @@
-import type { AnimationBuilder, Mode } from '../../interface';
+import type { OverlayOptions } from '@utils/overlays-interface';
+
import type { IonicSafeString } from '../../utils/sanitization';
import type { SpinnerTypes } from '../spinner/spinner-configs';
-export interface LoadingOptions {
+export interface LoadingOptions extends OverlayOptions {
spinner?: SpinnerTypes | null;
message?: string | IonicSafeString;
cssClass?: string | string[];
showBackdrop?: boolean;
duration?: number;
translucent?: boolean;
- animated?: boolean;
backdropDismiss?: boolean;
- mode?: Mode;
keyboardClose?: boolean;
- id?: string;
htmlAttributes?: { [key: string]: any };
-
- enterAnimation?: AnimationBuilder;
- leaveAnimation?: AnimationBuilder;
}
diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss
index 52217e4b380..b458eaa1376 100644
--- a/core/src/components/loading/loading.ios.scss
+++ b/core/src/components/loading/loading.ios.scss
@@ -18,10 +18,14 @@
.loading-wrapper {
@include border-radius($loading-ios-border-radius);
- @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
+ @include padding(
+ $loading-ios-padding-top,
+ $loading-ios-padding-end,
+ $loading-ios-padding-bottom,
+ $loading-ios-padding-start
+ );
}
-
// iOS Translucent Loading
// -----------------------------------------
@@ -32,7 +36,6 @@
}
}
-
// iOS Loading Content
// -----------------------------------------
diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss
index 5e8df7c4d46..05cd183091a 100644
--- a/core/src/components/loading/loading.ios.vars.scss
+++ b/core/src/components/loading/loading.ios.vars.scss
@@ -1,49 +1,49 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
// iOS Loading Indicator
// --------------------------------------------------
/// @prop - Font size of the loading wrapper
-$loading-ios-font-size: dynamic-font(14px);
+$loading-ios-font-size: dynamic-font(14px);
/// @prop - Padding top of the loading wrapper
-$loading-ios-padding-top: 24px;
+$loading-ios-padding-top: 24px;
/// @prop - Padding end of the loading wrapper
-$loading-ios-padding-end: 34px;
+$loading-ios-padding-end: 34px;
/// @prop - Padding bottom of the loading wrapper
-$loading-ios-padding-bottom: $loading-ios-padding-top;
+$loading-ios-padding-bottom: $loading-ios-padding-top;
/// @prop - Padding start of the loading wrapper
-$loading-ios-padding-start: $loading-ios-padding-end;
+$loading-ios-padding-start: $loading-ios-padding-end;
/// @prop - Max width of the loading wrapper
-$loading-ios-max-width: 270px;
+$loading-ios-max-width: 270px;
/// @prop - Maximum height of the loading wrapper
-$loading-ios-max-height: 90%;
+$loading-ios-max-height: 90%;
/// @prop - Border radius of the loading wrapper
-$loading-ios-border-radius: 8px;
+$loading-ios-border-radius: 8px;
/// @prop - Text color of the loading wrapper
-$loading-ios-text-color: $text-color;
+$loading-ios-text-color: $text-color;
/// @prop - Background of the loading wrapper
-$loading-ios-background-color: $overlay-ios-background-color;
+$loading-ios-background-color: $overlay-ios-background-color;
/// @prop - Background color alpha of the translucent loading wrapper
-$loading-ios-translucent-background-color-alpha: .8;
+$loading-ios-translucent-background-color-alpha: 0.8;
/// @prop - Background color of the translucent loading wrapper
-$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha);
+$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha);
/// @prop - Font weight of the loading content
-$loading-ios-content-font-weight: bold;
+$loading-ios-content-font-weight: bold;
/// @prop - Color of the loading spinner
-$loading-ios-spinner-color: $text-color-step-400;
+$loading-ios-spinner-color: $text-color-step-400;
/// @prop - Filter of the translucent loading
-$loading-ios-translucent-filter: saturate(180%) blur(20px);
+$loading-ios-translucent-filter: saturate(180%) blur(20px);
diff --git a/core/src/components/loading/loading.md.scss b/core/src/components/loading/loading.md.scss
index f913723fe75..5d4a1d5535b 100644
--- a/core/src/components/loading/loading.md.scss
+++ b/core/src/components/loading/loading.md.scss
@@ -18,12 +18,16 @@
.loading-wrapper {
@include border-radius($loading-md-border-radius);
- @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
+ @include padding(
+ $loading-md-padding-top,
+ $loading-md-padding-end,
+ $loading-md-padding-bottom,
+ $loading-md-padding-start
+ );
box-shadow: $loading-md-box-shadow;
}
-
// Material Design Loading Content
// -----------------------------------------
diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss
index af11c750f32..fcdaa57fc00 100644
--- a/core/src/components/loading/loading.md.vars.scss
+++ b/core/src/components/loading/loading.md.vars.scss
@@ -1,43 +1,43 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
// Material Design Loading Indicator
// --------------------------------------------------
/// @prop - Font size of the loading wrapper
-$loading-md-font-size: dynamic-font(14px);
+$loading-md-font-size: dynamic-font(14px);
/// @prop - Padding top of the loading wrapper
-$loading-md-padding-top: 24px;
+$loading-md-padding-top: 24px;
/// @prop - Padding end of the loading wrapper
-$loading-md-padding-end: $loading-md-padding-top;
+$loading-md-padding-end: $loading-md-padding-top;
/// @prop - Padding bottom of the loading wrapper
-$loading-md-padding-bottom: $loading-md-padding-top;
+$loading-md-padding-bottom: $loading-md-padding-top;
/// @prop - Padding start of the loading wrapper
-$loading-md-padding-start: $loading-md-padding-end;
+$loading-md-padding-start: $loading-md-padding-end;
/// @prop - Max width of the loading wrapper
-$loading-md-max-width: 280px;
+$loading-md-max-width: 280px;
/// @prop - Maximum height of the loading wrapper
-$loading-md-max-height: 90%;
+$loading-md-max-height: 90%;
/// @prop - Border radius of the loading wrapper
-$loading-md-border-radius: 2px;
+$loading-md-border-radius: 2px;
/// @prop - Text color of the loading wrapper
-$loading-md-text-color: $text-color-step-150;
+$loading-md-text-color: $text-color-step-150;
/// @prop - Background of the loading wrapper
-$loading-md-background: $background-color-step-50;
+$loading-md-background: $background-color-step-50;
/// @prop - Box shadow color of the loading wrapper
-$loading-md-box-shadow-color: rgba(0, 0, 0, .4);
+$loading-md-box-shadow-color: rgba(0, 0, 0, 0.4);
/// @prop - Box shadow of the loading wrapper
-$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color;
+$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color;
/// @prop - Color of the loading spinner
-$loading-md-spinner-color: ion-color(primary, base);
+$loading-md-spinner-color: ion-color(primary, base);
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 1666c869639..77c6055bc0a 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -17,7 +17,7 @@ import { sanitizeDOMString } from '@utils/sanitization';
import { getClassMap } from '@utils/theme';
import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import type { AnimationBuilder, FrameworkDelegate, OverlayInterface } from '../../interface';
import type { OverlayEventDetail } from '../../utils/overlays-interface';
import type { IonicSafeString } from '../../utils/sanitization';
@@ -31,13 +31,15 @@ import { mdLeaveAnimation } from './animations/md.leave';
// TODO(FW-2832): types
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*/
@Component({
tag: 'ion-loading',
styleUrls: {
ios: 'loading.ios.scss',
md: 'loading.md.scss',
+ ionic: 'loading.md.scss',
},
scoped: true,
})
@@ -115,7 +117,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
/**
* If `true`, the loading indicator will be translucent.
- * Only applies when the mode is `"ios"` and the device supports
+ * Only applies when the theme is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
@Prop() translucent = false;
@@ -211,8 +213,8 @@ export class Loading implements ComponentInterface, OverlayInterface {
componentWillLoad() {
if (this.spinner === undefined) {
- const mode = getIonMode(this);
- this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+ const theme = getIonTheme(this);
+ this.spinner = config.get('loadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
}
if (!this.htmlAttributes?.id) {
setOverlayId(this.el);
@@ -327,7 +329,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
render() {
const { message, spinner, htmlAttributes, overlayIndex } = this;
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
const msgId = `loading-${overlayIndex}-msg`;
/**
* If the message is defined, use that as the label.
@@ -348,7 +350,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
onIonBackdropTap={this.onBackdropTap}
class={{
...getClassMap(this.cssClass),
- [mode]: true,
+ [theme]: true,
'overlay-hidden': true,
'loading-translucent': this.translucent,
}}
diff --git a/core/src/components/loading/loading.vars.scss b/core/src/components/loading/loading.vars.scss
index e21c162d176..817fc220ad3 100644
--- a/core/src/components/loading/loading.vars.scss
+++ b/core/src/components/loading/loading.vars.scss
@@ -1 +1 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/native/native.globals";
diff --git a/core/src/components/loading/test/a11y/loading.e2e.ts-snapshots/loading-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/a11y/loading.e2e.ts-snapshots/loading-scale-ios-ltr-Mobile-Firefox-linux.png
index 6619aad1154..c6b44d7d434 100644
Binary files a/core/src/components/loading/test/a11y/loading.e2e.ts-snapshots/loading-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/a11y/loading.e2e.ts-snapshots/loading-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png
index e568eaffd9e..bf9d068653a 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png
index e91a918895e..b59fdd956b7 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-basic-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png
index 854f3c71a58..736c575aca1 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png
index 0421812f41b..650150b5c99 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-custom-class-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png
index 8c10b270451..dab467e7bab 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-long-content-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png
index 577bbe76d0b..1c00441617b 100644
Binary files a/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/loading/test/basic/loading.e2e.ts-snapshots/loading-translucent-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu-button/menu-button.common.scss b/core/src/components/menu-button/menu-button.common.scss
new file mode 100644
index 00000000000..d9eba708e79
--- /dev/null
+++ b/core/src/components/menu-button/menu-button.common.scss
@@ -0,0 +1,147 @@
+@import "../../themes/mixins";
+
+// Menu Button
+// --------------------------------------------------
+
+:host {
+ /**
+ * @prop --border-radius: Border radius of the menu button
+ *
+ * @prop --background: Background of the menu button
+ * @prop --background-hover: Background of the menu button on hover
+ * @prop --background-hover-opacity: Opacity of the background on hover
+ * @prop --background-focused: Background of the menu button when focused with the tab key
+ * @prop --background-focused-opacity: Opacity of the menu button background when focused with the tab key
+ *
+ * @prop --color: Color of the menu button
+ * @prop --color-hover: Color of the menu button on hover
+ * @prop --color-focused: Color of the menu button when focused with the tab key
+ *
+ * @prop --padding-top: Top padding of the button
+ * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
+ * @prop --padding-bottom: Bottom padding of the button
+ * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
+ */
+ --background: transparent;
+ --color-focused: currentColor;
+ --border-radius: initial;
+ --padding-top: 0;
+ --padding-bottom: 0;
+
+ color: var(--color);
+
+ text-align: center;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ text-transform: none;
+
+ white-space: nowrap;
+ font-kerning: none;
+}
+
+.button-native {
+ @include border-radius(var(--border-radius));
+ @include text-inherit();
+ @include margin(0);
+ @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+ @include font-smoothing();
+
+ display: flex;
+
+ position: relative;
+
+ flex-flow: row nowrap;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+
+ min-height: inherit;
+
+ border: 0;
+
+ outline: none;
+
+ background: var(--background);
+
+ line-height: 1;
+
+ cursor: pointer;
+
+ overflow: hidden;
+ user-select: none;
+ z-index: 0;
+ appearance: none;
+}
+
+.button-inner {
+ display: flex;
+ position: relative;
+
+ flex-flow: row nowrap;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+
+ min-height: inherit;
+
+ z-index: 1;
+}
+
+ion-icon {
+ @include margin(0);
+ @include padding(0);
+
+ pointer-events: none;
+}
+
+// Menu Button: Hidden
+// --------------------------------------------------
+
+:host(.menu-button-hidden) {
+ display: none;
+}
+
+// Menu Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+ color: var(--color-focused);
+
+ &::after {
+ background: var(--background-focused);
+
+ opacity: var(--background-focused-opacity);
+ }
+}
+
+// Menu Button: Hover
+// --------------------------------------------------
+
+.button-native::after {
+ @include button-state();
+}
+
+@media (any-hover: hover) {
+ :host(:hover) .button-native {
+ color: var(--color-hover);
+
+ &::after {
+ background: var(--background-hover);
+
+ opacity: var(--background-hover-opacity, 0);
+ }
+ }
+}
+
+// Menu Button in Toolbar: Global Theming
+// --------------------------------------------------
+
+:host(.in-toolbar:not(.in-toolbar-color)) {
+ color: #{var(--ion-toolbar-color, var(--color))};
+}
diff --git a/core/src/components/menu-button/menu-button.ionic.scss b/core/src/components/menu-button/menu-button.ionic.scss
new file mode 100644
index 00000000000..3dc2a688733
--- /dev/null
+++ b/core/src/components/menu-button/menu-button.ionic.scss
@@ -0,0 +1,22 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./menu-button.common";
+
+// Menu Button Ionic
+// --------------------------------------------------
+
+:host {
+ --background-focused: currentColor;
+ --background-focused-opacity: 0.12;
+ --background-hover: currentColor;
+ --background-hover-opacity: 0.04;
+ --border-radius: initial;
+ --color: initial;
+ --padding-start: 0;
+ --padding-end: 0;
+ position: relative;
+
+ width: globals.$ion-scale-1000;
+ height: globals.$ion-scale-1000;
+
+ font-size: globals.$ion-font-size-600;
+}
diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss
index c5d3abd75da..eb816f033df 100644
--- a/core/src/components/menu-button/menu-button.ios.scss
+++ b/core/src/components/menu-button/menu-button.ios.scss
@@ -1,12 +1,12 @@
-@import "../../themes/ionic.globals.ios";
-@import "./menu-button";
+@import "../../themes/native/native.globals.ios";
+@import "./menu-button.native";
// iOS Menu Button
// --------------------------------------------------
:host {
--background-focused: currentColor;
- --background-focused-opacity: .1;
+ --background-focused-opacity: 0.1;
--border-radius: 4px;
--color: #{ion-color(primary, base)};
--padding-start: 5px;
@@ -17,20 +17,18 @@
font-size: dynamic-font-clamp(1, 31px, 1.23);
}
-
// Menu Button: Activated
// --------------------------------------------------
:host(.ion-activated) {
- opacity: .4;
+ opacity: 0.4;
}
-
// Menu Button: Hover
// --------------------------------------------------
@media (any-hover: hover) {
:host(:hover) {
- opacity: .6;
+ opacity: 0.6;
}
}
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index 5065e5c492d..8e0a78ac952 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -1,14 +1,14 @@
-@import "../../themes/ionic.globals.md";
-@import "./menu-button";
+@import "../../themes/native/native.globals.md";
+@import "./menu-button.native";
// MD Menu Button
// --------------------------------------------------
:host {
--background-focused: currentColor;
- --background-focused-opacity: .12;
+ --background-focused-opacity: 0.12;
--background-hover: currentColor;
- --background-hover-opacity: .04;
+ --background-hover-opacity: 0.04;
--border-radius: 50%;
--color: initial;
--padding-start: 8px;
@@ -20,7 +20,6 @@
font-size: dynamic-font(24px);
}
-
// Menu Button Color: Focused
// --------------------------------------------------
@@ -28,7 +27,6 @@
background: #{current-color(base)};
}
-
// Menu Button Color: Hover
// --------------------------------------------------
diff --git a/core/src/components/menu-button/menu-button.native.scss b/core/src/components/menu-button/menu-button.native.scss
new file mode 100644
index 00000000000..c4e0600a345
--- /dev/null
+++ b/core/src/components/menu-button/menu-button.native.scss
@@ -0,0 +1,21 @@
+@import "../../themes/native/native.globals";
+@import "./menu-button.common";
+
+// Menu Button
+// --------------------------------------------------
+
+// Menu Button: Disabled
+// --------------------------------------------------
+
+:host(.menu-button-disabled) {
+ cursor: default;
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+// Menu Button with Color
+// --------------------------------------------------
+
+:host(.ion-color) .button-native {
+ color: current-color(base);
+}
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
deleted file mode 100644
index 1cc38d63e4b..00000000000
--- a/core/src/components/menu-button/menu-button.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-@import "../../themes/ionic.globals";
-
-// Menu Button
-// --------------------------------------------------
-
-:host {
- /**
- * @prop --border-radius: Border radius of the menu button
- *
- * @prop --background: Background of the menu button
- * @prop --background-hover: Background of the menu button on hover
- * @prop --background-hover-opacity: Opacity of the background on hover
- * @prop --background-focused: Background of the menu button when focused with the tab key
- * @prop --background-focused-opacity: Opacity of the menu button background when focused with the tab key
- *
- * @prop --color: Color of the menu button
- * @prop --color-hover: Color of the menu button on hover
- * @prop --color-focused: Color of the menu button when focused with the tab key
- *
- * @prop --padding-top: Top padding of the button
- * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
- * @prop --padding-bottom: Bottom padding of the button
- * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
- */
- --background: transparent;
- --color-focused: currentColor;
- --border-radius: initial;
- --padding-top: 0;
- --padding-bottom: 0;
-
- color: var(--color);
-
- text-align: center;
- text-decoration: none;
- text-overflow: ellipsis;
- text-transform: none;
-
- white-space: nowrap;
- font-kerning: none;
-}
-
-.button-native {
- @include border-radius(var(--border-radius));
- @include text-inherit();
- @include margin(0);
- @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
- @include font-smoothing();
-
- display: flex;
-
- position: relative;
-
- flex-flow: row nowrap;
- flex-shrink: 0;
- align-items: center;
- justify-content: center;
-
- width: 100%;
- height: 100%;
-
- min-height: inherit;
-
- border: 0;
-
- outline: none;
-
- background: var(--background);
-
- line-height: 1;
-
- cursor: pointer;
-
- overflow: hidden;
- user-select: none;
- z-index: 0;
- appearance: none;
-}
-
-.button-inner {
- display: flex;
- position: relative;
-
- flex-flow: row nowrap;
- flex-shrink: 0;
- align-items: center;
- justify-content: center;
-
- width: 100%;
- height: 100%;
-
- min-height: inherit;
-
- z-index: 1;
-}
-
-ion-icon {
- @include margin(0);
- @include padding(0);
-
- pointer-events: none;
-}
-
-// Menu Button: Hidden
-// --------------------------------------------------
-
-:host(.menu-button-hidden) {
- display: none;
-}
-
-// Menu Button: Disabled
-// --------------------------------------------------
-
-:host(.menu-button-disabled) {
- cursor: default;
- opacity: .5;
- pointer-events: none;
-}
-
-
-// Menu Button: Focused
-// --------------------------------------------------
-
-:host(.ion-focused) .button-native {
- color: var(--color-focused);
-
- &::after {
- background: var(--background-focused);
-
- opacity: var(--background-focused-opacity);
- }
-}
-
-
-// Menu Button: Hover
-// --------------------------------------------------
-
-.button-native::after {
- @include button-state();
-}
-
-@media (any-hover: hover) {
- :host(:hover) .button-native {
- color: var(--color-hover);
-
- &::after {
- background: var(--background-hover);
-
- opacity: var(--background-hover-opacity, 0);
- }
- }
-}
-
-
-// Menu Button with Color
-// --------------------------------------------------
-
-:host(.ion-color) .button-native {
- color: current-color(base);
-}
-
-
-// Menu Button in Toolbar: Global Theming
-// --------------------------------------------------
-
-:host(.in-toolbar:not(.in-toolbar-color)) {
- color: #{var(--ion-toolbar-color, var(--color))};
-}
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index 5441bf2a542..61e683c1268 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -1,3 +1,4 @@
+import listRegular from '@phosphor-icons/core/assets/regular/list.svg';
import type { ComponentInterface } from '@stencil/core';
import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';
import type { ButtonInterface } from '@utils/element-interface';
@@ -8,12 +9,13 @@ import { createColorClasses, hostContext } from '@utils/theme';
import { menuOutline, menuSharp } from 'ionicons/icons';
import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import type { Color } from '../../interface';
import { updateVisibility } from '../menu-toggle/menu-toggle-util';
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*
* @part native - The native HTML button element that wraps all child elements.
* @part icon - The menu button icon (uses ion-icon).
@@ -23,6 +25,7 @@ import { updateVisibility } from '../menu-toggle/menu-toggle-util';
styleUrls: {
ios: 'menu-button.ios.scss',
md: 'menu-button.md.scss',
+ ionic: 'menu-button.ionic.scss',
},
shadow: true,
})
@@ -74,14 +77,29 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
this.visible = await updateVisibility(this.menu);
}
+ get menuIcon() {
+ // Determine the theme and map to default icons
+ const theme = getIonTheme(this);
+ const defaultIcons = {
+ ios: menuOutline,
+ ionic: listRegular,
+ md: menuSharp,
+ };
+
+ // Get the default icon based on the theme, falling back to 'md' icon if necessary
+ const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+
+ // Return the configured menu icon or the default icon
+ return config.get('menuIcon', defaultIcon);
+ }
+
private onClick = async () => {
return menuController.toggle(this.menu);
};
render() {
- const { color, disabled, inheritedAttributes } = this;
- const mode = getIonMode(this);
- const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp);
+ const { color, disabled, inheritedAttributes, menuIcon } = this;
+ const theme = getIonTheme(this);
const hidden = this.autoHide && !this.visible;
const attrs = {
@@ -96,7 +114,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
aria-disabled={disabled ? 'true' : null}
aria-hidden={hidden ? 'true' : null}
class={createColorClasses(color, {
- [mode]: true,
+ [theme]: true,
button: true, // ion-buttons target .button
'menu-button-hidden': hidden,
'menu-button-disabled': disabled,
@@ -109,10 +127,10 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
-
- {mode === 'md' &&
);
diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx
index c9dd7f3b9ef..f3983889575 100644
--- a/core/src/components/menu-toggle/menu-toggle.tsx
+++ b/core/src/components/menu-toggle/menu-toggle.tsx
@@ -2,11 +2,14 @@ import type { ComponentInterface } from '@stencil/core';
import { Component, Host, Listen, Prop, State, h } from '@stencil/core';
import { menuController } from '@utils/menu-controller';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import { updateVisibility } from './menu-toggle-util';
/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
* @slot - Content is placed inside the toggle to act as the click target.
*/
@Component({
@@ -50,7 +53,7 @@ export class MenuToggle implements ComponentInterface {
};
render() {
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
const hidden = this.autoHide && !this.visible;
return (
@@ -58,7 +61,7 @@ export class MenuToggle implements ComponentInterface {
onClick={this.onClick}
aria-hidden={hidden ? 'true' : null}
class={{
- [mode]: true,
+ [theme]: true,
'menu-toggle-hidden': hidden,
}}
>
diff --git a/core/src/components/menu/menu.ios.scss b/core/src/components/menu/menu.ios.scss
index 84249faa449..4ba7bfc8294 100644
--- a/core/src/components/menu/menu.ios.scss
+++ b/core/src/components/menu/menu.ios.scss
@@ -8,7 +8,6 @@
box-shadow: $menu-ios-box-shadow-overlay;
}
-
// iOS Menu Push
// --------------------------------------------------
diff --git a/core/src/components/menu/menu.ios.vars.scss b/core/src/components/menu/menu.ios.vars.scss
index 4b4ce895bc9..5d268e20cfa 100644
--- a/core/src/components/menu/menu.ios.vars.scss
+++ b/core/src/components/menu/menu.ios.vars.scss
@@ -1,25 +1,25 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
// iOS Menu
// --------------------------------------------------
/// @prop - Box shadow color of the menu
-$menu-ios-box-shadow-color: rgba(0, 0, 0, .08);
+$menu-ios-box-shadow-color: rgba(0, 0, 0, 0.08);
/// @prop - Box shadow of the menu
-$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color;
+$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color;
/// @prop - Box shadow of the menu in rtl mode
-$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color;
+$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color;
/// @prop - Box shadow of the reveal menu
-$menu-ios-box-shadow-reveal: $menu-ios-box-shadow;
+$menu-ios-box-shadow-reveal: $menu-ios-box-shadow;
/// @prop - Box shadow of the reveal menu
$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl;
/// @prop - Box shadow of the push menu
-$menu-ios-box-shadow-push: null;
+$menu-ios-box-shadow-push: null;
/// @prop - Box shadow of the overlay menu
-$menu-ios-box-shadow-overlay: null;
+$menu-ios-box-shadow-overlay: null;
diff --git a/core/src/components/menu/menu.md.vars.scss b/core/src/components/menu/menu.md.vars.scss
index d47b011739d..f21ade971fd 100644
--- a/core/src/components/menu/menu.md.vars.scss
+++ b/core/src/components/menu/menu.md.vars.scss
@@ -1,7 +1,7 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
// Material Design Menu
// --------------------------------------------------
/// @prop - Box shadow of the menu
-$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
+$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
index 86b522b50c0..792c6153e12 100644
--- a/core/src/components/menu/menu.scss
+++ b/core/src/components/menu/menu.scss
@@ -35,7 +35,6 @@
display: block;
}
-
.menu-inner {
@include transform(translateX(-9999px));
@@ -135,7 +134,7 @@
ion-backdrop {
display: none;
- opacity: .01;
+ opacity: 0.01;
z-index: -1;
}
@@ -145,7 +144,6 @@ ion-backdrop {
}
}
-
// Menu Reveal
// --------------------------------------------------
// The content slides over to reveal the menu underneath.
@@ -159,7 +157,6 @@ ion-backdrop {
@include transform(translate3d(0, 0, 0));
}
-
// Menu Overlay
// --------------------------------------------------
// The menu slides over the content. The content
@@ -175,7 +172,6 @@ ion-backdrop {
cursor: pointer;
}
-
// Menu Split Pane
// --------------------------------------------------
@@ -222,7 +218,7 @@ ion-backdrop {
order: -1;
}
-:host(.menu-pane-visible.split-pane-side[side=end]) {
+:host(.menu-pane-visible.split-pane-side[side="end"]) {
order: 1;
}
@@ -248,10 +244,9 @@ ion-backdrop {
max-width: var(--side-max-width);
}
-:host(.menu-pane-visible.split-pane-side[side=end]) {
+:host(.menu-pane-visible.split-pane-side[side="end"]) {
@include border(0, 0, 0, var(--border));
min-width: var(--side-min-width);
max-width: var(--side-max-width);
}
-
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 4769f609914..2d48b605883 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -13,7 +13,7 @@ import { isPlatform } from '@utils/platform';
import { hostContext } from '@utils/theme';
import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
import type { Animation, Gesture, GestureDetail } from '../../interface';
import type { MenuChangeEventDetail, MenuCloseEventDetail, MenuI, MenuType, Side } from './menu-interface';
@@ -24,6 +24,9 @@ const iosEasingReverse = 'cubic-bezier(1, 0, 0.68, 0.28)';
const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
* @part container - The container for the menu content.
* @part backdrop - The backdrop that appears over the main content when the menu is open.
*/
@@ -32,6 +35,7 @@ const mdEasingReverse = 'cubic-bezier(0.4, 0, 0.6, 1)';
styleUrls: {
ios: 'menu.ios.scss',
md: 'menu.md.scss',
+ ionic: 'menu.md.scss',
},
shadow: true,
})
@@ -830,7 +834,7 @@ export class Menu implements ComponentInterface, MenuI {
render() {
const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
/**
* If the Close Watcher is enabled then
@@ -843,7 +847,7 @@ export class Menu implements ComponentInterface, MenuI {
role="navigation"
aria-label={inheritedAttributes['aria-label'] || 'menu'}
class={{
- [mode]: true,
+ [theme]: true,
[`menu-type-${type}`]: true,
'menu-enabled': !disabled,
[`menu-side-${side}`]: true,
diff --git a/core/src/components/menu/menu.vars.scss b/core/src/components/menu/menu.vars.scss
index a42a96d548c..9315873dd59 100644
--- a/core/src/components/menu/menu.vars.scss
+++ b/core/src/components/menu/menu.vars.scss
@@ -1,10 +1,10 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/native/native.globals";
// Menu
// --------------------------------------------------
/// @prop - Width of the menu
-$menu-width: 304px;
+$menu-width: 304px;
/// @prop - Width of the menu on small devices (under 340px)
-$menu-small-width: $menu-width - 40px;
+$menu-small-width: $menu-width - 40px;
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png
index 34d34f9de85..7dedf487d2a 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png
index 5de3cf5bdd3..d01a7a75bba 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png
index e288b014a41..d0fbeeeb8be 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png
index 02fa4735565..e7db196ee1e 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png
index 3283f15e060..5cf65a29611 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png
index 09f9ac5a680..56bd97bd5c8 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png
index 2cb8b32cb75..735262cccd8 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png
index 9e7a9dc05a6..0844ae3712f 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png
index 087ec8b1778..f3cafa9414d 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png
index 4311d167c8f..d21cf97c626 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png
index 1a8ff475627..cdaf47b7379 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png
index a4f2934c07c..46e8ba4c8be 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png
index d31ea7a2040..5638dbd8a51 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png
index 4bf4fa95415..c09fec3b635 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png
index b3ddea1ec20..5f30dfcabf8 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png
index 34d34f9de85..7dedf487d2a 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png
index 5de3cf5bdd3..d01a7a75bba 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png
index e288b014a41..d0fbeeeb8be 100644
Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/animations/ionic.enter.ts b/core/src/components/modal/animations/ionic.enter.ts
new file mode 100644
index 00000000000..0579189d13a
--- /dev/null
+++ b/core/src/components/modal/animations/ionic.enter.ts
@@ -0,0 +1,53 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
+import type { Animation } from '../../../interface';
+import type { ModalAnimationOptions } from '../modal-interface';
+
+import { createSheetEnterAnimation } from './sheet';
+
+const createEnterAnimation = () => {
+ const backdropAnimation = createAnimation()
+ .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+ .beforeStyles({
+ 'pointer-events': 'none',
+ })
+ .afterClearStyles(['pointer-events']);
+
+ const wrapperAnimation = createAnimation().keyframes([
+ { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
+ { offset: 1, opacity: 1, transform: `translateY(0px)` },
+ ]);
+
+ return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+};
+
+/**
+ * Ionic Modal Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+ const { currentBreakpoint, expandToScroll } = opts;
+ const root = getElementRoot(baseEl);
+ const { wrapperAnimation, backdropAnimation, contentAnimation } =
+ currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+
+ backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
+
+ wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
+
+ // The content animation is only added if scrolling is enabled for
+ // all the breakpoints.
+ !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page')!);
+
+ backdropAnimation.duration(300).easing('ease-out');
+ wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+ contentAnimation?.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+
+ const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+
+ if (contentAnimation) {
+ baseAnimation.addAnimation(contentAnimation);
+ }
+
+ return baseAnimation;
+};
diff --git a/core/src/components/modal/animations/ionic.leave.ts b/core/src/components/modal/animations/ionic.leave.ts
new file mode 100644
index 00000000000..ce7bce765ac
--- /dev/null
+++ b/core/src/components/modal/animations/ionic.leave.ts
@@ -0,0 +1,38 @@
+import { createAnimation } from '@utils/animation/animation';
+import { getElementRoot } from '@utils/helpers';
+
+import type { Animation } from '../../../interface';
+import type { ModalAnimationOptions } from '../modal-interface';
+
+import { createSheetLeaveAnimation } from './sheet';
+
+const createLeaveAnimation = () => {
+ const backdropAnimation = createAnimation().fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+ const wrapperAnimation = createAnimation().keyframes([
+ { offset: 0, opacity: 0.99, transform: `translateY(0px)` },
+ { offset: 1, opacity: 0, transform: 'translateY(40px)' },
+ ]);
+
+ return { backdropAnimation, wrapperAnimation };
+};
+
+/**
+ * Md Modal Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
+ const { currentBreakpoint } = opts;
+ const root = getElementRoot(baseEl);
+ const { wrapperAnimation, backdropAnimation } =
+ currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
+
+ backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
+ wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);
+
+ backdropAnimation.duration(250).easing('ease-in');
+ wrapperAnimation.duration(400).easing('cubic-bezier(0.4, 0, 1, 1)');
+
+ const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+
+ return baseAnimation;
+};
diff --git a/core/src/components/modal/animations/sheet.ts b/core/src/components/modal/animations/sheet.ts
index e827846a7be..416d8d046a3 100644
--- a/core/src/components/modal/animations/sheet.ts
+++ b/core/src/components/modal/animations/sheet.ts
@@ -4,7 +4,7 @@ import type { ModalAnimationOptions } from '../modal-interface';
import { getBackdropValueForSheet } from '../utils';
export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
- const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
+ const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
/**
* If the backdropBreakpoint is undefined, then the backdrop
@@ -12,7 +12,12 @@ export const createSheetEnterAnimation = (opts: ModalAnimationOptions) => {
* current breakpoint, then the backdrop should be fading in.
*/
const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint!;
- const initialBackdrop = shouldShowBackdrop ? `calc(var(--backdrop-opacity) * ${currentBreakpoint!})` : '0';
+ let initialBackdrop = '0';
+ if (staticBackdropOpacity) {
+ initialBackdrop = 'calc(var(--backdrop-opacity)';
+ } else if (shouldShowBackdrop) {
+ initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint!})`;
+ }
const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts
index 163be3beadd..a39de121bf0 100644
--- a/core/src/components/modal/gestures/sheet.ts
+++ b/core/src/components/modal/gestures/sheet.ts
@@ -53,6 +53,7 @@ export const createSheetGesture = (
getCurrentBreakpoint: () => number,
onDismiss: () => void,
onBreakpointChange: (breakpoint: number) => void,
+ usePhysicsBasedGesture: boolean,
onDragStart: () => void,
onDragMove: (detail: ModalDragEventDetail) => void,
onDragEnd: (detail: ModalDragEventDetail) => void
@@ -60,13 +61,13 @@ export const createSheetGesture = (
// Defaults for the sheet swipe animation
const defaultBackdrop = [
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
- { offset: 1, opacity: 0.01 },
+ { offset: 1, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0.01 },
];
const customBackdrop = [
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
- { offset: 1 - backdropBreakpoint, opacity: 0 },
- { offset: 1, opacity: 0 },
+ { offset: 1 - backdropBreakpoint, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0 },
+ { offset: 1, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0 },
];
const SheetDefaults = {
@@ -419,7 +420,9 @@ export const createSheetGesture = (
offset = clamp(0.0001, processedStep, maxStep);
animation.progressStep(offset);
- const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+ const snapBreakpoint = usePhysicsBasedGesture
+ ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
+ : calculatePositionSnapBreakpoint(detail.deltaY);
const eventDetail: ModalDragEventDetail = {
currentY: detail.currentY,
@@ -433,7 +436,9 @@ export const createSheetGesture = (
};
const onEnd = (detail: GestureDetail) => {
- const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+ const snapBreakpoint = usePhysicsBasedGesture
+ ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
+ : calculatePositionSnapBreakpoint(detail.deltaY);
const eventDetail: ModalDragEventDetail = {
currentY: detail.currentY,
@@ -488,6 +493,15 @@ export const createSheetGesture = (
const shouldPreventDismiss = canDismiss && breakpoint === 0;
const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint;
+ /**
+ * Detect snap-back behavior: when the snap target is the same as the current breakpoint,
+ * the user released before crossing the threshold to a new breakpoint.
+ * Apply different timing and easing for snap-back vs. snap-to-new.
+ */
+ const isSnapBack = snapToBreakpoint === currentBreakpoint;
+ const duration = usePhysicsBasedGesture ? (isSnapBack ? 300 : 400) : 500;
+ const easing = isSnapBack ? 'cubic-bezier(0.34, 1.4, 0.64, 1)' : 'cubic-bezier(0.32, 0.68, 0, 1)';
+
const shouldRemainOpen = snapToBreakpoint !== 0;
currentBreakpoint = 0;
@@ -504,14 +518,15 @@ export const createSheetGesture = (
backdropAnimation.keyframes([
{
offset: 0,
- opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(
- 1 - breakpointOffset,
- backdropBreakpoint
- )})`,
+ opacity: usePhysicsBasedGesture
+ ? 'var(--backdrop-opacity)'
+ : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
},
{
offset: 1,
- opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
+ opacity: usePhysicsBasedGesture
+ ? 'var(--backdrop-opacity)'
+ : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
},
]);
@@ -532,6 +547,13 @@ export const createSheetGesture = (
animation.progressStep(0);
}
+ /**
+ * Apply the appropriate easing curve for this snap behavior.
+ */
+ if (usePhysicsBasedGesture) {
+ animation.easing(easing);
+ }
+
/**
* Gesture should remain disabled until the
* snapping animation completes.
@@ -629,7 +651,7 @@ export const createSheetGesture = (
},
{ oneTimeCallback: true }
)
- .progressEnd(1, 0, animated ? 500 : 0);
+ .progressEnd(1, 0, animated ? duration : 0);
});
};
@@ -641,7 +663,7 @@ export const createSheetGesture = (
* @param deltaY The change in Y position since the gesture started.
* @returns The snap breakpoint value.
*/
- const calculateSnapBreakpoint = (deltaY: number): number => {
+ const calculatePositionSnapBreakpoint = (deltaY: number): number => {
/**
* Calculates the real-time vertical position of the modal.
* We combine the wrapper's current bounding box position with the
@@ -664,6 +686,57 @@ export const createSheetGesture = (
return snapBreakpoint;
};
+ /**
+ * Calculates the snap breakpoint using velocity-based logic.
+ * This provides a more intuitive and responsive sheet behavior for the Ionic theme.
+ *
+ * Rules:
+ * 1. Fast downward flick (> 500 px/s) always dismisses, regardless of position
+ * 2. Fast upward flick (> 400 px/s) snaps to the next breakpoint above
+ * 3. If dragged 40% below current snap point without fast upward flick, dismisses
+ * 4. Otherwise, falls back to position-based snap (closest breakpoint)
+ *
+ * @param deltaY The change in Y position since gesture started
+ * @param velocityY The velocity in pixels per millisecond
+ * @param currentY The current Y position of the gesture
+ * @returns The snap breakpoint value
+ */
+ const calculateVelocitySnapBreakpoint = (deltaY: number, velocityY: number, currentY: number): number => {
+ // Convert velocity from px/ms to px/s for easier threshold comparison
+ const velocityYPerSecond = velocityY * 1000;
+
+ // Calculate current progress (0 = fully closed, 1 = fully expanded)
+ const currentProgress = calculateProgress(currentY);
+
+ // Rule 1: Fast downward flick always dismisses
+ if (velocityYPerSecond > 500) {
+ return minBreakpoint;
+ }
+
+ // Rule 2: Fast upward flick moves to next breakpoint above
+ if (velocityYPerSecond < -400) {
+ // Find next breakpoint above current position
+ const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
+ // If no breakpoint above, stay at max breakpoint
+ return nextBreakpoint ?? maxBreakpoint;
+ }
+
+ // Rule 3: 40% dismissal rule (only if not flicking up and 0 breakpoint exists)
+ if (minBreakpoint === 0 && currentBreakpoint > 0) {
+ // Calculate how far we've moved below the current snap point
+ const distanceBelowSnap = currentBreakpoint - currentProgress;
+ const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
+
+ // If dragged more than 40% below and not flicking up, dismiss
+ if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
+ return 0;
+ }
+ }
+
+ // Rule 4: Fallback to position-based snap (existing logic)
+ return calculatePositionSnapBreakpoint(deltaY);
+ };
+
/**
* Calculates the progress of the swipe gesture.
*
diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts
index 97831de0b04..071a50fa869 100644
--- a/core/src/components/modal/modal-interface.ts
+++ b/core/src/components/modal/modal-interface.ts
@@ -1,6 +1,8 @@
-import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
+import type { OverlayOptions } from '@utils/overlays-interface';
-export interface ModalOptions
{
+import type { ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
+
+export interface ModalOptions extends OverlayOptions {
component: T;
componentProps?: ComponentProps;
presentingElement?: HTMLElement;
@@ -8,18 +10,12 @@ export interface ModalOptions {
backdropDismiss?: boolean;
cssClass?: string | string[];
delegate?: FrameworkDelegate;
- animated?: boolean;
canDismiss?: boolean | ((data?: any, role?: string) => Promise);
focusTrap?: boolean;
- mode?: Mode;
keyboardClose?: boolean;
- id?: string;
htmlAttributes?: { [key: string]: any };
- enterAnimation?: AnimationBuilder;
- leaveAnimation?: AnimationBuilder;
-
breakpoints?: number[];
initialBreakpoint?: number;
backdropBreakpoint?: number;
@@ -33,6 +29,7 @@ export interface ModalAnimationOptions {
currentBreakpoint?: number;
backdropBreakpoint?: number;
expandToScroll: boolean;
+ staticBackdropOpacity?: boolean;
}
export interface ModalBreakpointChangeEventDetail {
diff --git a/core/src/components/modal/modal.common.scss b/core/src/components/modal/modal.common.scss
new file mode 100644
index 00000000000..dfe405a2ba6
--- /dev/null
+++ b/core/src/components/modal/modal.common.scss
@@ -0,0 +1,139 @@
+@import "../../themes/mixins.scss";
+
+// Modals: Common Styles
+// --------------------------------------------------
+
+:host {
+ /**
+ * @prop --background: Background of the modal content
+ *
+ * @prop --border-color: Border color of the modal content
+ * @prop --border-radius: Border radius of the modal content
+ * @prop --border-width: Border width of the modal content
+ * @prop --border-style: Border style of the modal content
+ *
+ * @prop --min-width: Minimum width of the modal
+ * @prop --width: Width of the modal
+ * @prop --max-width: Maximum width of the modal
+ *
+ * @prop --min-height: Minimum height of the modal
+ * @prop --height: Height of the modal
+ * @prop --max-height: Maximum height of the modal
+ *
+ * @prop --backdrop-opacity: Opacity of the backdrop
+ */
+ --width: 100%;
+ --min-width: auto;
+ --max-width: auto;
+ --height: 100%;
+ --min-height: auto;
+ --max-height: auto;
+ --overflow: hidden;
+ --border-width: 0;
+ --border-style: none;
+ --border-color: transparent;
+ --box-shadow: none;
+
+ @include position(0, 0, 0, 0);
+
+ display: flex;
+ position: absolute;
+
+ align-items: center;
+ justify-content: center;
+
+ outline: none;
+
+ contain: strict;
+}
+
+.modal-wrapper,
+ion-backdrop {
+ pointer-events: auto;
+}
+
+:host(.overlay-hidden) {
+ display: none;
+}
+
+.modal-wrapper,
+.modal-shadow {
+ @include border-radius(var(--border-radius));
+
+ width: var(--width);
+ min-width: var(--min-width);
+ max-width: var(--max-width);
+
+ height: var(--height);
+ min-height: var(--min-height);
+ max-height: var(--max-height);
+
+ border-width: var(--border-width);
+ border-style: var(--border-style);
+ border-color: var(--border-color);
+
+ background: var(--background);
+
+ box-shadow: var(--box-shadow);
+ overflow: var(--overflow);
+ z-index: 10;
+}
+
+/**
+ * The wrapper receives programmatic focus for screen readers but should not
+ * show a visible focus ring, which is meant only for keyboard navigation.
+ */
+.modal-wrapper {
+ outline: none;
+}
+
+.modal-shadow {
+ position: absolute;
+
+ background: transparent;
+}
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+ @include margin(null, auto, null, auto);
+
+ position: absolute;
+
+ /**
+ * This allows the handle to appear
+ * on top of user content in WebKit.
+ */
+ transform: translateZ(0);
+
+ border: 0;
+
+ cursor: pointer;
+
+ z-index: 11;
+
+ &::before {
+ position: absolute;
+
+ transform: translate(-50%, -50%);
+
+ content: "";
+ }
+}
+
+:host(.modal-sheet) .modal-wrapper,
+:host(.modal-sheet) .modal-shadow {
+ position: absolute;
+ bottom: 0;
+}
+
+// Sheet Modal - Scroll at all breakpoints
+// --------------------------------------------------
+
+:host(.modal-sheet.modal-no-expand-scroll) ion-footer {
+ position: absolute;
+ bottom: 0;
+
+ width: var(--width);
+}
diff --git a/core/src/components/modal/modal.ionic.scss b/core/src/components/modal/modal.ionic.scss
new file mode 100644
index 00000000000..ec46628a9bc
--- /dev/null
+++ b/core/src/components/modal/modal.ionic.scss
@@ -0,0 +1,67 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./modal.common";
+
+// Ionic Modal
+// --------------------------------------------------
+
+:host {
+ --background: #{globals.$ion-bg-surface-default};
+ --box-shadow: #{globals.$ion-elevation-3};
+ // Backdrop opacity is 1 because the backdrop's background color has an alpha value
+ --backdrop-opacity: 0.7;
+
+ color: globals.$ion-text-default;
+}
+
+// Shape
+// -------------------------------------
+:host(.modal-round) {
+ --border-radius: #{globals.$ion-border-radius-1000};
+}
+
+:host(.modal-soft) {
+ --border-radius: #{globals.$ion-border-radius-400};
+}
+
+:host(.modal-rectangular) {
+ --border-radius: #{globals.$ion-border-radius-0};
+}
+
+// Default Modal
+// --------------------------------------------------
+
+// Modal when inside a select default-modal
+:host(.select-modal.modal-default) {
+ --max-height: 45%;
+ --max-width: calc(100% - (#{globals.$ion-space-400} * 2));
+ --min-height: 340px;
+}
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+ @include globals.position(globals.$ion-space-300, 0px, null, 0px);
+ @include globals.border-radius(globals.$ion-border-radius-100);
+
+ width: globals.$ion-scale-1100;
+ height: globals.$ion-scale-100;
+
+ background-color: globals.$ion-primitives-neutral-300;
+
+ &::before {
+ @include globals.padding(globals.$ion-space-100);
+ }
+}
+
+:host(.modal-sheet) .modal-wrapper {
+ @include globals.border-radius(var(--border-radius), var(--border-radius), 0, 0);
+}
+
+/**
+ * Ensure that the sheet modal does not
+ * completely cover the content.
+ */
+:host(.modal-sheet) {
+ --height: calc(100% - (var(--ion-safe-area-top) + #{globals.$ion-scale-250}));
+}
diff --git a/core/src/components/modal/modal.ios.scss b/core/src/components/modal/modal.ios.scss
index fc5e25e3d19..58954468d22 100644
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -1,4 +1,4 @@
-@import "./modal";
+@import "./modal.native";
@import "./modal.ios.vars";
// iOS Modals
diff --git a/core/src/components/modal/modal.ios.vars.scss b/core/src/components/modal/modal.ios.vars.scss
index d82de67f79a..be2804a078c 100644
--- a/core/src/components/modal/modal.ios.vars.scss
+++ b/core/src/components/modal/modal.ios.vars.scss
@@ -1,7 +1,7 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
// iOS Modals
// --------------------------------------------------
/// @prop - Border radius for the modal
-$modal-ios-border-radius: 10px;
+$modal-ios-border-radius: 10px;
diff --git a/core/src/components/modal/modal.md.scss b/core/src/components/modal/modal.md.scss
index 6a822e8918c..e03ff3b4e7f 100644
--- a/core/src/components/modal/modal.md.scss
+++ b/core/src/components/modal/modal.md.scss
@@ -1,7 +1,6 @@
-@import "./modal";
+@import "./modal.native";
@import "./modal.md.vars";
-
// Material Design Modals
// --------------------------------------------------
@@ -19,6 +18,5 @@
.modal-wrapper {
@include transform(translate3d(0, 40px, 0));
- opacity: .01;
+ opacity: 0.01;
}
-
diff --git a/core/src/components/modal/modal.md.vars.scss b/core/src/components/modal/modal.md.vars.scss
index 37aa47cb53f..5663d294259 100644
--- a/core/src/components/modal/modal.md.vars.scss
+++ b/core/src/components/modal/modal.md.vars.scss
@@ -1,10 +1,10 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
// Material Design Modals
// --------------------------------------------------
/// @prop - Box shadow color of the alert
-$modal-inset-box-shadow-color: rgba(0, 0, 0, .4);
+$modal-inset-box-shadow-color: rgba(0, 0, 0, 0.4);
/// @prop - Box shadow of the alert
-$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color;
+$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color;
diff --git a/core/src/components/modal/modal.native.scss b/core/src/components/modal/modal.native.scss
new file mode 100644
index 00000000000..01bbc62d6ee
--- /dev/null
+++ b/core/src/components/modal/modal.native.scss
@@ -0,0 +1,69 @@
+@use "./modal.common";
+@import "./modal.native.vars.scss";
+@import "../../themes/native/native.globals";
+
+// Modals: Native Styles
+// --------------------------------------------------
+
+:host {
+ --background: #{$background-color};
+ --border-radius: 0;
+ --backdrop-opacity: 0;
+
+ color: $modal-text-color;
+}
+
+@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
+ :host {
+ --width: #{$modal-inset-width};
+ --height: #{$modal-inset-height-small};
+ --ion-safe-area-top: 0px;
+ --ion-safe-area-bottom: 0px;
+ --ion-safe-area-right: 0px;
+ --ion-safe-area-left: 0px;
+ }
+}
+
+@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
+ :host {
+ --width: #{$modal-inset-width};
+ --height: #{$modal-inset-height-large};
+ }
+}
+
+// Sheet Modal
+// --------------------------------------------------
+
+.modal-handle {
+ @include position(5px, 0px, null, 0px);
+ @include border-radius(8px, 8px, 8px, 8px);
+
+ width: 36px;
+ height: 5px;
+
+ background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
+
+ &::before {
+ /**
+ * Adds a 4px tap area to the perimeter
+ * of the handle.
+ */
+ @include padding(4px, 4px, 4px, 4px);
+
+ width: 36px;
+ height: 5px;
+ }
+}
+
+/**
+ * Ensure that the sheet modal does not
+ * completely cover the content.
+ *
+ * --ion-modal-offset-top is an internal property set by modal.tsx
+ * with the resolved root safe-area-top pixel value. This decouples
+ * the height calculation from --ion-safe-area-top (which is zeroed
+ * for sheet modals to prevent header double-padding).
+ */
+:host(.modal-sheet) {
+ --height: calc(100% - (var(--ion-modal-offset-top, 0px) + 10px));
+}
diff --git a/core/src/components/modal/modal.native.vars.scss b/core/src/components/modal/modal.native.vars.scss
new file mode 100644
index 00000000000..57a40c8ca33
--- /dev/null
+++ b/core/src/components/modal/modal.native.vars.scss
@@ -0,0 +1,31 @@
+@import "../../themes/native/native.globals";
+
+// Modals
+// --------------------------------------------------
+
+/// @prop - Min width of the modal inset
+$modal-inset-min-width: 768px;
+
+/// @prop - Minimum height of the small modal inset
+$modal-inset-min-height-small: 600px;
+
+/// @prop - Minimum height of the large modal inset
+$modal-inset-min-height-large: 768px;
+
+/// @prop - Width of the large modal inset
+$modal-inset-width: 600px;
+
+/// @prop - Height of the small modal inset
+$modal-inset-height-small: 500px;
+
+/// @prop - Height of the large modal inset
+$modal-inset-height-large: 600px;
+
+/// @prop - Text color of the modal content
+$modal-text-color: $text-color;
+
+/// @prop - Padding top of the sheet modal
+$modal-sheet-padding-top: 6px;
+
+/// @prop - Padding bottom of the sheet modal
+$modal-sheet-padding-bottom: 6px;
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
deleted file mode 100644
index 0df4a448cd3..00000000000
--- a/core/src/components/modal/modal.scss
+++ /dev/null
@@ -1,187 +0,0 @@
-@import "./modal.vars";
-
-// Modals
-// --------------------------------------------------
-
-:host {
- /**
- * @prop --background: Background of the modal content
- *
- * @prop --border-color: Border color of the modal content
- * @prop --border-radius: Border radius of the modal content
- * @prop --border-width: Border width of the modal content
- * @prop --border-style: Border style of the modal content
- *
- * @prop --min-width: Minimum width of the modal
- * @prop --width: Width of the modal
- * @prop --max-width: Maximum width of the modal
- *
- * @prop --min-height: Minimum height of the modal
- * @prop --height: Height of the modal
- * @prop --max-height: Maximum height of the modal
- *
- * @prop --backdrop-opacity: Opacity of the backdrop
- */
- --width: 100%;
- --min-width: auto;
- --max-width: auto;
- --height: 100%;
- --min-height: auto;
- --max-height: auto;
- --overflow: hidden;
- --border-radius: 0;
- --border-width: 0;
- --border-style: none;
- --border-color: transparent;
- --background: #{$background-color};
- --box-shadow: none;
- --backdrop-opacity: 0;
-
- @include position(0, 0, 0, 0);
-
- display: flex;
- position: absolute;
-
- align-items: center;
- justify-content: center;
-
- outline: none;
-
- color: $modal-text-color;
-
- contain: strict;
-}
-
-.modal-wrapper,
-ion-backdrop {
- pointer-events: auto;
-}
-
-:host(.overlay-hidden) {
- display: none;
-}
-
-.modal-wrapper,
-.modal-shadow {
- @include border-radius(var(--border-radius));
-
- width: var(--width);
- min-width: var(--min-width);
- max-width: var(--max-width);
-
- height: var(--height);
- min-height: var(--min-height);
- max-height: var(--max-height);
-
- border-width: var(--border-width);
- border-style: var(--border-style);
- border-color: var(--border-color);
-
- background: var(--background);
-
- box-shadow: var(--box-shadow);
- overflow: var(--overflow);
- z-index: 10;
-}
-
-/**
- * The wrapper receives programmatic focus for screen readers but should not
- * show a visible focus ring, which is meant only for keyboard navigation.
- */
-.modal-wrapper {
- outline: none;
-}
-
-.modal-shadow {
- position: absolute;
-
- background: transparent;
-}
-
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
- :host {
- --width: #{$modal-inset-width};
- --height: #{$modal-inset-height-small};
- }
-}
-
-@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
- :host {
- --width: #{$modal-inset-width};
- --height: #{$modal-inset-height-large};
- }
-}
-
-// Sheet Modal
-// --------------------------------------------------
-
-.modal-handle {
- @include position(5px, 0px, null, 0px);
- @include border-radius(8px, 8px, 8px, 8px);
- @include margin(null, auto, null, auto);
-
- position: absolute;
-
- width: 36px;
- height: 5px;
-
- /**
- * This allows the handle to appear
- * on top of user content in WebKit.
- */
- transform: translateZ(0);
-
- border: 0;
-
- background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
-
- cursor: pointer;
-
- z-index: 11;
-
- &::before {
- /**
- * Adds a 4px tap area to the perimeter
- * of the handle.
- */
- @include padding(4px, 4px, 4px, 4px);
-
- position: absolute;
-
- width: 36px;
- height: 5px;
-
- transform: translate(-50%, -50%);
-
- content: "";
- }
-}
-
-/**
- * Ensure that the sheet modal does not
- * completely cover the content.
- *
- * --ion-modal-offset-top is an internal property set by modal.tsx
- * with the resolved root safe-area-top pixel value. This decouples
- * the height calculation from --ion-safe-area-top (which is zeroed
- * for sheet modals to prevent header double-padding).
- */
-:host(.modal-sheet) {
- --height: calc(100% - (var(--ion-modal-offset-top, 0px) + 10px));
-}
-
-:host(.modal-sheet) .modal-wrapper,
-:host(.modal-sheet) .modal-shadow {
- position: absolute;
- bottom: 0;
-}
-
-// Sheet Modal - Scroll at all breakpoints
-// --------------------------------------------------
-
-:host(.modal-sheet.modal-no-expand-scroll) ion-footer {
- position: absolute;
- bottom: 0;
-
- width: var(--width);
-}
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 0b6c1be162f..3f794a85ef9 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -22,7 +22,7 @@ import { getClassMap } from '@utils/theme';
import { deepReady, waitForMount } from '@utils/transition';
import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
import type {
Animation,
AnimationBuilder,
@@ -35,6 +35,7 @@ import type {
import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
import type { OverlayEventDetail } from '../../utils/overlays-interface';
+import { ionicEnterAnimation } from './animations/ionic.enter';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { portraitToLandscapeTransition, landscapeToPortraitTransition } from './animations/ios.transition';
@@ -59,7 +60,8 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
// TODO(FW-2832): types
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*
* @slot - Content is placed inside of the `.modal-content` element.
*
@@ -72,6 +74,7 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
styleUrls: {
ios: 'modal.ios.scss',
md: 'modal.md.scss',
+ ionic: 'modal.ionic.scss',
},
shadow: true,
})
@@ -367,6 +370,15 @@ export class Modal implements ComponentInterface, OverlayInterface {
*/
@Prop() canDismiss: boolean | ((data?: any, role?: string) => Promise) = true;
+ /**
+ * Set to `"soft"` for a modal with slightly rounded corners,
+ * `"round"` for a modal with fully rounded corners, or `"rectangular"`
+ * for a modal without rounded corners.
+ *
+ * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+ */
+ @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
/**
* Emitted after the modal has presented.
*/
@@ -669,11 +681,12 @@ export class Modal implements ComponentInterface, OverlayInterface {
setCardStatusBarDark();
}
- await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+ await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, {
presentingEl: presentingElement,
currentBreakpoint: this.initialBreakpoint,
backdropBreakpoint: this.backdropBreakpoint,
expandToScroll: this.expandToScroll,
+ staticBackdropOpacity: getIonTheme(this) === 'ionic',
});
// Update safe-area based on actual position after animation
@@ -778,6 +791,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
currentBreakpoint: initialBreakpoint,
backdropBreakpoint,
expandToScroll: this.expandToScroll,
+ staticBackdropOpacity: getIonTheme(this) === 'ionic',
}));
ani.progressStart(true, 1);
@@ -799,6 +813,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
this.ionBreakpointDidChange.emit({ breakpoint });
}
},
+ getIonTheme(this) === 'ionic',
() => this.onDragStart(),
(detail: ModalDragEventDetail) => this.onDragMove(detail),
(detail: ModalDragEventDetail) => this.onDragEnd(detail)
@@ -1140,6 +1155,22 @@ export class Modal implements ComponentInterface, OverlayInterface {
return true;
}
+ private getShape(): string | undefined {
+ const theme = getIonTheme(this);
+ const { shape } = this;
+
+ // TODO(ROU-11167): Remove theme check when shapes are defined for all themes.
+ if (theme !== 'ionic') {
+ return undefined;
+ }
+
+ if (shape === undefined) {
+ return 'round';
+ }
+
+ return shape;
+ }
+
private onHandleClick = () => {
const { sheetTransition, handleBehavior } = this;
if (handleBehavior !== 'cycle' || sheetTransition !== undefined) {
@@ -1621,9 +1652,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
expandToScroll,
} = this;
const showHandle = handle !== false && isSheetModal;
- const mode = getIonMode(this);
- const isCardModal = presentingElement !== undefined && mode === 'ios';
+ const theme = getIonTheme(this);
+ const isCardModal = presentingElement !== undefined && theme === 'ios';
const isHandleCycle = handleBehavior === 'cycle';
+ const shape = this.getShape();
const isSheetModalWithHandle = isSheetModal && showHandle;
return (
@@ -1636,10 +1668,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
zIndex: `${20000 + this.overlayIndex}`,
}}
class={{
- [mode]: true,
+ [theme]: true,
['modal-default']: !isCardModal && !isSheetModal,
[`modal-card`]: isCardModal,
[`modal-sheet`]: isSheetModal,
+ [`modal-${shape}`]: shape !== undefined,
[`modal-no-expand-scroll`]: isSheetModal && !expandToScroll,
'overlay-hidden': true,
[FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
@@ -1659,7 +1692,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
part="backdrop"
/>
- {mode === 'ios' &&
}
+ {theme === 'ios' &&
}
(this.dragHandleEl = el)}
>
)}
@@ -1717,16 +1751,24 @@ interface ModalOverlayOptions {
*/
currentBreakpoint?: number;
/**
- * The point after which the backdrop will being
+ * The point after which the backdrop will begin
* to fade in when using a sheet modal.
+ * This option is ignored for the ionic theme
+ * due to the option below.
*/
backdropBreakpoint: number;
-
/**
* Whether or not the modal should scroll/drag
* the content only when fully expanded.
*/
expandToScroll?: boolean;
+ /**
+ * Defines whether the backdrop should have a
+ * static opacity = var(--backdrop-opacity).
+ * This option is true only when the widget
+ * is using the ionic theme.
+ */
+ staticBackdropOpacity?: boolean;
}
type ModalPresentOptions = ModalOverlayOptions;
diff --git a/core/src/components/modal/modal.vars.scss b/core/src/components/modal/modal.vars.scss
deleted file mode 100644
index 7565d1c04f1..00000000000
--- a/core/src/components/modal/modal.vars.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "../../themes/ionic.globals";
-
-// Modals
-// --------------------------------------------------
-
-/// @prop - Min width of the modal inset
-$modal-inset-min-width: 768px;
-
-/// @prop - Minimum height of the small modal inset
-$modal-inset-min-height-small: 600px;
-
-/// @prop - Minimum height of the large modal inset
-$modal-inset-min-height-large: 768px;
-
-/// @prop - Width of the large modal inset
-$modal-inset-width: 600px;
-
-/// @prop - Height of the small modal inset
-$modal-inset-height-small: 500px;
-
-/// @prop - Height of the large modal inset
-$modal-inset-height-large: 600px;
-
-/// @prop - Text color of the modal content
-$modal-text-color: $text-color;
-
-/// @prop - Padding top of the sheet modal
-$modal-sheet-padding-top: 6px;
-
-/// @prop - Padding bottom of the sheet modal
-$modal-sheet-padding-bottom: 6px;
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts b/core/src/components/modal/test/basic/modal.e2e.ts
index 1c9ac92743c..8fab351a26c 100644
--- a/core/src/components/modal/test/basic/modal.e2e.ts
+++ b/core/src/components/modal/test/basic/modal.e2e.ts
@@ -60,7 +60,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
});
});
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('modal: rendering'), () => {
const runVisualTests = async (page: E2EPage, screenshotModifier = '') => {
await page.goto('/src/components/modal/test/basic', config);
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ab9bc7cc88a
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..863db27b243
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0ed93de7653
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..6209284bdda
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8b6cc73ad5a
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e5dbd4c08d8
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png
index bb67b068c17..c9e68a42feb 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png
index aa87ce45424..c3d5fe847a8 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png
index 73ba875e401..abb89bfb3ef 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png
index d88d20b638b..316f8f6d0a4 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png
index 90c3297b3e6..844f9245654 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png
index b9d5ee22f23..fb1ef741251 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png
index dbffff853b4..63481f2bb8f 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png
index e9ab0e35017..e8607d5ed51 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png
index a139cf29fbe..1343b67580b 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png
index 4ec5f14e05e..bc008a85d9c 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png
index aa3076fd43a..8100adbadf7 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png
index 3cc0c0bddba..377f2d32eba 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5b0099508e6
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d25a5ace276
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2a868d445c4
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..48cee8d6079
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6e88b7e4c85
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9911aea1b6b
Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png
index e830be55887..1e09394c4c7 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png
index a2ea869f72a..cc0284d81e5 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png
index 636084ef9e1..b3a251119ec 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png
index 4aad1d264c3..0e0848788b9 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png
index 1e264be58e1..7e4a859167f 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png
index caad0434d2d..0aaa3f6c4f0 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png
index 6eee9b35544..ae4a3596b04 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png
index cd03d981152..58a78269514 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png
index fba90ad0e04..4f0f92b10f8 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png
index 18cc029640e..07af936b3a9 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png
index 2b7093b0eb4..292a9fdb489 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png
index 18ae22ac7b4..0d6715e0b32 100644
Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/index.html b/core/src/components/modal/test/shape/index.html
new file mode 100644
index 00000000000..8d895d55e32
--- /dev/null
+++ b/core/src/components/modal/test/shape/index.html
@@ -0,0 +1,172 @@
+
+
+
+
+
Modal - Shape
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modal - Shape
+
+
+
+
+
+
Sheet
+ Present Sheet Modal (Default)
+
+ Present Sheet Modal (Round)
+
+
+ Present Sheet Modal (Soft)
+
+
+ Present Sheet Modal (Rectangular)
+
+
+
+
+
Card
+ Present Card Modal (Default)
+
+ Present Card Modal (Round)
+
+ Present Card Modal (Soft)
+
+ Present Card Modal (Rectangular)
+
+
+
+
+
+
+
+
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts b/core/src/components/modal/test/shape/modal.e2e.ts
new file mode 100644
index 00000000000..c5c2ecc9271
--- /dev/null
+++ b/core/src/components/modal/test/shape/modal.e2e.ts
@@ -0,0 +1,57 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto('/src/components/modal/test/shape', config);
+ });
+
+ test.describe(title('modal: shape'), () => {
+ test.describe('sheet', () => {
+ ['default', 'round', 'soft', 'rectangular'].forEach((shape) => {
+ test(`${shape} - should not have visual regressions`, async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.click(`#sheet-modal-${shape}`);
+ await ionModalDidPresent.next();
+
+ await expect(page).toHaveScreenshot(screenshot(`modal-shape-sheet-${shape}`), {
+ /**
+ * Animations must be enabled to capture the screenshot.
+ * By default, animations are disabled with toHaveScreenshot,
+ * and when capturing the screenshot will call animation.finish().
+ * This will cause the modal to close and the screenshot capture
+ * to be invalid.
+ */
+ animations: 'allow',
+ });
+ });
+ });
+ });
+
+ test.describe('card', () => {
+ ['default', 'round', 'soft', 'rectangular'].forEach((shape) => {
+ test(`${shape} - should not have visual regressions`, async ({ page }) => {
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.click(`#card-modal-${shape}`);
+ await ionModalDidPresent.next();
+
+ await expect(page).toHaveScreenshot(screenshot(`modal-shape-card-${shape}`), {
+ /**
+ * Animations must be enabled to capture the screenshot.
+ * By default, animations are disabled with toHaveScreenshot,
+ * and when capturing the screenshot will call animation.finish().
+ * This will cause the popover to close and the screenshot capture
+ * to be invalid.
+ */
+ animations: 'allow',
+ });
+ });
+ });
+ });
+ });
+});
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..eb824a45504
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ba52e54004a
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..034ed17c3d9
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..128f258e508
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b7f6b5322c6
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..054fc2f86ce
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..eb824a45504
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ba52e54004a
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..034ed17c3d9
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cea8ad8cfcc
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..38066005b93
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..92ae350bbc8
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f4e1c103491
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..eff7392a106
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..86895f335ea
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a1dca48b8af
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..678e9181c55
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1288f2a8263
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f4e1c103491
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..eff7392a106
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..86895f335ea
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..871a23732f4
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d7bab6fd099
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..58eab049df7
Binary files /dev/null and b/core/src/components/modal/test/shape/modal.e2e.ts-snapshots/modal-shape-sheet-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html
index e9c05b0a494..ec9e15bc3af 100644
--- a/core/src/components/modal/test/sheet/index.html
+++ b/core/src/components/modal/test/sheet/index.html
@@ -72,6 +72,10 @@
.grid-item {
height: 200px;
}
+
+ .half-sheet {
+ --height: 50%;
+ }
@@ -151,6 +155,19 @@
>
Backdrop is inactive
+
+ Backdrop is hidden
+
+
+
+ Half Sheet w/ Footer
+
Drag Events
@@ -241,12 +258,65 @@
modal.remove();
}
- async function presentCardModal() {
- const presentingEl = document.querySelectorAll('.ion-page')[1];
- const modal = createModal('card', {
- presentingElement: presentingEl,
+ async function presentHalfSheetModal(options) {
+ let items = '';
+
+ for (var i = 0; i < 3; i++) {
+ items += `
Item ${i} `;
+ }
+
+ // create component to open
+ const element = document.createElement('div');
+ element.innerHTML = `
+
+
+ Super Modal
+
+ Dismiss Modal
+
+
+
+
+
+ ${items}
+
+
+
+
+ Action
+
+
+ `;
+
+ let extraOptions = {
+ initialBreakpoint: 0.25,
+ breakpoints: [0, 0.25, 0.5, 0.75, 1],
+ };
+
+ if (options) {
+ extraOptions = {
+ ...extraOptions,
+ ...options,
+ };
+ }
+
+ // present the modal
+ const modalElement = Object.assign(document.createElement('ion-modal'), {
+ component: element,
+ ...extraOptions,
});
- await modal.present();
+
+ // listen for close event
+ const button = element.querySelector('ion-button');
+ button.addEventListener('click', () => {
+ modalElement.dismiss();
+ });
+ document.body.appendChild(modalElement);
+
+ await modalElement.present();
+
+ await modalElement.onDidDismiss();
+ modalElement.remove();
}
function dragEvents() {
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts
index 74e6e13431e..f6bbaf4fab7 100644
--- a/core/src/components/modal/test/sheet/modal.e2e.ts
+++ b/core/src/components/modal/test/sheet/modal.e2e.ts
@@ -1,17 +1,43 @@
import { expect } from '@playwright/test';
import { configs, dragElementBy, test } from '@utils/test/playwright';
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
- test.describe(title('sheet modal: rendering'), () => {
+configs({ modes: ['ios', 'md', 'ionic-ios', 'ionic-md'], directions: ['ltr'] }).forEach(
+ ({ title, screenshot, config }) => {
+ test.describe(title('sheet modal: rendering'), () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto('/src/components/modal/test/sheet', config);
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.click('#sheet-modal');
+
+ await ionModalDidPresent.next();
+
+ await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`), {
+ /**
+ * Animations must be enabled to capture the screenshot.
+ * By default, animations are disabled with toHaveScreenshot,
+ * and when capturing the screenshot will call animation.finish().
+ * This will cause the modal to close and the screenshot capture
+ * to be invalid.
+ */
+ animations: 'allow',
+ });
+ });
+ });
+ }
+);
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('sheet modal: half screen rendering'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto('/src/components/modal/test/sheet', config);
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
- await page.click('#sheet-modal');
+ await page.click('#half-sheet');
await ionModalDidPresent.next();
- await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`), {
+ await expect(page).toHaveScreenshot(screenshot(`modal-half-sheet-present`), {
/**
* Animations must be enabled to capture the screenshot.
* By default, animations are disabled with toHaveScreenshot,
@@ -23,9 +49,22 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
});
});
});
+
+ test.describe(title('sheet modal: backdrop hidden'), () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto('/src/components/modal/test/sheet', config);
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.click('#backdrop-hidden');
+
+ await ionModalDidPresent.next();
+
+ await expect(page).toHaveScreenshot(screenshot(`modal-backdrop-hidden`), { animations: 'allow' });
+ });
+ });
});
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios', 'ionic-ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('sheet modal: backdrop'), () => {
test.beforeEach(async ({ page }) => {
await page.goto('/src/components/modal/test/sheet', config);
@@ -163,7 +202,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
const header = page.locator('.modal-sheet ion-header');
- await dragElementBy(header, page, 0, 125);
+ await dragElementBy(header, page, 0, 110);
await ionBreakpointDidChange.next();
@@ -227,7 +266,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
});
test('it should reset the breakpoint value on dismiss', async ({ page }) => {
- await page.goto('/src/components/modal/test/sheet', config);
test.info().annotations.push({
type: 'issue',
description: 'https://github.com/ionic-team/ionic-framework/issues/25245',
@@ -372,8 +410,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
// In this scenario, the modal is opened and has no backdrop, allowing
// the background content to be focused. We need to ensure that we can
// navigate to the drag handle using the keyboard and voiceover/talkback.
- await page.goto('/src/components/modal/test/sheet', config);
-
await page.setContent(
`
@@ -421,6 +457,73 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await expect(dragHandle).toBeFocused();
});
+
+ test('it should preserve the last arrow-focused radio when tabbing', async ({ page, pageUtils }) => {
+ await page.setContent(
+ `
+
+ Open
+
+
+
+ Options
+
+ Cancel
+
+
+
+
+
+
+
+ One
+
+
+ Two
+
+
+ Three
+
+
+
+
+
+
+
+ `,
+ config
+ );
+
+ const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+ await page.click('#open-modal');
+ await ionModalDidPresent.next();
+
+ const modal = page.locator('ion-modal');
+ const firstRadio = modal.locator('ion-radio').nth(0);
+ const secondRadio = modal.locator('ion-radio').nth(1);
+ const handle = modal.locator('.modal-handle');
+
+ await firstRadio.focus();
+ await expect(firstRadio).toBeFocused();
+
+ await pageUtils.pressKeys('ArrowDown');
+ await expect(secondRadio).toBeFocused();
+
+ await pageUtils.pressKeys('Tab');
+ await expect(handle).toBeFocused();
+ });
});
test.describe(title('sheet modal: drag events'), () => {
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4fe2b0ef9f9
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2180f96574e
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1891d5967ca
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-backdrop-hidden-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..86c5d81c335
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1749e28567c
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e2e3ce61a88
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-half-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..11c675822c0
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..82d9271e643
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ea71f04cbc7
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1655a971fdd
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6ed19a863dc
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0b0c9cd1d26
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/nav-link/nav-link.tsx b/core/src/components/nav-link/nav-link.tsx
index db5ba4a5b2c..b6eaffd6af3 100644
--- a/core/src/components/nav-link/nav-link.tsx
+++ b/core/src/components/nav-link/nav-link.tsx
@@ -7,6 +7,10 @@ import type { RouterDirection } from '../router/utils/interface';
import { navLink } from './nav-link-utils';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
@Component({
tag: 'ion-nav-link',
})
diff --git a/core/src/components/nav/nav-interface.ts b/core/src/components/nav/nav-interface.ts
index caacb39b2ec..e66c61392ae 100644
--- a/core/src/components/nav/nav-interface.ts
+++ b/core/src/components/nav/nav-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode, Theme } from '../../interface';
import type { ViewController } from './view-controller';
@@ -34,7 +34,15 @@ export interface RouterOutletOptions {
showGoBack?: boolean;
direction?: NavDirection;
deepWait?: boolean;
+ /**
+ * To change the default appearance of the component, use the `theme` option.
+ * Mode is used to change the platform behavior of the component.
+ */
mode?: Mode;
+ /**
+ * The theme determines the visual appearance of the component.
+ */
+ theme?: Theme;
keyboardClose?: boolean;
skipIfBusy?: boolean;
progressAnimation?: boolean;
diff --git a/core/src/components/nav/nav.scss b/core/src/components/nav/nav.scss
index 125bb460fbf..40bddf8b3a8 100644
--- a/core/src/components/nav/nav.scss
+++ b/core/src/components/nav/nav.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/native/native.globals";
:host {
@include position(0, 0, 0, 0);
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index 3ecd39c2aa6..45808d34b7c 100644
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -7,7 +7,7 @@ import type { TransitionOptions } from '@utils/transition';
import { lifecycle, setPageHidden, transition } from '@utils/transition';
import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
import type { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture } from '../../interface';
import type { NavOutlet, RouteID, RouteWrite, RouterDirection } from '../router/utils/interface';
@@ -23,6 +23,10 @@ import type {
import type { ViewController } from './view-controller';
import { VIEW_STATE_ATTACHED, VIEW_STATE_DESTROYED, VIEW_STATE_NEW, convertToViews, matches } from './view-controller';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
@Component({
tag: 'ion-nav',
styleUrl: 'nav.scss',
@@ -61,7 +65,7 @@ export class Nav implements NavOutlet {
@Prop() animated = true;
/**
- * By default `ion-nav` animates transition between pages based in the mode (ios or material design).
+ * By default `ion-nav` animates transition between pages based on the mode ("ios" or "md").
* However, this property allows to create custom transition using `AnimationBuilder` functions.
*/
@Prop() animation?: AnimationBuilder;
@@ -903,12 +907,14 @@ export class Nav implements NavOutlet {
}
}
: undefined;
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
+ const mode = getIonMode(this, theme);
const enteringEl = enteringView.element!;
// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
const leavingEl = leavingView && leavingView.element!;
const animationOpts: TransitionOptions = {
mode,
+ theme,
showGoBack: this.canGoBackSync(enteringView),
baseEl: this.el,
progressCallback,
diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss
index e9674e23a06..75836d251b7 100644
--- a/core/src/components/note/note.ios.vars.scss
+++ b/core/src/components/note/note.ios.vars.scss
@@ -1,10 +1,10 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
// iOS Note
// --------------------------------------------------
/// @prop - Text color of the note
-$note-ios-color: $text-color-step-650;
+$note-ios-color: $text-color-step-650;
/// @prop - Font size of the note
-$note-ios-font-size: dynamic-font-min(0.875, 16px);
+$note-ios-font-size: dynamic-font-min(0.875, 16px);
diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss
index ab634d46206..b733c522f8c 100644
--- a/core/src/components/note/note.md.vars.scss
+++ b/core/src/components/note/note.md.vars.scss
@@ -1,10 +1,10 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
// Material Design Note
// --------------------------------------------------
/// @prop - Text color of the note
-$note-md-color: $text-color-step-400;
+$note-md-color: $text-color-step-400;
/// @prop - Font size of the note
-$note-md-font-size: dynamic-font(14px);
+$note-md-font-size: dynamic-font(14px);
diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx
index 7dadb48438e..e694ad94a73 100644
--- a/core/src/components/note/note.tsx
+++ b/core/src/components/note/note.tsx
@@ -2,17 +2,19 @@ import type { ComponentInterface } from '@stencil/core';
import { Component, Host, Prop, h } from '@stencil/core';
import { createColorClasses } from '@utils/theme';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import type { Color } from '../../interface';
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*/
@Component({
tag: 'ion-note',
styleUrls: {
ios: 'note.ios.scss',
md: 'note.md.scss',
+ ionic: 'note.md.scss',
},
shadow: true,
})
@@ -25,11 +27,11 @@ export class Note implements ComponentInterface {
@Prop({ reflect: true }) color?: Color;
render() {
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
return (
diff --git a/core/src/components/picker-column/picker-column.scss b/core/src/components/picker-column/picker-column.scss
index 5c3f5ac4822..7525b041c7f 100644
--- a/core/src/components/picker-column/picker-column.scss
+++ b/core/src/components/picker-column/picker-column.scss
@@ -1,4 +1,4 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/native/native.globals";
// Picker Column
// --------------------------------------------------
@@ -133,7 +133,8 @@
scroll-snap-align: none;
}
-::slotted([slot="prefix"]), ::slotted([slot="suffix"]) {
+::slotted([slot="prefix"]),
+::slotted([slot="suffix"]) {
max-width: 200px;
text-overflow: ellipsis;
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index 53d6ca90d17..2411ef2d6cc 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -5,15 +5,16 @@ import { raf } from '@utils/helpers';
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '@utils/native/haptic';
import { isPlatform } from '@utils/platform';
import { createColorClasses } from '@utils/theme';
+import { getIonTheme } from 'src/global/ionic-global';
-import { getIonMode } from '../../global/ionic-global';
import type { Color } from '../../interface';
import type { PickerCustomEvent } from '../picker/picker-interfaces';
import type { PickerColumnChangeEventDetail, PickerColumnValue } from './picker-column-interfaces';
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*
* @slot prefix - Content to show on the left side of the picker options.
* @slot suffix - Content to show on the right side of the picker options.
@@ -653,12 +654,12 @@ export class PickerColumn implements ComponentInterface {
render() {
const { color, disabled, isActive, numericInput } = this;
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
return (
Promise;
}
-export interface PopoverOptions {
+export interface PopoverOptions extends OverlayOptions {
component: T;
componentProps?: ComponentProps;
showBackdrop?: boolean;
@@ -23,14 +18,9 @@ export interface PopoverOptions {
animated?: boolean;
focusTrap?: boolean;
- mode?: Mode;
keyboardClose?: boolean;
- id?: string;
htmlAttributes?: { [key: string]: any };
- enterAnimation?: AnimationBuilder;
- leaveAnimation?: AnimationBuilder;
-
size?: PopoverSize;
dismissOnSelect?: boolean;
reference?: PositionReference;
diff --git a/core/src/components/popover/popover.common.scss b/core/src/components/popover/popover.common.scss
new file mode 100644
index 00000000000..44c23801897
--- /dev/null
+++ b/core/src/components/popover/popover.common.scss
@@ -0,0 +1,148 @@
+@import "./popover.vars";
+
+// Popover
+// --------------------------------------------------
+
+:host {
+ /**
+ * @prop --background: Background of the popover
+ * @prop --box-shadow: Box shadow of the popover
+ *
+ * @prop --min-width: Minimum width of the popover
+ * @prop --width: Width of the popover
+ * @prop --max-width: Maximum width of the popover
+ *
+ * @prop --min-height: Minimum height of the popover
+ * @prop --height: Height of the popover
+ * @prop --max-height: Maximum height of the popover
+ *
+ * @prop --backdrop-opacity: Opacity of the backdrop
+ *
+ * @prop --offset-x: The amount to move the popover by on the x-axis
+ * @prop --offset-y: The amount to move the popover by on the y-axis
+ */
+ --background: #{$popover-background-color};
+ --min-width: 0;
+ --min-height: 0;
+ --max-width: auto;
+ --height: auto;
+ --offset-x: 0px;
+ --offset-y: 0px;
+
+ @include position(0, 0, 0, 0);
+
+ display: flex;
+ position: fixed;
+
+ align-items: center;
+ justify-content: center;
+
+ outline: none;
+
+ color: $popover-text-color;
+
+ z-index: $z-index-overlay;
+}
+
+/**
+ * With nested popovers, only the popover that
+ * was first presented has a popover. This is the
+ * parent popover and allows us to easily
+ * track all nested popovers from a single backdrop.
+ * As a result, nested popovers do not have backdrops
+ * and their container should not be clickable.
+ * This ensures that users can click the parent backdrop
+ * while still interacting with the nested popover inner
+ * content.
+ */
+:host(.popover-nested) {
+ pointer-events: none;
+}
+
+:host(.popover-nested) .popover-wrapper {
+ pointer-events: auto;
+}
+
+:host(.overlay-hidden) {
+ display: none;
+}
+
+.popover-wrapper {
+ z-index: $z-index-overlay-wrapper;
+}
+
+.popover-content {
+ display: flex;
+ position: absolute;
+
+ flex-direction: column;
+
+ width: var(--width);
+ min-width: var(--min-width);
+ max-width: var(--max-width);
+
+ height: var(--height);
+ min-height: var(--min-height);
+ max-height: var(--max-height);
+
+ background: var(--background);
+
+ box-shadow: var(--box-shadow);
+
+ overflow: auto;
+ z-index: $z-index-overlay-wrapper;
+}
+
+::slotted(.popover-viewport) {
+ --ion-safe-area-top: 0px;
+ --ion-safe-area-right: 0px;
+ --ion-safe-area-bottom: 0px;
+ --ion-safe-area-left: 0px;
+ display: flex;
+
+ flex-direction: column;
+}
+
+// Nested Popovers
+// --------------------------------------------------
+:host(.popover-nested.popover-side-left) {
+ --offset-x: 5px;
+}
+
+:host(.popover-nested.popover-side-right) {
+ --offset-x: -5px;
+}
+
+:host(.popover-nested.popover-side-start) {
+ --offset-x: 5px;
+
+ @include rtl() {
+ --offset-x: -5px;
+ }
+}
+
+:host(.popover-nested.popover-side-end) {
+ --offset-x: -5px;
+
+ @include rtl() {
+ --offset-x: 5px;
+ }
+}
+
+// Select Popover
+// --------------------------------------------------
+
+:host(.select-popover-rich-content) {
+ /**
+ * Rich content options (start/end slots, descriptions) need
+ * more horizontal space than the default fixed width provides,
+ * otherwise content gets cut off.
+ *
+ * A viewport-relative value is used instead of `auto` or
+ * `max-content` because the enter animation reads `--width`
+ * via getBoundingClientRect() before the first layout pass
+ * completes — intrinsic values return 0 at that point and
+ * cause the popover to be positioned off-screen on first open.
+ */
+ --width: clamp(250px, calc(100vw - 40px), 400px);
+}
diff --git a/core/src/components/popover/popover.ionic.scss b/core/src/components/popover/popover.ionic.scss
new file mode 100644
index 00000000000..533c697f768
--- /dev/null
+++ b/core/src/components/popover/popover.ionic.scss
@@ -0,0 +1,21 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./popover.common";
+
+// Ionic Popover
+// --------------------------------------------------
+
+:host {
+ --width: 250px;
+ --max-height: 90%;
+ --box-shadow: #{globals.$ion-elevation-4};
+ --backdrop-opacity: 0.3;
+}
+
+.popover-content {
+ @include globals.border-radius(globals.$ion-border-radius-400);
+ @include globals.transform-origin(start, top);
+}
+
+.popover-viewport {
+ transition-delay: 100ms;
+}
diff --git a/core/src/components/popover/popover.ios.scss b/core/src/components/popover/popover.ios.scss
index d8feb57b557..960d502832d 100644
--- a/core/src/components/popover/popover.ios.scss
+++ b/core/src/components/popover/popover.ios.scss
@@ -1,4 +1,4 @@
-@import "./popover";
+@import "./popover.common";
@import "./popover.ios.vars";
// iOS Popover
@@ -23,7 +23,6 @@
border: #{$popover-ios-desktop-border};
}
-
// Popover Arrow
// -----------------------------------------
diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss
index bf803b5d76d..195d3145423 100644
--- a/core/src/components/popover/popover.ios.vars.scss
+++ b/core/src/components/popover/popover.ios.vars.scss
@@ -1,28 +1,28 @@
-@import "../../themes/ionic.globals.ios";
+@import "../../themes/native/native.globals.ios";
// iOS Popover
// --------------------------------------------------
/// @prop - Width of the popover content
-$popover-ios-width: 200px;
+$popover-ios-width: 200px;
/// @prop - Maximum height of the popover content
-$popover-ios-max-height: 90%;
+$popover-ios-max-height: 90%;
/// @prop - Border radius of the popover content
-$popover-ios-border-radius: 10px;
+$popover-ios-border-radius: 10px;
/// @prop - Background color alpha of the popover content
-$popover-ios-translucent-background-color-alpha: .8;
+$popover-ios-translucent-background-color-alpha: 0.8;
/// @prop - Background color of the popover content
-$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha);
+$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha);
/// @prop - Filter of the translucent popover
-$popover-ios-translucent-filter: saturate(180%) blur(20px);
+$popover-ios-translucent-filter: saturate(180%) blur(20px);
/// $prop - Box shadow of popover on desktop
-$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
+$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
/// $prop - Border of popover content on desktop
-$popover-ios-desktop-border: 0.5px solid $background-color-step-100;
+$popover-ios-desktop-border: 0.5px solid $background-color-step-100;
diff --git a/core/src/components/popover/popover.md.scss b/core/src/components/popover/popover.md.scss
index 7b4e5c2d19d..7b608c0da54 100644
--- a/core/src/components/popover/popover.md.scss
+++ b/core/src/components/popover/popover.md.scss
@@ -1,4 +1,4 @@
-@import "./popover";
+@import "./popover.common";
@import "./popover.md.vars";
// Material Design Popover
diff --git a/core/src/components/popover/popover.md.vars.scss b/core/src/components/popover/popover.md.vars.scss
index 9eaf10c8747..8f46def0d5d 100644
--- a/core/src/components/popover/popover.md.vars.scss
+++ b/core/src/components/popover/popover.md.vars.scss
@@ -1,16 +1,17 @@
-@import "../../themes/ionic.globals.md";
+@import "../../themes/native/native.globals.md";
// Material Design Popover
// --------------------------------------------------
/// @prop - Width of the popover content
-$popover-md-width: 250px;
+$popover-md-width: 250px;
/// @prop - Maximum height of the popover content
-$popover-md-max-height: 90%;
+$popover-md-max-height: 90%;
/// @prop - Border radius of the popover content
-$popover-md-border-radius: 4px;
+$popover-md-border-radius: 4px;
/// @prop - Box shadow of the popover content
-$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
deleted file mode 100644
index ecd8acf2dc0..00000000000
--- a/core/src/components/popover/popover.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-@import "./popover.vars";
-
-// Popover
-// --------------------------------------------------
-
-:host {
- /**
- * @prop --background: Background of the popover
- * @prop --box-shadow: Box shadow of the popover
- *
- * @prop --min-width: Minimum width of the popover
- * @prop --width: Width of the popover
- * @prop --max-width: Maximum width of the popover
- *
- * @prop --min-height: Minimum height of the popover
- * @prop --height: Height of the popover
- * @prop --max-height: Maximum height of the popover
- *
- * @prop --backdrop-opacity: Opacity of the backdrop
- *
- * @prop --offset-x: The amount to move the popover by on the x-axis
- * @prop --offset-y: The amount to move the popover by on the y-axis
- */
- --background: #{$popover-background-color};
- --min-width: 0;
- --min-height: 0;
- --max-width: auto;
- --height: auto;
- --offset-x: 0px;
- --offset-y: 0px;
-
- @include position(0, 0, 0, 0);
-
- display: flex;
- position: fixed;
-
- align-items: center;
- justify-content: center;
-
- outline: none;
-
- color: $popover-text-color;
-
- z-index: $z-index-overlay;
-}
-
-/**
- * With nested popovers, only the popover that
- * was first presented has a popover. This is the
- * parent popover and allows us to easily
- * track all nested popovers from a single backdrop.
- * As a result, nested popovers do not have backdrops
- * and their container should not be clickable.
- * This ensures that users can click the parent backdrop
- * while still interacting with the nested popover inner
- * content.
- */
-:host(.popover-nested) {
- pointer-events: none;
-}
-
-:host(.popover-nested) .popover-wrapper {
- pointer-events: auto;
-}
-
-:host(.overlay-hidden) {
- display: none;
-}
-
-.popover-wrapper {
- z-index: $z-index-overlay-wrapper;
-}
-
-.popover-content {
- display: flex;
- position: absolute;
-
- flex-direction: column;
-
- width: var(--width);
- min-width: var(--min-width);
- max-width: var(--max-width);
-
- height: var(--height);
- min-height: var(--min-height);
- max-height: var(--max-height);
-
- background: var(--background);
-
- box-shadow: var(--box-shadow);
-
- overflow: auto;
- z-index: $z-index-overlay-wrapper;
-}
-
-::slotted(.popover-viewport) {
- --ion-safe-area-top: 0px;
- --ion-safe-area-right: 0px;
- --ion-safe-area-bottom: 0px;
- --ion-safe-area-left: 0px;
- display: flex;
-
- flex-direction: column;
-}
-
-// Nested Popovers
-// --------------------------------------------------
-:host(.popover-nested.popover-side-left) {
- --offset-x: 5px;
-}
-
-:host(.popover-nested.popover-side-right) {
- --offset-x: -5px;
-}
-
-:host(.popover-nested.popover-side-start) {
- --offset-x: 5px;
-
- @include rtl() {
- --offset-x: -5px;
- }
-}
-
-:host(.popover-nested.popover-side-end) {
- --offset-x: -5px;
-
- @include rtl() {
- --offset-x: 5px;
- }
-}
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index af0e613297d..01f4fc05ff0 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -18,7 +18,7 @@ import { isPlatform } from '@utils/platform';
import { getClassMap } from '@utils/theme';
import { deepReady, waitForMount } from '@utils/transition';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
import type { OverlayEventDetail } from '../../utils/overlays-interface';
@@ -39,12 +39,13 @@ import { configureDismissInteraction, configureKeyboardInteraction, configureTri
// TODO(FW-2832): types
/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
*
* @slot - Content is placed inside of the `.popover-content` element.
*
* @part backdrop - The `ion-backdrop` element.
- * @part arrow - The arrow that points to the reference element. Only applies on `ios` mode.
+ * @part arrow - The arrow that points to the reference element. Only applies on `"ios"` theme.
* @part content - The wrapper element for the default slot.
*/
@Component({
@@ -52,6 +53,7 @@ import { configureDismissInteraction, configureKeyboardInteraction, configureTri
styleUrls: {
ios: 'popover.ios.scss',
md: 'popover.md.scss',
+ ionic: 'popover.ionic.scss',
},
shadow: true,
})
@@ -145,7 +147,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
/**
* If `true`, the popover will be translucent.
- * Only applies when the mode is `"ios"` and the device supports
+ * Only applies when the theme is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
@Prop() translucent = false;
@@ -213,13 +215,13 @@ export class Popover implements ComponentInterface, PopoverInterface {
/**
* Describes how to align the popover content with the `reference` point.
- * Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
+ * Defaults to `"center"` for `"ios"` theme, and `"start"` for `"md"` theme.
*/
@Prop({ mutable: true }) alignment?: PositionAlign;
/**
* If `true`, the popover will display an arrow that points at the
- * `reference` when running in `ios` mode. Does not apply in `md` mode.
+ * `reference` on `"ios"` theme.
*/
@Prop() arrow = true;
@@ -376,7 +378,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`) as HTMLIonPopoverElement | null;
if (this.alignment === undefined) {
- this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
+ this.alignment = getIonTheme(this) === 'ios' ? 'center' : 'start';
}
}
@@ -526,7 +528,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
await waitForMount();
}
- await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+ await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, undefined, {
event: event || this.event,
size: this.size,
trigger: this.triggerEl,
@@ -724,7 +726,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
};
render() {
- const mode = getIonMode(this);
+ const theme = getIonTheme(this);
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
const desktop = isPlatform('desktop');
const enableArrow = arrow && !parentPopover;
@@ -740,7 +742,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
}}
class={{
...getClassMap(this.cssClass),
- [mode]: true,
+ [theme]: true,
'popover-translucent': this.translucent,
'overlay-hidden': true,
'popover-desktop': desktop,
diff --git a/core/src/components/popover/popover.vars.scss b/core/src/components/popover/popover.vars.scss
index 3b8f52bb85a..10c8d5dd22b 100644
--- a/core/src/components/popover/popover.vars.scss
+++ b/core/src/components/popover/popover.vars.scss
@@ -1,10 +1,10 @@
-@import "../../themes/ionic.globals";
+@import "../../themes/native/native.globals";
// Popover
// --------------------------------------------------
/// @prop - Text color of the popover content
-$popover-text-color: $text-color;
+$popover-text-color: $text-color;
/// @prop - Background color of the popover content
-$popover-background-color: $background-color;
\ No newline at end of file
+$popover-background-color: $background-color;
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index 94202a01d5c..dab4ba52e24 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -76,6 +76,20 @@
>
Popover With Textarea
+