voyager-ionic-core 7.2.3 → 7.5.0

package/dist/collection/components/searchbar/searchbar.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the searchbar input
@@ -69,6 +102,7 @@
   border-radius: var(--border-radius);
   display: block;
   width: 100%;
+  min-height: inherit;
   border: 0;
   outline: none;
   background: var(--background);
@@ -147,6 +181,39 @@
   pointer-events: none;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --background: var(--ion-background-color, #fff);
   --border-radius: 2px;
@@ -166,8 +233,8 @@
 
 .searchbar-search-icon {
   top: 11px;
-  width: 21px;
-  height: 21px;
+  width: 1.3125rem;
+  height: 1.3125rem;
 }
 @supports (inset-inline-start: 0) {
   .searchbar-search-icon {
@@ -241,15 +308,15 @@
 }
 
 .searchbar-input {
-  -webkit-padding-start: 55px;
-  padding-inline-start: 55px;
-  -webkit-padding-end: 55px;
-  padding-inline-end: 55px;
-  padding-top: 6px;
-  padding-bottom: 6px;
+  -webkit-padding-start: 3.4375rem;
+  padding-inline-start: 3.4375rem;
+  -webkit-padding-end: 3.4375rem;
+  padding-inline-end: 3.4375rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
   background-position: left 8px center;
   height: auto;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 30px;
 }
@@ -311,7 +378,7 @@
 }
 
 .searchbar-clear-icon {
-  width: 22px;
+  width: 1.375rem;
   height: 100%;
 }
 

package/dist/collection/components/searchbar/test/a11y/searchbar.e2e.js

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-searchbar value="My Text" show-cancel-button="always" show-clear-button="always"></ion-searchbar>
+      `, config);
+      const searchbar = page.locator('ion-searchbar');
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-scale`));
+    });
+    test('should scale text on larger font sizes in a toolbar', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+        <ion-header>
+          <ion-toolbar>
+            <ion-searchbar value="My Text" show-cancel-button="always" show-clear-button="always"></ion-searchbar>
+          </ion-toolbar>
+        </ion-header>
+      `, config);
+      const searchbar = page.locator('ion-searchbar');
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-scale-toolbar`));
+    });
+  });
+});

package/dist/collection/components/searchbar/test/basic/searchbar.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions.
@@ -116,3 +116,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: ios clear button text cut off'), () => {
+    test('text should not be cut off when clear button is hidden', async ({ page }) => {
+      await page.setContent(`
+        <ion-searchbar show-clear-button="focus" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non metus vel velit sollicitudin suscipit quis sed lectus. "></ion-searchbar>
+      `, config);
+      const searchbar = page.locator('ion-searchbar');
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-text-clear-hidden`));
+    });
+    test('text should be cut off when clear button is visible', async ({ page }) => {
+      await page.setContent(`
+        <ion-searchbar show-clear-button="always" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non metus vel velit sollicitudin suscipit quis sed lectus. "></ion-searchbar>
+      `, config);
+      const searchbar = page.locator('ion-searchbar');
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-text-clear-visible`));
+    });
+  });
+});

package/dist/collection/components/searchbar/test/events/searchbar.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions.

package/dist/collection/components/segment/segment.ios.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the segment button
@@ -29,6 +62,72 @@
   display: none;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);
   border-radius: 8px;

package/dist/collection/components/segment/segment.js

@@ -1,10 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h, writeTask } from '@stencil/core';
+import { Host, h, writeTask } from "@stencil/core";
+import { raf } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from '../../global/ionic-global';
+import { getIonMode } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -78,29 +79,7 @@ export class Segment {
      * Used by `ion-segment-button` to determine if the button should be checked.
      */
     this.ionSelect.emit({ value });
-    if (this.scrollable) {
-      const buttons = this.getButtons();
-      const activeButton = buttons.find((button) => button.value === value);
-      if (activeButton !== undefined) {
-        /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
-         */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
-        });
-      }
-    }
+    this.scrollActiveButtonIntoView();
   }
   disabledChanged() {
     this.gestureChanged();
@@ -122,6 +101,13 @@ export class Segment {
   }
   async componentDidLoad() {
     this.setCheckedClasses();
+    /**
+     * We need to wait for the buttons to all be rendered
+     * before we can scroll.
+     */
+    raf(() => {
+      this.scrollActiveButtonIntoView();
+    });
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -250,6 +236,32 @@ export class Segment {
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
+  scrollActiveButtonIntoView() {
+    const { scrollable, value } = this;
+    if (scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        /**
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
+         */
+        activeButton.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
+        });
+      }
+    }
+  }
   setNextIndex(detail, isEnd = false) {
     const rtl = isRTL(this.el);
     const activated = this.activated;
@@ -409,7 +421,8 @@ export class Segment {
           "references": {
             "Color": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::Color"
             }
           }
         },
@@ -485,7 +498,8 @@ export class Segment {
           "references": {
             "SegmentValue": {
               "location": "import",
-              "path": "./segment-interface"
+              "path": "./segment-interface",
+              "id": "src/components/segment/segment-interface.ts::SegmentValue"
             }
           }
         },
@@ -540,7 +554,8 @@ export class Segment {
           "references": {
             "SegmentChangeEventDetail": {
               "location": "import",
-              "path": "./segment-interface"
+              "path": "./segment-interface",
+              "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
             }
           }
         }
@@ -563,7 +578,8 @@ export class Segment {
           "references": {
             "SegmentChangeEventDetail": {
               "location": "import",
-              "path": "./segment-interface"
+              "path": "./segment-interface",
+              "id": "src/components/segment/segment-interface.ts::SegmentChangeEventDetail"
             }
           }
         }
@@ -586,7 +602,8 @@ export class Segment {
           "references": {
             "StyleEventDetail": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::StyleEventDetail"
             }
           }
         }

package/dist/collection/components/segment/segment.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the segment button
@@ -29,6 +62,72 @@
   display: none;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --background: transparent;
   grid-auto-columns: minmax(auto, 360px);

package/dist/collection/components/segment/test/a11y/segment.e2e.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from '@axe-core/playwright';
-import { expect } from '@playwright/test';
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, config }) => {
   test.describe(title('segment: a11y'), () => {

package/dist/collection/components/segment/test/basic/segment.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('segment: rendering'), () => {

package/dist/collection/components/segment/test/custom/segment.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('segment: custom'), () => {

package/dist/collection/components/segment/test/icon/segment.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('segment: icons'), () => {

package/dist/collection/components/segment/test/modes/segment.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This tests that users can override the mode to iOS when the app is in MD mode

package/dist/collection/components/segment/test/scrollable/segment.e2e.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('segment: scrollable'), () => {
+  test.describe(title('segment: scrollable (rendering)'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(`
         <ion-segment scrollable="true" value="2">
@@ -42,3 +42,42 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('segment: scrollable (functionality)'), () => {
+    test('should scroll active button into view when value is already set', async ({ page }) => {
+      await page.setContent(`
+          <ion-segment scrollable="true" value="8">
+            <ion-segment-button value="1">
+              <ion-label>First</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Second</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Third</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="4">
+              <ion-label>Fourth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="5">
+              <ion-label>Fifth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="6">
+              <ion-label>Sixth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="7">
+              <ion-label>Seventh</ion-label>
+            </ion-segment-button>
+            <ion-segment-button id="activeButton" value="8">
+              <ion-label>Eighth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="9">
+              <ion-label>Ninth</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        `, config);
+      const activeButton = page.locator('#activeButton');
+      await expect(activeButton).toBeInViewport();
+    });
+  });
+});