merge release-8.4.6 (#30273)

v8.4.6

.github/workflows/actions/build-angular-server/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-angular/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - name: Install Dependencies
       run: npm ci

.github/workflows/actions/build-core/action.yml

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm install
       working-directory: ./core

.github/workflows/actions/build-react-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-react/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/publish-npm/action.yml

@@ -21,7 +21,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     # Provenance requires npm 9.5.0+
     - name: Install latest npm
       run: npm install -g npm@latest

.github/workflows/actions/test-core-clean-build/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - uses: ./.github/workflows/actions/download-archive
       with:

.github/workflows/actions/test-core-lint/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

.github/workflows/actions/test-core-screenshot/action.yml

@@ -15,7 +15,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-core-spec/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

.github/workflows/actions/test-react-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-vue-e2e/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -9,7 +9,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: actions/download-artifact@v4
       with:
         path: ./artifacts

.github/workflows/assign-issues.yml

@@ -11,8 +11,8 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
+        uses: pozil/auto-assign-issue@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0
         with:
-          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
+          assignees: brandyscarney, thetaPC, ShaneK
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/build.yml

@@ -140,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

.github/workflows/stencil-nightly.yml

@@ -150,7 +150,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng16, ng17, ng18]
+        apps: [ng16, ng17, ng18, ng19]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.6](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.4.6) (2025-03-19)
+
+
+### Bug Fixes
+
+* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([0eaee78](https://github.com/ionic-team/ionic-framework/commit/0eaee78fe1cae8f8a6cb04a01abad8c05dec0723)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254)
+
+
+
+
+
+## [8.4.5](https://github.com/ionic-team/ionic-framework/compare/v8.4.4...v8.4.5) (2025-03-13)
+
+
+### Bug Fixes
+
+* **vue:** pin Vue output target to latest release ([#30248](https://github.com/ionic-team/ionic-framework/issues/30248)) ([3799d45](https://github.com/ionic-team/ionic-framework/commit/3799d456d9461faac9a5e2c44f187329f113b3db)), closes [#30221](https://github.com/ionic-team/ionic-framework/issues/30221)
+
+
+
+
+
+## [8.4.4](https://github.com/ionic-team/ionic-framework/compare/v8.4.3...v8.4.4) (2025-03-13)
+
+
+### Bug Fixes
+
+* **alert:** change focused element and improve keyboard navigation ([#30220](https://github.com/ionic-team/ionic-framework/issues/30220)) ([4df0e0f](https://github.com/ionic-team/ionic-framework/commit/4df0e0f4c00faec33f5ddc802945bf4ad9dc53d3))
+* **capacitor:** replace deprecated platform check method ([#30195](https://github.com/ionic-team/ionic-framework/issues/30195)) ([b6b43ae](https://github.com/ionic-team/ionic-framework/commit/b6b43ae2925f8a12b35cabd43abd9d838bc9714f))
+* **capacitor:** use proper types for capacitor v7 support ([#30228](https://github.com/ionic-team/ionic-framework/issues/30228)) ([2149ba2](https://github.com/ionic-team/ionic-framework/commit/2149ba2c8d56a3a8ef4a6de89de1292f6efe3031))
+* **range:** handle unsupported values for range min and max ([#30070](https://github.com/ionic-team/ionic-framework/issues/30070)) ([3223193](https://github.com/ionic-team/ionic-framework/commit/322319397ca46bafda7ca0d2e3fb4cc554432d6a)), closes [#29667](https://github.com/ionic-team/ionic-framework/issues/29667)
+* **segment-button:** protect connectedCallback for when segment-content has not yet been created ([#30138](https://github.com/ionic-team/ionic-framework/issues/30138)) ([14b6538](https://github.com/ionic-team/ionic-framework/commit/14b6538d98303cb753d881ec6978fb98f53ed54c))
+* **select:** auto-scroll to selected item for all interfaces ([#30202](https://github.com/ionic-team/ionic-framework/issues/30202)) ([8eaeb22](https://github.com/ionic-team/ionic-framework/commit/8eaeb22e7a967100ffaadae8c8221e2e4888a3b6)), closes [#19296](https://github.com/ionic-team/ionic-framework/issues/19296)
+* **toggle:** trigger focus and blur on click ([#30234](https://github.com/ionic-team/ionic-framework/issues/30234)) ([ba8d8f4](https://github.com/ionic-team/ionic-framework/commit/ba8d8f489607537b3dac915cfc9f2c32a74b994c))
+* **vue:** update output target and properly emit events ([#30227](https://github.com/ionic-team/ionic-framework/issues/30227)) ([11554a5](https://github.com/ionic-team/ionic-framework/commit/11554a5d3590c660dbf609931dcb63cc2daf79cb)), closes [#30206](https://github.com/ionic-team/ionic-framework/issues/30206) [#30178](https://github.com/ionic-team/ionic-framework/issues/30178) [#30177](https://github.com/ionic-team/ionic-framework/issues/30177) [#30170](https://github.com/ionic-team/ionic-framework/issues/30170)
+* **vue:** update output target and resolve type issues ([#30239](https://github.com/ionic-team/ionic-framework/issues/30239)) ([6dcb143](https://github.com/ionic-team/ionic-framework/commit/6dcb143307682793ac4fd46d03efa5868a49e87d)), closes [#30179](https://github.com/ionic-team/ionic-framework/issues/30179)
+
+
+
+
+
+## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
+
+
+### Bug Fixes
+
+* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
+
+
+
+
+
+## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
+
+
+### Bug Fixes
+
+* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
+* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
+
+
+
+
+
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+
+### Bug Fixes
+
+* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
+* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
+* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
+* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
+* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 

core/CHANGELOG.md

@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.6](https://github.com/ionic-team/ionic-framework/compare/v8.4.5...v8.4.6) (2025-03-19)
+
+
+### Bug Fixes
+
+* **vue:** update output target and fix incorrect types ([#30259](https://github.com/ionic-team/ionic-framework/issues/30259)) ([0eaee78](https://github.com/ionic-team/ionic-framework/commit/0eaee78fe1cae8f8a6cb04a01abad8c05dec0723)), closes [#30254](https://github.com/ionic-team/ionic-framework/issues/30254)
+
+
+
+
+
+## [8.4.5](https://github.com/ionic-team/ionic-framework/compare/v8.4.4...v8.4.5) (2025-03-13)
+
+
+### Bug Fixes
+
+* **vue:** pin Vue output target to latest release ([#30248](https://github.com/ionic-team/ionic-framework/issues/30248)) ([3799d45](https://github.com/ionic-team/ionic-framework/commit/3799d456d9461faac9a5e2c44f187329f113b3db)), closes [#30221](https://github.com/ionic-team/ionic-framework/issues/30221)
+
+
+
+
+
+## [8.4.4](https://github.com/ionic-team/ionic-framework/compare/v8.4.3...v8.4.4) (2025-03-13)
+
+
+### Bug Fixes
+
+* **alert:** change focused element and improve keyboard navigation ([#30220](https://github.com/ionic-team/ionic-framework/issues/30220)) ([4df0e0f](https://github.com/ionic-team/ionic-framework/commit/4df0e0f4c00faec33f5ddc802945bf4ad9dc53d3))
+* **capacitor:** replace deprecated platform check method ([#30195](https://github.com/ionic-team/ionic-framework/issues/30195)) ([b6b43ae](https://github.com/ionic-team/ionic-framework/commit/b6b43ae2925f8a12b35cabd43abd9d838bc9714f))
+* **capacitor:** use proper types for capacitor v7 support ([#30228](https://github.com/ionic-team/ionic-framework/issues/30228)) ([2149ba2](https://github.com/ionic-team/ionic-framework/commit/2149ba2c8d56a3a8ef4a6de89de1292f6efe3031))
+* **range:** handle unsupported values for range min and max ([#30070](https://github.com/ionic-team/ionic-framework/issues/30070)) ([3223193](https://github.com/ionic-team/ionic-framework/commit/322319397ca46bafda7ca0d2e3fb4cc554432d6a)), closes [#29667](https://github.com/ionic-team/ionic-framework/issues/29667)
+* **segment-button:** protect connectedCallback for when segment-content has not yet been created ([#30138](https://github.com/ionic-team/ionic-framework/issues/30138)) ([14b6538](https://github.com/ionic-team/ionic-framework/commit/14b6538d98303cb753d881ec6978fb98f53ed54c))
+* **select:** auto-scroll to selected item for all interfaces ([#30202](https://github.com/ionic-team/ionic-framework/issues/30202)) ([8eaeb22](https://github.com/ionic-team/ionic-framework/commit/8eaeb22e7a967100ffaadae8c8221e2e4888a3b6)), closes [#19296](https://github.com/ionic-team/ionic-framework/issues/19296)
+* **toggle:** trigger focus and blur on click ([#30234](https://github.com/ionic-team/ionic-framework/issues/30234)) ([ba8d8f4](https://github.com/ionic-team/ionic-framework/commit/ba8d8f489607537b3dac915cfc9f2c32a74b994c))
+* **vue:** update output target and properly emit events ([#30227](https://github.com/ionic-team/ionic-framework/issues/30227)) ([11554a5](https://github.com/ionic-team/ionic-framework/commit/11554a5d3590c660dbf609931dcb63cc2daf79cb)), closes [#30206](https://github.com/ionic-team/ionic-framework/issues/30206) [#30178](https://github.com/ionic-team/ionic-framework/issues/30178) [#30177](https://github.com/ionic-team/ionic-framework/issues/30177) [#30170](https://github.com/ionic-team/ionic-framework/issues/30170)
+* **vue:** update output target and resolve type issues ([#30239](https://github.com/ionic-team/ionic-framework/issues/30239)) ([6dcb143](https://github.com/ionic-team/ionic-framework/commit/6dcb143307682793ac4fd46d03efa5868a49e87d)), closes [#30179](https://github.com/ionic-team/ionic-framework/issues/30179)
+
+
+
+
+
+## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
+
+
+### Bug Fixes
+
+* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
+* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
+
+
+
+
+
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+
+### Bug Fixes
+
+* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
+* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
+* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
+* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
+* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.4.0",
+  "version": "8.4.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -37,20 +37,20 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",
-    "@capacitor/core": "^6.0.0",
-    "@capacitor/haptics": "^6.0.0",
-    "@capacitor/keyboard": "^6.0.0",
-    "@capacitor/status-bar": "^6.0.0",
-    "@clack/prompts": "^0.7.0",
+    "@capacitor/core": "^7.0.0",
+    "@capacitor/haptics": "^7.0.0",
+    "@capacitor/keyboard": "^7.0.0",
+    "@capacitor/status-bar": "^7.0.0",
+    "@clack/prompts": "^0.10.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.46.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.8.4",
+    "@stencil/angular-output-target": "^0.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.9",
+    "@stencil/vue-output-target": "0.10.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/src/components/alert/alert.tsx

@@ -237,6 +237,18 @@ export class Alert implements ComponentInterface, OverlayInterface {
       return;
     }
 
+    /**
+     * Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button.
+     */
+    if (ev.target.classList.contains('alert-wrapper')) {
+      if (ev.key === 'Tab' && ev.shiftKey) {
+        ev.preventDefault();
+        const lastChildBtn = this.wrapperEl?.querySelector('.alert-button:last-child') as HTMLButtonElement;
+        lastChildBtn.focus();
+        return;
+      }
+    }
+
     // The only inputs we want to navigate between using arrow keys are the radios
     // ignore the keydown event if it is not on a radio button
     if (
@@ -400,7 +412,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     await this.delegateController.attachViewToDom();
 
-    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+    await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
+      /**
+       * Check if alert has only one button and no inputs.
+       * If so, then focus on the button. Otherwise, focus the alert wrapper.
+       * This will map to the default native alert behavior.
+       */
+      if (this.buttons.length === 1 && this.inputs.length === 0) {
+        const queryBtn = this.wrapperEl?.querySelector('.alert-button') as HTMLButtonElement;
+        queryBtn.focus();
+      } else {
+        this.wrapperEl?.focus();
+      }
+    });
 
     unlock();
   }
@@ -725,8 +749,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
     const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
     const mode = getIonMode(this);
     const hdrId = `alert-${overlayIndex}-hdr`;
-    const subHdrId = `alert-${overlayIndex}-sub-hdr`;
     const msgId = `alert-${overlayIndex}-msg`;
+    const subHdrId = `alert-${overlayIndex}-sub-hdr`;
     const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
 
     /**
@@ -739,12 +763,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     return (
       <Host
-        role={role}
-        aria-modal="true"
-        aria-labelledby={ariaLabelledBy}
-        aria-describedby={message !== undefined ? msgId : null}
         tabindex="-1"
-        {...(htmlAttributes as any)}
         style={{
           zIndex: `${20000 + overlayIndex}`,
         }}
@@ -761,7 +780,16 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
         <div tabindex="0" aria-hidden="true"></div>
 
-        <div class="alert-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
+        <div
+          class="alert-wrapper ion-overlay-wrapper"
+          role={role}
+          aria-modal="true"
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={message !== undefined ? msgId : null}
+          tabindex="0"
+          ref={(el) => (this.wrapperEl = el)}
+          {...(htmlAttributes as any)}
+        >
           <div class="alert-head">
             {header && (
               <h2 id={hdrId} class="alert-title">

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

@@ -16,6 +16,7 @@ const testAria = async (
   await didPresent.next();
 
   const alert = page.locator('ion-alert');
+  const alertwrapper = alert.locator('.alert-wrapper');
 
   const header = alert.locator('.alert-title');
   const subHeader = alert.locator('.alert-sub-title');
@@ -42,8 +43,8 @@ const testAria = async (
    * expect().toHaveAttribute() can't check for a null value, so grab and check
    * the values manually instead.
    */
-  const ariaLabelledBy = await alert.getAttribute('aria-labelledby');
-  const ariaDescribedBy = await alert.getAttribute('aria-describedby');
+  const ariaLabelledBy = await alertwrapper.getAttribute('aria-labelledby');
+  const ariaDescribedBy = await alertwrapper.getAttribute('aria-describedby');
 
   expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
   expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);

core/src/components/alert/test/alert-id.spec.tsx

@@ -1,7 +1,7 @@
+import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';
 
 import { Alert } from '../alert';
-import { h } from '@stencil/core';
 
 describe('alert: id', () => {
   it('alert should be assigned an incrementing id', async () => {
@@ -49,7 +49,7 @@ describe('alert: id', () => {
       template: () => <ion-alert htmlAttributes={{ id }} overlayIndex={-1}></ion-alert>,
     });
 
-    const alert = page.body.querySelector('ion-alert')!;
-    expect(alert.id).toBe(id);
+    const alertwrapper = page.body.querySelector('.alert-wrapper')!;
+    expect(alertwrapper.id).toBe(id);
   });
 });

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

@@ -19,6 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
       await page.keyboard.press(tabKey);
       await expect(alertBtns.nth(0)).toBeFocused();
 
+      await page.keyboard.press(`Shift+${tabKey}`); // this will focus the alert-wrapper
       await page.keyboard.press(`Shift+${tabKey}`);
       await expect(alertBtns.nth(2)).toBeFocused();
 
@@ -30,7 +31,7 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
       const alertFixture = new AlertFixture(page, screenshot);
 
       const alert = await alertFixture.open('#basic');
-      await expect(alert).toHaveAttribute('data-testid', 'basic-alert');
+      await expect(alert.locator('.alert-wrapper')).toHaveAttribute('data-testid', 'basic-alert');
     });
 
     test('should dismiss when async handler resolves', async ({ page }) => {

core/src/components/menu/menu.tsx

@@ -8,6 +8,7 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
 import { menuController } from '@utils/menu-controller';
 import { BACKDROP, GESTURE, getPresentedOverlay } from '@utils/overlays';
+import { isPlatform } from '@utils/platform';
 import { hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
@@ -631,6 +632,23 @@ export class Menu implements ComponentInterface, MenuI {
   private beforeAnimation(shouldOpen: boolean, role?: string) {
     assert(!this.isAnimating, '_before() should not be called while animating');
 
+    /**
+     * When the menu is presented on an Android device, TalkBack's focus rings
+     * may appear in the wrong position due to the transition (specifically
+     * `transform` styles). This occurs because the focus rings are initially
+     * displayed at the starting position of the elements before the transition
+     * begins. This workaround ensures the focus rings do not appear in the
+     * incorrect location.
+     *
+     * If this solution is applied to iOS devices, then it leads to a bug where
+     * the overlays cannot be accessed by screen readers. This is due to
+     * VoiceOver not being able to update the accessibility tree when the
+     * `aria-hidden` is removed.
+     */
+    if (isPlatform('android')) {
+      this.el.setAttribute('aria-hidden', 'true');
+    }
+
     // this places the menu into the correct location before it animates in
     // this css class doesn't actually kick off any animations
     this.el.classList.add(SHOW_MENU);
@@ -687,6 +705,17 @@ export class Menu implements ComponentInterface, MenuI {
     }
 
     if (isOpen) {
+      /**
+       * When the menu is presented on an Android device, TalkBack's focus rings
+       * may appear in the wrong position due to the transition (specifically
+       * `transform` styles). The menu is hidden from screen readers during the
+       * transition to prevent this. Once the transition is complete, the menu
+       * is shown again.
+       */
+      if (isPlatform('android')) {
+        this.el.removeAttribute('aria-hidden');
+      }
+
       // emit open event
       this.ionDidOpen.emit();
 
@@ -703,6 +732,8 @@ export class Menu implements ComponentInterface, MenuI {
       // start focus trapping
       document.addEventListener('focus', this.handleFocus, true);
     } else {
+      this.el.removeAttribute('aria-hidden');
+
       // remove css classes and unhide content from screen readers
       this.el.classList.remove(SHOW_MENU);
 

core/src/components/range/range.tsx

@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput } from '@utils/helpers';
+import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeNumber } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -109,7 +109,11 @@ export class Range implements ComponentInterface {
    */
   @Prop() min = 0;
   @Watch('min')
-  protected minChanged() {
+  protected minChanged(newValue: number) {
+    if (!isSafeNumber(newValue)) {
+      this.min = 0;
+    }
+
     if (!this.noUpdate) {
       this.updateRatio();
     }
@@ -120,7 +124,11 @@ export class Range implements ComponentInterface {
    */
   @Prop() max = 100;
   @Watch('max')
-  protected maxChanged() {
+  protected maxChanged(newValue: number) {
+    if (!isSafeNumber(newValue)) {
+      this.max = 100;
+    }
+
     if (!this.noUpdate) {
       this.updateRatio();
     }
@@ -151,6 +159,12 @@ export class Range implements ComponentInterface {
    * Specifies the value granularity.
    */
   @Prop() step = 1;
+  @Watch('step')
+  protected stepChanged(newValue: number) {
+    if (!isSafeNumber(newValue)) {
+      this.step = 1;
+    }
+  }
 
   /**
    * If `true`, tick marks are displayed based on the step value.
@@ -300,6 +314,11 @@ export class Range implements ComponentInterface {
     }
 
     this.inheritedAttributes = inheritAriaAttributes(this.el);
+    // If min, max, or step are not safe, set them to 0, 100, and 1, respectively.
+    // Each watch does this, but not before the initial load.
+    this.min = isSafeNumber(this.min) ? this.min : 0;
+    this.max = isSafeNumber(this.max) ? this.max : 100;
+    this.step = isSafeNumber(this.step) ? this.step : 1;
   }
 
   componentDidLoad() {

core/src/components/range/test/range.spec.ts

@@ -28,6 +28,25 @@ describe('Range', () => {
       });
     });
 
+    it('should handle undefined min and max values by falling back to defaults', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range id="my-custom-range">
+        <div slot="label">Range</div>
+      </ion-range>`,
+      });
+
+      const range = page.body.querySelector('ion-range')!;
+      // Here we have to cast this to any, but in its react wrapper it accepts undefined as a valid value
+      range.min = undefined as any;
+      range.max = undefined as any;
+      range.step = undefined as any;
+      await page.waitForChanges();
+      expect(range.min).toBe(0);
+      expect(range.max).toBe(100);
+      expect(range.step).toBe(1);
+    });
+
     it('should return the clamped value for a range dual knob component', () => {
       sharedRange.min = 0;
       sharedRange.max = 100;

core/src/components/segment-button/segment-button.tsx

@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers';
+import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from '@utils/helpers';
 import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -65,7 +65,41 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     this.updateState();
   }
 
-  connectedCallback() {
+  private waitForSegmentContent(ionSegment: HTMLIonSegmentElement | null, contentId: string): Promise<HTMLElement> {
+    return new Promise((resolve, reject) => {
+      let timeoutId: NodeJS.Timeout | undefined = undefined;
+      let animationFrameId: number;
+
+      const check = () => {
+        if (!ionSegment) {
+          reject(new Error(`Segment not found when looking for Segment Content`));
+          return;
+        }
+
+        const segmentView = getNextSiblingOfType<HTMLIonSegmentViewElement>(ionSegment); // Skip the text nodes
+        const segmentContent = segmentView?.querySelector(
+          `ion-segment-content[id="${contentId}"]`
+        ) as HTMLIonSegmentContentElement | null;
+        if (segmentContent && timeoutId) {
+          clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
+          cancelAnimationFrame(animationFrameId);
+          resolve(segmentContent);
+        } else {
+          animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
+        }
+      };
+
+      check();
+
+      // Set a timeout to reject the promise
+      timeoutId = setTimeout(() => {
+        cancelAnimationFrame(animationFrameId);
+        reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
+      }, 1000);
+    });
+  }
+
+  async connectedCallback() {
     const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
     if (segmentEl) {
       this.updateState();
@@ -76,12 +110,13 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     // Return if there is no contentId defined
     if (!this.contentId) return;
 
-    // Attempt to find the Segment Content by its contentId
-    const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
-
-    // If no associated Segment Content exists, log an error and return
-    if (!segmentContent) {
-      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+    let segmentContent;
+    try {
+      // Attempt to find the Segment Content by its contentId
+      segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
+    } catch (error) {
+      // If no associated Segment Content exists, log an error and return
+      console.error('Segment Button: ', (error as Error).message);
       return;
     }
 

core/src/components/segment-view/test/basic/index.html

@@ -123,6 +123,8 @@
         <button class="expand" onClick="changeSegmentContent()">Change Segment Content</button>
 
         <button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button>
+
+        <button class="expand" onClick="addSegmentButtonAndContent()">Add New Segment Button & Content</button>
       </ion-content>
 
       <ion-footer>
@@ -158,6 +160,34 @@
             segment.value = undefined;
           });
         }
+
+        async function addSegmentButtonAndContent() {
+          const segment = document.querySelector('ion-segment');
+          const segmentView = document.querySelector('ion-segment-view');
+
+          const newButton = document.createElement('ion-segment-button');
+          const newId = `new-${Date.now()}`;
+          newButton.setAttribute('content-id', newId);
+          newButton.setAttribute('value', newId);
+          newButton.innerHTML = '<ion-label>New Button</ion-label>';
+
+          segment.appendChild(newButton);
+
+          setTimeout(() => {
+            // Timeout to test waitForSegmentContent() in segment-button
+            const newContent = document.createElement('ion-segment-content');
+            newContent.setAttribute('id', newId);
+            newContent.innerHTML = 'New Content';
+
+            segmentView.appendChild(newContent);
+
+            // Necessary timeout to ensure the value is set after the content is added.
+            // Otherwise, the transition is unsuccessful and the content is not shown.
+            setTimeout(() => {
+              segment.setAttribute('value', newId);
+            }, 200);
+          }, 200);
+        }
       </script>
     </ion-app>
   </body>

core/src/components/segment/segment.tsx

@@ -188,6 +188,8 @@ export class Segment implements ComponentInterface {
   }
 
   async componentDidLoad() {
+    this.segmentViewEl = this.getSegmentView();
+
     this.setCheckedClasses();
 
     /**

core/src/components/select-modal/select-modal.ios.scss

@@ -1 +1,24 @@
 @import "./select-modal";
+@import "../item/item.ios.vars";
+@import "../radio/radio.ios.vars";
+
+ion-item {
+  --inner-padding-end: 0;
+}
+
+/**
+ * The bottom border of the item should only be displayed
+ * under the text and not the radio icon.
+ */
+ion-radio::after {
+  @include position(null, null, 0, calc($radio-ios-icon-width + $item-ios-padding-start));
+  position: absolute;
+
+  width: calc(100% - $radio-ios-icon-width - $item-ios-padding-start); /* Adjust width based on the shift */
+
+  border-width: #{0px 0px $item-ios-border-bottom-width 0px};
+  border-style: #{$item-ios-border-bottom-style};
+  border-color: #{$item-ios-border-bottom-color};
+
+  content: "";
+}

core/src/components/select-modal/select-modal.tsx

@@ -81,6 +81,7 @@ export class SelectModal implements ComponentInterface {
       <ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
         {this.options.map((option) => (
           <ion-item
+            lines="none"
             class={{
               // TODO FW-4784
               'item-radio-checked': option.value === checked,

core/src/components/select/select.tsx

@@ -310,19 +310,10 @@ export class Select implements ComponentInterface {
     }
     this.isExpanded = true;
     const overlay = (this.overlay = await this.createOverlay(event));
-    overlay.onDidDismiss().then(() => {
-      this.overlay = undefined;
-      this.isExpanded = false;
-      this.ionDismiss.emit();
-      this.setFocus();
-    });
 
-    await overlay.present();
-
-    // focus selected option for popovers and modals
-    if (this.interface === 'popover' || this.interface === 'modal') {
+    // Add logic to scroll selected item into view before presenting
+    const scrollSelectedIntoView = () => {
       const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
-
       if (indexOfSelected > -1) {
         const selectedItem = overlay.querySelector<HTMLElement>(
           `.select-interface-option:nth-child(${indexOfSelected + 1})`
@@ -345,6 +336,7 @@ export class Select implements ComponentInterface {
             | HTMLIonCheckboxElement
             | null;
           if (interactiveEl) {
+            selectedItem.scrollIntoView({ block: 'nearest' });
             // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
             // and removing `ion-focused` style
             interactiveEl.setFocus();
@@ -372,8 +364,40 @@ export class Select implements ComponentInterface {
           focusVisibleElement(firstEnabledOption.closest('ion-item')!);
         }
       }
+    };
+
+    // For modals and popovers, we can scroll before they're visible
+    if (this.interface === 'modal') {
+      overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
+    } else if (this.interface === 'popover') {
+      overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
+    } else {
+      /**
+       * For alerts and action sheets, we need to wait a frame after willPresent
+       * because these overlays don't have their content in the DOM immediately
+       * when willPresent fires. By waiting a frame, we ensure the content is
+       * rendered and can be properly scrolled into view.
+       */
+      const scrollAfterRender = () => {
+        requestAnimationFrame(() => {
+          scrollSelectedIntoView();
+        });
+      };
+      if (this.interface === 'alert') {
+        overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
+      } else if (this.interface === 'action-sheet') {
+        overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
+      }
     }
 
+    overlay.onDidDismiss().then(() => {
+      this.overlay = undefined;
+      this.isExpanded = false;
+      this.ionDismiss.emit();
+      this.setFocus();
+    });
+
+    await overlay.present();
     return overlay;
   }
 

core/src/components/select/test/basic/index.html

@@ -61,6 +61,169 @@
           </ion-item>
         </ion-list>
 
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Single Value - Overflowing Options</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-select id="alert-select-scroll-to-selected" label="Alert" interface="alert" value="watermelon">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select
+              id="action-sheet-select-scroll-to-selected"
+              label="Action Sheet"
+              interface="action-sheet"
+              value="watermelon"
+            >
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select id="popover-select-scroll-to-selected" label="Popover" interface="popover" value="watermelon">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select id="modal-select-scroll-to-selected" label="Modal" interface="modal" value="watermelon">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
         <ion-list>
           <ion-list-header>
             <ion-label>Multiple Value Select</ion-label>

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

@@ -8,7 +8,7 @@ import type { E2ELocator } from '@utils/test/playwright';
  * does not. The overlay rendering is already tested in the respective
  * test files.
  */
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('select: basic'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/select/test/basic', config);
@@ -24,6 +24,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(page.locator('ion-alert')).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+        await page.click('#alert-select-scroll-to-selected');
+        await ionAlertDidPresent.next();
+
+        const alert = page.locator('ion-alert');
+        await expect(alert).toHaveScreenshot(screenshot(`select-basic-alert-scroll-to-selected`));
+      });
     });
 
     test.describe('select: action sheet', () => {
@@ -36,6 +46,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(page.locator('ion-action-sheet')).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+        await page.click('#action-sheet-select-scroll-to-selected');
+        await ionActionSheetDidPresent.next();
+
+        const actionSheet = page.locator('ion-action-sheet');
+        await expect(actionSheet).toHaveScreenshot(screenshot(`select-basic-action-sheet-scroll-to-selected`));
+      });
     });
 
     test.describe('select: popover', () => {
@@ -57,6 +77,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(popover).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+        await page.click('#popover-select-scroll-to-selected');
+        await ionPopoverDidPresent.next();
+
+        const popover = page.locator('ion-popover');
+        await expect(popover).toHaveScreenshot(screenshot(`select-basic-popover-scroll-to-selected`));
+      });
     });
 
     test.describe('select: modal', () => {
@@ -75,6 +105,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(modal).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#modal-select-scroll-to-selected');
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        await expect(modal).toHaveScreenshot(screenshot(`select-basic-modal-scroll-to-selected`));
+      });
     });
   });
 });