diff --git a/core/src/components/list/list.ionic.scss b/core/src/components/list/list.ionic.scss
index afae5e370a..256c51a97d 100644
--- a/core/src/components/list/list.ionic.scss
+++ b/core/src/components/list/list.ionic.scss
@@ -24,6 +24,14 @@ ion-list {
@include globals.margin(globals.$ionic-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
diff --git a/core/src/components/radio-group/test/basic/index.html b/core/src/components/radio-group/test/basic/index.html
index 650695cd2b..0abe7545e8 100644
--- a/core/src/components/radio-group/test/basic/index.html
+++ b/core/src/components/radio-group/test/basic/index.html
@@ -12,6 +12,12 @@
+
+
@@ -23,29 +29,12 @@
-
-
-
- Radio Group Header
-
-
-
- Item 1
-
-
-
- Item 2
-
-
-
- Item 3
-
-
-
- Item 4
-
-
-
+
+ Label
+ Label
+ Label
+ Label
+
diff --git a/core/src/components/radio-group/test/basic/radio-group.e2e.ts b/core/src/components/radio-group/test/basic/radio-group.e2e.ts
index 96b7b5d955..fd717dc966 100644
--- a/core/src/components/radio-group/test/basic/radio-group.e2e.ts
+++ b/core/src/components/radio-group/test/basic/radio-group.e2e.ts
@@ -18,9 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
-
- One
-
+ One
`,
config
@@ -34,9 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
-
- One
-
+ One
`,
config
@@ -50,9 +46,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
-
- One
-
+ One
`,
config
@@ -66,9 +60,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
-
- One
-
+ One
`,
config
@@ -82,17 +74,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.setContent(
`
-
- Item 1
-
+ Item 1
-
- Item 2
-
+ Item 2
-
- Item 3
-
+ Item 3
`,
config
diff --git a/core/src/components/radio-group/test/item/index.html b/core/src/components/radio-group/test/item/index.html
new file mode 100644
index 0000000000..6544cdb5ee
--- /dev/null
+++ b/core/src/components/radio-group/test/item/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Radio Group - Item
+
+
+
+
+
+
+
+
+
+
+
+
+ Radio Group - Item
+
+
+
+
+
+
+
+ Radio Group Header
+
+
+
+ Item 1
+
+
+
+ Item 2
+
+
+
+ Item 3
+
+
+
+ Item 4
+
+
+
+
+
+
+
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.common.scss
similarity index 66%
rename from core/src/components/radio/radio.scss
rename to core/src/components/radio/radio.common.scss
index b9f723fd8a..26875707f2 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.common.scss
@@ -1,4 +1,5 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/functions.string";
+@import "../../themes/mixins";
@import "./radio.vars.scss";
// Radio
@@ -24,10 +25,13 @@
user-select: none;
- z-index: $z-index-item-input;
box-sizing: border-box;
}
+input {
+ @include visually-hidden();
+}
+
:host(.radio-disabled) {
pointer-events: none;
}
@@ -49,10 +53,6 @@
box-sizing: border-box;
}
-input {
- @include visually-hidden();
-}
-
:host(:focus) {
outline: none;
}
@@ -98,29 +98,6 @@ input {
cursor: inherit;
}
-// Radio Label
-// ----------------------------------------------------------------
-
-.label-text-wrapper {
- text-overflow: ellipsis;
-
- white-space: nowrap;
-
- overflow: hidden;
-}
-
-:host(.in-item) .label-text-wrapper {
- @include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null);
-}
-
-:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
- @include margin($radio-item-label-margin-top, null, $form-control-label-margin, null);
-}
-
-:host(.in-item.radio-label-placement-stacked) .native-wrapper {
- @include margin(null, null, $radio-item-label-margin-bottom, null);
-}
-
/**
* If no label text is placed into the slot
* then the element should be hidden otherwise
@@ -176,15 +153,6 @@ input {
flex-direction: row;
}
-:host(.radio-label-placement-start) .label-text-wrapper {
- /**
- * The margin between the label and
- * the radio should be on the end
- * when the label sits at the start.
- */
- @include margin(null, $form-control-label-margin, null, 0);
-}
-
// Radio Label Placement - End
// ----------------------------------------------------------------
@@ -196,27 +164,9 @@ input {
flex-direction: row-reverse;
}
-/**
- * The margin between the label and
- * the radio should be on the start
- * when the label sits at the end.
- */
-:host(.radio-label-placement-end) .label-text-wrapper {
- @include margin(null, 0, null, $form-control-label-margin);
-}
-
// Radio Label Placement - Fixed
// ----------------------------------------------------------------
-:host(.radio-label-placement-fixed) .label-text-wrapper {
- /**
- * The margin between the label and
- * the radio should be on the end
- * when the label sits at the start.
- */
- @include margin(null, $form-control-label-margin, null, 0);
-}
-
/**
* Label is on the left of the radio in LTR and
* on the right in RTL. Label also has a fixed width.
@@ -238,23 +188,6 @@ input {
flex-direction: column;
}
-:host(.radio-label-placement-stacked) .label-text-wrapper {
- @include transform(scale(#{$form-control-label-stacked-scale}));
-
- /**
- * The margin between the label and
- * the radio should be on the bottom
- * when the label sits on top.
- */
- @include margin(null, 0, $form-control-label-margin, 0);
-
- /**
- * Label text should not extend
- * beyond the bounds of the radio.
- */
- max-width: calc(100% / #{$form-control-label-stacked-scale});
-}
-
:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper {
@include transform-origin(start, top);
}
diff --git a/core/src/components/radio/radio.ionic.scss b/core/src/components/radio/radio.ionic.scss
new file mode 100644
index 0000000000..5eb04fa01c
--- /dev/null
+++ b/core/src/components/radio/radio.ionic.scss
@@ -0,0 +1,171 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./radio.common";
+
+// Ionic Radio
+// --------------------------------------------------
+
+:host {
+ --color: #{globals.$ionic-color-neutral-500};
+ --color-checked: #{globals.$ionic-color-primary-base};
+ --border-width: #{globals.$ionic-border-size-025};
+ --border-style: #{globals.$ionic-border-style-solid};
+ --border-radius: #{globals.$ionic-border-radius-full};
+ --focus-ring-color: #{globals.$ionic-state-focus-1};
+ --focus-ring-width: #{globals.$ionic-border-size-050};
+
+ @include globals.typography(globals.$ionic-body-md-regular);
+
+ min-height: globals.$ionic-scale-1200;
+
+ color: globals.$ionic-color-neutral-1200;
+}
+
+// Radio Color
+// --------------------------------------------------
+
+:host(.ion-color.radio-checked) .radio-icon {
+ border-color: globals.current-color(base);
+
+ background-color: globals.current-color(base);
+}
+
+// Radio Label
+// ----------------------------------------------------------------
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+ @include globals.margin(null, null, globals.$ionic-space-250, null);
+}
+
+// Radio Native Wrapper
+// ----------------------------------------------------------------
+
+.native-wrapper .radio-icon {
+ width: globals.$ionic-scale-600;
+ height: globals.$ionic-scale-600;
+}
+
+// Ionic Radio Outer Circle: Unchecked
+// -----------------------------------------
+
+.radio-icon {
+ @include globals.margin(0);
+ @include globals.border-radius(var(--border-radius));
+
+ border-width: var(--border-width);
+ border-style: var(--border-style);
+ border-color: var(--color);
+
+ background-color: globals.$ionic-color-base-white;
+}
+
+// Ionic Radio Inner Circle: Unchecked
+// -----------------------------------------
+
+.radio-inner {
+ @include globals.border-radius(var(--inner-border-radius));
+
+ width: calc(32% + var(--border-width));
+ height: calc(32% + var(--border-width));
+
+ background-color: globals.$ionic-color-base-white;
+}
+
+// Ionic Radio Outer Circle: Checked
+// -----------------------------------------
+
+:host(.radio-checked) .radio-icon {
+ border-color: var(--color-checked);
+
+ background-color: var(--color-checked);
+}
+
+// Radio Label Placement - Start & Fixed
+// ----------------------------------------------------------------
+
+:host(.radio-label-placement-start) .label-text-wrapper,
+:host(.radio-label-placement-fixed) .label-text-wrapper {
+ /**
+ * The margin between the label and
+ * the radio should be on the end
+ * when the label sits at the start.
+ */
+ @include globals.margin(null, globals.$ionic-space-400, null, 0);
+}
+
+// Radio Label Placement - End
+// ----------------------------------------------------------------
+
+/**
+ * The margin between the label and
+ * the radio should be on the start
+ * when the label sits at the end.
+ */
+:host(.radio-label-placement-end) .label-text-wrapper {
+ @include globals.margin(null, 0, null, globals.$ionic-space-400);
+}
+
+// Radio Label Placement - Stacked
+// ----------------------------------------------------------------
+
+:host(.radio-label-placement-stacked) .label-text-wrapper {
+ @include globals.transform(scale(0.75));
+
+ /**
+ * The margin between the label and
+ * the radio should be on the bottom
+ * when the label sits on top.
+ */
+ @include globals.margin(null, 0, globals.$ionic-space-400, 0);
+
+ /**
+ * Label text should not extend
+ * beyond the bounds of the radio.
+ */
+ max-width: calc(100% / 0.75);
+}
+
+// Radio Not In Item
+// -----------------------------------------
+
+:host(:not(.in-item):not(:last-of-type)) {
+ @include globals.margin(null, null, globals.$ionic-space-200, null);
+}
+
+// Ionic Radio: Disabled
+// -----------------------------------------
+
+:host(.radio-disabled) .radio-icon::after {
+ @include globals.disabled-state();
+ @include globals.border-radius(inherit);
+
+ // The border-width is added to the width and height to ensure
+ // the disabled state covers the entire radio icon. The top and
+ // left are adjusted to ensure the disabled state is centered on
+ // the radio icon.
+ @include globals.position(calc(var(--border-width) * -1), 0, 0, calc(var(--border-width) * -1));
+ width: calc(100% + (2 * var(--border-width)));
+ height: calc(100% + (2 * var(--border-width)));
+}
+
+// Ionic Radio: Keyboard Focus
+// -----------------------------------------
+
+:host(.ion-focused) .radio-icon {
+ @include globals.focused-state(var(--focus-ring-width), null, var(--focus-ring-color));
+}
+
+// Ionic Radio: Pressed
+// -----------------------------------------
+
+:host(.ion-activated) .radio-icon::after {
+ @include globals.pressed-state();
+ @include globals.border-radius(inherit);
+
+ // The border-width is added to the width and height to ensure
+ // the activated state covers the entire radio icon. The top and
+ // left are adjusted to ensure the activated state is centered on
+ // the radio icon.
+ @include globals.position(calc(var(--border-width) * -1), 0, 0, calc(var(--border-width) * -1));
+ width: calc(100% + (2 * var(--border-width)));
+ height: calc(100% + (2 * var(--border-width)));
+}
diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
index 775239a9ea..e1f9de79a4 100644
--- a/core/src/components/radio/radio.ios.scss
+++ b/core/src/components/radio/radio.ios.scss
@@ -1,4 +1,4 @@
-@import "./radio";
+@import "./radio.native";
@import "./radio.ios.vars";
// iOS Radio
diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss
index ba6296bcbc..2c602b9685 100644
--- a/core/src/components/radio/radio.md.scss
+++ b/core/src/components/radio/radio.md.scss
@@ -1,4 +1,4 @@
-@import "./radio";
+@import "./radio.native";
@import "./radio.md.vars";
// Material Design Radio
diff --git a/core/src/components/radio/radio.native.scss b/core/src/components/radio/radio.native.scss
new file mode 100644
index 0000000000..d3ce542ea9
--- /dev/null
+++ b/core/src/components/radio/radio.native.scss
@@ -0,0 +1,89 @@
+@import "../../themes/native/native.globals";
+@import "./radio.common";
+@import "./radio.vars.scss";
+
+// Radio
+// --------------------------------------------------
+
+:host {
+ z-index: $z-index-item-input;
+}
+
+// Radio Label
+// ----------------------------------------------------------------
+
+.label-text-wrapper {
+ text-overflow: ellipsis;
+
+ white-space: nowrap;
+
+ overflow: hidden;
+}
+
+:host(.in-item) .label-text-wrapper {
+ @include margin($radio-item-label-margin-top, null, $radio-item-label-margin-bottom, null);
+}
+
+:host(.in-item.radio-label-placement-stacked) .label-text-wrapper {
+ @include margin($radio-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.radio-label-placement-stacked) .native-wrapper {
+ @include margin(null, null, $radio-item-label-margin-bottom, null);
+}
+
+// Radio Label Placement - Start
+// ----------------------------------------------------------------
+
+:host(.radio-label-placement-start) .label-text-wrapper {
+ /**
+ * The margin between the label and
+ * the radio should be on the end
+ * when the label sits at the start.
+ */
+ @include margin(null, $form-control-label-margin, null, 0);
+}
+
+// Radio Label Placement - End
+// ----------------------------------------------------------------
+
+/**
+ * The margin between the label and
+ * the radio should be on the start
+ * when the label sits at the end.
+ */
+:host(.radio-label-placement-end) .label-text-wrapper {
+ @include margin(null, 0, null, $form-control-label-margin);
+}
+
+// Radio Label Placement - Fixed
+// ----------------------------------------------------------------
+
+:host(.radio-label-placement-fixed) .label-text-wrapper {
+ /**
+ * The margin between the label and
+ * the radio should be on the end
+ * when the label sits at the start.
+ */
+ @include margin(null, $form-control-label-margin, null, 0);
+}
+
+// Radio Label Placement - Stacked
+// ----------------------------------------------------------------
+
+:host(.radio-label-placement-stacked) .label-text-wrapper {
+ @include transform(scale(#{$form-control-label-stacked-scale}));
+
+ /**
+ * The margin between the label and
+ * the radio should be on the bottom
+ * when the label sits on top.
+ */
+ @include margin(null, 0, $form-control-label-margin, 0);
+
+ /**
+ * Label text should not extend
+ * beyond the bounds of the radio.
+ */
+ max-width: calc(100% / #{$form-control-label-stacked-scale});
+}
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index eff247ca73..22b4ba7c2f 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -22,7 +22,7 @@ import type { Color } from '../../interface';
styleUrls: {
ios: 'radio.ios.scss',
md: 'radio.md.scss',
- ionic: 'radio.md.scss',
+ ionic: 'radio.ionic.scss',
},
shadow: true,
})
diff --git a/core/src/components/radio/test/basic/index.html b/core/src/components/radio/test/basic/index.html
index 2676076bfd..a46e116455 100644
--- a/core/src/components/radio/test/basic/index.html
+++ b/core/src/components/radio/test/basic/index.html
@@ -43,6 +43,11 @@
Disabled, Checked
+
+ This is a very very very very very very very very long
+
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts b/core/src/components/radio/test/basic/radio.e2e.ts
new file mode 100644
index 0000000000..78c9cf9f11
--- /dev/null
+++ b/core/src/components/radio/test/basic/radio.e2e.ts
@@ -0,0 +1,30 @@
+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('radio'), () => {
+ test('should render multiple correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+ Enable Notifications
+ Enable Notifications
+
+
+ `,
+ config
+ );
+ const container = page.locator('#container');
+ await expect(container).toHaveScreenshot(screenshot(`radio-multiple`));
+ });
+ });
+});
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e40520855b
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..22e5f79e91
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ed069073db
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/color/radio.e2e.ts b/core/src/components/radio/test/color/radio.e2e.ts
index 8f85ea6941..e5f5e16346 100644
--- a/core/src/components/radio/test/color/radio.e2e.ts
+++ b/core/src/components/radio/test/color/radio.e2e.ts
@@ -1,7 +1,7 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('radio: color'), () => {
test('should apply color when checked', async ({ page }) => {
await page.setContent(
diff --git a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..91a5e595be
Binary files /dev/null and b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c4a24113e6
Binary files /dev/null and b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cb0b3a7092
Binary files /dev/null and b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c1d3f94664
Binary files /dev/null and b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0d8621e96a
Binary files /dev/null and b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5a9121278e
Binary files /dev/null and b/core/src/components/radio/test/color/radio.e2e.ts-snapshots/radio-color-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index 4fdf34bd4e..4426f01323 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.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: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('radio: item'), () => {
test('should render correctly in list', async ({ page }) => {
await page.setContent(
@@ -19,6 +19,25 @@ configs().forEach(({ title, screenshot, config }) => {
const list = page.locator('ion-list');
await expect(list).toHaveScreenshot(screenshot(`radio-list`));
});
+ test('should render multiple correctly in list', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ Enable Notifications
+
+
+ Enable Notifications
+
+
+
+ `,
+ config
+ );
+ const list = page.locator('ion-list');
+ await expect(list).toHaveScreenshot(screenshot(`radio-list-multiple`));
+ });
test('should render correctly in inset list', async ({ page }) => {
await page.setContent(
`
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ff8bf5a034
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..41ebc970cf
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ffe88c705c
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..856c846340
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6d697269b4
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e13d97b077
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-inset-list-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..da1e5f614b
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..108709c1c0
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f9cd2e336d
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5996157810
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c159a3fb34
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f8843cde99
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d92637062a
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cb813bb4d4
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..16cace0914
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e41c892e73
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..25e00907ec
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1d56009232
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0f2fb2d227
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0194f4123f
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cd937c4056
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4570c62f8a
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a4c3694111
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e421eaa0f5
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bcda7a1ea1
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d497d4aa16
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a7d620c160
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f6b49cacc2
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..27c883fb6c
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..559de387a5
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-list-multiple-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts b/core/src/components/radio/test/label-placement/radio.e2e.ts
index 930565552c..b42c3adbba 100644
--- a/core/src/components/radio/test/label-placement/radio.e2e.ts
+++ b/core/src/components/radio/test/label-placement/radio.e2e.ts
@@ -10,7 +10,7 @@ import { configs, test } from '@utils/test/playwright';
* see the justification results.
*/
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('radio: label'), () => {
test.describe('radio: start placement', () => {
test('should render a start justification with label in the start position', async ({ page }) => {
@@ -184,3 +184,19 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
});
});
});
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+ test.describe(title('radio: long label'), () => {
+ test('long label should wrap', async ({ page }) => {
+ await page.setContent(
+ `
+ Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications
+ `,
+ config
+ );
+
+ const radio = page.locator('ion-radio');
+ await expect(radio).toHaveScreenshot(screenshot(`radio-label-long-label`));
+ });
+ });
+});
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..432e45023b
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d4e7e71a70
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1f8c57c670
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5e6a161faa
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5a94690a7e
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..82035c2bb8
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..965c78c3f4
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6ddefed998
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..709efd8854
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f900f98bb9
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ba13cdee07
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9e754cb3c4
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..45bdc86105
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bb1889ab42
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4f2a1ed1ba
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f4e88c9114
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fdc7ad9579
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4c2b641d9a
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-end-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..42ad0854d9
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6afa266482
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d0e43722ae
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..782e89a075
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..dbfa88d24f
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2be2a87711
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..206a9795d3
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e2035393ae
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5ee2480fd5
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..edf960c63c
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b273ca4ec5
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2843264250
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..468b7cde8b
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..20dce43a6a
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0bff99cc90
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2decef109f
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5229ed34ed
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d0efd35b4e
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-fixed-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0d75bff442
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b7fd7b0fe9
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e7b24ffcee
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-long-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7241080b32
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..eee968a3f4
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..30f21c7760
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7241080b32
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..eee968a3f4
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..30f21c7760
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-center-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5f0a4dd0bc
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ebe7a58e16
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dbcc611a72
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..55dff91a6c
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bb138b1fbf
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..64bc3ba419
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-stacked-align-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f4e88c9114
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fdc7ad9579
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4c2b641d9a
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bfefabc393
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bb1889ab42
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4f2a1ed1ba
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f900f98bb9
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ba13cdee07
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9e754cb3c4
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..138fd4ec5e
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6ddefed998
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..709efd8854
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-space-between-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5e6a161faa
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5a94690a7e
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..82035c2bb8
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..432e45023b
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d4e7e71a70
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1f8c57c670
Binary files /dev/null and b/core/src/components/radio/test/label-placement/radio.e2e.ts-snapshots/radio-label-start-justify-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/index.html b/core/src/components/radio/test/states/index.html
index 6d722f22d9..6348b43a74 100644
--- a/core/src/components/radio/test/states/index.html
+++ b/core/src/components/radio/test/states/index.html
@@ -79,6 +79,34 @@
Enable Notifications
+
+
+
Pressed, Unchecked
+
+ Enable Notifications
+
+
+
+
+
Pressed, Checked
+
+ Enable Notifications
+
+
+
+
+
Focused, Unchecked
+
+ Enable Notifications
+
+
+
+
+
Focused, Checked
+
+ Enable Notifications
+
+
diff --git a/core/src/components/radio/test/states/radio.e2e.ts b/core/src/components/radio/test/states/radio.e2e.ts
index ab603fc452..4c193cbbc3 100644
--- a/core/src/components/radio/test/states/radio.e2e.ts
+++ b/core/src/components/radio/test/states/radio.e2e.ts
@@ -1,7 +1,7 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('radio: states'), () => {
test('should render disabled radio correctly', async ({ page }) => {
await page.setContent(
@@ -60,3 +60,66 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
});
});
});
+
+/**
+ * Focused and Pressed states are only available in the Ionic theme
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('radio: states'), () => {
+ test('should render pressed radio correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Enable Notifications
+
+ `,
+ config
+ );
+
+ const radio = page.locator('ion-radio');
+ await expect(radio).toHaveScreenshot(screenshot(`radio-pressed`));
+ });
+
+ test('should render pressed checked radio correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Enable Notifications
+
+ `,
+ config
+ );
+
+ const radio = page.locator('ion-radio');
+ await expect(radio).toHaveScreenshot(screenshot(`radio-checked-pressed`));
+ });
+
+ test('should render focused radio correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Enable Notifications
+
+ `,
+ config
+ );
+
+ const radio = page.locator('ion-radio');
+ await expect(radio).toHaveScreenshot(screenshot(`radio-focused`));
+ });
+
+ test('should render focused checked radio correctly', async ({ page }) => {
+ await page.setContent(
+ `
+
+ Enable Notifications
+
+ `,
+ config
+ );
+
+ const radio = page.locator('ion-radio');
+ await expect(radio).toHaveScreenshot(screenshot(`radio-checked-focused`));
+ });
+ });
+});
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..025bf42ef9
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7ea52da403
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c16a922f52
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..20b90aba2a
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..77483baa53
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d3509af178
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..997d700bf8
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..99883ad235
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4d093a8cc2
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..001c8321fe
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9cca82e213
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6509ca0435
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-checked-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..40a1d0fc56
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..83f26cea63
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..bd6dbd9c2c
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..eb2301c2ae
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..541ef91fee
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5f31b9d14c
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2212774444
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a21d428357
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7dace83a24
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-pressed-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c1d3f94664
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0d8621e96a
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5a9121278e
Binary files /dev/null and b/core/src/components/radio/test/states/radio.e2e.ts-snapshots/radio-unchecked-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/themes/ionic/ionic.mixins.scss b/core/src/themes/ionic/ionic.mixins.scss
index cf0a44b985..4b6d05c39f 100644
--- a/core/src/themes/ionic/ionic.mixins.scss
+++ b/core/src/themes/ionic/ionic.mixins.scss
@@ -41,6 +41,26 @@
pointer-events: none;
}
+// Focused mixin to be used on regular elements for the Ionic Theme focused state
+//
+// ex: :host(.ion-focused) .toggle-icon {
+// @include globals.focused-state();
+// }
+//
+// --------------------------------------------------
+@mixin focused-state($width: null, $style: null, $color: null, $addOffset: true) {
+ // Use default values if null is passed
+ $width: if($width != null, $width, tokens.$ionic-border-size-050);
+ $style: if($style != null, $style, tokens.$ionic-border-style-solid);
+ $color: if($color != null, $color, tokens.$ionic-state-focus-1);
+
+ @if $addOffset {
+ outline-offset: $width;
+ }
+
+ outline: $width $style $color;
+}
+
// Typography mixin to be used with typography scss variables (ionic.vars.scss)
//
// ex: @include typography($ionic-heading-h3-medium);