chore(): sync with main

core/src/components/segment/test/a11y/e2e.ts

@@ -1,63 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-const getActiveElementText = async (page) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return await page.evaluate((el) => el?.innerText, activeElement);
-};
-
-test('segment: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/a11y?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page)
-    // TODO(FW-403): Re-enable rule once segment button is updated to avoid nested-interactive
-    .disableRules('nested-interactive')
-    .analyze();
-  expect(results.violations.length).toEqual(0);
-});
-
-test('segment: keyboard navigation', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/a11y?ionic:_testing=true',
-  });
-
-  await page.keyboard.press('Tab');
-  expect(await getActiveElementText(page)).toEqual('BOOKMARKS');
-
-  await page.keyboard.press('ArrowRight');
-  expect(await getActiveElementText(page)).toEqual('READING LIST');
-
-  await page.keyboard.press('ArrowLeft');
-  expect(await getActiveElementText(page)).toEqual('BOOKMARKS');
-
-  await page.keyboard.press('End');
-  expect(await getActiveElementText(page)).toEqual('SHARED LINKS');
-
-  await page.keyboard.press('Home');
-  expect(await getActiveElementText(page)).toEqual('BOOKMARKS');
-
-  // Loop to the end from the start
-  await page.keyboard.press('ArrowLeft');
-  expect(await getActiveElementText(page)).toEqual('SHARED LINKS');
-
-  // Loop to the start from the end
-  await page.keyboard.press('ArrowRight');
-  expect(await getActiveElementText(page)).toEqual('BOOKMARKS');
-});
-
-test('segment: RTL keyboard navigation', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/a11y?ionic:_testing=true&rtl=true',
-  });
-
-  await page.keyboard.press('Tab');
-  expect(await getActiveElementText(page)).toEqual('BOOKMARKS');
-
-  await page.keyboard.press('ArrowRight');
-  expect(await getActiveElementText(page)).toEqual('SHARED LINKS');
-
-  await page.keyboard.press('ArrowLeft');
-  expect(await getActiveElementText(page)).toEqual('BOOKMARKS');
-});

core/src/components/segment/test/a11y/segment.e2e.ts

@@ -0,0 +1,47 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('segment: a11y', () => {
+  test('should not have any axe violations', async ({ page }) => {
+    await page.goto('/src/components/segment/test/a11y');
+
+    // TODO(FW-403): Re-enable rule once segment button is updated to avoid nested-interactive
+    const results = await new AxeBuilder({ page }).disableRules('nested-interactive').analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('segment buttons should be keyboard navigable', async ({ page, browserName }, testInfo) => {
+    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+    const isRTL = testInfo.project.metadata.rtl === true;
+    const nextKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
+    const previousKey = isRTL ? 'ArrowRight' : 'ArrowLeft';
+
+    await page.goto('/src/components/segment/test/a11y');
+
+    const segmentButtons = page.locator('ion-segment-button');
+
+    await page.keyboard.press(tabKey);
+    await expect(segmentButtons.nth(0)).toBeFocused();
+
+    await page.keyboard.press(nextKey);
+    await expect(segmentButtons.nth(1)).toBeFocused();
+
+    await page.keyboard.press(previousKey);
+    await expect(segmentButtons.nth(0)).toBeFocused();
+
+    await page.keyboard.press('End');
+    await expect(segmentButtons.nth(2)).toBeFocused();
+
+    await page.keyboard.press('Home');
+    await expect(segmentButtons.nth(0)).toBeFocused();
+
+    // Loop to the end from the start
+    await page.keyboard.press(previousKey);
+    await expect(segmentButtons.nth(2)).toBeFocused();
+
+    // Loop to the start from the end
+    await page.keyboard.press(nextKey);
+    await expect(segmentButtons.nth(0)).toBeFocused();
+  });
+});

core/src/components/segment/test/basic/e2e.ts

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('segment:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/basic/segment.e2e.ts

@@ -0,0 +1,61 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('segment: basic', () => {
+  test.describe('segment: rendering', () => {
+    test('should not have visual regressions when no value is selected', async ({ page }) => {
+      await page.setContent(`
+        <ion-segment>
+          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="b">Second</ion-segment-button>
+          <ion-segment-button value="c">Third</ion-segment-button>
+        </ion-segment>
+      `);
+
+      const segment = page.locator('ion-segment');
+
+      expect(await segment.screenshot()).toMatchSnapshot(`segment-no-value-${page.getSnapshotSettings()}.png`);
+    });
+    test('should not have visual regressions when a value is selected', async ({ page }) => {
+      await page.setContent(`
+        <ion-segment value="a">
+          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="b">Second</ion-segment-button>
+          <ion-segment-button value="c">Third</ion-segment-button>
+        </ion-segment>
+      `);
+
+      const segment = page.locator('ion-segment');
+
+      expect(await segment.screenshot()).toMatchSnapshot(`segment-value-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions when an item is disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-segment value="b">
+          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="b" disabled="true">Second</ion-segment-button>
+          <ion-segment-button value="c">Third</ion-segment-button>
+        </ion-segment>
+      `);
+
+      const segment = page.locator('ion-segment');
+
+      expect(await segment.screenshot()).toMatchSnapshot(`segment-disabled-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with color', async ({ page }) => {
+      await page.setContent(`
+        <ion-segment value="b" color="danger">
+          <ion-segment-button value="a">First</ion-segment-button>
+          <ion-segment-button value="b">Second</ion-segment-button>
+          <ion-segment-button value="c">Third</ion-segment-button>
+        </ion-segment>
+      `);
+
+      const segment = page.locator('ion-segment');
+
+      expect(await segment.screenshot()).toMatchSnapshot(`segment-color-${page.getSnapshotSettings()}.png`);
+    });
+  });
+});

core/src/components/segment/test/colors/e2e.ts

@@ -1,23 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: colors', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/colors?ionic:_testing=true',
-  });
-
-  await page.waitForTimeout(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('segment:rtl: colors', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/colors?ionic:_testing=true&rtl=true',
-  });
-
-  await page.waitForTimeout(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/colors/index.html

@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Segment - Colors</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Segment - Colors</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <!-- Default NO COLOR -->
-        <ion-segment value="free">
-          <ion-segment-button value="paid"> Paid </ion-segment-button>
-          <ion-segment-button value="free"> Free </ion-segment-button>
-          <ion-segment-button value="top"> Top </ion-segment-button>
-        </ion-segment>
-
-        <div class="customize-all">
-          <ion-segment value="free">
-            <ion-segment-button value="paid"> Custom </ion-segment-button>
-            <ion-segment-button value="free"> Colors </ion-segment-button>
-            <ion-segment-button value="top"> All </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="primary" value="reading-list">
-            <ion-segment-button value="bookmarks"> Bookmarks </ion-segment-button>
-            <ion-segment-button value="reading-list"> Reading List </ion-segment-button>
-            <ion-segment-button value="shared-links"> Shared Links </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="secondary" value="active">
-            <ion-segment-button value="active"> Active </ion-segment-button>
-            <ion-segment-button value="disabled" disabled="true"> Disabled </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false"> Inactive </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="tertiary" value="all">
-            <ion-segment-button value="all"> All </ion-segment-button>
-            <ion-segment-button value="missed"> Missed </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="success" value="330">
-            <ion-segment-button value="330">
-              <ion-label>330ml</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="440">
-              <ion-label>440ml</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="500">
-              <ion-label>500ml</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="custom">
-              <ion-icon name="create"></ion-icon>
-            </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="warning" value="reading-list">
-            <ion-segment-button value="bookmarks">
-              <ion-icon name="book"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="reading-list">
-              <ion-icon name="glasses"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="shared-links">
-              <ion-icon name="at"></ion-icon>
-            </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="danger" value="bookmarks">
-            <ion-segment-button value="bookmarks">
-              <ion-label>Bookmarks</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="reading-list">
-              <ion-label>Reading List</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="shared-links">
-              <ion-label>Shared Links</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="light" value="rainy">
-            <ion-segment-button value="sunny"> Sunny </ion-segment-button>
-            <ion-segment-button value="rainy"> Rainy </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="medium" value="seg1">
-            <ion-segment-button value="seg1">
-              <ion-label>Seg 1</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg2">
-              <ion-label>Seg 2</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg3">
-              <ion-label>Seg 3</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment color="dark" value="seg22">
-            <ion-segment-button value="seg21">
-              <ion-label>Seg 2 1</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg22">
-              <ion-label>Seg 2 2</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg23">
-              <ion-label>Seg 2 3</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment disabled color="danger" value="seg22">
-            <ion-segment-button value="seg21">
-              <ion-label>Seg 2 1</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg22">
-              <ion-label>Seg 2 2</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg23">
-              <ion-label>Seg 2 3</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-
-          <ion-segment disabled color="medium" value="seg22">
-            <ion-segment-button value="seg21">
-              <ion-label>Seg 2 1</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg22">
-              <ion-label>Seg 2 2</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="seg23">
-              <ion-label>Seg 2 3</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </div>
-      </ion-content>
-
-      <style>
-        ion-content ion-segment {
-          margin-bottom: 10px;
-        }
-
-        .md .customize-all ion-segment-button {
-          --color: red;
-          --background: rgba(0, 0, 0, 0.2);
-          --ripple-color: red;
-          --indicator-color: red;
-        }
-
-        .ios .customize-all ion-segment {
-          --background: rgba(51, 17, 17, 0.15);
-        }
-
-        .ios .customize-all ion-segment-button {
-          --color: purple;
-          --indicator-color: lightpink;
-        }
-      </style>
-    </ion-app>
-  </body>
-</html>

core/src/components/segment/test/custom/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/custom?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/custom/segment.e2e.ts

@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('segment: custom', () => {
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl();
+
+    await page.goto('/src/components/segment/test/custom');
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`segment-custom-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/segment/test/icon/segment.e2e.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('segment: icons', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setContent(`
+      <ion-segment value="2">
+        <ion-segment-button value="1">
+          <ion-icon name="book"></ion-icon>
+          <ion-label>Bookmarks</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="2">
+          <ion-icon name="search"></ion-icon>
+          <ion-label>Reading List</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="3">
+          <ion-icon name="time"></ion-icon>
+          <ion-label>Shared Links</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    `);
+
+    const segment = page.locator('ion-segment');
+
+    expect(await segment.screenshot()).toMatchSnapshot(`segment-icons-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/segment/test/modes/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: modes', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/modes?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/modes/index.html

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Segment - Modes</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Segment - Modes</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content>
-        <h2>Mode: segment & button ios</h2>
-        <ion-segment mode="ios" value="kittens">
-          <ion-segment-button mode="ios" value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="ios" value="kittens">
-            <ion-label>Kittens</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="ios" value="turtles">
-            <ion-label>Turtles</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <h2>Mode: segment ios</h2>
-        <ion-segment mode="ios" value="kittens">
-          <ion-segment-button value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="kittens">
-            <ion-label>Kittens</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="turtles">
-            <ion-label>Turtles</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <h2>Mode: segment ios, button: md</h2>
-        <ion-segment mode="ios" value="kittens">
-          <ion-segment-button mode="md" value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="md" value="kittens">
-            <ion-label>Kittens</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="md" value="turtles">
-            <ion-label>Turtles</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <hr />
-
-        <h2>Mode: segment & button md</h2>
-        <ion-segment mode="md" value="kittens">
-          <ion-segment-button mode="md" value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="md" value="kittens">
-            <ion-label>Kittens</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="md" value="turtles">
-            <ion-label>Turtles</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <h2>Mode: segment md</h2>
-        <ion-segment mode="md" value="kittens">
-          <ion-segment-button value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="kittens">
-            <ion-label>Kittens</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="turtles">
-            <ion-label>Turtles</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <h2>Mode: segment md, button: ios</h2>
-        <ion-segment mode="md" value="kittens">
-          <ion-segment-button mode="ios" value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="ios" value="kittens">
-            <ion-label>Kittens</ion-label>
-          </ion-segment-button>
-          <ion-segment-button mode="ios" value="turtles">
-            <ion-label>Turtles</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>

core/src/components/segment/test/modes/segment.e2e.ts

@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('segment: modes', () => {
+  test('should allow overriding of modes to iOS', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios', 'This tests that users can override the mode to iOS when the app is in MD mode');
+
+    await page.setContent(`
+        <ion-segment mode="ios" value="kittens">
+          <ion-segment-button mode="ios" value="puppies">
+            <ion-label>Puppies</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `);
+
+    const segment = page.locator('ion-segment');
+    const segmentButtons = page.locator('ion-segment-button');
+    await expect(segment).toHaveClass(/ios/);
+    await expect(segmentButtons).toHaveClass(/ios/);
+  });
+
+  test('should allow overriding of modes to MD', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md', 'This tests that users can override the mode to MD when the app is in iOS mode');
+
+    await page.setContent(`
+        <ion-segment mode="md" value="kittens">
+          <ion-segment-button mode="md" value="puppies">
+            <ion-label>Puppies</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `);
+
+    const segment = page.locator('ion-segment');
+    const segmentButtons = page.locator('ion-segment-button');
+    await expect(segment).toHaveClass(/md/);
+    await expect(segmentButtons).toHaveClass(/md/);
+  });
+});

core/src/components/segment/test/rtl/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/rtl?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/rtl/index.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Segment - RTL</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Segment - RTL</ion-title>
-        </ion-toolbar>
-
-        <ion-content>
-          <div class="ion-padding">
-            <ion-segment dir="rtl">
-              <ion-segment-button>
-                <ion-label>Seg 1</ion-label>
-              </ion-segment-button>
-              <ion-segment-button>
-                <ion-label>Seg 2</ion-label>
-              </ion-segment-button>
-              <ion-segment-button>
-                <ion-label>Seg 3</ion-label>
-              </ion-segment-button>
-            </ion-segment>
-          </div>
-        </ion-content>
-      </ion-header>
-    </ion-app>
-  </body>
-</html>

core/src/components/segment/test/scrollable/segment.e2e.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('segment: scrollable', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setContent(`
+      <ion-segment scrollable="true" value="2">
+        <ion-segment-button value="1">First</ion-segment-button>
+        <ion-segment-button value="2">Second</ion-segment-button>
+        <ion-segment-button value="3">Third</ion-segment-button>
+        <ion-segment-button value="4">Fourth</ion-segment-button>
+        <ion-segment-button value="5">Fifth</ion-segment-button>
+        <ion-segment-button value="6">Sixth</ion-segment-button>
+        <ion-segment-button value="7">Seventh</ion-segment-button>
+        <ion-segment-button value="8">Eigth</ion-segment-button>
+        <ion-segment-button value="9">Nineth</ion-segment-button>
+      </ion-segment>
+    `);
+
+    const segment = page.locator('ion-segment');
+
+    expect(await segment.screenshot()).toMatchSnapshot(`segment-scrollable-${page.getSnapshotSettings()}.png`);
+  });
+});

core/src/components/segment/test/spec/e2e.ts

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/spec?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('segment:rtl: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/spec?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/spec/index.html

@@ -1,290 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Segment - Spec</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar color="tertiary">
-          <ion-title>Segment - Spec</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar color="tertiary">
-          <ion-segment id="modeLayout" value="compass">
-            <ion-segment-button value="compass">
-              <ion-icon name="compass"></ion-icon>
-              <ion-label>Explore</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="airplane">
-              <ion-icon name="airplane"></ion-icon>
-              <ion-label>Flights</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="briefcase">
-              <ion-icon name="briefcase"></ion-icon>
-              <ion-label>Trips</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content>
-        <!-- Label only -->
-        <ion-segment id="multi-color" value="one">
-          <ion-segment-button value="one">
-            <ion-label>Item One</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="two">
-            <ion-label>Item Two</ion-label>
-          </ion-segment-button>
-          <ion-segment-button value="three">
-            <ion-label>Item Three</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Icon only -->
-        <ion-segment value="heart">
-          <ion-segment-button value="call">
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart">
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin">
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Icon top -->
-        <ion-segment value="heart">
-          <ion-segment-button value="call">
-            <ion-label>Item One</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart">
-            <ion-label>Item Two</ion-label>
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin">
-            <ion-label>Item Three</ion-label>
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Icon bottom -->
-        <ion-segment value="call">
-          <ion-segment-button layout="icon-bottom" value="call">
-            <ion-icon name="call"></ion-icon>
-            <ion-label>Item One</ion-label>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-bottom" value="heart">
-            <ion-icon name="heart"></ion-icon>
-            <ion-label>Item Two</ion-label>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-bottom" value="pin">
-            <ion-icon name="pin"></ion-icon>
-            <ion-label>Item Three</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Icon start -->
-        <ion-segment value="call">
-          <ion-segment-button layout="icon-start" value="call">
-            <ion-label>Item One</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-start" value="heart">
-            <ion-label>Item Two</ion-label>
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-start" value="pin">
-            <ion-label>Item Three</ion-label>
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Icon end -->
-        <ion-segment value="call">
-          <ion-segment-button layout="icon-end" value="call">
-            <ion-icon name="call"></ion-icon>
-            <ion-label>Item One</ion-label>
-          </ion-segment-button>
-          <ion-segment-button disabled layout="icon-end" value="heart">
-            <ion-icon name="heart"></ion-icon>
-            <ion-label>Item Two</ion-label>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-end" value="pin">
-            <ion-icon name="pin"></ion-icon>
-            <ion-label>Item Three</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Disabled -->
-        <ion-segment scrollable disabled value="call">
-          <ion-segment-button layout="icon-end" value="call">
-            <ion-icon name="call"></ion-icon>
-            <ion-label>Item One</ion-label>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-end" value="heart">
-            <ion-icon name="heart"></ion-icon>
-            <ion-label>Item Two</ion-label>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-end" value="pin">
-            <ion-icon name="pin"></ion-icon>
-            <ion-label>Item Three</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Color -->
-        <ion-segment color="secondary" value="call">
-          <ion-segment-button layout="icon-end" value="call">
-            <ion-icon name="call"></ion-icon>
-            <ion-label>Item One</ion-label>
-          </ion-segment-button>
-          <ion-segment-button disabled layout="icon-end" value="heart">
-            <ion-icon name="heart"></ion-icon>
-            <ion-label>Item Two</ion-label>
-          </ion-segment-button>
-          <ion-segment-button layout="icon-end" value="pin">
-            <ion-icon name="pin"></ion-icon>
-            <ion-label>Item Three</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Non Scrollable, Custom Min Width -->
-        <ion-segment color="tertiary" value="heart" id="min-width-custom">
-          <ion-segment-button value="home">
-            <ion-icon name="home"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart">
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin">
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="star">
-            <ion-icon name="star"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="call">
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="globe">
-            <ion-icon name="globe"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="basket">
-            <ion-icon name="basket"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="airplane">
-            <ion-icon name="airplane"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="boat">
-            <ion-icon name="boat"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="baseball">
-            <ion-icon name="baseball"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Scrollable Icons -->
-        <ion-segment scrollable color="tertiary" value="heart">
-          <ion-segment-button value="home">
-            <ion-icon name="home"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="heart">
-            <ion-icon name="heart"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="pin">
-            <ion-icon name="pin"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="star">
-            <ion-icon name="star"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="call">
-            <ion-icon name="call"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="globe">
-            <ion-icon name="globe"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="basket">
-            <ion-icon name="basket"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-
-        <!-- Scrollable text -->
-        <ion-segment scrollable color="tertiary" value="heart">
-          <ion-segment-button value="home"> This is some long text </ion-segment-button>
-          <ion-segment-button value="heart"> Short text </ion-segment-button>
-          <ion-segment-button value="pin"> This is some long text </ion-segment-button>
-          <ion-segment-button value="star"> Short text </ion-segment-button>
-          <ion-segment-button value="call"> Short text </ion-segment-button>
-          <ion-segment-button value="globe"> Medium long text </ion-segment-button>
-          <ion-segment-button value="basket"> Medium long text </ion-segment-button>
-        </ion-segment>
-      </ion-content>
-
-      <style>
-        ion-segment#min-width-custom ion-segment-button {
-          min-width: auto;
-        }
-
-        ion-content {
-          --padding-top: 16px;
-        }
-
-        ion-content ion-segment {
-          margin-bottom: 12px;
-        }
-
-        .md ion-content {
-          --background: #e5e5e5;
-        }
-
-        .md ion-content ion-segment {
-          background: white;
-        }
-
-        #multi-color ion-segment-button:first-of-type {
-          --indicator-color: rgba(255, 0, 0, 0.5);
-        }
-        #multi-color ion-segment-button:nth-of-type(2) {
-          --indicator-color: rgba(0, 255, 0, 0.5);
-        }
-        #multi-color ion-segment-button:nth-of-type(3) {
-          --indicator-color: rgba(0, 0, 255, 0.5);
-        }
-      </style>
-
-      <script>
-        function setLayout() {
-          var mode = Ionic.mode;
-
-          var segment = document.getElementById('modeLayout');
-          var segmentButtons = segment.querySelectorAll('ion-segment-button');
-
-          for (var i = 0; i < segmentButtons.length; i++) {
-            segmentButtons[i].layout = mode === 'ios' ? 'icon-hide' : 'icon-top';
-          }
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-          requestAnimationFrame(() => {
-            setLayout();
-          });
-        });
-        document.querySelector('ion-segment').addEventListener('ionChange', (ev) => {
-          console.log('ionChange', ev);
-        });
-      </script>
-    </ion-app>
-  </body>
-</html>

core/src/components/segment/test/standalone/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/standalone/index.html

@@ -1,288 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Segment - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body onLoad="onLoad()">
-    <ion-toolbar>
-      <ion-segment value="Free">
-        <ion-segment-button value="Paid">
-          <ion-label>Paid</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="Free">
-          <ion-label>Free</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="Top">
-          <ion-label>Top</ion-label>
-        </ion-segment-button>
-      </ion-segment>
-    </ion-toolbar>
-
-    <ion-segment color="dark" value="Reading List">
-      <ion-segment-button value="Bookmarks">
-        <ion-icon name="book"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button value="Reading List">
-        <ion-icon name="glasses"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button value="Shared Links">
-        <ion-icon name="at"></ion-icon>
-      </ion-segment-button>
-    </ion-segment>
-
-    <ion-segment id="browserSegment" color="danger">
-      <ion-segment-button href="#bookmarks" value="bookmarks">
-        <ion-label>Bookmarks</ion-label>
-      </ion-segment-button>
-      <ion-segment-button href="#reading" value="reading">
-        <ion-label>Reading List</ion-label>
-      </ion-segment-button>
-      <ion-segment-button href="#links" value="links">
-        <ion-label>Shared Links</ion-label>
-      </ion-segment-button>
-    </ion-segment>
-
-    <pre><code><span id="browserResults"></span></code></pre>
-
-    <ion-segment color="secondary" value="active">
-      <ion-segment-button value="active">
-        <ion-label>Active</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="disabled" disabled="true">
-        <ion-label>Disabled</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="inactive" disabled="false">
-        <ion-label>Inactive</ion-label>
-      </ion-segment-button>
-    </ion-segment>
-
-    <ion-segment class="custom" value="active">
-      <ion-segment-button value="active">
-        <ion-label>Active</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="disabled" disabled="true">
-        <ion-label>Disabled</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="inactive" disabled="false">
-        <ion-label>Inactive</ion-label>
-      </ion-segment-button>
-    </ion-segment>
-
-    <ion-segment class="custom-icon" value="instagram">
-      <ion-segment-button class="segment-button-facebook" value="facebook">
-        <ion-label>Facebook</ion-label>
-        <ion-icon name="logo-facebook"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button class="segment-button-instagram" value="instagram">
-        <ion-label>Instagram</ion-label>
-        <ion-icon name="logo-instagram"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button class="segment-button-slack" value="slack">
-        <ion-label>Slack</ion-label>
-        <ion-icon name="logo-slack"></ion-icon>
-      </ion-segment-button>
-    </ion-segment>
-
-    <ion-segment value="2" class="custom-indicator">
-      <ion-segment-button value="1">
-        <ion-icon name="home"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button class="large-icon" value="2">
-        <ion-icon name="call"></ion-icon>
-      </ion-segment-button>
-      <ion-segment-button value="3">
-        <ion-icon name="person"></ion-icon>
-      </ion-segment-button>
-    </ion-segment>
-
-    <ion-segment value="2" class="custom-indicator">
-      <ion-segment-button layout="icon-start" value="1">
-        <ion-icon name="home"></ion-icon>
-        <ion-label>Home</ion-label>
-      </ion-segment-button>
-      <ion-segment-button layout="icon-start" class="large-icon" value="2">
-        <ion-icon name="call"></ion-icon>
-        <ion-label>Call</ion-label>
-      </ion-segment-button>
-      <ion-segment-button layout="icon-start" value="3">
-        <ion-icon name="person"></ion-icon>
-        <ion-label>Person</ion-label>
-      </ion-segment-button>
-    </ion-segment>
-  </body>
-
-  <script>
-    var segment = document.getElementById('browserSegment');
-    var results = document.getElementById('browserResults');
-
-    checkUrl();
-
-    segment.addEventListener('ionChange', function () {
-      checkUrl();
-    });
-
-    function checkUrl() {
-      var url = window.location.href;
-
-      if (url.search('#bookmarks') > -1) {
-        setResults('bookmarks');
-      } else if (url.search('#reading') > -1) {
-        setResults('reading');
-      } else if (url.search('#links') > -1) {
-        setResults('links');
-      }
-    }
-
-    function setResults(value) {
-      results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
-      segment.value = value;
-    }
-
-    async function onLoad() {
-      const customIconSegments = document.querySelectorAll('.custom-icon');
-
-      for (var i = 0; i < customIconSegments.length; i++) {
-        const customIconSegment = customIconSegments[i];
-
-        if (customIconSegment.componentOnReady) {
-          await customIconSegment.componentOnReady();
-        }
-        addIconClass(customIconSegment, customIconSegment.value);
-
-        customIconSegment.addEventListener('ionChange', function (ev) {
-          addIconClass(customIconSegment, ev.detail.value);
-        });
-      }
-    }
-
-    function addIconClass(el, value) {
-      console.log('adding class to', el, value);
-      if (value) {
-        el.classList.remove('segment-facebook-checked', 'segment-instagram-checked', 'segment-slack-checked');
-        el.classList.add(`segment-${value}-checked`);
-      }
-    }
-  </script>
-
-  <style>
-    body {
-      margin: 0;
-    }
-
-    ion-segment {
-      margin-bottom: 10px;
-    }
-
-    ion-toolbar ion-segment {
-      margin-bottom: 0;
-    }
-
-    pre {
-      border: 1px solid #e6e9ee;
-      background: white;
-      margin: 10px;
-      padding: 4px;
-      line-height: 24px;
-    }
-
-    code {
-      display: block;
-      padding: 0.5em;
-      background: #ffffff;
-      word-wrap: normal;
-      white-space: pre;
-      color: #314361;
-    }
-
-    .custom {
-      --background-checked: navy;
-      --background: papayawhip;
-      --border-color-checked: navy;
-      --border-color-disabled: navy;
-      --border-color: navy;
-      --color-checked: papayawhip;
-      --color-disabled: rgba(0, 0, 0, 0.3);
-      --color: navy;
-    }
-
-    /*
-   * Custom Icon Segment (Facebook, Instagram, Slack)
-   */
-    .custom-icon ion-icon {
-      font-size: 44px;
-    }
-
-    /*
-   * MD Custom Icon Segment (Facebook, Instagram, Slack)
-   */
-    .md .segment-facebook-checked .segment-button-facebook {
-      --color-checked: #3a3d46;
-      --indicator-color: #3a3d46;
-    }
-
-    .md .segment-instagram-checked .segment-button-instagram {
-      --color-checked: #e4405f;
-      --indicator-color: #e4405f;
-    }
-
-    .md .segment-slack-checked .segment-button-slack {
-      --color-checked: #3aaf85;
-      --indicator-color: #3aaf85;
-    }
-
-    /*
-   * iOS Custom Icon Segment (Facebook, Instagram, Slack)
-   */
-    .ios .custom-icon {
-      --indicator-color: transparent;
-      --indicator-transition: none;
-    }
-
-    .ios .segment-facebook-checked .segment-button-facebook {
-      --background-checked: #3a3d46;
-      --color-checked: #ffffff;
-    }
-
-    .ios .segment-instagram-checked .segment-button-instagram {
-      --background-checked: #e4405f;
-      --color-checked: #ffffff;
-    }
-
-    .ios .segment-slack-checked .segment-button-slack {
-      --background-checked: #3aaf85;
-      --color-checked: #ffffff;
-    }
-
-    .ios .segment-button-facebook {
-      --color: #3a3d46;
-    }
-
-    .ios .segment-button-instagram {
-      --color: #e4405f;
-    }
-
-    .ios .segment-button-slack {
-      --color: #3aaf85;
-    }
-
-    .custom-indicator {
-      --indicator-color: lightgray;
-    }
-
-    .custom-icon ion-icon,
-    .large-icon ion-icon {
-      font-size: 44px;
-    }
-  </style>
-</html>

core/src/components/segment/test/toolbar/e2e.ts

@@ -1,23 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('segment: toolbar', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/toolbar?ionic:_testing=true',
-  });
-
-  await page.waitForTimeout(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('segment:rtl: toolbar', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/segment/test/toolbar?ionic:_testing=true&rtl=true',
-  });
-
-  await page.waitForTimeout(250);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/segment/test/toolbar/index.html

@@ -1,288 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Segment - Toolbar</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Segment - Toolbar</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-segment value="Top">
-            <ion-segment-button value="Paid">
-              <ion-label>Paid</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Free">
-              <ion-label>Free</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Top">
-              <ion-label>Top</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar class="themed">
-          <ion-segment value="Top">
-            <ion-segment-button value="Paid">
-              <ion-label>Paid</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Free">
-              <ion-label>Free</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Top">
-              <ion-label>Top</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar color="primary">
-          <ion-segment value="Free">
-            <ion-segment-button value="Paid">
-              <ion-label>Paid</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Free">
-              <ion-label>Free</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Top">
-              <ion-label>Top</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar color="secondary">
-          <ion-segment value="Top">
-            <ion-segment-button value="Paid">
-              <ion-label>Paid</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Free">
-              <ion-label>Free</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Top">
-              <ion-label>Top</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar color="danger">
-          <ion-segment name="dynamicPropDisable" disabled>
-            <ion-segment-button value="Bookmarks">
-              <ion-label>Bookmarks</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Reading List">
-              <ion-label>Reading List</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="Shared Links">
-              <ion-label>Shared Links</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar color="dark">
-          <ion-segment name="dynamicAttrElem" value="active">
-            <ion-segment-button value="active">
-              <ion-label>Active</ion-label>
-            </ion-segment-button>
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
-              <ion-label>Disabled</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false">
-              <ion-label>Inactive</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-segment value="rainy">
-            <ion-segment-button value="sunny">
-              <ion-label>Sunny</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="rainy">
-              <ion-label>Rainy</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar color="primary">
-          <ion-segment color="light" value="rainy">
-            <ion-segment-button value="sunny"> Sunny </ion-segment-button>
-            <ion-segment-button value="rainy"> Rainy </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Label only -->
-        <ion-toolbar color="warning">
-          <ion-segment value="1">
-            <ion-segment-button value="1">
-              <ion-label>Item One</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="2">
-              <ion-label>Item Two</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="3">
-              <ion-label>Item Three</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Icon only -->
-        <ion-toolbar color="secondary">
-          <ion-segment value="heart">
-            <ion-segment-button value="call">
-              <ion-icon name="call"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="heart">
-              <ion-icon name="heart"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="pin">
-              <ion-icon name="pin"></ion-icon>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Icon top -->
-        <ion-toolbar color="danger">
-          <ion-segment value="2">
-            <ion-segment-button value="1">
-              <ion-label>Item One</ion-label>
-              <ion-icon name="call"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="2">
-              <ion-label>Item Two</ion-label>
-              <ion-icon name="heart"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="3">
-              <ion-label>Item Three</ion-label>
-              <ion-icon name="pin"></ion-icon>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Icon bottom -->
-        <ion-toolbar color="tertiary">
-          <ion-segment value="1">
-            <ion-segment-button value="1" layout="icon-bottom">
-              <ion-icon name="call"></ion-icon>
-              <ion-label>Item One</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="2" layout="icon-bottom">
-              <ion-icon name="heart"></ion-icon>
-              <ion-label>Item Two</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="3" layout="icon-bottom">
-              <ion-icon name="pin"></ion-icon>
-              <ion-label>Item Three</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Icon start -->
-        <ion-toolbar color="dark">
-          <ion-segment value="1">
-            <ion-segment-button value="1" layout="icon-start">
-              <ion-label>Item One</ion-label>
-              <ion-icon name="call"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="2" layout="icon-start">
-              <ion-label>Item Two</ion-label>
-              <ion-icon name="heart"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="3" layout="icon-start">
-              <ion-label>Item Three</ion-label>
-              <ion-icon name="pin"></ion-icon>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Icon end -->
-        <ion-toolbar color="medium">
-          <ion-segment value="1">
-            <ion-segment-button value="1" layout="icon-end">
-              <ion-icon name="call"></ion-icon>
-              <ion-label>Item One</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="2" layout="icon-end">
-              <ion-icon name="heart"></ion-icon>
-              <ion-label>Item Two</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="3" layout="icon-end">
-              <ion-icon name="pin"></ion-icon>
-              <ion-label>Item Three</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Disabled -->
-        <ion-toolbar color="success">
-          <ion-segment disabled value="1">
-            <ion-segment-button value="1" layout="icon-end">
-              <ion-icon name="call"></ion-icon>
-              <ion-label>Item One</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="2" layout="icon-end">
-              <ion-icon name="heart"></ion-icon>
-              <ion-label>Item Two</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="3" layout="icon-end">
-              <ion-icon name="pin"></ion-icon>
-              <ion-label>Item Three</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <!-- Color -->
-        <ion-toolbar color="light">
-          <ion-segment color="secondary" value="1">
-            <ion-segment-button value="1" layout="icon-end">
-              <ion-icon name="call"></ion-icon>
-              <ion-label>Item One</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="2" layout="icon-end">
-              <ion-icon name="heart"></ion-icon>
-              <ion-label>Item Two</ion-label>
-            </ion-segment-button>
-            <ion-segment-button value="3" layout="icon-end">
-              <ion-icon name="pin"></ion-icon>
-              <ion-label>Item Three</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding"> Segment in Toolbar </ion-content>
-
-      <style>
-        .themed {
-          --ion-toolbar-background: #3880ff;
-        }
-
-        .ios .themed {
-          --ion-toolbar-segment-background: rgba(255, 255, 255, 0.11);
-          --ion-toolbar-segment-color: #fff;
-
-          --ion-toolbar-segment-color-checked: #3880ff;
-        }
-
-        .md .themed {
-          --ion-toolbar-segment-color: rgba(255, 255, 255, 0.6);
-          --ion-toolbar-segment-color-checked: #fff;
-
-          --ion-toolbar-segment-indicator-color: #fff;
-        }
-      </style>
-    </ion-app>
-  </body>
-</html>

core/src/components/segment/test/toolbar/segment.e2e.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('segment: toolbar', () => {
+  test.describe('segment: rendering', () => {
+    test('should not have visual regressions when used in a toolbar without color', async ({ page }) => {
+      await page.setContent(`
+        <ion-header>
+          <ion-toolbar>
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+
+      expect(await header.screenshot()).toMatchSnapshot(`segment-toolbar-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions when used in a toolbar with color', async ({ page }) => {
+      await page.setContent(`
+        <ion-header>
+          <ion-toolbar color="primary">
+            <ion-segment value="a">
+              <ion-segment-button value="a">First</ion-segment-button>
+              <ion-segment-button value="b">Second</ion-segment-button>
+              <ion-segment-button value="c" disabled="true">Third</ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+
+      expect(await header.screenshot()).toMatchSnapshot(`segment-toolbar-color-${page.getSnapshotSettings()}.png`);
+    });
+  });
+});