chore: use proper file

chore: build
feat(react, vue, angular): use tabs without router (#29794 )
2026-03-13 10:22:08 +08:00 · 2024-09-05 12:01:46 -04:00 · 2024-09-05 11:51:26 -04:00 · 2024-09-05 11:33:37 -04:00
2552 changed files with 16378 additions and 45650 deletions
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/build-angular/action.yml
+++ b/.github/workflows/actions/build-angular/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.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: 20.x
+        node-version: 18.x

    - name: Install Dependencies
      run: npm ci
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -11,7 +11,7 @@ runs:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - name: Install Dependencies
      run: npm install
      working-directory: ./core
--- a/.github/workflows/actions/build-react-router/action.yml
+++ b/.github/workflows/actions/build-react-router/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/build-react/action.yml
+++ b/.github/workflows/actions/build-react/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/build-vue-router/action.yml
+++ b/.github/workflows/actions/build-vue-router/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/build-vue/action.yml
+++ b/.github/workflows/actions/build-vue/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/publish-npm/action.yml
+++ b/.github/workflows/actions/publish-npm/action.yml
@@ -21,7 +21,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    # Provenance requires npm 9.5.0+
    - name: Install latest npm
      run: npm install -g npm@latest
--- a/.github/workflows/actions/test-core-clean-build/action.yml
+++ b/.github/workflows/actions/test-core-clean-build/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x

    - uses: ./.github/workflows/actions/download-archive
      with:
--- a/.github/workflows/actions/test-core-lint/action.yml
+++ b/.github/workflows/actions/test-core-lint/action.yml
@@ -5,7 +5,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - name: Install Dependencies
      run: npm ci
      working-directory: ./core
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -15,7 +15,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/test-core-spec/action.yml
+++ b/.github/workflows/actions/test-core-spec/action.yml
@@ -8,7 +8,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - name: Install Dependencies
      run: npm ci
      working-directory: ./core
--- a/.github/workflows/actions/test-react-e2e/action.yml
+++ b/.github/workflows/actions/test-react-e2e/action.yml
@@ -8,7 +8,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/test-react-router-e2e/action.yml
+++ b/.github/workflows/actions/test-react-router-e2e/action.yml
@@ -8,7 +8,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -8,7 +8,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: ./.github/workflows/actions/download-archive
      with:
        name: ionic-core
--- a/.github/workflows/actions/update-reference-screenshots/action.yml
+++ b/.github/workflows/actions/update-reference-screenshots/action.yml
@@ -9,7 +9,7 @@ runs:
  steps:
    - uses: actions/setup-node@v4
      with:
-        node-version: 20.x
+        node-version: 18.x
    - uses: actions/download-artifact@v4
      with:
        path: ./artifacts
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -11,7 +11,7 @@ jobs:
      issues: write
    steps:
      - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@d4b175c7e47cd6d5067f5aa83c9f21b93f8c723e # v2.1.1
+        uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
        with:
          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
          numOfAssignee: 1
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -140,7 +140,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        apps: [ng16, ng17, ng18, ng19]
+        apps: [ng16, ng17, ng18]
    needs: [build-angular, build-angular-server]
    runs-on: ubuntu-latest
    steps:
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -150,7 +150,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        apps: [ng16, ng17, ng18, ng19]
+        apps: [ng16, ng17, ng18]
    needs: [build-angular, build-angular-server]
    runs-on: ubuntu-latest
    steps:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,119 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [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)
-
-
-### Bug Fixes
-
-* **alert:** use correct heading structure for subHeader when header exists ([#29964](https://github.com/ionic-team/ionic-framework/issues/29964)) ([0fdcb32](https://github.com/ionic-team/ionic-framework/commit/0fdcb32ce0f99b284b314f79f7d0b071bc37faec))
-
-
-### Features
-
-* **menu:** pass role to ionWillClose and ionDidClose events ([#29954](https://github.com/ionic-team/ionic-framework/issues/29954)) ([ee2fa19](https://github.com/ionic-team/ionic-framework/commit/ee2fa19a1e9f09d492c7c08340d95ba6a56ebb2b))
-* **segment-view:** adds support for new `ion-segment-view` component ([#29969](https://github.com/ionic-team/ionic-framework/issues/29969)) ([89508fb](https://github.com/ionic-team/ionic-framework/commit/89508fb89172900b1d11cc3fc18883f57a7fbab6))
-* **select:** add `modal` as interface ([#29972](https://github.com/ionic-team/ionic-framework/issues/29972)) ([3628ea8](https://github.com/ionic-team/ionic-framework/commit/3628ea875a66a717783de5e0a4df440872339040))
-
-
-
-
-
-## [8.3.4](https://github.com/ionic-team/ionic-framework/compare/v8.3.3...v8.3.4) (2024-10-30)
-
-
-### Bug Fixes
-
-* **angular:** add missing 'compareWith' input to standalone ion-radio-group ([#29870](https://github.com/ionic-team/ionic-framework/issues/29870)) ([47ba703](https://github.com/ionic-team/ionic-framework/commit/47ba703a57d1ca506f943f6b790d0bf7583d79cb)), closes [#29826](https://github.com/ionic-team/ionic-framework/issues/29826)
-* **backdrop:** remove tabindex for improved accessibility ([#29956](https://github.com/ionic-team/ionic-framework/issues/29956)) ([7294e96](https://github.com/ionic-team/ionic-framework/commit/7294e969bb913692eaf28e54860614f445132713)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
-* **input, textarea:** ensure screen readers announce helper and error text when focused ([#29958](https://github.com/ionic-team/ionic-framework/issues/29958)) ([5a73145](https://github.com/ionic-team/ionic-framework/commit/5a7314553a8def87bd19275640c92dd72a6ef1a4))
-* **overlay:** hide from screen readers while animating ([#29951](https://github.com/ionic-team/ionic-framework/issues/29951)) ([cb60073](https://github.com/ionic-team/ionic-framework/commit/cb6007363a8d42b5f126945427c2bfc3d7209c21)), closes [#29857](https://github.com/ionic-team/ionic-framework/issues/29857)
-* **overlays:** do not hide root when toast appears ([#29962](https://github.com/ionic-team/ionic-framework/issues/29962)) ([322d7c9](https://github.com/ionic-team/ionic-framework/commit/322d7c98cf6613df0b0db3f119e3f892e6a17e7b)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
-* **overlays:** hide the focus trap div from screen readers ([#29970](https://github.com/ionic-team/ionic-framework/issues/29970)) ([c3b58f1](https://github.com/ionic-team/ionic-framework/commit/c3b58f1620bcb74db43e3983ef570b7b982abd83)), closes [#29858](https://github.com/ionic-team/ionic-framework/issues/29858)
-* **vue:** incorrect view rendered when using router.go(-n) ([#29877](https://github.com/ionic-team/ionic-framework/issues/29877)) ([e32fbe0](https://github.com/ionic-team/ionic-framework/commit/e32fbe02102fe80db29f73c26496a40852032354)), closes [#28201](https://github.com/ionic-team/ionic-framework/issues/28201) [#28201](https://github.com/ionic-team/ionic-framework/issues/28201) [#29847](https://github.com/ionic-team/ionic-framework/issues/29847)
-
-
-
-
-
-## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
-
-
-### Bug Fixes
-
-* **tabs, tab-bar:** use standalone tab bar in Vue, React ([#29940](https://github.com/ionic-team/ionic-framework/issues/29940)) ([b7b383b](https://github.com/ionic-team/ionic-framework/commit/b7b383bee080b72de2e6307ff9a9a051314c69ed)), closes [#29885](https://github.com/ionic-team/ionic-framework/issues/29885) [#29924](https://github.com/ionic-team/ionic-framework/issues/29924)
-
-
-
-
-
-## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
-
-
-### Bug Fixes
-
-* **segment:** prevent flickering for scrollable on iOS ([#29884](https://github.com/ionic-team/ionic-framework/issues/29884)) ([078ed0b](https://github.com/ionic-team/ionic-framework/commit/078ed0b86a0d8e9f8457481cb739ea214195adce)), closes [#29523](https://github.com/ionic-team/ionic-framework/issues/29523)
-
-
-
-
-
-## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
-
-
-### Bug Fixes
-
-* **checkbox:** align checkbox properly in item using start alignment ([#29850](https://github.com/ionic-team/ionic-framework/issues/29850)) ([88b7013](https://github.com/ionic-team/ionic-framework/commit/88b701363c1865e81d7d136acab4b9fef3b1ab7a)), closes [#29837](https://github.com/ionic-team/ionic-framework/issues/29837)
-* **datetime:** display today's date and time when value is an empty string ([#29839](https://github.com/ionic-team/ionic-framework/issues/29839)) ([f1d50c0](https://github.com/ionic-team/ionic-framework/commit/f1d50c0f645b3adf51426c24a1da0bbd1223f1d5)), closes [#29669](https://github.com/ionic-team/ionic-framework/issues/29669)
-* **range:** disable scroll when range is being dragged ([#29241](https://github.com/ionic-team/ionic-framework/issues/29241)) ([35b1a45](https://github.com/ionic-team/ionic-framework/commit/35b1a459294657b609f683457e71babd4673a3a8))
-* **react, vue:** add default value for navManager on tabs ([#29865](https://github.com/ionic-team/ionic-framework/issues/29865)) ([df39cea](https://github.com/ionic-team/ionic-framework/commit/df39ceac6db6511518aed4766e6a59aa24fb53ec))
-* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([f64458d](https://github.com/ionic-team/ionic-framework/commit/f64458dc63a05acb955aa1f2ec3755c738466cf4)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
-
-
-
-
-
-# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
-
-
-### Features
-
-* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
-* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
-* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
-* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
-
-
-
-
-
-## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
-
-
-### Bug Fixes
-
-* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
-* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
-
-
-
-
-
 ## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)


--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,113 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

-## [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)
-
-
-### Bug Fixes
-
-* **alert:** use correct heading structure for subHeader when header exists ([#29964](https://github.com/ionic-team/ionic-framework/issues/29964)) ([0fdcb32](https://github.com/ionic-team/ionic-framework/commit/0fdcb32ce0f99b284b314f79f7d0b071bc37faec))
-
-
-### Features
-
-* **menu:** pass role to ionWillClose and ionDidClose events ([#29954](https://github.com/ionic-team/ionic-framework/issues/29954)) ([ee2fa19](https://github.com/ionic-team/ionic-framework/commit/ee2fa19a1e9f09d492c7c08340d95ba6a56ebb2b))
-* **segment-view:** adds support for new `ion-segment-view` component ([#29969](https://github.com/ionic-team/ionic-framework/issues/29969)) ([89508fb](https://github.com/ionic-team/ionic-framework/commit/89508fb89172900b1d11cc3fc18883f57a7fbab6))
-* **select:** add `modal` as interface ([#29972](https://github.com/ionic-team/ionic-framework/issues/29972)) ([3628ea8](https://github.com/ionic-team/ionic-framework/commit/3628ea875a66a717783de5e0a4df440872339040))
-
-
-
-
-
-## [8.3.4](https://github.com/ionic-team/ionic-framework/compare/v8.3.3...v8.3.4) (2024-10-30)
-
-
-### Bug Fixes
-
-* **backdrop:** remove tabindex for improved accessibility ([#29956](https://github.com/ionic-team/ionic-framework/issues/29956)) ([7294e96](https://github.com/ionic-team/ionic-framework/commit/7294e969bb913692eaf28e54860614f445132713)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
-* **input, textarea:** ensure screen readers announce helper and error text when focused ([#29958](https://github.com/ionic-team/ionic-framework/issues/29958)) ([5a73145](https://github.com/ionic-team/ionic-framework/commit/5a7314553a8def87bd19275640c92dd72a6ef1a4))
-* **overlay:** hide from screen readers while animating ([#29951](https://github.com/ionic-team/ionic-framework/issues/29951)) ([cb60073](https://github.com/ionic-team/ionic-framework/commit/cb6007363a8d42b5f126945427c2bfc3d7209c21)), closes [#29857](https://github.com/ionic-team/ionic-framework/issues/29857)
-* **overlays:** do not hide root when toast appears ([#29962](https://github.com/ionic-team/ionic-framework/issues/29962)) ([322d7c9](https://github.com/ionic-team/ionic-framework/commit/322d7c98cf6613df0b0db3f119e3f892e6a17e7b)), closes [#29773](https://github.com/ionic-team/ionic-framework/issues/29773)
-* **overlays:** hide the focus trap div from screen readers ([#29970](https://github.com/ionic-team/ionic-framework/issues/29970)) ([c3b58f1](https://github.com/ionic-team/ionic-framework/commit/c3b58f1620bcb74db43e3983ef570b7b982abd83)), closes [#29858](https://github.com/ionic-team/ionic-framework/issues/29858)
-
-
-
-
-
-## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
-
-**Note:** Version bump only for package @ionic/core
-
-
-
-
-
-## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
-
-
-### Bug Fixes
-
-* **segment:** prevent flickering for scrollable on iOS ([#29884](https://github.com/ionic-team/ionic-framework/issues/29884)) ([078ed0b](https://github.com/ionic-team/ionic-framework/commit/078ed0b86a0d8e9f8457481cb739ea214195adce)), closes [#29523](https://github.com/ionic-team/ionic-framework/issues/29523)
-
-
-
-
-
-## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
-
-
-### Bug Fixes
-
-* **checkbox:** align checkbox properly in item using start alignment ([#29850](https://github.com/ionic-team/ionic-framework/issues/29850)) ([88b7013](https://github.com/ionic-team/ionic-framework/commit/88b701363c1865e81d7d136acab4b9fef3b1ab7a)), closes [#29837](https://github.com/ionic-team/ionic-framework/issues/29837)
-* **datetime:** display today's date and time when value is an empty string ([#29839](https://github.com/ionic-team/ionic-framework/issues/29839)) ([f1d50c0](https://github.com/ionic-team/ionic-framework/commit/f1d50c0f645b3adf51426c24a1da0bbd1223f1d5)), closes [#29669](https://github.com/ionic-team/ionic-framework/issues/29669)
-* **range:** disable scroll when range is being dragged ([#29241](https://github.com/ionic-team/ionic-framework/issues/29241)) ([35b1a45](https://github.com/ionic-team/ionic-framework/commit/35b1a459294657b609f683457e71babd4673a3a8))
-* **react:** revert react output target version ([#29869](https://github.com/ionic-team/ionic-framework/issues/29869)) ([f64458d](https://github.com/ionic-team/ionic-framework/commit/f64458dc63a05acb955aa1f2ec3755c738466cf4)), closes [ionic-team/stencil-ds-output-targets#476](https://github.com/ionic-team/stencil-ds-output-targets/issues/476) [ionic-team/stencil-ds-output-targets#475](https://github.com/ionic-team/stencil-ds-output-targets/issues/475) [#29848](https://github.com/ionic-team/ionic-framework/issues/29848)
-
-
-
-
-
-# [8.3.0](https://github.com/ionic-team/ionic-framework/compare/v8.2.8...v8.3.0) (2024-09-05)
-
-
-### Features
-
-* **checkbox:** display as block when justify or alignment properties are defined ([#29783](https://github.com/ionic-team/ionic-framework/issues/29783)) ([4ccd15e](https://github.com/ionic-team/ionic-framework/commit/4ccd15e47ad4ec7cb59d2694c5738eab1bb265ff))
-* **radio:** display as block when justify or alignment properties are defined ([#29801](https://github.com/ionic-team/ionic-framework/issues/29801)) ([18b02b3](https://github.com/ionic-team/ionic-framework/commit/18b02b3574f54a2f377f5bfe4e074bf015418dd3))
-* **react, vue, angular:** use tabs without router ([#29794](https://github.com/ionic-team/ionic-framework/issues/29794)) ([867066b](https://github.com/ionic-team/ionic-framework/commit/867066b4eba369de025f3c7c8ef33e7089cdf3bc)), closes [#25184](https://github.com/ionic-team/ionic-framework/issues/25184)
-* **toggle:** display as block when justify or alignment properties are defined ([#29802](https://github.com/ionic-team/ionic-framework/issues/29802)) ([0332c8c](https://github.com/ionic-team/ionic-framework/commit/0332c8c6ceb612840e73f789d5c5b66f05cb53d4))
-
-
-
-
-
-## [8.2.8](https://github.com/ionic-team/ionic-framework/compare/v8.2.7...v8.2.8) (2024-09-05)
-
-
-### Bug Fixes
-
-* **range:** emit correct value when knob is at start of bar ([#29820](https://github.com/ionic-team/ionic-framework/issues/29820)) ([6a3d7c7](https://github.com/ionic-team/ionic-framework/commit/6a3d7c7247f74e21a8377676daf228822f879b26)), closes [#29792](https://github.com/ionic-team/ionic-framework/issues/29792)
-* **react:** intellisense works with IntelliJ ([#29782](https://github.com/ionic-team/ionic-framework/issues/29782)) ([bacded5](https://github.com/ionic-team/ionic-framework/commit/bacded500b826df98d3ca5322c87f50f643c4692)), closes [#29755](https://github.com/ionic-team/ionic-framework/issues/29755)
-
-
-
-
-
 ## [8.2.7](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.7) (2024-08-13)


--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.46.1
+FROM mcr.microsoft.com/playwright:v1.46.0

 # Set the working directory
 WORKDIR /ionic
--- a/core/api.txt
+++ b/core/api.txt
@@ -18,7 +18,6 @@ ion-accordion-group,prop,expand,"compact" | "inset",'compact',false,false
 ion-accordion-group,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion-group,prop,multiple,boolean | undefined,undefined,false,false
 ion-accordion-group,prop,readonly,boolean,false,false,false
-ion-accordion-group,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-accordion-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-accordion-group,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-accordion-group,event,ionChange,AccordionGroupChangeEventDetail<any>,true
@@ -182,7 +181,6 @@ ion-alert,css-prop,--width,md
 ion-app,none
 ion-app,prop,mode,"ios" | "md",undefined,false,false
 ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>

 ion-avatar,shadow
 ion-avatar,prop,mode,"ios" | "md",undefined,false,false
@@ -313,12 +311,10 @@ ion-backdrop,event,ionBackdropTap,void,true

 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-badge,prop,hintPosition,"bottom-right" | "top-right",'top-right',false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
 ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
 ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-badge,prop,useAsHint,boolean,false,false,false
 ion-badge,css-prop,--background,ionic
 ion-badge,css-prop,--background,ios
 ion-badge,css-prop,--background,md
@@ -530,12 +526,12 @@ ion-card-title,css-prop,--color,ios
 ion-card-title,css-prop,--color,md

 ion-checkbox,shadow
-ion-checkbox,prop,alignment,"center" | "start" | undefined,undefined,false,false
+ion-checkbox,prop,alignment,"center" | "start",'center',false,false
 ion-checkbox,prop,checked,boolean,false,false,false
 ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
-ion-checkbox,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
@@ -888,7 +884,7 @@ ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,fa

 ion-input,scoped
 ion-input,prop,autocapitalize,string,'off',false,false
-ion-input,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
+ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
@@ -1291,15 +1287,15 @@ ion-menu,prop,side,"end" | "start",'start',false,true
 ion-menu,prop,swipeGesture,boolean,true,false,false
 ion-menu,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-menu,prop,type,"overlay" | "push" | "reveal" | undefined,undefined,false,false
-ion-menu,method,close,close(animated?: boolean, role?: string) => Promise<boolean>
+ion-menu,method,close,close(animated?: boolean) => Promise<boolean>
 ion-menu,method,isActive,isActive() => Promise<boolean>
 ion-menu,method,isOpen,isOpen() => Promise<boolean>
 ion-menu,method,open,open(animated?: boolean) => Promise<boolean>
-ion-menu,method,setOpen,setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>
+ion-menu,method,setOpen,setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean>
 ion-menu,method,toggle,toggle(animated?: boolean) => Promise<boolean>
-ion-menu,event,ionDidClose,MenuCloseEventDetail,true
+ion-menu,event,ionDidClose,void,true
 ion-menu,event,ionDidOpen,void,true
-ion-menu,event,ionWillClose,MenuCloseEventDetail,true
+ion-menu,event,ionWillClose,void,true
 ion-menu,event,ionWillOpen,void,true
 ion-menu,css-prop,--background,ionic
 ion-menu,css-prop,--background,ios
@@ -1399,7 +1395,6 @@ ion-modal,prop,keyboardClose,boolean,true,false,false
 ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
-ion-modal,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
 ion-modal,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
@@ -1663,7 +1658,6 @@ ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
-ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
 ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
@@ -1678,10 +1672,10 @@ ion-progress-bar,part,stream
 ion-progress-bar,part,track

 ion-radio,shadow
-ion-radio,prop,alignment,"center" | "start" | undefined,undefined,false,false
+ion-radio,prop,alignment,"center" | "start",'center',false,false
 ion-radio,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-radio,prop,disabled,boolean,false,false,false
-ion-radio,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
@@ -1872,7 +1866,7 @@ ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocapitalize,string,'off',false,false
-ion-searchbar,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
+ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
@@ -1920,8 +1914,6 @@ ion-searchbar,css-prop,--clear-button-color,md
 ion-searchbar,css-prop,--color,ionic
 ion-searchbar,css-prop,--color,ios
 ion-searchbar,css-prop,--color,md
-ion-searchbar,css-prop,--focus-ring-color,ionic
-ion-searchbar,css-prop,--focus-ring-width,ionic
 ion-searchbar,css-prop,--icon-color,ionic
 ion-searchbar,css-prop,--icon-color,ios
 ion-searchbar,css-prop,--icon-color,md
@@ -1953,7 +1945,6 @@ ion-segment,css-prop,--background,ios
 ion-segment,css-prop,--background,md

 ion-segment-button,shadow
-ion-segment-button,prop,contentId,string | undefined,undefined,false,true
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
@@ -1966,12 +1957,16 @@ ion-segment-button,css-prop,--background,md
 ion-segment-button,css-prop,--background-checked,ionic
 ion-segment-button,css-prop,--background-checked,ios
 ion-segment-button,css-prop,--background-checked,md
+ion-segment-button,css-prop,--background-focused,ionic
 ion-segment-button,css-prop,--background-focused,ios
 ion-segment-button,css-prop,--background-focused,md
+ion-segment-button,css-prop,--background-focused-opacity,ionic
 ion-segment-button,css-prop,--background-focused-opacity,ios
 ion-segment-button,css-prop,--background-focused-opacity,md
+ion-segment-button,css-prop,--background-hover,ionic
 ion-segment-button,css-prop,--background-hover,ios
 ion-segment-button,css-prop,--background-hover,md
+ion-segment-button,css-prop,--background-hover-opacity,ionic
 ion-segment-button,css-prop,--background-hover-opacity,ios
 ion-segment-button,css-prop,--background-hover-opacity,md
 ion-segment-button,css-prop,--border-color,ionic
@@ -1992,9 +1987,10 @@ ion-segment-button,css-prop,--color,md
 ion-segment-button,css-prop,--color-checked,ionic
 ion-segment-button,css-prop,--color-checked,ios
 ion-segment-button,css-prop,--color-checked,md
-ion-segment-button,css-prop,--color-disabled,ionic
+ion-segment-button,css-prop,--color-focused,ionic
 ion-segment-button,css-prop,--color-focused,ios
 ion-segment-button,css-prop,--color-focused,md
+ion-segment-button,css-prop,--color-hover,ionic
 ion-segment-button,css-prop,--color-hover,ios
 ion-segment-button,css-prop,--color-hover,md
 ion-segment-button,css-prop,--indicator-box-shadow,ionic
@@ -2043,12 +2039,6 @@ ion-segment-button,part,indicator
 ion-segment-button,part,indicator-background
 ion-segment-button,part,native

-ion-segment-content,shadow
-
-ion-segment-view,shadow
-ion-segment-view,prop,disabled,boolean,false,false,false
-ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
-
 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -2056,9 +2046,9 @@ ion-select,prop,compareWith,((currentValue: any, compareValue: any) => boolean)
 ion-select,prop,disabled,boolean,false,false,false
 ion-select,prop,expandedIcon,string | undefined,undefined,false,false
 ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
-ion-select,prop,interface,"action-sheet" | "alert" | "modal" | "popover",'alert',false,false
+ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
 ion-select,prop,interfaceOptions,any,{},false,false
-ion-select,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-select,prop,label,string | undefined,undefined,false,false
 ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false
 ion-select,prop,mode,"ios" | "md",undefined,false,false
@@ -2067,8 +2057,7 @@ ion-select,prop,name,string,this.inputId,false,false
 ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
-ion-select,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-select,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
+ion-select,prop,shape,"round" | undefined,undefined,false,false
 ion-select,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-select,prop,toggleIcon,string | undefined,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
@@ -2132,11 +2121,6 @@ ion-select,part,label
 ion-select,part,placeholder
 ion-select,part,text

-ion-select-modal,scoped
-ion-select-modal,prop,header,string | undefined,undefined,false,false
-ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
-ion-select-modal,prop,options,SelectModalOption[],[],false,false
-
 ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
 ion-select-option,prop,mode,"ios" | "md",undefined,false,false
@@ -2183,14 +2167,6 @@ ion-split-pane,css-prop,--side-width,ionic
 ion-split-pane,css-prop,--side-width,ios
 ion-split-pane,css-prop,--side-width,md

-ion-status-hint,shadow
-ion-status-hint,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-status-hint,prop,mode,"ios" | "md",undefined,false,false
-ion-status-hint,prop,position,"bottom-right" | "static" | "top-right",'static',false,false
-ion-status-hint,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
-ion-status-hint,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false
-ion-status-hint,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-
 ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-tab,prop,mode,"ios" | "md",undefined,false,false
@@ -2200,10 +2176,8 @@ ion-tab,method,setActive,setActive() => Promise<void>

 ion-tab-bar,shadow
 ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-tab-bar,prop,expand,"compact" | "full",'full',false,false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
-ion-tab-bar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-tab-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
 ion-tab-bar,css-prop,--background,ionic
@@ -2224,7 +2198,6 @@ ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-star
 ion-tab-button,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-button,prop,rel,string | undefined,undefined,false,false
 ion-tab-button,prop,selected,boolean,false,false,false
-ion-tab-button,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
 ion-tab-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
@@ -2403,7 +2376,6 @@ ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,fals
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
 ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
-ion-toast,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-toast,prop,swipeGesture,"vertical" | undefined,undefined,false,false
 ion-toast,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toast,prop,translucent,boolean,false,false,false
@@ -2479,12 +2451,12 @@ ion-toast,part,icon
 ion-toast,part,message

 ion-toggle,shadow
-ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false
+ion-toggle,prop,alignment,"center" | "start",'center',false,false
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
-ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
+ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.4.1",
+  "version": "8.2.7",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -32,24 +32,24 @@
  ],
  "dependencies": {
    "@phosphor-icons/core": "^2.1.1",
-    "@stencil/core": "4.20.0",
+    "@stencil/core": "^4.19.2",
    "ionicons": "^7.2.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
-    "@axe-core/playwright": "^4.10.0",
+    "@axe-core/playwright": "^4.9.1",
    "@capacitor/core": "^6.0.0",
    "@capacitor/haptics": "^6.0.0",
    "@capacitor/keyboard": "^6.0.0",
    "@capacitor/status-bar": "^6.0.0",
-    "@clack/prompts": "^0.9.0",
+    "@clack/prompts": "^0.7.0",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.46.0",
    "@rollup/plugin-node-resolve": "^8.4.0",
    "@rollup/plugin-virtual": "^2.0.3",
    "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "0.5.3",
+    "@stencil/react-output-target": "^0.6.0",
    "@stencil/sass": "^3.0.9",
    "@stencil/vue-output-target": "^0.8.9",
    "@types/jest": "^29.5.6",
@@ -66,21 +66,20 @@
    "fs-extra": "^9.0.1",
    "jest": "^29.7.0",
    "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.1.2",
    "prettier": "^2.8.8",
    "rollup": "^2.26.4",
    "sass": "^1.33.0",
    "serve": "^14.0.1",
-    "style-dictionary": "^4.1.3",
+    "style-dictionary": "^3.9.2",
    "stylelint": "^13.13.1",
    "stylelint-order": "^4.1.0"
  },
  "scripts": {
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
    "build.css": "npm run css.sass && npm run css.minify",
    "build.debug": "npm run clean && stencil build --debug",
    "build.docs.json": "stencil build --docs-json dist/docs.json",
-    "build.tokens": "npx build.tokens --config scripts/tokens/index.js && npm run prettier.tokens",
+    "build.tokens": "node ./scripts/tokens/index.js && npm run lint.fix && npm run prettier.tokens",
    "clean": "node scripts/clean.js",
    "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
    "css.sass": "sass --embed-sources --style compressed src/css:./css",
--- a/core/scripts/testing/scripts.js
+++ b/core/scripts/testing/scripts.js
@@ -47,11 +47,6 @@
      linkTag.setAttribute('href', '/css/ionic/bundle.ionic.css');
      document.head.appendChild(linkTag);
    }
-
-    const defaultThemeLinkTag = document.querySelector('link[href*="css/ionic.bundle.css"]');
-    if (defaultThemeLinkTag) {
-      defaultThemeLinkTag.remove();
-    }
  }

  window.Ionic = window.Ionic || {};
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -49,30 +49,8 @@ html.ios.ios {
  font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }

-/* Override above styles for testing scopes */
-:root.ionic,
-:root.ionic.ios,
-:root.ionic.md,
-html.ionic,
-html.ionic.ios,
-html.ionic.md {
-  --ionic-global-background-color: var(--background);
-  --ion-font-family: initial;
-}
-
-/**
- * Button styles should only be applied
- * to native buttons that are not part of the
- * Ionic framework.
- * Otherwise, the styles may not appear correctly
- * when comparing between testing and production.
- * This issue occurs only with `scoped` components,
- * which is why `sc-ion-` is used as a filter,
- * since this class is specifically added to `scoped`
- * components.
- */
-ion-content button:not([class*="sc-ion-"]),
-main button:not([class*="sc-ion-"]) {
+ion-content button,
+main button {
  display: inline-block;
  width: auto;
  clear: both;
@@ -85,19 +63,8 @@ main button:not([class*="sc-ion-"]) {
  margin: 8px 0;
 }

-/**
- * Button styles should only be applied
- * to native buttons that are not part of the
- * Ionic framework.
- * Otherwise, the styles may not appear correctly
- * when comparing between testing and production.
- * This issue occurs only with `scoped` components,
- * which is why `sc-ion-` is used as a filter,
- * since this class is specifically added to `scoped`
- * components.
- */
-ion-content button.expand:not([class*="sc-ion-"]),
-main button.expand:not([class*="sc-ion-"]) {
+ion-content button.expand,
+main button.expand {
  display: block;
  width: 100%;
 }
--- a/core/scripts/tokens/index.js
+++ b/core/scripts/tokens/index.js
@@ -4,185 +4,372 @@
 // - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
 // - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
 // - It can easily scale to different necessities we might have in the future.
-(async () => {
-  const {
-    generateShadowValue,
-    generateFontSizeValue,
-    generateFontFamilyValue,
-    generateTypographyOutput,
-    generateValue,
-    generateColorUtilityClasses,
-    generateDefaultSpaceUtilityClasses,
-    generateSpaceUtilityClasses,
-    removeConsecutiveRepeatedWords,
-    setPrefixValue,
-    generateRadiusUtilityClasses,
-    generateBorderUtilityClasses,
-    generateFontUtilityClasses,
-    generateShadowUtilityClasses,
-    generateUtilityClasses
-  } = require('./utils.js');

-  const StyleDictionary = (await import('style-dictionary')).default;
+const fs = require('fs');
+const path = require('path');
+const StyleDictionary = require('style-dictionary');

-  // Set the prefix for variables and classes
-  setPrefixValue('ion');
+const targetPath = './src/foundations/';

-  // Register a custom file header
-  StyleDictionary.registerFileHeader({
-    name: 'custom-header',
-    fileHeader: async (defaultMessages = []) => {
-      return [...defaultMessages, 'Do not edit directly, this file was auto-generated.'];
-    },
-  });
+const {
+  variablesPrefix,
+  getRgbaValue,
+  hexToRgb,
+  generateShadowValue,
+  generateFontSizeValue,
+  generateFontFamilyValue,
+  generateTypographyValue,
+  generateRgbValue,
+  generateColorUtilityClasses,
+  generateFontUtilityClass,
+  generateSpaceUtilityClasses,
+  generateTypographyUtilityClass,
+} = require('./utilities');

-  // SCSS variables format
-  StyleDictionary.registerFormat({
-    name: 'scssVariablesFormat',
-    format: async function ({ dictionary, file }) {
+const { fileHeader } = StyleDictionary.formatHelpers;

-      console.log('Generating SCSS variables...');
-
-      // Separate typography tokens from the rest
-      const typographyProperties = dictionary.allTokens.filter((prop) => prop.$type === 'typography');
-      const otherProperties = dictionary.allTokens.filter((prop) => prop.$type !== 'typography');
-
-      // Make sure the reused scss variables are defined first, to avoid compilation errors
-      const sortedProperties = [...otherProperties, ...typographyProperties];
-
-      const prefixedVariables = sortedProperties.map((prop) => {
-        // Remove consecutive repeated words from the token name, like border-border-color
-        const propName = removeConsecutiveRepeatedWords(prop.name);
-
-        switch (prop.$type) {
-          case 'boxShadow':
-            return generateShadowValue(prop, propName);
-          case 'fontFamilies':
-            return generateFontFamilyValue(prop, propName, 'scss');
-          case 'fontSizes':
-            return generateFontSizeValue(prop, propName, 'scss');
-          case 'typography':
-            return generateTypographyOutput(prop, propName, true);
-          default:
-            return generateValue(prop, propName);
+// CSS vanilla :root format
+StyleDictionary.registerFormat({
+  name: 'rootFormat',
+  formatter({ dictionary, file }) {
+    /*
+     * This will loop through all tokens and based on the type it will
+     * call a utility function that will return the expected format for the CSS Variable
+     */
+    const prefixedVariables = dictionary.allProperties
+      .filter((prop) => prop['$type'] !== 'typography')
+      .map((prop) => {
+        if (prop.attributes.category.startsWith('Elevation')) {
+          const cssShadow = prop.value.map(generateShadowValue).join(', ');
+          return `--${variablesPrefix}-${prop.name}: ${cssShadow};`;
+        } else if (prop.attributes.category.match('font-family')) {
+          return generateFontFamilyValue(prop);
+        } else if (prop.attributes.category.match('font-size')) {
+          return generateFontSizeValue(prop);
+        } else {
+          const rgb = hexToRgb(prop.value);
+          prop.value = getRgbaValue(prop.value);
+          return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
+            rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
+          }`;
        }
      });

-      const fileHeader = await file.options.fileHeader();
+    return [
+      fileHeader({ file }),
+      '@use "../themes/functions.sizes" as font;\n',
+      ':root {\n' + prefixedVariables.join('\n') + '\n}\n',
+    ].join('\n');
+  },
+});

-      return [
-        `/*\n${fileHeader.join('\n')}\n*/`,
-        '@use "../themes/functions.sizes" as font;\n',
-        prefixedVariables.join('\n') + '\n',
-      ].join('\n');
-    },
-  });
+// SCSS variables format
+StyleDictionary.registerFormat({
+  name: 'scssVariablesFormat',
+  formatter({ dictionary, file }) {
+    const typographyProperties = dictionary.allProperties.filter((prop) => prop['$type'] === 'typography');
+    const otherProperties = dictionary.allProperties.filter((prop) => prop['$type'] !== 'typography');

-  // Create utility-classes
-  StyleDictionary.registerFormat({
-    name: 'cssUtilityClassesFormat',
-    format: async function ({ dictionary, file }) {
+    // Make sure the reused scss variables are defined first, to avoid compilation errors
+    const sortedProperties = [...otherProperties, ...typographyProperties];

-      console.log('Generating Utility-Classes...');
+    const prefixedVariables = sortedProperties.map((prop) => {
+      if (prop.attributes.category.startsWith('Elevation')) {
+        const cssShadow = prop.value.map(generateShadowValue).join(', ');
+        return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${cssShadow});`;
+      } else if (prop.attributes.category.match('font-family')) {
+        return generateFontFamilyValue(prop, 'scss');
+      } else if (prop.attributes.category.match('font-size')) {
+        return generateFontSizeValue(prop, 'scss');
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyValue(prop, dictionary);
+      } else {
+        return generateRgbValue(prop);
+      }
+    });

-      // Arrays to store specific utility classes
-      const typographyUtilityClasses = [];
-      const otherUtilityClasses = [];
+    return [
+      fileHeader({ file }),
+      '@use "../themes/functions.sizes" as font;\n',
+      prefixedVariables.join('\n') + '\n',
+    ].join('\n');
+  },
+});

-      // Generate utility classes for each token
-      dictionary.allTokens.map((prop) => {
+// Create utility-classes
+StyleDictionary.registerFormat({
+  name: 'cssUtilityClassesFormat',
+  formatter({ dictionary, file }) {
+    const utilityClasses = dictionary.allProperties.map((prop) => {
+      let tokenType = prop.attributes.category;
+      const className = `${prop.name}`;
+      let utilityClass = '';

-        const tokenCategory = prop.attributes.category;
+      if (tokenType.startsWith('Elevation')) {
+        return `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyUtilityClass(prop, dictionary);
+        /*
+         * Not creating for the tokens below, as they make no sense to exist as utility-classes.
+         * Font-family should be defined on global scope, not component.
+         * Scale its an abstract token group, to be used by other tokens, like the space ones.
+         */
+      } else if (prop.attributes.category.match('font-family') || tokenType === 'scale') {
+        return;
+      }

-        if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
-          // Not creating for the tokens below, as they make no sense to exist as utility-classes.
-          return;
-        }
+      const tokenTypeLower = tokenType.toLowerCase();

-        // Remove consecutive repeated words from the token name, like border-border-color
-        const propName = removeConsecutiveRepeatedWords(prop.name);
+      switch (tokenTypeLower) {
+        case 'color':
+        case 'state':
+        case 'guidelines':
+        case 'disabled':
+        case 'hover':
+        case 'pressed':
+          utilityClass = generateColorUtilityClasses(prop, className);
+          break;
+        case 'border-size':
+          utilityClass = `.${variablesPrefix}-${className} {\n  border-width: $ionic-${prop.name};\n}`;
+          break;
+        case 'font':
+          utilityClass = generateFontUtilityClass(prop, className);
+          break;
+        case 'space':
+          utilityClass = generateSpaceUtilityClasses(prop, className);
+          break;
+        default:
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
+      }

-        if (prop.$type === 'typography') {
-          // Typography tokens are handled differently, as each might have a different tokenType
-          return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
+      return utilityClass;
+    });

-        } else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
-          // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
-          return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
-        }
+    return [
+      fileHeader({ file }),
+      '@import "./ionic.vars";\n@import "../themes/mixins";\n',
+      utilityClasses.join('\n'),
+    ].join('\n');
+  },
+});

-        let utilityClass = '';
-        switch (tokenCategory) {
-          case 'color':
-          case 'primitives':
-          case 'semantics':
-          case 'text':
-          case 'bg':
-          case 'icon':
-          case 'state':
-            utilityClass = generateColorUtilityClasses(prop, propName);
-            break;
-          case 'border':
-            utilityClass = generateBorderUtilityClasses(prop, propName);
-            break;
-          case 'font':
-            utilityClass = generateFontUtilityClasses(prop, propName);
-            break;
-          case 'space':
-            utilityClass = generateSpaceUtilityClasses(prop, propName);
-            break;
-          case 'shadow':
-          case 'elevation':
-            utilityClass = generateShadowUtilityClasses(propName);
-            break;
-          default:
-            utilityClass = generateUtilityClasses(tokenCategory, propName);
-        }
+// Register the custom format to generate HTML
+// Load the HTML template
+const template = fs.readFileSync(path.join(__dirname, 'preview.template.html'), 'utf8');

-        return otherUtilityClasses.push(utilityClass);
-      });
+StyleDictionary.registerFormat({
+  name: 'html/tokens',
+  formatter: function ({ dictionary }) {
+    // Function to extract numerical value from token name
+    const extractValue = (tokenName) => {
+      const match = tokenName.match(/-([0-9]+)/);
+      return match ? parseInt(match[1], 10) : Number.MAX_SAFE_INTEGER;
+    };

-      const defaultSpaceUtilityClasses = generateDefaultSpaceUtilityClasses();
-      otherUtilityClasses.push(defaultSpaceUtilityClasses);
+    let colorTokens = `
+      <table>
+        <thead>
+          <tr>
+            <th>Color</th>
+            <th>Hex</th>
+            <th>Token Name</th>
+          </tr>
+        </thead>
+        <tbody>
+    `;
+    let fontSizeTokens = '';
+    let boxShadowTokens = '';
+    let borderSizeTokens = '';
+    let borderRadiusTokens = '';
+    let borderStyleTokens = '';
+    let fontWeightTokens = '';
+    let letterSpacingTokens = '';
+    let spaceTokens = '';

-      // Concatenate typography utility classes at the beginning
-      const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
+    // Collect border-radius and space tokens for separate sorting
+    let borderRadiusTokenList = [];
+    let spaceTokenList = [];

-      const fileHeader = await file.options.fileHeader();
+    dictionary.allProperties.forEach((token) => {
+      if (token.attributes.category === 'color') {
+        colorTokens += `
+          <tr>
+            <td><div class="color-swatch" style="background-color: ${token.value};"></div></td>
+            <td>${token.value}</td>
+            <td>${token.name}</td>
+          </tr>
+        `;
+      } else if (token.attributes.category === 'font-size') {
+        fontSizeTokens += `
+          <div class="font-size-token" style="font-size: ${token.value};">
+              ${token.name} (${token.value})
+          </div>
+        `;
+      } else if (token.attributes.category.startsWith('Elevation')) {
+        const cssShadow = token.value.map(generateShadowValue).join(', ');
+        boxShadowTokens += `
+          <div class="shadow-token" style="box-shadow: ${cssShadow};">
+              ${token.name}
+          </div>
+        `;
+      } else if (token.attributes.category === 'border-size' || token.attributes.category === 'border-width') {
+        borderSizeTokens += `
+          <div class="border-token" style="border-width: ${token.value};">
+              ${token.name} (${token.value})
+          </div>
+        `;
+      } else if (token.attributes.category === 'border-radius') {
+        borderRadiusTokenList.push(token); // Collect border-radius tokens
+      } else if (token.attributes.category === 'border-style') {
+        borderStyleTokens += `
+        <div class="border-token" style="border: 1px ${token.value} #000;">
+            ${token.name} (${token.value})
+        </div>
+      `;
+      } else if (token.attributes.category === 'font-weight') {
+        fontWeightTokens += `
+          <div class="weight-token" style="font-weight: ${token.value};">
+              ${token.name} (${token.value})
+          </div>
+        `;
+      } else if (token.attributes.category === 'letter-spacing') {
+        // Convert % to px
+        const letterSpacingValue = token.value.replace('%', '') + 'px';
+        letterSpacingTokens += `
+          <div class="letter-spacing-token" style="letter-spacing: ${letterSpacingValue};">
+              ${token.name} (${letterSpacingValue})
+          </div>
+        `;
+      } else if (token.attributes.category === 'space') {
+        spaceTokenList.push(token); // Collect space tokens
+      }
+    });

-      return [
-        `/*\n${fileHeader.join('\n')}\n*/`,
-        '@import "./ionic.vars";\n@import "../themes/mixins";\n',
-        finalOutput,
-      ].join('\n');
-    },
-  });
+    // Sort border-radius and space tokens
+    borderRadiusTokenList.sort((a, b) => extractValue(a.name) - extractValue(b.name));
+    spaceTokenList.sort((a, b) => extractValue(a.name) - extractValue(b.name));

-})();
+    // Generate HTML for sorted border-radius tokens
+    borderRadiusTokenList.forEach((token) => {
+      borderRadiusTokens += `
+        <div class="border-token" style="border-radius: ${token.value};">
+            ${token.name} (${token.value})
+        </div>
+      `;
+    });

-// APPLY THE CONFIGURATION
-module.exports = {
-  source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"],
+    // Generate HTML for sorted space tokens
+    spaceTokenList.forEach((token) => {
+      spaceTokens += `
+      <div class="spacing-wrapper">
+          <div class="space-token" style="margin: ${token.value};">
+          ${token.name} (${token.value})
+          </div>
+      </div>
+      `;
+    });
+
+    colorTokens += '</tbody></table>';
+
+    return template
+      .replace('{{colorTokens}}', colorTokens)
+      .replace('{{fontSizeTokens}}', fontSizeTokens)
+      .replace('{{boxShadowTokens}}', boxShadowTokens)
+      .replace('{{borderSizeTokens}}', borderSizeTokens)
+      .replace('{{borderRadiusTokens}}', borderRadiusTokens)
+      .replace('{{borderStyleTokens}}', borderStyleTokens)
+      .replace('{{fontWeightTokens}}', fontWeightTokens)
+      .replace('{{letterSpacingTokens}}', letterSpacingTokens)
+      .replace('{{spaceTokens}}', spaceTokens);
+  },
+});
+
+// Custom transform to ensure unique token names
+StyleDictionary.registerTransform({
+  name: 'name/cti/kebab-unique',
+  type: 'name',
+  transformer: function (prop, options) {
+    return [options.prefix].concat(prop.path).join('-').toLowerCase();
+  },
+});
+
+// Register the custom transform group for html file generation
+StyleDictionary.registerTransformGroup({
+  name: 'custom',
+  transforms: ['attribute/cti', 'name/cti/kebab-unique', 'size/rem', 'color/css'],
+});
+
+// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
+const w3cTokenJsonParser = {
+  pattern: /\.json|\.tokens\.json|\.tokens$/,
+  parse({ contents }) {
+    // replace $value with value so that style dictionary recognizes it
+    var preparedContent = (contents || '{}')
+      .replace(/"\$?value":/g, '"value":')
+      // convert $description to comment
+      .replace(/"\$?description":/g, '"comment":');
+    //
+
+    return JSON.parse(preparedContent);
+  },
+};
+
+StyleDictionary.registerParser(w3cTokenJsonParser);
+
+// Generate Tokens
+StyleDictionary.extend({
+  source: ['./src/foundations/tokens/*.json', './src/foundations/tokens/theme/*.json'],
  platforms: {
-    scss: {
-      transformGroup: "scss",
-      buildPath: './src/foundations/',
+    css: {
+      buildPath: targetPath,
+      transformGroup: 'css',
      files: [
        {
-          destination: "ionic.vars.scss",
-          format: "scssVariablesFormat",
+          destination: 'ionic.root.scss',
+          format: 'rootFormat',
          options: {
-            fileHeader: `custom-header`,
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+    scss: {
+      buildPath: targetPath,
+      transformGroup: 'scss',
+      files: [
+        {
+          destination: 'ionic.vars.scss',
+          format: 'scssVariablesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
          },
        },
        {
-          destination: "ionic.utility.scss",
-          format: "cssUtilityClassesFormat",
+          destination: 'ionic.utility.scss',
+          format: 'cssUtilityClassesFormat',
          options: {
-            fileHeader: `custom-header`
-          }
-        }
-      ]
-    }
-  }
-};
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+    html: {
+      transformGroup: 'custom',
+      buildPath: targetPath,
+      files: [
+        {
+          destination: 'tokens.preview.html',
+          format: 'html/tokens',
+        },
+      ],
+    },
+  },
+  fileHeader: {
+    myFileHeader: () => {
+      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
+    },
+  },
+}).buildAllPlatforms();
--- a/core/scripts/tokens/preview.styles.css
+++ b/core/scripts/tokens/preview.styles.css
@@ -0,0 +1,63 @@
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 20px;
+}
+
+th,
+td {
+  padding: 10px;
+  border: 1px solid #ccc;
+  text-align: left;
+}
+
+th {
+  background-color: #f4f4f4;
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+  background-color: #f4f4f4;
+  z-index: 1;
+}
+
+.color-swatch {
+  width: 50px;
+  height: 50px;
+}
+
+.font-size-token,
+.weight-token,
+.letter-spacing-token {
+  margin: 10px 0;
+}
+
+.border-token,
+.shadow-token {
+  margin: 10px;
+  padding: 10px;
+}
+
+.border-token {
+  border: 1px solid #000;
+}
+
+.spacing-wrapper {
+  background-color: lightblue;
+}
+
+.spacing-wrapper > div {
+  background-color: #fff;
+}
+
+.token-wrapper:has(.spacing-wrapper) {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+hr {
+  background-color: #ccc;
+  margin: 20px 0;
+}
--- a/core/scripts/tokens/preview.template.html
+++ b/core/scripts/tokens/preview.template.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>Design Tokens</title>
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="../../scripts/tokens/preview.styles.css" />
+  </head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Design Tokens - Preview</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding-horizontal">
+        <h1>Color Tokens</h1>
+        <div class="token-wrapper">{{colorTokens}}</div>
+        <hr />
+        <h1>Font Size Tokens</h1>
+        <div class="token-wrapper">{{fontSizeTokens}}</div>
+        <hr />
+        <h1>Font Weight Tokens</h1>
+        <div class="token-wrapper">{{fontWeightTokens}}</div>
+        <hr />
+        <h1>Letter Spacing Tokens</h1>
+        <div class="token-wrapper">{{letterSpacingTokens}}</div>
+        <hr />
+        <h1>Box Shadow Tokens</h1>
+        <div class="token-wrapper">{{boxShadowTokens}}</div>
+        <hr />
+        <h1>Border Size Tokens</h1>
+        <div class="token-wrapper">{{borderSizeTokens}}</div>
+        <hr />
+        <h1>Border Radius Tokens</h1>
+        <div class="token-wrapper">{{borderRadiusTokens}}</div>
+        <hr />
+        <h1>Border Style Tokens</h1>
+        <div class="token-wrapper">{{borderStyleTokens}}</div>
+        <hr />
+        <h1>Space Tokens</h1>
+        <div class="token-wrapper">{{spaceTokens}}</div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/scripts/tokens/utilities.js
+++ b/core/scripts/tokens/utilities.js
@@ -0,0 +1,191 @@
+const variablesPrefix = 'ionic'; // Variable that holds the prefix used on all css and scss variables generated
+
+// Generates a valid rgba() color
+function getRgbaValue(propValue) {
+  // Check if its rgba color
+  const isRgba = hexToRgba(propValue);
+  // If it is, then compose rgba() color, otherwise use the normal color
+  if (isRgba !== null) {
+    return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`);
+  } else {
+    return propValue;
+  }
+}
+
+// Translates an hex color value to rgb
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+// Translates an hex color value to rgba
+function hexToRgba(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+        a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100,
+      }
+    : null;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+function generateShadowValue(shadow) {
+  const color = getRgbaValue(shadow.color);
+
+  return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${color}`;
+}
+
+// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
+function generateFontSizeValue(prop, variableType = 'css') {
+  return variableType === 'scss'
+    ? `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, font.px-to-rem(${parseInt(
+        prop.value
+      )}));`
+    : `--${variablesPrefix}-${prop.name}: #{font.px-to-rem(${parseInt(prop.value)})};`;
+}
+
+// Generates a valid font-family value from a font-family Design Token structure
+function generateFontFamilyValue(prop, variableType = 'css') {
+  // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
+  const propName = prop.name.split('-').slice(0, -1).join('-');
+  return variableType === 'scss'
+    ? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, "${prop.value}", sans-serif);`
+    : `--${variablesPrefix}-${propName}: "${prop.value}", sans-serif;`;
+}
+
+// Generates a typography based scss map from a typography Design Token structure
+function generateTypographyValue(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = getTypeMap(dictionary, 'font-size');
+  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = getTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+  const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
+
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  return `
+  $${variablesPrefix}-${prop.name}: (
+    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
+    font-style: ${fontStyle},
+    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
+    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
+    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
+    text-transform: ${typography.textTransform},
+    text-decoration: ${typography.textDecoration}
+  );
+  `;
+}
+
+// To abstract the need to loop across all tokens from a given type
+function getTypeMap(dictionary, type) {
+  return Object.fromEntries(
+    Object.entries(dictionary.properties[type]).map(([key, token]) => [token.value, token.attributes.type])
+  );
+}
+
+// Generates a final value, based if the Design Token is of type color or not
+function generateValue(prop) {
+  const rgb = hexToRgb(prop.value);
+
+  let rgbDeclaration = '';
+
+  if (rgb) {
+    // If the token is color, also add a rgb variable using the same color
+    rgbDeclaration = `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
+  }
+
+  prop.value = getRgbaValue(prop.value);
+
+  return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${rgbDeclaration}`;
+}
+
+// Generates a typography based css utility-class from a typography Design Token structure
+function generateTypographyUtilityClass(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = getTypeMap(dictionary, 'font-size');
+  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = getTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+  const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
+
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  return `
+  .${variablesPrefix}-${prop.name} {
+    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
+    font-style: ${fontStyle};
+    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
+    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
+    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};
+    text-transform: ${typography.textTransform};
+    text-decoration: ${typography.textDecoration};
+  };
+  `;
+}
+
+// Generates a color based css utility-class from a color Design Token structure
+function generateColorUtilityClasses(prop, className) {
+  return `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
+  .${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+}
+
+// Generates a font based css utility-class from a font Design Token structure
+function generateFontUtilityClass(prop, className) {
+  let fontAttribute;
+  switch (prop.attributes.type) {
+    case 'size':
+      fontAttribute = 'font-size';
+      break;
+    case 'weight':
+      fontAttribute = 'font-weight';
+      break;
+    case 'line-height':
+      fontAttribute = 'line-height';
+      break;
+    case 'letter-spacing':
+      fontAttribute = 'letter-spacing';
+      break;
+  }
+  return `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
+}
+
+// Generates a margin or padding based css utility-class from a space Design Token structure
+function generateSpaceUtilityClasses(prop, className) {
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  const marginPaddingTemplate = (type) => `
+.${variablesPrefix}-${type}-${className} {
+  --${type}-start: #{$ionic-${prop.name}};
+  --${type}-end: #{$ionic-${prop.name}};
+  --${type}-top: #{$ionic-${prop.name}};
+  --${type}-bottom: #{$ionic-${prop.name}};
+
+  @include ${type}($ionic-${prop.name});
+};`;
+
+  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
+// Export all methods to be used on the tokens.js script
+module.exports = {
+  variablesPrefix,
+  getRgbaValue,
+  hexToRgb,
+  hexToRgba,
+  generateShadowValue,
+  generateFontSizeValue,
+  generateFontFamilyValue,
+  generateTypographyValue,
+  generateRgbValue: generateValue,
+  generateColorUtilityClasses,
+  generateFontUtilityClass,
+  generateSpaceUtilityClasses,
+  generateTypographyUtilityClass,
+};
--- a/core/scripts/tokens/utils.js
+++ b/core/scripts/tokens/utils.js
@@ -1,300 +0,0 @@
-let variablesPrefix; // Variable that holds the prefix used on all css and scss variables generated
-
-// Set the variable prefix value
-function setPrefixValue(prefix) {
-  variablesPrefix = prefix;
-  return variablesPrefix;
-}
-
-// Generates a valid rgba() color
-function getRgbaValue(propValue) {
-  // Check if its rgba color
-  const isRgba = hexToRgba(propValue);
-  // If it is, then compose rgba() color, otherwise use the normal color
-  if (isRgba !== null) {
-    return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`);
-  } else {
-    return propValue;
-  }
-}
-
-// Translates an hex color value to rgb
-function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-}
-
-// Translates an hex color value to rgba
-function hexToRgba(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-        a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100,
-      }
-    : null;
-}
-
-// Utility function to remove consecutive repeated words
-function removeConsecutiveRepeatedWords(str) {
-    return str.replace(/(\b\w+\b)(-\1)+/g, '$1');
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateShadowValue(prop, propName) {
-  const cssShadow = prop.$value.map(shadow => {
-    // Assuming shadow is an object with properties like offsetX, offsetY, blurRadius, spreadRadius, color
-    const color = getRgbaValue(shadow.color);
-    return `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`;
-}).join(', ');
-
-  return `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`;
-}
-
-// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
-function generateFontSizeValue(prop, propName, variableType = 'css') {
-  return variableType === 'scss'
-    ? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt(
-        prop.$value
-      )}));`
-    : `--${propName}: #{font.px-to-rem(${parseInt(prop.$value)})};`;
-}
-
-// Generates a valid font-family value from a font-family Design Token structure
-function generateFontFamilyValue(prop, propName, variableType = 'css') {
-  // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
-  const _propName = propName.split('-').slice(0, -1).join('-');
-
-  return variableType === 'scss'
-    ? `$${variablesPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);`
-    : `--${variablesPrefix}-${_propName}: "${prop.$value}", sans-serif;`;
-}
-
-// Generates a final value, based if the Design Token is of type color or not
-function generateValue(prop, propName) {
-  const rgb = hexToRgb(prop.$value);
-
-  let rgbDeclaration = '';
-
-  if (rgb) {
-    // If the token is color, also add a rgb variable using the same color
-    rgbDeclaration = `\n$${variablesPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
-    prop.value = getRgbaValue(prop.$value);
-  }
-
-  return `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});${rgbDeclaration}`;
-}
-
-// Generates a typography based css utility-class or scss variable from a typography token structure
-function generateTypographyOutput(prop, propName, isVariable) {
-  const typography = prop.original.$value;
-
-  // Extract the part after the last dot and trim any extraneous characters
-  const extractLastPart = (str) => str.split('.').pop().replace(/[^\w-]/g, '');
-
-  const _initialWrapper = isVariable ? ': (' : ` {`;
-  const _endWrapper = isVariable ? ')' : `}`;
-  const _prefix = isVariable ? '$' : `.`;
-  const _endChar = isVariable ? ',' : ';';
-
-  // This exact format is needed so that it compiles the tokens with the expected lint rules
-  return `
-  ${_prefix}${variablesPrefix}-${propName}${_initialWrapper}
-    font-size: $${variablesPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar}
-    font-style: ${prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'}${_endChar}
-    font-weight: $${variablesPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar}
-    letter-spacing: $${variablesPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar}
-    line-height: $${variablesPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar}
-    text-transform: ${typography.textCase}${_endChar}
-    text-decoration: ${typography.textDecoration}${_endChar}
-  ${_endWrapper};
-  `;
-}
-
-// Generates a color based css utility-class from a color Design Token structure
-function generateColorUtilityClasses(prop, className) {
-  return `.${variablesPrefix}-${className} {\n  color: $${variablesPrefix}-${prop.name};\n}
-  .${variablesPrefix}-background-${className} {\n  background-color: $${variablesPrefix}-${prop.name};\n}`;
-}
-
-// Generates margin and padding utility classes to match the token-agnostic
-// utilities provided by the Ionic Framework
-function generateDefaultSpaceUtilityClasses() {
-  const zeroMarginPaddingToken = 'space-0';
-  const defaultMarginPaddingToken = 'space-400';
-
-  const marginPaddingTemplate = (type) => `
-.${variablesPrefix}-no-${type} {
-  --${type}-top: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-  --${type}-end: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-  --${type}-bottom: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-  --${type}-start: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${zeroMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type} {
-  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type}-top {
-  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, null, null);
-};
-
-.${variablesPrefix}-${type}-end {
-  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, null);
-};
-
-.${variablesPrefix}-${type}-bottom {
-  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
-};
-
-.${variablesPrefix}-${type}-start {
-  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, null, null, $${variablesPrefix}-${defaultMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type}-vertical {
-  --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
-};
-
-.${variablesPrefix}-${type}-horizontal {
-  --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-  --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
-  @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken});
-};
-`;
-
-  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
-}
-
-// Generates a margin or padding based css utility-class from a space Design Token structure
-function generateSpaceUtilityClasses(prop, className) {
-  // This exact format is needed so that it compiles the tokens with the expected lint rules
-  // It will generate classes for margin and padding, for equal sizing on all side and each direction
-  const marginPaddingTemplate = (type) => `
-.${variablesPrefix}-${type}-${className} {
-  --${type}-top: #{$${variablesPrefix}-${prop.name}};
-  --${type}-end: #{$${variablesPrefix}-${prop.name}};
-  --${type}-bottom: #{$${variablesPrefix}-${prop.name}};
-  --${type}-start: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}($${variablesPrefix}-${prop.name});
-};
-
-.${variablesPrefix}-${type}-top-${className} {
-  --${type}-top: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}($${variablesPrefix}-${prop.name}, null, null, null);
-};
-
-.${variablesPrefix}-${type}-end-${className} {
-  --${type}-end: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}(null, $${variablesPrefix}-${prop.name}, null, null);
-};
-
-.${variablesPrefix}-${type}-bottom-${className} {
-  --${type}-bottom: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}(null, null, $${variablesPrefix}-${prop.name}, null);
-};
-
-.${variablesPrefix}-${type}-start-${className} {
-  --${type}-start: #{$${variablesPrefix}-${prop.name}};
-
-  @include ${type}(null, null, null, $${variablesPrefix}-${prop.name});
-};
-`;
-
-  // Add gap utility classes for gap tokens
-  const generateGapUtilityClasses = () =>`
-.${variablesPrefix}-gap-${prop.name} { 
-  gap: #{$${variablesPrefix}-${prop.name}}; 
-};
-`;
-
-  return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateRadiusUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  border-radius: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a border based css utility-class from a font Design Token structure
-function generateBorderUtilityClasses(prop, propName) {
-  let attribute;
-
-  switch (prop.attributes.type) {
-    case 'border-radius':
-    case 'border-style':
-      attribute = prop.attributes.type;
-      break;
-    case 'border-size':
-      attribute = 'border-width';
-      break;
-    default:
-      attribute = 'border-color';
-  }
-  return `.${variablesPrefix}-${propName} {\n  ${attribute}: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a font based css utility-class from a font Design Token structure
-function generateFontUtilityClasses(prop, propName) {
-  return `.${variablesPrefix}-${propName} {\n  ${prop.attributes.type}: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateShadowUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  box-shadow: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a utility class for a given token category and name
-function generateUtilityClasses(tokenCategory, propName){
-  return `.${variablesPrefix}-${propName} {\n  ${tokenCategory}: $${variablesPrefix}-${propName};\n}`;
-}
-
-module.exports = {
-    getRgbaValue,
-    hexToRgb,
-    generateShadowValue,
-    generateFontSizeValue,
-    generateFontFamilyValue,
-    generateTypographyOutput,
-    generateValue,
-    setPrefixValue,
-    generateRadiusUtilityClasses,
-    generateColorUtilityClasses,
-    generateDefaultSpaceUtilityClasses,
-    generateSpaceUtilityClasses,
-    removeConsecutiveRepeatedWords,
-    generateBorderUtilityClasses,
-    generateFontUtilityClasses,
-    generateShadowUtilityClasses,
-    generateUtilityClasses
-};
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -18,7 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
+import { MenuChangeEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 import { ViewController } from "./components/nav/view-controller";
@@ -34,9 +34,7 @@ import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
-import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
-import { SelectModalOption } from "./components/select-modal/select-modal-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
@@ -55,7 +53,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
-export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
+export { MenuChangeEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
 export { ViewController } from "./components/nav/view-controller";
@@ -71,9 +69,7 @@ export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
 export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
-export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
-export { SelectModalOption } from "./components/select-modal/select-modal-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
@@ -140,10 +136,6 @@ export namespace Components {
          * This method is used to ensure that the value of ion-accordion-group is being set in a valid way. This method should only be called in response to a user generated action.
         */
        "requestAccordionToggle": (accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>;
-        /**
-          * Set to `"soft"` for an accordion group with slightly rounded corners, `"round"` for an accordion group with fully rounded corners, or `"rectangular"` for an accordion group without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes. Only applies when `expand` is set to `"inset"`.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -332,9 +324,6 @@ export namespace Components {
          * The mode determines the platform behaviors of the component.
         */
        "mode"?: "ios" | "md";
-        /**
-          * Used to set focus on an element that uses `ion-focusable`. Do not use this if focusing the element as a result of a keyboard event as the focus utility should handle this for us. This method should be used when we want to programmatically focus an element as a result of another user action. (Ex: We focus the first element inside of a popover when the user presents it, but the popover is not always presented as a result of keyboard action.)
-         */
        "setFocus": (elements: HTMLElement[]) => Promise<void>;
        /**
          * The theme determines the visual appearance of the component.
@@ -424,7 +413,6 @@ export namespace Components {
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
-        "hintPosition": 'top-right' | 'bottom-right';
        /**
          * The mode determines the platform behaviors of the component.
         */
@@ -441,7 +429,6 @@ export namespace Components {
          * The theme determines the visual appearance of the component.
         */
        "theme"?: "ios" | "md" | "ionic";
-        "useAsHint": boolean;
    }
    interface IonBreadcrumb {
        /**
@@ -722,9 +709,9 @@ export namespace Components {
    }
    interface IonCheckbox {
        /**
-          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
-        "alignment"?: 'start' | 'center';
+        "alignment": 'start' | 'center';
        /**
          * If `true`, the checkbox is selected.
         */
@@ -742,9 +729,9 @@ export namespace Components {
         */
        "indeterminate": boolean;
        /**
-          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
         */
-        "justify"?: 'start' | 'end' | 'space-between';
+        "justify": 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
@@ -757,7 +744,6 @@ export namespace Components {
          * The name of the control, which is submitted with the form data.
         */
        "name": string;
-        "setFocus": () => Promise<void>;
        /**
          * Set to `"soft"` for a checkbox with more rounded corners. Only available when the theme is `"ionic"`.
         */
@@ -1895,7 +1881,7 @@ export namespace Components {
        /**
          * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
         */
-        "close": (animated?: boolean, role?: string) => Promise<boolean>;
+        "close": (animated?: boolean) => Promise<boolean>;
        /**
          * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
         */
@@ -1931,7 +1917,7 @@ export namespace Components {
        /**
          * Opens or closes the button. If the operation can't be completed successfully, it returns `false`.
         */
-        "setOpen": (shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>;
+        "setOpen": (shouldOpen: boolean, animated?: boolean) => Promise<boolean>;
        /**
          * Which side of the view the menu should be placed.
         */
@@ -2111,10 +2097,6 @@ export namespace Components {
          * Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.
         */
        "setCurrentBreakpoint": (breakpoint: number) => Promise<void>;
-        /**
-          * Set to `"soft"` for a modal with slightly rounded corners, `"round"` for a modal with fully rounded corners, or `"rectangular"` for a modal without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
         */
@@ -2611,10 +2593,6 @@ export namespace Components {
          * If true, reverse the progress bar direction.
         */
        "reversed": boolean;
-        /**
-          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -2630,9 +2608,9 @@ export namespace Components {
    }
    interface IonRadio {
        /**
-          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
-        "alignment"?: 'start' | 'center';
+        "alignment": 'start' | 'center';
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
@@ -2642,9 +2620,9 @@ export namespace Components {
         */
        "disabled": boolean;
        /**
-          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
+          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
         */
-        "justify"?: 'start' | 'end' | 'space-between';
+        "justify": 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
@@ -2658,7 +2636,7 @@ export namespace Components {
         */
        "name": string;
        "setButtonTabindex": (value: number) => Promise<void>;
-        "setFocus": (ev?: globalThis.Event) => Promise<void>;
+        "setFocus": (ev: globalThis.Event) => Promise<void>;
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -2685,7 +2663,6 @@ export namespace Components {
          * The name of the control, which is submitted with the form data.
         */
        "name": string;
-        "setFocus": () => Promise<void>;
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -3169,10 +3146,6 @@ export namespace Components {
        "value"?: SegmentValue;
    }
    interface IonSegmentButton {
-        /**
-          * The `id` of the segment content.
-         */
-        "contentId"?: string;
        /**
          * If `true`, the user cannot interact with the segment button.
         */
@@ -3199,19 +3172,6 @@ export namespace Components {
         */
        "value": SegmentValue;
    }
-    interface IonSegmentContent {
-    }
-    interface IonSegmentView {
-        /**
-          * If `true`, the segment view cannot be interacted with.
-         */
-        "disabled": boolean;
-        /**
-          * @param id : The id of the segment content to display.
-          * @param smoothScroll : Whether to animate the scroll transition.
-         */
-        "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
-    }
    interface IonSelect {
        /**
          * The text to display on the cancel button.
@@ -3238,17 +3198,17 @@ export namespace Components {
         */
        "fill"?: 'outline' | 'solid';
        /**
-          * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
+          * The interface the select should use: `action-sheet`, `popover` or `alert`.
         */
        "interface": SelectInterface;
        /**
-          * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+          * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
         */
        "interfaceOptions": any;
        /**
          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
         */
-        "justify"?: 'start' | 'end' | 'space-between';
+        "justify": 'start' | 'end' | 'space-between';
        /**
          * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
@@ -3287,13 +3247,9 @@ export namespace Components {
         */
        "selectedText"?: string | null;
        /**
-          * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+          * The shape of the select. If "round" it will have an increased border radius.
         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
-        /**
-          * The size of the select. If "large" it will increase the height of the select, while "small" and "medium" provide progressively smaller heights.  Defaults to `"medium"` for the ionic theme, and  undefined for all other themes.
-         */
-        "size"?: 'small' | 'medium' | 'large';
+        "shape"?: 'round';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -3307,11 +3263,6 @@ export namespace Components {
         */
        "value"?: any | null;
    }
-    interface IonSelectModal {
-        "header"?: string;
-        "multiple"?: boolean;
-        "options": SelectModalOption[];
-    }
    interface IonSelectOption {
        /**
          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
@@ -3427,26 +3378,6 @@ export namespace Components {
         */
        "when": string | boolean;
    }
-    interface IonStatusHint {
-        "color"?: Color;
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
-        "position": 'top-right' | 'bottom-right' | 'static';
-        /**
-          * Set to `"soft"` for an hint with slightly rounded corners, `"round"` for an hint with fully rounded corners, or `"rectangular"` for an hint without rounded corners.  Defaults to `"round"`.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
-        /**
-          * Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size.  Defaults to `"small"`.
-         */
-        "size"?: 'small' | 'medium' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
-    }
    interface IonTab {
        "active": boolean;
        /**
@@ -3476,10 +3407,6 @@ export namespace Components {
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
-        /**
-          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
-         */
-        "expand": 'compact' | 'full';
        /**
          * The mode determines the platform behaviors of the component.
         */
@@ -3488,10 +3415,6 @@ export namespace Components {
          * The selected tab component
         */
        "selectedTab"?: string;
-        /**
-          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -3530,10 +3453,6 @@ export namespace Components {
          * The selected tab component
         */
        "selected": boolean;
-        /**
-          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
         */
@@ -3840,10 +3759,6 @@ export namespace Components {
          * Present the toast overlay after it has been created.
         */
        "present": () => Promise<void>;
-        /**
-          * Set to `"soft"` for a toast with slightly rounded corners, `"round"` for a toast with fully rounded corners, or `"rectangular"` for a toast without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
         */
@@ -3863,9 +3778,9 @@ export namespace Components {
    }
    interface IonToggle {
        /**
-          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
-        "alignment"?: 'start' | 'center';
+        "alignment": 'start' | 'center';
        /**
          * If `true`, the toggle is selected.
         */
@@ -3883,9 +3798,9 @@ export namespace Components {
         */
        "enableOnOffLabels": boolean | undefined;
        /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
         */
-        "justify"?: 'start' | 'end' | 'space-between';
+        "justify": 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
         */
@@ -4070,10 +3985,6 @@ export interface IonSegmentCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSegmentElement;
 }
-export interface IonSegmentViewCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLIonSegmentViewElement;
-}
 export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSelectElement;
@@ -4627,9 +4538,9 @@ declare global {
    };
    interface HTMLIonMenuElementEventMap {
        "ionWillOpen": void;
-        "ionWillClose": MenuCloseEventDetail;
+        "ionWillClose": void;
        "ionDidOpen": void;
-        "ionDidClose": MenuCloseEventDetail;
+        "ionDidClose": void;
        "ionMenuChange": MenuChangeEventDetail;
    }
    interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {
@@ -5070,29 +4981,6 @@ declare global {
        prototype: HTMLIonSegmentButtonElement;
        new (): HTMLIonSegmentButtonElement;
    };
-    interface HTMLIonSegmentContentElement extends Components.IonSegmentContent, HTMLStencilElement {
-    }
-    var HTMLIonSegmentContentElement: {
-        prototype: HTMLIonSegmentContentElement;
-        new (): HTMLIonSegmentContentElement;
-    };
-    interface HTMLIonSegmentViewElementEventMap {
-        "ionSegmentViewScroll": SegmentViewScrollEvent;
-    }
-    interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLIonSegmentViewElement: {
-        prototype: HTMLIonSegmentViewElement;
-        new (): HTMLIonSegmentViewElement;
-    };
    interface HTMLIonSelectElementEventMap {
        "ionChange": SelectChangeEventDetail;
        "ionCancel": void;
@@ -5115,12 +5003,6 @@ declare global {
        prototype: HTMLIonSelectElement;
        new (): HTMLIonSelectElement;
    };
-    interface HTMLIonSelectModalElement extends Components.IonSelectModal, HTMLStencilElement {
-    }
-    var HTMLIonSelectModalElement: {
-        prototype: HTMLIonSelectModalElement;
-        new (): HTMLIonSelectModalElement;
-    };
    interface HTMLIonSelectOptionElement extends Components.IonSelectOption, HTMLStencilElement {
    }
    var HTMLIonSelectOptionElement: {
@@ -5173,12 +5055,6 @@ declare global {
        prototype: HTMLIonSplitPaneElement;
        new (): HTMLIonSplitPaneElement;
    };
-    interface HTMLIonStatusHintElement extends Components.IonStatusHint, HTMLStencilElement {
-    }
-    var HTMLIonStatusHintElement: {
-        prototype: HTMLIonStatusHintElement;
-        new (): HTMLIonStatusHintElement;
-    };
    interface HTMLIonTabElement extends Components.IonTab, HTMLStencilElement {
    }
    var HTMLIonTabElement: {
@@ -5414,16 +5290,12 @@ declare global {
        "ion-searchbar": HTMLIonSearchbarElement;
        "ion-segment": HTMLIonSegmentElement;
        "ion-segment-button": HTMLIonSegmentButtonElement;
-        "ion-segment-content": HTMLIonSegmentContentElement;
-        "ion-segment-view": HTMLIonSegmentViewElement;
        "ion-select": HTMLIonSelectElement;
-        "ion-select-modal": HTMLIonSelectModalElement;
        "ion-select-option": HTMLIonSelectOptionElement;
        "ion-select-popover": HTMLIonSelectPopoverElement;
        "ion-skeleton-text": HTMLIonSkeletonTextElement;
        "ion-spinner": HTMLIonSpinnerElement;
        "ion-split-pane": HTMLIonSplitPaneElement;
-        "ion-status-hint": HTMLIonStatusHintElement;
        "ion-tab": HTMLIonTabElement;
        "ion-tab-bar": HTMLIonTabBarElement;
        "ion-tab-button": HTMLIonTabButtonElement;
@@ -5501,10 +5373,6 @@ declare namespace LocalJSX {
          * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
         */
        "readonly"?: boolean;
-        /**
-          * Set to `"soft"` for an accordion group with slightly rounded corners, `"round"` for an accordion group with fully rounded corners, or `"rectangular"` for an accordion group without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes. Only applies when `expand` is set to `"inset"`.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -5813,7 +5681,6 @@ declare namespace LocalJSX {
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
-        "hintPosition"?: 'top-right' | 'bottom-right';
        /**
          * The mode determines the platform behaviors of the component.
         */
@@ -5830,7 +5697,6 @@ declare namespace LocalJSX {
          * The theme determines the visual appearance of the component.
         */
        "theme"?: "ios" | "md" | "ionic";
-        "useAsHint"?: boolean;
    }
    interface IonBreadcrumb {
        /**
@@ -6135,7 +6001,7 @@ declare namespace LocalJSX {
    }
    interface IonCheckbox {
        /**
-          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -6155,7 +6021,7 @@ declare namespace LocalJSX {
         */
        "indeterminate"?: boolean;
        /**
-          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
+          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -7359,7 +7225,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the menu is closed.
         */
-        "onIonDidClose"?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
+        "onIonDidClose"?: (event: IonMenuCustomEvent<void>) => void;
        /**
          * Emitted when the menu is open.
         */
@@ -7371,7 +7237,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the menu is about to be closed.
         */
-        "onIonWillClose"?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
+        "onIonWillClose"?: (event: IonMenuCustomEvent<void>) => void;
        /**
          * Emitted when the menu is about to be opened.
         */
@@ -7565,10 +7431,6 @@ declare namespace LocalJSX {
          * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
         */
        "presentingElement"?: HTMLElement;
-        /**
-          * Set to `"soft"` for a modal with slightly rounded corners, `"round"` for a modal with fully rounded corners, or `"rectangular"` for a modal without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
         */
@@ -7994,10 +7856,6 @@ declare namespace LocalJSX {
          * If true, reverse the progress bar direction.
         */
        "reversed"?: boolean;
-        /**
-          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -8013,7 +7871,7 @@ declare namespace LocalJSX {
    }
    interface IonRadio {
        /**
-          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -8025,7 +7883,7 @@ declare namespace LocalJSX {
         */
        "disabled"?: boolean;
        /**
-          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
+          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -8617,10 +8475,6 @@ declare namespace LocalJSX {
        "value"?: SegmentValue;
    }
    interface IonSegmentButton {
-        /**
-          * The `id` of the segment content.
-         */
-        "contentId"?: string;
        /**
          * If `true`, the user cannot interact with the segment button.
         */
@@ -8646,18 +8500,6 @@ declare namespace LocalJSX {
         */
        "value"?: SegmentValue;
    }
-    interface IonSegmentContent {
-    }
-    interface IonSegmentView {
-        /**
-          * If `true`, the segment view cannot be interacted with.
-         */
-        "disabled"?: boolean;
-        /**
-          * Emitted when the segment view is scrolled.
-         */
-        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
-    }
    interface IonSelect {
        /**
          * The text to display on the cancel button.
@@ -8684,11 +8526,11 @@ declare namespace LocalJSX {
         */
        "fill"?: 'outline' | 'solid';
        /**
-          * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
+          * The interface the select should use: `action-sheet`, `popover` or `alert`.
         */
        "interface"?: SelectInterface;
        /**
-          * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+          * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet) and the [ion-popover docs](./popover) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
         */
        "interfaceOptions"?: any;
        /**
@@ -8752,13 +8594,9 @@ declare namespace LocalJSX {
         */
        "selectedText"?: string | null;
        /**
-          * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+          * The shape of the select. If "round" it will have an increased border radius.
         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
-        /**
-          * The size of the select. If "large" it will increase the height of the select, while "small" and "medium" provide progressively smaller heights.  Defaults to `"medium"` for the ionic theme, and  undefined for all other themes.
-         */
-        "size"?: 'small' | 'medium' | 'large';
+        "shape"?: 'round';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -8772,11 +8610,6 @@ declare namespace LocalJSX {
         */
        "value"?: any | null;
    }
-    interface IonSelectModal {
-        "header"?: string;
-        "multiple"?: boolean;
-        "options"?: SelectModalOption[];
-    }
    interface IonSelectOption {
        /**
          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
@@ -8899,26 +8732,6 @@ declare namespace LocalJSX {
         */
        "when"?: string | boolean;
    }
-    interface IonStatusHint {
-        "color"?: Color;
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
-        "position"?: 'top-right' | 'bottom-right' | 'static';
-        /**
-          * Set to `"soft"` for an hint with slightly rounded corners, `"round"` for an hint with fully rounded corners, or `"rectangular"` for an hint without rounded corners.  Defaults to `"round"`.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
-        /**
-          * Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size.  Defaults to `"small"`.
-         */
-        "size"?: 'small' | 'medium' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
-    }
    interface IonTab {
        "active"?: boolean;
        /**
@@ -8944,10 +8757,6 @@ declare namespace LocalJSX {
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
-        /**
-          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
-         */
-        "expand"?: 'compact' | 'full';
        /**
          * The mode determines the platform behaviors of the component.
         */
@@ -8958,10 +8767,6 @@ declare namespace LocalJSX {
          * The selected tab component
         */
        "selectedTab"?: string;
-        /**
-          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -9004,10 +8809,6 @@ declare namespace LocalJSX {
          * The selected tab component
         */
        "selected"?: boolean;
-        /**
-          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
         */
@@ -9336,10 +9137,6 @@ declare namespace LocalJSX {
          * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
         */
        "positionAnchor"?: HTMLElement | string;
-        /**
-          * Set to `"soft"` for a toast with slightly rounded corners, `"round"` for a toast with fully rounded corners, or `"rectangular"` for a toast without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-         */
-        "shape"?: 'soft' | 'round' | 'rectangular';
        /**
          * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
         */
@@ -9359,7 +9156,7 @@ declare namespace LocalJSX {
    }
    interface IonToggle {
        /**
-          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
         */
        "alignment"?: 'start' | 'center';
        /**
@@ -9379,7 +9176,7 @@ declare namespace LocalJSX {
         */
        "enableOnOffLabels"?: boolean | undefined;
        /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
@@ -9506,16 +9303,12 @@ declare namespace LocalJSX {
        "ion-searchbar": IonSearchbar;
        "ion-segment": IonSegment;
        "ion-segment-button": IonSegmentButton;
-        "ion-segment-content": IonSegmentContent;
-        "ion-segment-view": IonSegmentView;
        "ion-select": IonSelect;
-        "ion-select-modal": IonSelectModal;
        "ion-select-option": IonSelectOption;
        "ion-select-popover": IonSelectPopover;
        "ion-skeleton-text": IonSkeletonText;
        "ion-spinner": IonSpinner;
        "ion-split-pane": IonSplitPane;
-        "ion-status-hint": IonStatusHint;
        "ion-tab": IonTab;
        "ion-tab-bar": IonTabBar;
        "ion-tab-button": IonTabButton;
@@ -9609,16 +9402,12 @@ declare module "@stencil/core" {
            "ion-searchbar": LocalJSX.IonSearchbar & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
            "ion-segment": LocalJSX.IonSegment & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
            "ion-segment-button": LocalJSX.IonSegmentButton & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
-            "ion-segment-content": LocalJSX.IonSegmentContent & JSXBase.HTMLAttributes<HTMLIonSegmentContentElement>;
-            "ion-segment-view": LocalJSX.IonSegmentView & JSXBase.HTMLAttributes<HTMLIonSegmentViewElement>;
            "ion-select": LocalJSX.IonSelect & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
-            "ion-select-modal": LocalJSX.IonSelectModal & JSXBase.HTMLAttributes<HTMLIonSelectModalElement>;
            "ion-select-option": LocalJSX.IonSelectOption & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
            "ion-select-popover": LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;
            "ion-skeleton-text": LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
            "ion-spinner": LocalJSX.IonSpinner & JSXBase.HTMLAttributes<HTMLIonSpinnerElement>;
            "ion-split-pane": LocalJSX.IonSplitPane & JSXBase.HTMLAttributes<HTMLIonSplitPaneElement>;
-            "ion-status-hint": LocalJSX.IonStatusHint & JSXBase.HTMLAttributes<HTMLIonStatusHintElement>;
            "ion-tab": LocalJSX.IonTab & JSXBase.HTMLAttributes<HTMLIonTabElement>;
            "ion-tab-bar": LocalJSX.IonTabBar & JSXBase.HTMLAttributes<HTMLIonTabBarElement>;
            "ion-tab-button": LocalJSX.IonTabButton & JSXBase.HTMLAttributes<HTMLIonTabButtonElement>;
--- a/core/src/components/accordion-group/accordion-group.common.scss
+++ b/core/src/components/accordion-group/accordion-group.common.scss
@@ -1,6 +0,0 @@
-// Accordion Group: Common
-// --------------------------------------------------
-
-:host {
-  display: block;
-}
--- a/core/src/components/accordion-group/accordion-group.ionic.scss
+++ b/core/src/components/accordion-group/accordion-group.ionic.scss
@@ -1,37 +0,0 @@
-@use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "./accordion-group.common";
-
-// Ionic Accordion Group
-// --------------------------------------------------
-
-:host {
-  min-width: 272px;
-
-  background-color: globals.$ion-primitives-base-white;
-}
-
-// Inset Accordion Group
-// --------------------------------------------------
-// Shape and padding only apply if the group is inset
-
-:host(.accordion-group-expand-inset) {
-  @include globals.padding(globals.$ion-space-100);
-}
-
-:host(.accordion-group-expand-inset.accordion-group-shape-round) {
-  --border-radius: #{globals.$ion-border-radius-400};
-
-  @include globals.border-radius(globals.$ion-border-radius-400);
-}
-
-:host(.accordion-group-expand-inset.accordion-group-shape-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
-
-  @include globals.border-radius(globals.$ion-border-radius-200);
-}
-
-:host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
-
-  @include globals.border-radius(globals.$ion-border-radius-0);
-}
--- a/core/src/components/accordion-group/accordion-group.ios.scss
+++ b/core/src/components/accordion-group/accordion-group.ios.scss
@@ -1,4 +1,4 @@
-@import "./accordion-group.native";
+@import "./accordion-group";

 // iOS Accordion Group
 // --------------------------------------------------
--- a/core/src/components/accordion-group/accordion-group.md.scss
+++ b/core/src/components/accordion-group/accordion-group.md.scss
@@ -1,4 +1,4 @@
-@import "./accordion-group.native";
+@import "./accordion-group";
@import "../accordion/accordion.md.vars";

 // Material Design Accordion Group
--- a/core/src/components/accordion-group/accordion-group.native.scss
+++ b/core/src/components/accordion-group/accordion-group.native.scss
@@ -1,10 +1,13 @@
-@import "./accordion-group.common";
@import "../../themes/native/native.globals";
@import "../accordion/accordion.vars";

-// Accordion Group: Native
+// Accordion Group
 // --------------------------------------------------

+:host {
+  display: block;
+}
+
 :host(.accordion-group-expand-inset) {
  @include margin($accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin, $accordion-inset-margin);
 }
--- a/core/src/components/accordion-group/accordion-group.tsx
+++ b/core/src/components/accordion-group/accordion-group.tsx
@@ -15,7 +15,7 @@ import type { AccordionGroupChangeEventDetail } from './accordion-group-interfac
  styleUrls: {
    ios: 'accordion-group.ios.scss',
    md: 'accordion-group.md.scss',
-    ionic: 'accordion-group.ionic.scss',
+    ionic: 'accordion-group.md.scss',
  },
  shadow: true,
 })
@@ -60,16 +60,6 @@ export class AccordionGroup implements ComponentInterface {
   */
  @Prop() expand: 'compact' | 'inset' = 'compact';

-  /**
-   * Set to `"soft"` for an accordion group with slightly rounded corners,
-   * `"round"` for an accordion group with fully rounded corners, or
-   * `"rectangular"` for an accordion group without rounded corners.
-   *
-   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
-   * Only applies when `expand` is set to `"inset"`.
-   */
-  @Prop() shape?: 'soft' | 'round' | 'rectangular';
-
  /**
   * Emitted when the value property has changed as a result of a user action such as a click.
   *
@@ -288,26 +278,9 @@ export class AccordionGroup implements ComponentInterface {
    return Array.from(this.el.querySelectorAll(':scope > ion-accordion')) as HTMLIonAccordionElement[];
  }

-  private getShape(): string | undefined {
-    const theme = getIonTheme(this);
-    const { shape } = this;
-
-    // TODO(ROU-11328): Remove theme check when shapes are defined for all themes.
-    if (theme !== 'ionic') {
-      return undefined;
-    }
-
-    if (shape === undefined) {
-      return 'round';
-    }
-
-    return shape;
-  }
-
  render() {
    const { disabled, readonly, expand } = this;
    const theme = getIonTheme(this);
-    const shape = this.getShape();

    return (
      <Host
@@ -316,7 +289,6 @@ export class AccordionGroup implements ComponentInterface {
          'accordion-group-disabled': disabled,
          'accordion-group-readonly': readonly,
          [`accordion-group-expand-${expand}`]: true,
-          [`accordion-group-shape-${shape}`]: shape !== undefined,
        }}
        role="presentation"
      >
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts
@@ -1,162 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('accordion-group: expand'), () => {
-    test.describe(title('compact'), () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.setContent(
-          `
-          <style>
-            /* Background styles to show the border radius */
-            :root {
-              background: #ccc7c7;
-            }
-          </style>
-          <ion-accordion-group>
-            <ion-accordion value="first">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-          </ion-accordion-group>
-        `,
-          config
-        );
-
-        const accordionGroup = page.locator('ion-accordion-group');
-
-        await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact'));
-      });
-
-      test('should not have visual regressions when expanded', async ({ page }) => {
-        await page.setContent(
-          `
-          <style>
-            /* Background styles to show the border radius */
-            :root {
-              background: #ccc7c7;
-            }
-          </style>
-          <ion-accordion-group value="first">
-            <ion-accordion value="first">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-          </ion-accordion-group>
-        `,
-          config
-        );
-
-        const accordionGroup = page.locator('ion-accordion-group');
-
-        await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact-expanded'));
-      });
-    });
-
-    test.describe(title('inset'), () => {
-      test('should not have visual regressions', async ({ page }) => {
-        await page.setContent(
-          `
-          <style>
-            /* Background styles to show the border radius */
-            :root {
-              background: #ccc7c7;
-            }
-          </style>
-          <ion-accordion-group expand="inset">
-            <ion-accordion value="first">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-          </ion-accordion-group>
-        `,
-          config
-        );
-
-        const accordionGroup = page.locator('ion-accordion-group');
-
-        await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset'));
-      });
-
-      test('should not have visual regressions when expanded', async ({ page }) => {
-        await page.setContent(
-          `
-          <style>
-            /* Background styles to show the border radius */
-            :root {
-              background: #ccc7c7;
-            }
-          </style>
-          <ion-accordion-group value="first" expand="inset">
-            <ion-accordion value="first">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-          </ion-accordion-group>
-        `,
-          config
-        );
-
-        const accordionGroup = page.locator('ion-accordion-group');
-
-        await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset-expanded'));
-      });
-    });
-  });
-});
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/expand/index.html
+++ b/core/src/components/accordion-group/test/expand/index.html
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Accordion Group - Expand</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-row-gap: 20px;
-        grid-column-gap: 20px;
-      }
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: #6f7378;
-
-        margin-top: 10px;
-        margin-left: 5px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Accordion Group - Expand</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen="true" color="light">
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Default</h2>
-            <ion-accordion-group>
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <h2>Default: Expanded</h2>
-            <ion-accordion-group value="first">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <h2>Inset</h2>
-            <ion-accordion-group expand="inset">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <h2>Inset: Expanded</h2>
-            <ion-accordion-group value="first" expand="inset">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts
@@ -1,47 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('accordion-group: shape'), () => {
-    ['round', 'soft', 'rectangular'].forEach((shape) => {
-      test(`${shape} - should not have visual regressions`, async ({ page }) => {
-        await page.setContent(
-          `
-          <style>
-            /* Background styles to show the border radius */
-            :root {
-              background: #222;
-            }
-          </style>
-
-          <ion-accordion-group value="first" expand="inset" shape="${shape}">
-            <ion-accordion value="first">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-          </ion-accordion-group>
-      `,
-          config
-        );
-
-        const accordionGroup = page.locator('ion-accordion-group');
-
-        await expect(accordionGroup).toHaveScreenshot(screenshot(`accordion-group-shape-${shape}`));
-      });
-    });
-  });
-});
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/shape/index.html
+++ b/core/src/components/accordion-group/test/shape/index.html
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Accordion Group - Shape</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-row-gap: 20px;
-        grid-column-gap: 20px;
-      }
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: #6f7378;
-
-        margin-top: 10px;
-        margin-left: 5px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Accordion Group - Shape</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen="true" color="light">
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Default</h2>
-            <ion-accordion-group expand="inset" value="first">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <h2>Round</h2>
-            <ion-accordion-group expand="inset" value="first" shape="round">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <h2>Soft</h2>
-            <ion-accordion-group expand="inset" value="first" shape="soft">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <h2>Rectangular</h2>
-            <ion-accordion-group expand="inset" value="first" shape="rectangular">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts
+++ b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts
@@ -1,38 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('accordion-group: states'), () => {
-    test('should render disabled state', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-accordion-group value="first" disabled="true">
-          <ion-accordion value="first">
-            <ion-item slot="header">
-              <ion-label>Accordion title</ion-label>
-            </ion-item>
-            <div slot="content">This is the body of the accordion.</div>
-          </ion-accordion>
-          <ion-accordion value="second">
-            <ion-item slot="header">
-              <ion-label>Accordion title</ion-label>
-            </ion-item>
-            <div slot="content">This is the body of the accordion.</div>
-          </ion-accordion>
-          <ion-accordion value="third">
-            <ion-item slot="header">
-              <ion-label>Accordion title</ion-label>
-            </ion-item>
-            <div slot="content">This is the body of the accordion.</div>
-          </ion-accordion>
-        </ion-accordion-group>
-    `,
-        config
-      );
-
-      const accordionGroup = page.locator('ion-accordion-group');
-
-      await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-disabled'));
-    });
-  });
-});
--- a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion-group/test/states/accordion-group.e2e.ts-snapshots/accordion-group-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion-group/test/states/index.html
+++ b/core/src/components/accordion-group/test/states/index.html
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Accordion Group - States</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-row-gap: 20px;
-        grid-column-gap: 20px;
-      }
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: #6f7378;
-
-        margin-top: 10px;
-        margin-left: 5px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Accordion Group - States</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen="true" color="light">
-        <div class="grid ion-padding">
-          <div class="grid-item">
-            <h2>Default</h2>
-            <ion-accordion-group value="first">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-          <div class="grid-item">
-            <h2>Disabled</h2>
-            <ion-accordion-group value="first" disabled="true">
-              <ion-accordion value="first">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="second">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-              <ion-accordion value="third">
-                <ion-item slot="header">
-                  <ion-label>Accordion title</ion-label>
-                </ion-item>
-                <div slot="content">This is the body of the accordion.</div>
-              </ion-accordion>
-            </ion-accordion-group>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/accordion/accordion.ionic.scss
+++ b/core/src/components/accordion/accordion.ionic.scss
@@ -1,76 +0,0 @@
-@use "../../themes/ionic/ionic.globals.scss" as globals;
-@use "./accordion.common";
-
-// Ionic Accordion
-// --------------------------------------------------
-
-:host {
-  position: relative;
-}
-
-// The border is added to the ::after element
-// to properly inset the border relative to the entire
-// accordion, rather than just the header.
-:host::after {
-  @include globals.margin(null, globals.$ion-space-400, null, globals.$ion-space-400);
-  @include globals.position(null, 0, 0, 0);
-
-  display: block;
-
-  position: absolute;
-
-  height: globals.$ion-border-size-025;
-
-  background-color: globals.$ion-primitives-neutral-300;
-
-  content: "";
-
-  z-index: 3;
-}
-
-:host(.accordion-animated) {
-  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-
-:host(.accordion-animated) #content {
-  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-
-// Accordion Header
-// --------------------------------------------------
-
-// The border is removed from the item in the header because
-// we are adding a border to the ::after element of the accordion.
-::slotted(ion-item[slot="header"]) {
-  --border-radius: inherit;
-  --color: #{globals.$ion-primitives-neutral-1200};
-  --border-width: 0;
-  --inner-border-width: 0;
-  --min-height: #{globals.$ion-scale-700};
-  --padding-top: #{globals.$ion-space-300};
-  --padding-end: #{globals.$ion-space-400};
-  --padding-bottom: #{globals.$ion-space-300};
-  --padding-start: #{globals.$ion-space-400};
-
-  @include globals.typography(globals.$ion-heading-h6-medium);
-}
-
-// Accordion Content
-// --------------------------------------------------
-
-#content-wrapper {
-  @include globals.padding(null, globals.$ion-space-400, globals.$ion-space-300, globals.$ion-space-400);
-  @include globals.typography(globals.$ion-body-md-regular);
-
-  color: globals.$ion-primitives-neutral-1000;
-}
-
-// Disabled Accordion
-// --------------------------------------------------
-
-:host(.accordion-disabled)::before {
-  @include globals.border-radius(inherit);
-  @include globals.disabled-state();
-
-  z-index: 2;
-}
--- a/core/src/components/accordion/accordion.ios.scss
+++ b/core/src/components/accordion/accordion.ios.scss
@@ -1,4 +1,4 @@
-@import "./accordion.native";
+@import "./accordion.scss";
@import "../item/item.ios.vars";

 // iOS Accordion
--- a/core/src/components/accordion/accordion.md.scss
+++ b/core/src/components/accordion/accordion.md.scss
@@ -1,4 +1,4 @@
-@import "./accordion.native";
+@import "./accordion.scss";

 // Material Design Accordion
 // --------------------------------------------------
--- a/core/src/components/accordion/accordion.native.scss
+++ b/core/src/components/accordion/accordion.native.scss
@@ -1,27 +0,0 @@
-@import "./accordion.common";
-@import "./accordion.vars.scss";
-
-// Accordion: Native
-// --------------------------------------------------
-
-:host {
-  background-color: $accordion-background-color;
-}
-
-:host(.accordion-animated) {
-  transition: all $accordion-transition-duration $accordion-transition-easing;
-}
-
-:host(.accordion-animated) #content {
-  transition: max-height $accordion-transition-duration $accordion-transition-easing;
-}
-
-/**
- * We do not set the opacity on the
- * host otherwise you would see the
- * box-shadow behind it.
- */
-:host(.accordion-disabled) #header,
-:host(.accordion-disabled) #content {
-  opacity: $accordion-disabled-opacity;
-}
--- a/core/src/components/accordion/accordion.common.scss
+++ b/core/src/components/accordion/accordion.common.scss
@@ -1,4 +1,6 @@
-// Accordion: Common
+@import "./accordion.vars.scss";
+
+// Accordion
 // --------------------------------------------------

 :host {
@@ -8,6 +10,8 @@

  width: 100%;

+  background-color: $accordion-background-color;
+
  overflow: hidden;

  /**
@@ -26,6 +30,14 @@
  --border-width: 0px;
 }

+:host(.accordion-animated) {
+  transition: all $accordion-transition-duration $accordion-transition-easing;
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height $accordion-transition-duration $accordion-transition-easing;
+}
+
 #content {
  overflow: hidden;

@@ -60,6 +72,16 @@
  pointer-events: none;
 }

+/**
+ * We do not set the opacity on the
+ * host otherwise you would see the
+ * box-shadow behind it.
+ */
+:host(.accordion-disabled) #header,
+:host(.accordion-disabled) #content {
+  opacity: $accordion-disabled-opacity;
+}
+
@media (prefers-reduced-motion: reduce) {
  :host,
  #content {
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -2,7 +2,6 @@ import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
-import { hostContext } from '@utils/theme';
 import { chevronDown } from 'ionicons/icons';

 import { config } from '../../global/config';
@@ -34,7 +33,7 @@ const enum AccordionState {
  styleUrls: {
    ios: 'accordion.ios.scss',
    md: 'accordion.md.scss',
-    ionic: 'accordion.ionic.scss',
+    ionic: 'accordion.md.scss',
  },
  shadow: {
    delegatesFocus: true,
@@ -49,7 +48,7 @@ export class Accordion implements ComponentInterface {

  private currentRaf: number | undefined;

-  @Element() el!: HTMLElement;
+  @Element() el?: HTMLElement;

  @State() state: AccordionState = AccordionState.Collapsed;
  @State() isNext = false;
@@ -379,6 +378,10 @@ export class Accordion implements ComponentInterface {
  };

  private getNextSibling = () => {
+    if (!this.el) {
+      return;
+    }
+
    const nextSibling = this.el.nextElementSibling;

    if (nextSibling?.tagName !== 'ION-ACCORDION') {
@@ -389,6 +392,10 @@ export class Accordion implements ComponentInterface {
  };

  private getPreviousSibling = () => {
+    if (!this.el) {
+      return;
+    }
+
    const previousSibling = this.el.previousElementSibling;

    if (previousSibling?.tagName !== 'ION-ACCORDION') {
@@ -442,8 +449,6 @@ export class Accordion implements ComponentInterface {
          'accordion-readonly': readonly,

          'accordion-animated': this.shouldAnimate(),
-
-          'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
        }}
      >
        <div
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts
@@ -12,7 +12,6 @@ configs().forEach(({ config, screenshot, title }) => {
    });
  });
 });
-
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
  test.describe(title('accordion: ionChange'), () => {
    test.beforeEach(async ({ page }) => {
@@ -59,39 +58,3 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
    });
  });
 });
-
-configs({ modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('accordion: basic'), () => {
-    test('should not have visual regressions with text content', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-accordion-group value="first">
-          <ion-accordion value="first">
-            <ion-item slot="header">
-              <ion-label>Accordion title</ion-label>
-            </ion-item>
-            <div slot="content">This is the body of the accordion.</div>
-          </ion-accordion>
-          <ion-accordion value="second">
-            <ion-item slot="header">
-              <ion-label>Accordion title</ion-label>
-            </ion-item>
-            <div slot="content">This is the body of the accordion.</div>
-          </ion-accordion>
-          <ion-accordion value="third">
-            <ion-item slot="header">
-              <ion-label>Accordion title</ion-label>
-            </ion-item>
-            <div slot="content">This is the body of the accordion.</div>
-          </ion-accordion>
-        </ion-accordion-group>
-      `,
-        config
-      );
-
-      const accordion = page.locator('ion-accordion-group');
-
-      await expect(accordion).toHaveScreenshot(screenshot('accordion-basic-text'));
-    });
-  });
-});
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/accordion-basic-text-ionic-md-rtl-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';

-configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ config, screenshot, title }) => {
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
  test.describe(title('accordion: multiple'), () => {
    test('should update value and visually expand items', async ({ page }) => {
      await page.goto(`/src/components/accordion/test/multiple`, config);
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-one-open-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-two-open-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/multiple/accordion.e2e.ts-snapshots/accordion-zero-open-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts
@@ -1,48 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('accordion: shape'), () => {
-    ['round', 'soft', 'rectangular'].forEach((shape) => {
-      test(`${shape} - should not have visual regressions`, async ({ page }) => {
-        await page.setContent(
-          `
-          <style>
-            /* Background styles to show the border radius */
-            :root {
-              background: #222;
-            }
-          </style>
-
-          <!-- Focused accordion to show the border radius -->
-          <ion-accordion-group value="first" expand="inset" shape="${shape}">
-            <ion-accordion value="first">
-              <ion-item slot="header" class="ion-focused">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="second">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-            <ion-accordion value="third">
-              <ion-item slot="header">
-                <ion-label>Accordion title</ion-label>
-              </ion-item>
-              <div slot="content">This is the body of the accordion.</div>
-            </ion-accordion>
-          </ion-accordion-group>
-      `,
-          config
-        );
-
-        const accordionGroup = page.locator('ion-accordion-group');
-
-        await expect(accordionGroup).toHaveScreenshot(screenshot(`accordion-shape-${shape}`));
-      });
-    });
-  });
-});
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
--- a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
+++ b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Brandy Carney	ac17dd6a44	chore: use proper file	2024-09-05 12:01:46 -04:00
Brandy Carney	7fc02b4251	chore: build	2024-09-05 11:51:26 -04:00
Maria Hutt	e97ccd8370	feat(react, vue, angular): use tabs without router (#29794 ) Issue number: resolves #25184 --------- Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>	2024-09-05 11:33:37 -04:00