feat(chip): add shape to ionic theme (#29303)

Issue number: None

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added new prop `shape`, only supported on Ionic Theme.
- Added scss for the different shapes.
- Added missing scss for font-weight and line-height.
- Added missing tests for focus state and new tests for shape.
- Added new font weight and line-height design tokens. This change
uncovered an issue on the IOnic Typography tests that resulted on
snapshots differences.
- Added & updated new snapshot baselines.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>

.gitattributes

@@ -1 +0,0 @@
-* text=auto eol=lf

.github/CODEOWNERS

@@ -12,3 +12,8 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 * @ionic-team/framework
+
+# Utilities
+
+/core/src/utils/gesture/ @liamdebeasi
+/core/src/utils/input-shims/ @liamdebeasi

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -9,7 +9,7 @@ body:
       label: Prerequisites
       description: Please ensure you have completed all of the following.
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
+        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
           required: true
         - label: I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
           required: true
@@ -23,7 +23,7 @@ body:
       description: Which version(s) of Ionic Framework does this issue impact? [Ionic Framework 1.x to 6.x are no longer supported](https://ionicframework.com/docs/reference/support#framework-maintenance-and-support-status). For extended support, considering visiting [Ionic's Enterprise offering](https://ionic.io/enterprise).
       options:
         - v7.x
-        - v8.x
+        - v8.x (Beta)
         - Nightly
       multiple: true
     validations:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -9,7 +9,7 @@ body:
       label: Prerequisites
       description: Please ensure you have completed all of the following.
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
+        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
           required: true
         - label: I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
           required: true

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

@@ -5,20 +5,12 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 20.x
-    - uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
+        node-version: 18.x
+
     - name: Install Angular Server Dependencies
       run: npm ci
       shell: bash
       working-directory: ./packages/angular-server
-    - name: Sync
-      run: npm run sync
-      shell: bash
-      working-directory: ./packages/angular-server
     - name: Build
       run: npm run build.prod
       shell: bash

.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

.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
@@ -29,4 +29,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts

.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
@@ -31,4 +31,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt

.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

.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

.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

.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

.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

.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:

.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

.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

.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

.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

.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

.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

.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

.github/workflows/assign-issues.yml

@@ -11,8 +11,8 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@c015a6a3f410f12f58255c3d085fd774312f7a2f # v2.1.2
+        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
         with:
-          assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/build.yml

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

.github/workflows/conventional-commit.yml

@@ -1,32 +0,0 @@
-name: PR Conventional Commit Validation
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened, edited]
-
-jobs:
-  validate-pr-title:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Validate PR title
-        uses:  amannn/action-semantic-pull-request@v5
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          # Configure that a scope must always be provided.
-          requireScope: true
-          # Configure additional validation for the subject based on a regex.
-          # This example ensures the subject doesn't start with an uppercase character.
-          subjectPattern: ^(?![A-Z]).+$
-          # If `subjectPattern` is configured, you can use this property to 
-          # override the default error message that is shown when the pattern 
-          # doesn't match. The variables `subject` and `title` can be used 
-          # within the message.
-          subjectPatternError: |
-            The subject "{subject}" found in the pull request title "{title}" didn't match the configured pattern. Please ensure that the subject doesn't start with an uppercase character.
-          # If the PR contains one of these newline-delimited labels, the
-          # validation is skipped. If you want to rerun the validation when
-          # labels change, you might want to use the `labeled` and `unlabeled`
-          # event triggers in your workflow.
-          ignoreLabels: |
-            release

.github/workflows/release.yml

@@ -22,6 +22,8 @@ on:
         options:
           - latest
           - next
+          - v5-lts
+          - v4-lts
       preid:
         type: choice
         description: Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".

.github/workflows/stencil-nightly.yml

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

.vercelignore

@@ -1 +0,0 @@
-core/src/components/**/*/*.png

CHANGELOG.md

@@ -3,365 +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.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
-
-
-### Bug Fixes
-
-* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
-
-
-
-
-
-## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
-
-
-### Bug Fixes
-
-* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
-* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
-
-
-
-
-
-## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
-
-
-### Bug Fixes
-
-* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
-* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
-* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
-* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
-* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
-
-
-
-
-
-# [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
-
-
-### 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)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
-* **angular:** remove the tabindex set by routerLink from Ionic components ([#29744](https://github.com/ionic-team/ionic-framework/issues/29744)) ([20073e1](https://github.com/ionic-team/ionic-framework/commit/20073e10c934d3704734195c72f4281c9b9658e3)), closes [#20632](https://github.com/ionic-team/ionic-framework/issues/20632)
-* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
-* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-* **react:** add onPointerDown, onTouchEnd, add onTouchMove ([#29736](https://github.com/ionic-team/ionic-framework/issues/29736)) ([bfee3cd](https://github.com/ionic-team/ionic-framework/commit/bfee3cd064a9b495489c2679ccfb762e622dbf09)), closes [#29174](https://github.com/ionic-team/ionic-framework/issues/29174)
-* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
-
-
-
-
-
-## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **angular:** add focusTrap prop to modal and popover ([#29729](https://github.com/ionic-team/ionic-framework/issues/29729)) ([05913c3](https://github.com/ionic-team/ionic-framework/commit/05913c3cc3f2e8cb91f9a0944cd55e78392b0ba3)), closes [#29728](https://github.com/ionic-team/ionic-framework/issues/29728)
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-
-
-
-
-
-## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
-
-
-### Bug Fixes
-
-* **dependencies:** use latest @stencil/core to remove DOMException errors ([#29685](https://github.com/ionic-team/ionic-framework/issues/29685)) ([d70ea4](https://github.com/ionic-team/ionic/commit/d70ea400a4713bd091af1393e196e10844a190b6)), closes [#29681](https://github.com/ionic-team/ionic/issues/29681)
-* **vue:** add optional IonicConfig type parameter to IonicVue plugin ([#29637](https://github.com/ionic-team/ionic-framework/issues/29637)) ([90893f4](https://github.com/ionic-team/ionic-framework/commit/90893f46c930dbccd4251fa2f56bdde30b669158)), closes [#29659](https://github.com/ionic-team/ionic-framework/issues/29659)
-
-
-
-
-
-## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
-
-
-### Bug Fixes
-
-* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
-
-
-
-
-
-## 8.2.3
-
-This version should be skipped. Install 8.2.4 instead.
-
-
-
-
-
-## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
-
-
-### Bug Fixes
-
-* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
-
-
-
-
-
-## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
-
-* **react:** export InputInputEventDetail type ([#29512](https://github.com/ionic-team/ionic-framework/issues/29512)) ([624ceba](https://github.com/ionic-team/ionic-framework/commit/624ceba2e128bb13a3afe4c35883f603f5488d0e)), closes [#29518](https://github.com/ionic-team/ionic-framework/issues/29518)
-
-
-
-
-
-# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
-
-
-### Features
-
-* **angular:** setting props on a signal works ([#29453](https://github.com/ionic-team/ionic-framework/issues/29453)) ([4640e04](https://github.com/ionic-team/ionic-framework/commit/4640e046ebbd35bf92737368c6262f79a8803a59)), closes [#28876](https://github.com/ionic-team/ionic-framework/issues/28876)
-
-
-
-
-
-## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
-
-
-### Bug Fixes
-
-* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
-
-
-
-
-
-## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)
-
-
-### Bug Fixes
-
-* **many:** do not grow slotted checkboxes, radios, selects and toggles ([#29501](https://github.com/ionic-team/ionic-framework/issues/29501)) ([c63d07b](https://github.com/ionic-team/ionic-framework/commit/c63d07bdd0c4d9939474c52b03a3f2535511933f)), closes [#29423](https://github.com/ionic-team/ionic-framework/issues/29423)
-* **picker:** update keyboard navigation ([#29497](https://github.com/ionic-team/ionic-framework/issues/29497)) ([32bc681](https://github.com/ionic-team/ionic-framework/commit/32bc681192b1833f1c897e692d2d36ba90c6af53))
-
-
-
-
-
-## [8.1.1](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.1) (2024-05-08)
-
-
-### Bug Fixes
-
-* **angular:** add formatOptions property to standalone datetime ([#29468](https://github.com/ionic-team/ionic-framework/issues/29468)) ([bb1db52](https://github.com/ionic-team/ionic-framework/commit/bb1db52567e0884a896f9ccd76c27540b52f5e48)), closes [#29464](https://github.com/ionic-team/ionic-framework/issues/29464)
-* **angular:** persist select disabled state in item ([#29448](https://github.com/ionic-team/ionic-framework/issues/29448)) ([dfb72d7](https://github.com/ionic-team/ionic-framework/commit/dfb72d7ea06e28d76069b23eb90c3426181b7c4c)), closes [#29234](https://github.com/ionic-team/ionic-framework/issues/29234)
-* **angular:** set active segment button when dynamically changing items ([#29418](https://github.com/ionic-team/ionic-framework/issues/29418)) ([ee83388](https://github.com/ionic-team/ionic-framework/commit/ee833881da3ecaa0a9153397f0c7e62c1923f19c)), closes [#29414](https://github.com/ionic-team/ionic-framework/issues/29414)
-* **radio:** persist checked state when items are updated in radio-group ([#29457](https://github.com/ionic-team/ionic-framework/issues/29457)) ([7ea14ae](https://github.com/ionic-team/ionic-framework/commit/7ea14ae41eb27f2a58952bd27d91ef4c77bb6a0c)), closes [#29442](https://github.com/ionic-team/ionic-framework/issues/29442)
-
-
-
-
-
-# [8.1.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.2...v8.1.0) (2024-05-01)
-
-
-### Features
-
-* add experimental transition focus manager ([#29400](https://github.com/ionic-team/ionic-framework/issues/29400)) ([5b686ef](https://github.com/ionic-team/ionic-framework/commit/5b686efc1025cd4088c89ef29154311a3d7504ba)), closes [#23650](https://github.com/ionic-team/ionic-framework/issues/23650)
-* **content:** add fixedSlotPlacement prop ([#29233](https://github.com/ionic-team/ionic-framework/issues/29233)) ([90a7e70](https://github.com/ionic-team/ionic-framework/commit/90a7e70a1c827835c18fd5f39d53ab17d286b4a7))
-* **datetime:** pass roles to overlay when dismissing ([#29221](https://github.com/ionic-team/ionic-framework/issues/29221)) ([6945adc](https://github.com/ionic-team/ionic-framework/commit/6945adc3cccabf59a2e640462ab4fd09ade59f6f)), closes [#28298](https://github.com/ionic-team/ionic-framework/issues/28298)
-* **input:** add clearInputIcon property ([#29246](https://github.com/ionic-team/ionic-framework/issues/29246)) ([0f5d1c0](https://github.com/ionic-team/ionic-framework/commit/0f5d1c02d20483d47b6907fec696633cc7634554)), closes [#26974](https://github.com/ionic-team/ionic-framework/issues/26974)
-* **modal, popover:** add ability to temporarily disable focus trapping ([#29379](https://github.com/ionic-team/ionic-framework/issues/29379)) ([7c00351](https://github.com/ionic-team/ionic-framework/commit/7c00351680a955130fa10d25d4439d3cc18db805)), closes [#24646](https://github.com/ionic-team/ionic-framework/issues/24646)
-* **picker:** picker column is easier to select with assistive technology ([#29371](https://github.com/ionic-team/ionic-framework/issues/29371)) ([e38e2e4](https://github.com/ionic-team/ionic-framework/commit/e38e2e4d35076fa42241158568fb0ed50094fcbf)), closes [#25221](https://github.com/ionic-team/ionic-framework/issues/25221)
-
-
-
-
-
-## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01)
-
-
-### Bug Fixes
-
-* **datetime:** navigating months in RTL works correctly ([#29421](https://github.com/ionic-team/ionic-framework/issues/29421)) ([4d09890](https://github.com/ionic-team/ionic-framework/commit/4d09890d69590f0c8c32b387769a6e1e14a03c33)), closes [#29198](https://github.com/ionic-team/ionic-framework/issues/29198)
-* **ios:** large title transition accounts for back button with no text  ([#29327](https://github.com/ionic-team/ionic-framework/issues/29327)) ([bd8d065](https://github.com/ionic-team/ionic-framework/commit/bd8d065e1af038fe24fbe9a6acd9e0f2004bc0b7)), closes [#28751](https://github.com/ionic-team/ionic-framework/issues/28751)
-* **md:** item border has improved contrast in dark mode ([#29398](https://github.com/ionic-team/ionic-framework/issues/29398)) ([fa85f03](https://github.com/ionic-team/ionic-framework/commit/fa85f030cfdb3ef8482ef29faff0144b27c9aa45)), closes [#29386](https://github.com/ionic-team/ionic-framework/issues/29386)
-* **select:** options are visible with fit-content width and fill outline ([#29408](https://github.com/ionic-team/ionic-framework/issues/29408)) ([f15b62a](https://github.com/ionic-team/ionic-framework/commit/f15b62a9ca9a817d2252753d31025d431ac9f8e2)), closes [#29321](https://github.com/ionic-team/ionic-framework/issues/29321)
-
-
-
-
-
-## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24)
-
-
-### Bug Fixes
-
-* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([ee49824](https://github.com/ionic-team/ionic-framework/commit/ee49824a84df7a7b002f41dab7b935fbcdb64946)), closes [#29358](https://github.com/ionic-team/ionic-framework/issues/29358)
-* **input:** debounce is set with binding syntax in angular on load ([#29377](https://github.com/ionic-team/ionic-framework/issues/29377)) ([23321f7](https://github.com/ionic-team/ionic-framework/commit/23321f7ab2a242c3c4193fd6cece3f1c7c0034ef)), closes [#29374](https://github.com/ionic-team/ionic-framework/issues/29374)
-
-
-
-
-
-# [8.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.2...v8.0.0) (2024-04-17)
-
-**Note:** Version bump only for package ionic-framework
-
-
-
-
-
-# [8.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.1...v8.0.0-rc.2) (2024-04-17)
-
-
-### Bug Fixes
-
-* **dark-palette:** improve base colors ([#29239](https://github.com/ionic-team/ionic-framework/issues/29239)) ([4698d22](https://github.com/ionic-team/ionic-framework/commit/4698d22413966b59f9fa65b4e2533695cf00ed70)), closes [#29219](https://github.com/ionic-team/ionic-framework/issues/29219)
-* **form-controls:** adjust flex properties inside of an item ([#29328](https://github.com/ionic-team/ionic-framework/issues/29328)) ([9b59138](https://github.com/ionic-team/ionic-framework/commit/9b59138011fd1e71def209ec3a43fb7f91b58949)), closes [#29319](https://github.com/ionic-team/ionic-framework/issues/29319)
-
-
-
-
-
-## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
-
-
-### Bug Fixes
-
-* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
-
-
-
-
-
-# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
-
-
-### Bug Fixes
-
-* **button:** use clamp for font sizes on circle shape ([#29200](https://github.com/ionic-team/ionic-framework/issues/29200)) ([4d6edee](https://github.com/ionic-team/ionic-framework/commit/4d6edee89c7bb2cb669d67730d7ddf24c78b3cb1))
-
-
-
-
-
-## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
-
-
-### Performance Improvements
-
-* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
-
-
-
-
 
 ## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
 

README.md

@@ -20,7 +20,7 @@
   <a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
   </a>
-  <a href="https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>
   <a href="https://twitter.com/Ionicframework">
@@ -38,7 +38,7 @@
     Documentation
   </a>
   <span> · </span>
-  <a href="https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
   <span> · </span>
   <a href="https://blog.ionicframework.com/">Blog</a>
   <br />
@@ -63,15 +63,14 @@ Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v
 
 ### Getting Started
 
-Start a new project by following our [documentation](https://ionicframework.com/docs/).
+Start a new project by following our quick [Getting Started guide](https://ionicframework.com/getting-started/).
 We would love to hear from you! If you have any feedback or run into issues using our framework, please file
-an [issue](https://github.com/ionic-team/ionic-framework/issues/new) on this repository.
+an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
 
 ### Migration Guides
 
 Already have an Ionic app? These guides will help you migrate to the latest versions.
 
-* [Migrate from v7 to v8](https://ionicframework.com/docs/updating/8-0)
 * [Migrate from v6 to v7](https://ionicframework.com/docs/updating/7-0)
 * [Migrate from v5 to v6](https://ionicframework.com/docs/updating/6-0)
 * [Migrate from v4 to v5](https://ionicframework.com/docs/updating/5-0)
@@ -83,16 +82,21 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
 
 - [Angular Ionic Conference App](https://github.com/ionic-team/ionic-conference-app)
 - [React Ionic Conference App](https://github.com/ionic-team/ionic-react-conference-app)
-- [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app)
+<!-- TODO(FW-3811): add this when the vue conference app is updated -->
+<!-- - [Vue Ionic Conference App](https://github.com/ionic-team/ionic-vue-conference-app) -->
 
 ### Contributing
 
 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md)
-and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic-framework/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
+and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.
 
-Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic-framework/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+
+### Future Goals
+
+As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.
 
 ### Earlier Versions
 

core/.stylelintrc.yml

@@ -23,10 +23,10 @@ rules:
   at-rule-empty-line-before:
     - always
     - except:
-      - blockless-after-blockless
-      - first-nested
+        - blockless-after-blockless
+        - first-nested
       ignore:
-      - after-comment
+        - after-comment
 
   block-closing-brace-newline-before:
     - always
@@ -40,14 +40,13 @@ rules:
   custom-property-empty-line-before:
     - always
     - except:
-      - after-comment
-      - after-custom-property
-      - first-nested
+        - after-comment
+        - after-custom-property
+        - first-nested
 
   declaration-no-important:
     - true
 
-
   order/order:
     - custom-properties
     - dollar-variables
@@ -57,216 +56,212 @@ rules:
 
   # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
   order/properties-order:
-
     # Box
 
     - emptyLineBefore: always
       properties:
-      - display
-      - position
-      - top
-      - right
-      - bottom
-      - left
+        - display
+        - position
+        - top
+        - right
+        - bottom
+        - left
 
     - emptyLineBefore: always
       properties:
-      - flex
-      - flex-basis
-      - flex-direction
-      - flex-flow
-      - flex-grow
-      - flex-shrink
-      - flex-wrap
-      - align-content
-      - align-items
-      - align-self
-      - justify-content
-      - order
+        - flex
+        - flex-basis
+        - flex-direction
+        - flex-flow
+        - flex-grow
+        - flex-shrink
+        - flex-wrap
+        - align-content
+        - align-items
+        - align-self
+        - justify-content
+        - order
 
     - emptyLineBefore: always
       properties:
-      - width
-      - min-width
-      - max-width
+        - width
+        - min-width
+        - max-width
 
-      - height
-      - min-height
-      - max-height
+        - height
+        - min-height
+        - max-height
 
     - emptyLineBefore: always
       properties:
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
+        - margin
+        - margin-top
+        - margin-right
+        - margin-bottom
+        - margin-left
 
     - emptyLineBefore: always
       properties:
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
+        - padding
+        - padding-top
+        - padding-right
+        - padding-bottom
+        - padding-left
 
     - emptyLineBefore: always
       properties:
-      - float
-      - clear
+        - float
+        - clear
 
     - emptyLineBefore: always
       properties:
-      - columns
-      - column-gap
-      - column-fill
-      - column-rule
-      - column-span
-      - column-count
-      - column-width
+        - columns
+        - column-gap
+        - column-fill
+        - column-rule
+        - column-span
+        - column-count
+        - column-width
 
     - emptyLineBefore: always
       properties:
-      - transform
-      - transform-box
-      - transform-origin
-      - transform-style
+        - transform
+        - transform-box
+        - transform-origin
+        - transform-style
 
     - emptyLineBefore: always
       properties:
-      - transition
-      - transition-delay
-      - transition-duration
-      - transition-property
-      - transition-timing-function
+        - transition
+        - transition-delay
+        - transition-duration
+        - transition-property
+        - transition-timing-function
 
     # Border
 
     - emptyLineBefore: always
       properties:
-      - border
-      - border-top
-      - border-right
-      - border-bottom
-      - border-left
-      - border-width
-      - border-top-width
-      - border-right-width
-      - border-bottom-width
-      - border-left-width
+        - border
+        - border-top
+        - border-right
+        - border-bottom
+        - border-left
+        - border-width
+        - border-top-width
+        - border-right-width
+        - border-bottom-width
+        - border-left-width
 
-      - border-style
-      - border-top-style
-      - border-right-style
-      - border-bottom-style
-      - border-left-style
+        - border-style
+        - border-top-style
+        - border-right-style
+        - border-bottom-style
+        - border-left-style
 
-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-left-radius
-      - border-bottom-right-radius
+        - border-radius
+        - border-top-left-radius
+        - border-top-right-radius
+        - border-bottom-left-radius
+        - border-bottom-right-radius
 
-      - border-color
-      - border-top-color
-      - border-right-color
-      - border-bottom-color
-      - border-left-color
+        - border-color
+        - border-top-color
+        - border-right-color
+        - border-bottom-color
+        - border-left-color
 
     - emptyLineBefore: always
       properties:
-      - outline
-      - outline-color
-      - outline-offset
-      - outline-style
-      - outline-width
+        - outline
+        - outline-color
+        - outline-offset
+        - outline-style
+        - outline-width
 
     # Background
 
     - emptyLineBefore: always
       properties:
-      - background
-      - background-attachment
-      - background-clip
-      - background-color
-      - background-image
-      - background-repeat
-      - background-position
-      - background-size
+        - background
+        - background-attachment
+        - background-clip
+        - background-color
+        - background-image
+        - background-repeat
+        - background-position
+        - background-size
 
-    # Text
+        # Text
 
-      - color
+        - color
 
     - emptyLineBefore: always
       properties:
-      - font
-      - font-family
-      - font-size
-      - font-smoothing
-      - font-style
-      - font-variant
-      - font-weight
+        - font
+        - font-family
+        - font-size
+        - font-smoothing
+        - font-style
+        - font-variant
+        - font-weight
 
     - emptyLineBefore: always
       properties:
-      - letter-spacing
-      - line-height
-      - list-style
+        - letter-spacing
+        - line-height
+        - list-style
 
     - emptyLineBefore: always
       properties:
-      - text-align
-      - text-decoration
-      - text-indent
-      - text-overflow
-      - text-rendering
-      - text-shadow
-      - text-transform
-      - text-wrap
+        - text-align
+        - text-decoration
+        - text-indent
+        - text-overflow
+        - text-rendering
+        - text-shadow
+        - text-transform
+        - text-wrap
 
     - emptyLineBefore: always
       properties:
-      - white-space
-      - word-spacing
+        - white-space
+        - word-spacing
 
     # Other
 
     - emptyLineBefore: always
       properties:
-      - border-collapse
-      - border-spacing
-      - box-shadow
-      - caption-side
-      - contain
-      - content
-      - cursor
-      - direction
-      - empty-cells
-      - object-fit
-      - opacity
-      - overflow
-      - quotes
-      - speak
-      - table-layout
-      - touch-action
-      - user-select
-      - vertical-align
-      - visibility
-      - z-index
+        - border-collapse
+        - border-spacing
+        - box-shadow
+        - caption-side
+        - contain
+        - content
+        - cursor
+        - direction
+        - empty-cells
+        - object-fit
+        - opacity
+        - overflow
+        - quotes
+        - speak
+        - table-layout
+        - touch-action
+        - user-select
+        - vertical-align
+        - visibility
+        - z-index
 
   property-disallowed-list:
     - background-position
     - right
     - left
     - float
-    - padding
     - padding-left
     - padding-right
-    - margin
     - margin-left
     - margin-right
-    - border-radius
     - border-top-left-radius
     - border-top-right-radius
     - border-bottom-right-radius

core/CHANGELOG.md

@@ -3,344 +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.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
-
-**Note:** Version bump only for package @ionic/core
-
-
-
-
-
-## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
-
-
-### Bug Fixes
-
-* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
-* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
-
-
-
-
-
-## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
-
-
-### Bug Fixes
-
-* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
-* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
-* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
-* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
-* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
-
-
-
-
-
-# [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
-
-
-### 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)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **content:** allow custom roles and aria attributes to be set on content ([#29753](https://github.com/ionic-team/ionic-framework/issues/29753)) ([7b16397](https://github.com/ionic-team/ionic-framework/commit/7b16397714be773fda28658ab4009755f545b735))
-* **item:** router-link remains clickable with item cover ([#29743](https://github.com/ionic-team/ionic-framework/issues/29743)) ([a9f278a](https://github.com/ionic-team/ionic-framework/commit/a9f278ad67758a19e0e12ce7ed6d13eb573b0765))
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-* **vue:** pass router-link value to href to properly render clickable elements ([#29745](https://github.com/ionic-team/ionic-framework/issues/29745)) ([ab4f279](https://github.com/ionic-team/ionic-framework/commit/ab4f2791c1968adbb1d858c5f009fa251bb9101b))
-
-
-
-
-
-## [8.2.6](https://github.com/ionic-team/ionic-framework/compare/v8.2.5...v8.2.6) (2024-07-24)
-
-
-### Bug Fixes
-
-* **alert:** do not overwrite id set in htmlAttributes ([#29708](https://github.com/ionic-team/ionic-framework/issues/29708)) ([1295ced](https://github.com/ionic-team/ionic-framework/commit/1295cedae9ffbcc40389c19499e58e7e21fb424e)), closes [#29704](https://github.com/ionic-team/ionic-framework/issues/29704)
-* **overlays:** do not overwrite id set in htmlAttributes ([#29722](https://github.com/ionic-team/ionic-framework/issues/29722)) ([92ce563](https://github.com/ionic-team/ionic-framework/commit/92ce563c402e557b08a622bd20f78459782312e2)), closes [#29712](https://github.com/ionic-team/ionic-framework/issues/29712)
-
-
-
-
-
-## [8.2.5](https://github.com/ionic-team/ionic-framework/compare/v8.2.4...v8.2.5) (2024-07-03)
-
-**Note:** Version bump only for package @ionic/core
-
-
-
-
-
-## [8.2.4](https://github.com/ionic-team/ionic-framework/compare/v8.2.2...v8.2.4) (2024-06-28)
-
-
-### Bug Fixes
-
-* **angular:** popover arrow navigation with disabled items ([#29662](https://github.com/ionic-team/ionic-framework/issues/29662)) ([ceb41f3](https://github.com/ionic-team/ionic-framework/commit/ceb41f31f382ff1bcf81de2b11680699d33d5077)), closes [#29640](https://github.com/ionic-team/ionic-framework/issues/29640)
-
-
-
-
-
-## 8.2.3
-
-This version should be skipped. Install 8.2.4 instead.
-
-
-
-
-
-## [8.2.2](https://github.com/ionic-team/ionic-framework/compare/v8.2.1...v8.2.2) (2024-06-12)
-
-
-### Bug Fixes
-
-* **refresher:** show when content is fullscreen ([#29608](https://github.com/ionic-team/ionic-framework/issues/29608)) ([5cdfac8](https://github.com/ionic-team/ionic-framework/commit/5cdfac89f5389cb3009427183f7034ba05788bc2)), closes [#18714](https://github.com/ionic-team/ionic-framework/issues/18714)
-
-
-
-
-
-## [8.2.1](https://github.com/ionic-team/ionic-framework/compare/v8.2.0...v8.2.1) (2024-06-05)
-
-**Note:** Version bump only for package @ionic/core
-
-
-
-
-
-# [8.2.0](https://github.com/ionic-team/ionic-framework/compare/v8.1.3...v8.2.0) (2024-05-22)
-
-**Note:** Version bump only for package @ionic/core
-
-
-
-
-
-## [8.1.3](https://github.com/ionic-team/ionic-framework/compare/v8.1.2...v8.1.3) (2024-05-22)
-
-
-### Bug Fixes
-
-* **core:** malformed URIs will not throw exception ([#29486](https://github.com/ionic-team/ionic-framework/issues/29486)) ([4a41983](https://github.com/ionic-team/ionic-framework/commit/4a41983098fe9bf83fdf05ce7ab28c79f414e11b)), closes [#29479](https://github.com/ionic-team/ionic-framework/issues/29479)
-
-
-
-
-
-## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.1...v8.1.2) (2024-05-15)
-
-
-### Bug Fixes
-
-* **many:** do not grow slotted checkboxes, radios, selects and toggles ([#29501](https://github.com/ionic-team/ionic-framework/issues/29501)) ([c63d07b](https://github.com/ionic-team/ionic-framework/commit/c63d07bdd0c4d9939474c52b03a3f2535511933f)), closes [#29423](https://github.com/ionic-team/ionic-framework/issues/29423)
-* **picker:** update keyboard navigation ([#29497](https://github.com/ionic-team/ionic-framework/issues/29497)) ([32bc681](https://github.com/ionic-team/ionic-framework/commit/32bc681192b1833f1c897e692d2d36ba90c6af53))
-
-
-
-
-
-## [8.1.1](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.1) (2024-05-08)
-
-
-### Bug Fixes
-
-* **angular:** persist select disabled state in item ([#29448](https://github.com/ionic-team/ionic-framework/issues/29448)) ([dfb72d7](https://github.com/ionic-team/ionic-framework/commit/dfb72d7ea06e28d76069b23eb90c3426181b7c4c)), closes [#29234](https://github.com/ionic-team/ionic-framework/issues/29234)
-* **angular:** set active segment button when dynamically changing items ([#29418](https://github.com/ionic-team/ionic-framework/issues/29418)) ([ee83388](https://github.com/ionic-team/ionic-framework/commit/ee833881da3ecaa0a9153397f0c7e62c1923f19c)), closes [#29414](https://github.com/ionic-team/ionic-framework/issues/29414)
-* **radio:** persist checked state when items are updated in radio-group ([#29457](https://github.com/ionic-team/ionic-framework/issues/29457)) ([7ea14ae](https://github.com/ionic-team/ionic-framework/commit/7ea14ae41eb27f2a58952bd27d91ef4c77bb6a0c)), closes [#29442](https://github.com/ionic-team/ionic-framework/issues/29442)
-
-
-
-
-
-# [8.1.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.2...v8.1.0) (2024-05-01)
-
-
-### Features
-
-* add experimental transition focus manager ([#29400](https://github.com/ionic-team/ionic-framework/issues/29400)) ([5b686ef](https://github.com/ionic-team/ionic-framework/commit/5b686efc1025cd4088c89ef29154311a3d7504ba)), closes [#23650](https://github.com/ionic-team/ionic-framework/issues/23650)
-* **content:** add fixedSlotPlacement prop ([#29233](https://github.com/ionic-team/ionic-framework/issues/29233)) ([90a7e70](https://github.com/ionic-team/ionic-framework/commit/90a7e70a1c827835c18fd5f39d53ab17d286b4a7))
-* **datetime:** pass roles to overlay when dismissing ([#29221](https://github.com/ionic-team/ionic-framework/issues/29221)) ([6945adc](https://github.com/ionic-team/ionic-framework/commit/6945adc3cccabf59a2e640462ab4fd09ade59f6f)), closes [#28298](https://github.com/ionic-team/ionic-framework/issues/28298)
-* **input:** add clearInputIcon property ([#29246](https://github.com/ionic-team/ionic-framework/issues/29246)) ([0f5d1c0](https://github.com/ionic-team/ionic-framework/commit/0f5d1c02d20483d47b6907fec696633cc7634554)), closes [#26974](https://github.com/ionic-team/ionic-framework/issues/26974)
-* **modal, popover:** add ability to temporarily disable focus trapping ([#29379](https://github.com/ionic-team/ionic-framework/issues/29379)) ([7c00351](https://github.com/ionic-team/ionic-framework/commit/7c00351680a955130fa10d25d4439d3cc18db805)), closes [#24646](https://github.com/ionic-team/ionic-framework/issues/24646)
-* **picker:** picker column is easier to select with assistive technology ([#29371](https://github.com/ionic-team/ionic-framework/issues/29371)) ([e38e2e4](https://github.com/ionic-team/ionic-framework/commit/e38e2e4d35076fa42241158568fb0ed50094fcbf)), closes [#25221](https://github.com/ionic-team/ionic-framework/issues/25221)
-
-
-
-
-
-## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01)
-
-
-### Bug Fixes
-
-* **datetime:** navigating months in RTL works correctly ([#29421](https://github.com/ionic-team/ionic-framework/issues/29421)) ([4d09890](https://github.com/ionic-team/ionic-framework/commit/4d09890d69590f0c8c32b387769a6e1e14a03c33)), closes [#29198](https://github.com/ionic-team/ionic-framework/issues/29198)
-* **ios:** large title transition accounts for back button with no text  ([#29327](https://github.com/ionic-team/ionic-framework/issues/29327)) ([bd8d065](https://github.com/ionic-team/ionic-framework/commit/bd8d065e1af038fe24fbe9a6acd9e0f2004bc0b7)), closes [#28751](https://github.com/ionic-team/ionic-framework/issues/28751)
-* **md:** item border has improved contrast in dark mode ([#29398](https://github.com/ionic-team/ionic-framework/issues/29398)) ([fa85f03](https://github.com/ionic-team/ionic-framework/commit/fa85f030cfdb3ef8482ef29faff0144b27c9aa45)), closes [#29386](https://github.com/ionic-team/ionic-framework/issues/29386)
-* **select:** options are visible with fit-content width and fill outline ([#29408](https://github.com/ionic-team/ionic-framework/issues/29408)) ([f15b62a](https://github.com/ionic-team/ionic-framework/commit/f15b62a9ca9a817d2252753d31025d431ac9f8e2)), closes [#29321](https://github.com/ionic-team/ionic-framework/issues/29321)
-
-
-
-
-
-## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24)
-
-
-### Bug Fixes
-
-* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([ee49824](https://github.com/ionic-team/ionic-framework/commit/ee49824a84df7a7b002f41dab7b935fbcdb64946)), closes [#29358](https://github.com/ionic-team/ionic-framework/issues/29358)
-* **input:** debounce is set with binding syntax in angular on load ([#29377](https://github.com/ionic-team/ionic-framework/issues/29377)) ([23321f7](https://github.com/ionic-team/ionic-framework/commit/23321f7ab2a242c3c4193fd6cece3f1c7c0034ef)), closes [#29374](https://github.com/ionic-team/ionic-framework/issues/29374)
-
-
-
-
-
-# [8.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.2...v8.0.0) (2024-04-17)
-
-**Note:** Version bump only for package @ionic/core
-
-
-
-
-
-# [8.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.1...v8.0.0-rc.2) (2024-04-17)
-
-
-### Bug Fixes
-
-* **dark-palette:** improve base colors ([#29239](https://github.com/ionic-team/ionic-framework/issues/29239)) ([4698d22](https://github.com/ionic-team/ionic-framework/commit/4698d22413966b59f9fa65b4e2533695cf00ed70)), closes [#29219](https://github.com/ionic-team/ionic-framework/issues/29219)
-* **form-controls:** adjust flex properties inside of an item ([#29328](https://github.com/ionic-team/ionic-framework/issues/29328)) ([9b59138](https://github.com/ionic-team/ionic-framework/commit/9b59138011fd1e71def209ec3a43fb7f91b58949)), closes [#29319](https://github.com/ionic-team/ionic-framework/issues/29319)
-
-
-
-
-
-## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
-
-
-### Bug Fixes
-
-* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
-
-
-
-
-
-# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
-
-
-### Bug Fixes
-
-* **button:** use clamp for font sizes on circle shape ([#29200](https://github.com/ionic-team/ionic-framework/issues/29200)) ([4d6edee](https://github.com/ionic-team/ionic-framework/commit/4d6edee89c7bb2cb669d67730d7ddf24c78b3cb1))
-
-
-
-
-
-## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
-
-
-### Performance Improvements
-
-* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
-
-
-
-
 
 ## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.46.1
+FROM mcr.microsoft.com/playwright:v1.42.1
 
 # Set the working directory
 WORKDIR /ionic

core/README.md

@@ -96,7 +96,7 @@ const showModal = async () => {
 
 ## How to contribute
 
-[Check out the CONTRIBUTE guide](/docs/CONTRIBUTING.md)
+[Check out the CONTRIBUTE guide](/.github/CONTRIBUTING.md)
 
 ## Related
 

core/custom-rules/await-playwright-promise-assertion.js

@@ -67,5 +67,4 @@ const ASYNC_PLAYWRIGHT_ASSERTS = [
   'toHaveTitle',
   'toHaveURL',
   'toBeOK',
-  'click'
 ];

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.4.3",
+  "version": "8.0.0-rc.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,37 +31,35 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "4.20.0",
+    "@stencil/core": "^4.12.2",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.10.0",
-    "@capacitor/core": "^6.0.0",
-    "@capacitor/haptics": "^6.0.0",
-    "@capacitor/keyboard": "^6.0.0",
-    "@capacitor/status-bar": "^6.0.0",
-    "@clack/prompts": "^0.9.0",
+    "@axe-core/playwright": "^4.8.5",
+    "@capacitor/core": "^5.7.0",
+    "@capacitor/haptics": "^5.0.7",
+    "@capacitor/keyboard": "^5.0.8",
+    "@capacitor/status-bar": "^5.0.7",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.10.0",
-    "@stencil/react-output-target": "0.5.3",
+    "@stencil/angular-output-target": "^0.8.4",
+    "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.9.0",
+    "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "chalk": "^5.3.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-custom-rules": "file:custom-rules",
-    "execa": "^8.0.1",
+    "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -69,14 +67,16 @@
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
+    "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": "node ./scripts/tokens.js && npm run lint.sass.fix",
     "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",
@@ -98,10 +98,10 @@
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
     "docker.build": "docker build -t ionic-playwright .",
-    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
+    "test.e2e.docker": "npm run docker.build && docker run -it --rm -e DISPLAY=$(cat docker-display.txt) -v $(cat docker-display-volume.txt) --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
     "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
-    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs",
-    "test.e2e.script": "node scripts/testing/e2e-script.mjs"
+    "test.e2e.docker.ci": "npm run docker.build && docker run -e CI='true' --rm --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
+    "test.report": "npx playwright show-report"
   },
   "author": "Ionic Team",
   "license": "MIT",
@@ -110,7 +110,7 @@
     "url": "git+https://github.com/ionic-team/ionic-framework.git"
   },
   "bugs": {
-    "url": "https://github.com/ionic-team/ionic-framework/issues"
+    "url": "https://github.com/ionic-team/ionic/issues"
   },
   "homepage": "https://ionicframework.com/",
   "jest": {

core/scripts/api-spec-generator.js

@@ -33,7 +33,7 @@ function generateComponent(component, content) {
     content.push(`${component.tag},event,${prop.event},${prop.detail},${prop.bubbles}`);
   });
   component.styles.forEach(prop => {
-    content.push(`${component.tag},css-prop,${prop.name}${prop.mode ? ',' + prop.mode : ''}`);
+    content.push(`${component.tag},css-prop,${prop.name}`);
   });
   component.parts.forEach(part => {
     content.push(`${component.tag},part,${part.name}`);

core/scripts/docker.mjs

@@ -1,59 +0,0 @@
-import { execa } from 'execa';
-import * as fs from 'fs';
-import { resolve } from 'path';
-import chalk from 'chalk';
-
-const removeNewline = (string) => {
-  return string.replace(/(\r\n|\n|\r)/gm, "");
-}
-
-const readConfigFile = (file) => {
-  if (fs.existsSync(file)) {
-    return fs.readFileSync(file, { encoding: 'utf-8' });
-  }
-
-  return '';
-}
-
-// These files are optional, so we don't want to error if they don't exist
-const display = removeNewline(readConfigFile('docker-display.txt'));
-const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
-
-// Using --mount requires an absolute path which is what this gives us.
-const pwd = resolve('./');
-
-/**
- * -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
- * -e DISPLAY and -v handle configuration for headed mode
- * --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
- * --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
- * --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
- */
-const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
-
-// Set the CI env variable so Playwright uses the CI config
-if (process.env.CI) {
-  args.splice(1, 0, '-e CI=true');
-/**
- * Otherwise, we should let the session be interactive locally. This will
- * not work on CI which is why we do not apply it there.
- */
-} else {
-  args.splice(1, 0, '-it');
-}
-
-/**
- * While these config files are optional to run the tests, they are required to run
- * the tests in headed mode. Add a warning if dev tries to run headed tests without
- * the correct config files.
- */
-const requestHeaded = process.argv.find(arg => arg.includes('headed'));
-const hasHeadedConfigFiles = display && displayVolume;
-if (requestHeaded && !hasHeadedConfigFiles) {
-  console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
-}
-
-const res = await execa('docker', args, { shell: true, stdio: 'inherit' });
-
-// If underlying scripts failed this whole process should fail too
-process.exit(res.exitCode);

core/scripts/testing/e2e-script.mjs

@@ -1,260 +0,0 @@
-// The purpose of this script is to provide a way run the E2E tests
-// without having the developer to manually run multiple commands based
-// on the desired end result.
-// E.g. update the local ground truths for a specific component or
-// open the Playwright report after running the E2E tests.
-
-import {
-  intro,
-  outro,
-  confirm,
-  spinner,
-  isCancel,
-  cancel,
-  text,
-  log,
-} from '@clack/prompts';
-import { exec, spawn } from 'child_process';
-import fs from 'node:fs';
-import { setTimeout as sleep } from 'node:timers/promises';
-import util from 'node:util';
-import color from 'picocolors';
-
-async function main() {
-  const execAsync = util.promisify(exec);
-  const cleanUpFiles = async () => {
-    // Clean up the local ground truths.
-    const cleanUp = spinner();
-  
-    // Inform the user that the local ground truths are being cleaned up.
-    cleanUp.start('Restoring local ground truths');
-  
-    // Reset the local ground truths.
-    await execAsync('git reset -- src/**/*-linux.png').catch((error) => {
-      cleanUp.stop('Failed to reset local ground truths');
-      console.error(error);
-      return process.exit(0);
-    });
-  
-    // Restore the local ground truths.
-    await execAsync('git restore -- src/**/*-linux.png').catch((error) => {
-      cleanUp.stop('Failed to restore local ground truths');
-      console.error(error);
-      return process.exit(0);
-    });
-  
-    // Inform the user that the local ground truths have been cleaned up.
-    cleanUp.stop('Local ground truths have been restored to their original state in order to avoid committing them.');
-  };
-
-  intro(color.inverse(' Update Local Ground Truths'));
-
-  // Ask user for the component name they want to test.
-  const componentValue = await text({
-    message: 'Enter the component or path you want to test (e.g. chip, src/components/chip)',
-    placeholder: 'Empty for all components',
-  });
-
-  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-  if (isCancel(componentValue)) {
-    cancel('Operation cancelled');
-    return process.exit(0);
-  }
-
-  // Ask user if they want to update their local ground truths.
-  const shouldUpdateTruths = await confirm({
-    message: 'Do you want to update your local ground truths?',
-  });
-
-  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-  if (isCancel(shouldUpdateTruths)) {
-    cancel('Operation cancelled');
-    return process.exit(0);
-  }
-
-  if (shouldUpdateTruths) {
-    const defaultBaseBranch = 'main';
-
-    // Ask user for the base branch.
-    let baseBranch = await text({
-      message: 'Enter the base branch name:',
-      placeholder: `default: ${defaultBaseBranch}`,
-    })
-
-    // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-    if (isCancel(baseBranch)) {
-      cancel('Operation cancelled');
-      return process.exit(0);
-    }
-
-    // User didn't provide a base branch.
-    if (!baseBranch) {
-      baseBranch = defaultBaseBranch;
-    }
-
-    /**
-     * The provided base branch needs to be fetched.
-     * This ensures that the local base branch is up-to-date with the 
-     * remote base branch. Otherwise, there might be errors stating that
-     * certain files don't exist in the local base branch.
-     */
-    const fetchBaseBranch = spinner();
-
-    // Inform the user that the base branch is being fetched.
-    fetchBaseBranch.start(`Fetching "${baseBranch}" to have the latest changes`);
-
-    // Fetch the base branch.
-    await execAsync(`git fetch origin ${baseBranch}`).catch((error) => {
-      fetchBaseBranch.stop(`Failed to fetch "${baseBranch}"`);
-      console.error(error);
-      return process.exit(0);
-    });
-
-    // Inform the user that the base branch has been fetched.
-    fetchBaseBranch.stop(`Fetched "${baseBranch}"`);
-
-
-    const updateGroundTruth = spinner();
-
-    // Inform the user that the local ground truths are being updated.
-    updateGroundTruth.start('Updating local ground truths');
-
-    // Check if user provided an existing file or directory.
-    const isValidLocation = fs.existsSync(componentValue);
-
-    // User provided an existing file or directory.
-    if (isValidLocation) {
-      const stats = fs.statSync(componentValue);
-
-      // User provided a file as the component.
-      // ex: `componentValue` = `src/components/chip/test/basic/chip.e2e.ts`
-      if (stats.isFile()) {
-        // Update the local ground truths for the provided path.
-        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}-snapshots/*-linux.png`).catch((error) => {
-          updateGroundTruth.stop('Failed to update local ground truths');
-          console.error(error);
-          return process.exit(0);
-        });
-      }
-
-      // User provided a directory as the component.
-      // ex: `componentValue` = `src/components/chip`
-      if (stats.isDirectory()) {
-        // Update the local ground truths for the provided directory.
-        await execAsync(`git checkout origin/${baseBranch} -- ${componentValue}/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
-          updateGroundTruth.stop('Failed to update local ground truths');
-          console.error(error);
-          return process.exit(0);
-        });
-      }
-    }
-    // User provided a component name as the component.
-    // ex: `componentValue` = `chip`
-    else if (componentValue) {
-      // Update the local ground truths for the provided component.
-      await execAsync(`git checkout origin/${baseBranch} -- src/components/${componentValue}/test/*/${componentValue}.e2e.ts-snapshots/*-linux.png`).catch((error) => {
-        updateGroundTruth.stop('Failed to update local ground truths');
-        console.error(error);
-        return process.exit(0);
-      });
-    }
-    // User provided an empty string.
-    else {
-      // Update the local ground truths for all components.
-      await execAsync(`git checkout origin/${baseBranch} -- src/components/*/test/*/*.e2e.ts-snapshots/*-linux.png`).catch((error) => {
-        updateGroundTruth.stop('Failed to update local ground truths');
-        console.error(error);
-        return process.exit(0);
-      });
-    }
-
-    // Inform the user that the local ground truths have been updated.
-    updateGroundTruth.stop('Updated local ground truths');
-  }
-
-  const buildCore = spinner();
-
-  // Inform the user that the core is being built.
-  buildCore.start('Building core');
-
-  /**
-   * Build core
-   * Otherwise, the uncommitted changes will not be reflected in the tests because:
-   * - popping the stash doesn't trigger a re-render even if `npm start` is running
-   * - app is not running the `npm start` command
-   */
-  await execAsync('npm run build').catch((error) => {
-    // Clean up the local ground truths.
-    cleanUpFiles();
-
-    buildCore.stop('Failed to build core');
-    console.error(error);
-    return process.exit(0);
-  });
-
-  buildCore.stop('Built core');
-
-  const runE2ETests = spinner();
-
-  // Inform the user that the E2E tests are being run.
-  runE2ETests.start('Running E2E tests');
-
-  // User provided a component value.
-  if (componentValue) {
-    await execAsync(`npm run test.e2e.docker.ci ${componentValue}`).catch((error) => {
-      // Clean up the local ground truths.
-      cleanUpFiles();
-
-      runE2ETests.stop('Failed to run E2E tests');
-      console.error(error);
-      return process.exit(0);
-    });
-  } else {
-    await execAsync('npm run test.e2e.docker.ci').catch((error) => {
-      // Clean up the local ground truths.
-      cleanUpFiles();
-
-      runE2ETests.stop('Failed to run E2E tests');
-      console.error(error);
-      return process.exit(0);
-    });
-  }
-
-  runE2ETests.stop('Ran E2E tests');
-
-  // Clean up the local ground truths.
-  await cleanUpFiles();
-
-  // Ask user if they want to open the Playwright report.
-  const shouldOpenReport = await confirm({
-    message: 'Do you want to open the Playwright report?',
-  });
-
-  // User cancelled the operation with `Ctrl+C` or `CMD+C`.
-  if (isCancel(shouldOpenReport)) {
-    cancel('Operation cancelled');
-    return process.exit(0);
-  }
-
-  // User chose to open the Playwright report.
-  if (shouldOpenReport) {
-    // Use spawn to display the server information and the key to quit the server.
-    spawn('npx', ['playwright', 'show-report'], {
-      stdio: 'inherit',
-    });
-  } else {
-    // Inform the user that the Playwright report can be opened by running the following command.
-    log.info('If you change your mind, you can open the Playwright report by running the following command:');
-    log.info(color.bold('npx playwright show-report'));
-  }
-
-  if (shouldOpenReport) {
-    outro("You're all set! Don't forget to quit serving the Playwright report when you're done.");
-  } else {
-    outro("You're all set!");
-  }
-
-  await sleep(1000);
-}
-
-main().catch(console.error);

core/scripts/testing/scripts.js

@@ -14,20 +14,6 @@
     document.head.appendChild(style);
   }
 
-  /**
-   * The term `palette` is used to as a param to match the
-   * Ionic docs, plus here is already a `ionic:theme` query being
-   * used for `md`, `ios`, and `ionic` themes.
-   */
-  const palette = window.location.search.match(/palette=([a-z]+)/);
-  if (palette && palette[1] !== 'light') {
-    const linkTag = document.createElement('link');
-    linkTag.setAttribute('rel', 'stylesheet');
-    linkTag.setAttribute('type', 'text/css');
-    linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`);
-    document.head.appendChild(linkTag);
-  }
-
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
 

core/scripts/testing/styles.css

@@ -48,45 +48,3 @@ html.ios.ios {
   --ion-font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
   font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }
-
-/**
- * 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-"]) {
-  display: inline-block;
-  width: auto;
-  clear: both;
-  padding: 12px 8px;
-  font-size: 1em;
-  background: #008080;
-  border: 1px solid #005555;
-  color: #fff;
-  border-radius: 4px;
-  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-"]) {
-  display: block;
-  width: 100%;
-}

core/scripts/tokens.js

@@ -0,0 +1,174 @@
+/* For generating Design Tokens, we use Style Dictionary for several reasons:
+- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
+- 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.
+*/
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const StyleDictionary = require('style-dictionary');
+
+const { fileHeader } = StyleDictionary.formatHelpers;
+
+// Empty for as an example of how we can add some extra variables, not from the tokens JSON
+const customVariables = ``;
+
+// Prefix for all generated variables
+const variablesPrefix = 'ionic';
+
+// CSS vanilla :root format
+StyleDictionary.registerFormat({
+  name: 'rootFormat',
+  formatter({ dictionary, file }) {
+    // Add a prefix to all variable names
+    const prefixedVariables = dictionary.allProperties.map((prop) => {
+      return `  --${variablesPrefix}-${prop.name}: ${prop.value};`;
+    });
+
+    return (
+      fileHeader({ file }) +
+      ':root {\n' +
+      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
+      customVariables +
+      '\n}\n'
+    );
+  },
+});
+
+// scss variables format
+StyleDictionary.registerFormat({
+  name: 'scssVariablesFormat',
+  formatter({ dictionary, file }) {
+    // Add a prefix to all variable names
+    const prefixedVariables = dictionary.allProperties.map((prop) => {
+      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
+    });
+
+    return (
+      fileHeader({ file }) +
+      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
+      customVariables +
+      '\n'
+    );
+  },
+});
+
+// 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 = '';
+
+      switch (tokenType) {
+        case 'color':
+          utilityClass = `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
+.${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+          break;
+        case 'border':
+          const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${borderAttribute}: $ionic-${prop.name};\n}`;
+          break;
+        case 'font':
+          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;
+            case 'family':
+              return;
+          }
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
+          break;
+        case 'elevation':
+          utilityClass = `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
+          break;
+        case 'space':
+          utilityClass = `.${variablesPrefix}-margin-${className} {\n  margin: $ionic-${prop.name};\n};
+.${variablesPrefix}-padding-${className} {\n  padding: $ionic-${prop.name};\n}`;
+          break;
+        default:
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
+      }
+
+      return utilityClass;
+    });
+
+    return [fileHeader({ file }), '@import "./ionic.vars";\n', utilityClasses.join('\n')].join('\n');
+  },
+});
+
+// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
+const w3cTokenJsonParser = {
+  pattern: /\.json|\.tokens\.json|\.tokens$/,
+  parse(_a) {
+    var contents = _a.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/*.json'],
+  platforms: {
+    css: {
+      buildPath: './src/foundations/',
+      transformGroup: 'css',
+      files: [
+        {
+          destination: 'ionic.root.scss',
+          format: 'rootFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+    scss: {
+      buildPath: './src/foundations/',
+      transformGroup: 'scss',
+      files: [
+        {
+          destination: 'ionic.vars.scss',
+          format: 'scssVariablesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+        {
+          destination: 'ionic.utility.scss',
+          format: 'cssUtilityClassesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+  },
+  fileHeader: {
+    myFileHeader: () => {
+      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
+    },
+  },
+}).buildAllPlatforms();

core/src/components/accordion-group/accordion-group.tsx

@@ -2,18 +2,20 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
 import { printIonWarning } from '@utils/logging';
 
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
 
 import type { AccordionGroupChangeEventDetail } from './accordion-group-interface';
 
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-accordion-group',
   styleUrls: {
     ios: 'accordion-group.ios.scss',
     md: 'accordion-group.md.scss',
+    ionic: 'accordion-group.md.scss',
   },
   shadow: true,
 })
@@ -59,9 +61,10 @@ export class AccordionGroup implements ComponentInterface {
   @Prop() expand: 'compact' | 'inset' = 'compact';
 
   /**
-   * Emitted when the value property has changed as a result of a user action such as a click.
-   *
-   * This event will not emit when programmatically setting the `value` property.
+   * Emitted when the value property has changed
+   * as a result of a user action such as a click.
+   * This event will not emit when programmatically setting
+   * the value property.
    */
   @Event() ionChange!: EventEmitter<AccordionGroupChangeEventDetail>;
 
@@ -278,12 +281,12 @@ export class AccordionGroup implements ComponentInterface {
 
   render() {
     const { disabled, readonly, expand } = this;
-    const mode = getIonMode(this);
+    const theme = getIonTheme(this);
 
     return (
       <Host
         class={{
-          [mode]: true,
+          [theme]: true,
           'accordion-group-disabled': disabled,
           'accordion-group-readonly': readonly,
           [`accordion-group-expand-${expand}`]: true,

core/src/components/accordion/accordion.md.vars.scss

@@ -4,10 +4,10 @@
 // --------------------------------------------------
 
 /// @prop - Border radius applied to the accordion
-$accordion-md-border-radius:         6px;
+$accordion-md-border-radius:         6px !default;
 
 /// @prop - Box shadow of the accordion
-$accordion-md-box-shadow:            0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+$accordion-md-box-shadow:            0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
 
 /// @prop - Margin of the expanded accordion
-$accordion-md-expanded-margin:       16px;
+$accordion-md-expanded-margin:       16px !default;

core/src/components/accordion/accordion.tsx

@@ -4,7 +4,7 @@ import { addEventListener, getElementRoot, raf, removeEventListener, transitionE
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
+import { getIonTheme } from '../../global/ionic-global';
 
 const enum AccordionState {
   Collapsed = 1 << 0,
@@ -14,7 +14,8 @@ const enum AccordionState {
 }
 
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot header - Content is placed at the top and is used to
  * expand or collapse the accordion item.
@@ -31,6 +32,7 @@ const enum AccordionState {
   styleUrls: {
     ios: 'accordion.ios.scss',
     md: 'accordion.md.scss',
+    ionic: 'accordion.md.scss',
   },
   shadow: {
     delegatesFocus: true,
@@ -402,7 +404,7 @@ export class Accordion implements ComponentInterface {
 
   render() {
     const { disabled, readonly } = this;
-    const mode = getIonMode(this);
+    const theme = getIonTheme(this);
     const expanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
     const headerPart = expanded ? 'header expanded' : 'header';
     const contentPart = expanded ? 'content expanded' : 'content';
@@ -412,7 +414,7 @@ export class Accordion implements ComponentInterface {
     return (
       <Host
         class={{
-          [mode]: true,
+          [theme]: true,
           'accordion-expanding': this.state === AccordionState.Expanding,
           'accordion-expanded': this.state === AccordionState.Expanded,
           'accordion-collapsing': this.state === AccordionState.Collapsing,

core/src/components/accordion/accordion.vars.scss

@@ -4,16 +4,16 @@
 // --------------------------------------------------
 
 /// @prop - Background color of the accordion
-$accordion-background-color:      var(--ion-background-color, #ffffff);
+$accordion-background-color:      var(--ion-background-color, #ffffff) !default;
 
 /// @prop - Duration of the accordion transition
-$accordion-transition-duration:   300ms;
+$accordion-transition-duration:   300ms !default;
 
 /// @prop - Timing function of the accordion transition
-$accordion-transition-easing:     cubic-bezier(0.25, 0.8, 0.5, 1);
+$accordion-transition-easing:     cubic-bezier(0.25, 0.8, 0.5, 1) !default;
 
 /// @prop - Opacity of the disabled accordion
-$accordion-disabled-opacity:      0.4;
+$accordion-disabled-opacity:      0.4 !default;
 
 /// @prop - Margin of the inset accordion
-$accordion-inset-margin:          16px;
+$accordion-inset-margin:          16px !default;

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

@@ -3,11 +3,10 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ config, title }) => {
   test.describe(title('accordion: a11y'), () => {
-    // TODO(ROU-8157): remove skip once the keyboard navigation is working again
-    test.skip('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
-      // TODO(ROU-5358): remove skip once issue is resolved
+    test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
+      // TODO(FW-1764): remove skip once issue is resolved
       skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
-      // TODO (ROU-5437)
+      // TODO (FW-2979)
       skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
 
       await page.goto(`/src/components/accordion/test/a11y`, config);

core/src/components/accordion/test/disabled/accordion.e2e.ts

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

core/src/components/accordion/test/readonly/accordion.e2e.ts

@@ -48,7 +48,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);
 
-      await accordion.click();
+      accordion.click();
       await page.waitForChanges();
 
       await expect(accordion).toHaveClass(/accordion-collapsed/);

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

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Accordion - Standalone</title>
+    <title>Accordion - Basic</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" />
@@ -119,7 +119,6 @@
       outline: none;
       text-align: left;
       padding: 20px 16px;
-      color: black;
     }
 
     .custom-accordion-content {

core/src/components/action-sheet/action-sheet-interface.ts

@@ -1,20 +1,16 @@
-import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
+import type { OverlayOptions } from '@utils/overlays-interface';
 
-export interface ActionSheetOptions {
+import type { LiteralUnion } from '../../interface';
+
+export interface ActionSheetOptions extends OverlayOptions {
   header?: string;
   subHeader?: string;
   cssClass?: string | string[];
   buttons: (ActionSheetButton | string)[];
   backdropDismiss?: boolean;
   translucent?: boolean;
-  animated?: boolean;
-  mode?: Mode;
   keyboardClose?: boolean;
-  id?: string;
   htmlAttributes?: { [key: string]: any };
-
-  enterAnimation?: AnimationBuilder;
-  leaveAnimation?: AnimationBuilder;
 }
 
 export interface ActionSheetButton<T = any> {

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -4,145 +4,145 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-ios-text-align:                                     center;
+$action-sheet-ios-text-align:                                     center !default;
 
 /// @prop - Padding top of the action sheet
-$action-sheet-ios-padding-top:                                    0;
+$action-sheet-ios-padding-top:                                    0 !default;
 
 /// @prop - Padding end of the action sheet
-$action-sheet-ios-padding-end:                                    8px;
+$action-sheet-ios-padding-end:                                    8px !default;
 
 /// @prop - Padding bottom of the action sheet
-$action-sheet-ios-padding-bottom:                                 $action-sheet-ios-padding-top;
+$action-sheet-ios-padding-bottom:                                 $action-sheet-ios-padding-top !default;
 
 /// @prop - Padding start of the action sheet
-$action-sheet-ios-padding-start:                                  $action-sheet-ios-padding-end;
+$action-sheet-ios-padding-start:                                  $action-sheet-ios-padding-end !default;
 
 /// @prop - Top margin of the action sheet button group
-$action-sheet-ios-group-margin-top:                               10px;
+$action-sheet-ios-group-margin-top:                               10px !default;
 
 /// @prop - Bottom margin of the action sheet button group
-$action-sheet-ios-group-margin-bottom:                            10px;
+$action-sheet-ios-group-margin-bottom:                            10px !default;
 
 /// @prop - Background color of the action sheet
-$action-sheet-ios-background-color:                               $overlay-ios-background-color;
+$action-sheet-ios-background-color:                               $overlay-ios-background-color !default;
 
 /// @prop - Border radius of the action sheet
-$action-sheet-ios-border-radius:                                  13px;
+$action-sheet-ios-border-radius:                                  13px !default;
 
 
 // Action Sheet Title
 // --------------------------------------------------
 
 /// @prop - Padding top of the action sheet title
-$action-sheet-ios-title-padding-top:                              14px;
+$action-sheet-ios-title-padding-top:                              14px !default;
 
 /// @prop - Padding end of the action sheet title
-$action-sheet-ios-title-padding-end:                              10px;
+$action-sheet-ios-title-padding-end:                              10px !default;
 
 /// @prop - Padding bottom of the action sheet title
-$action-sheet-ios-title-padding-bottom:                           13px;
+$action-sheet-ios-title-padding-bottom:                           13px !default;
 
 /// @prop - Padding start of the action sheet title
-$action-sheet-ios-title-padding-start:                            $action-sheet-ios-title-padding-end;
+$action-sheet-ios-title-padding-start:                            $action-sheet-ios-title-padding-end !default;
 
 /// @prop - Color of the action sheet title
-$action-sheet-ios-title-color:                                    $text-color-step-600;
+$action-sheet-ios-title-color:                                    $text-color-step-600 !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px);
+$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px) !default;
 
 /// @prop - Font weight of the action sheet title
-$action-sheet-ios-title-font-weight:                              400;
+$action-sheet-ios-title-font-weight:                              400 !default;
 
 /// @prop - Font weight of the action sheet title when it has a sub title
-$action-sheet-ios-title-with-sub-title-font-weight:               600;
+$action-sheet-ios-title-with-sub-title-font-weight:               600 !default;
 
 // Action Sheet Subtitle
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px);
+$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px) !default;
 
 /// @prop - Padding top of the action sheet sub title
-$action-sheet-ios-sub-title-padding-top:                          6px;
+$action-sheet-ios-sub-title-padding-top:                          6px !default;
 
 /// @prop - Padding end of the action sheet sub title
-$action-sheet-ios-sub-title-padding-end:                          0;
+$action-sheet-ios-sub-title-padding-end:                          0 !default;
 
 /// @prop - Padding bottom of the action sheet sub title
-$action-sheet-ios-sub-title-padding-bottom:                       0;
+$action-sheet-ios-sub-title-padding-bottom:                       0 !default;
 
 /// @prop - Padding start of the action sheet sub title
-$action-sheet-ios-sub-title-padding-start:                        $action-sheet-ios-sub-title-padding-end;
+$action-sheet-ios-sub-title-padding-start:                        $action-sheet-ios-sub-title-padding-end !default;
 
 
 // Action Sheet Button
 // --------------------------------------------------
 
 /// @prop - Minimum height of the action sheet button
-$action-sheet-ios-button-height:                                  56px;
+$action-sheet-ios-button-height:                                  56px !default;
 
 /// @prop - Padding of the action sheet button
-$action-sheet-ios-button-padding:                                 14px;
+$action-sheet-ios-button-padding:                                 14px !default;
 
 /// @prop - Text color of the action sheet button
-$action-sheet-ios-button-text-color:                              ion-color(primary, base);
+$action-sheet-ios-button-text-color:                              ion-color(primary, base) !default;
 
 /// @prop - Font size of the action sheet button icon
-$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px);
+$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px) !default;
 
 /// @prop - Padding right of the action sheet button icon
-$action-sheet-ios-button-icon-padding-right:                      .3em;
+$action-sheet-ios-button-icon-padding-right:                      .3em !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px);
+$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px) !default;
 
 /// @prop - Border color alpha of the action sheet button
-$action-sheet-ios-button-border-color-alpha:                      .08;
+$action-sheet-ios-button-border-color-alpha:                      .08 !default;
 
 /// @prop - Border color of the action sheet button
-$action-sheet-ios-button-border-color:                            rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha);
+$action-sheet-ios-button-border-color:                            rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
 
 /// @prop - Background color of the action sheet button
-$action-sheet-ios-button-background:                              linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent;
+$action-sheet-ios-button-background:                              linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default;
 
 /// @prop - Background color of the activated action sheet button
-$action-sheet-ios-button-background-activated:                    $text-color;
+$action-sheet-ios-button-background-activated:                    $text-color !default;
 
 /// @prop - Background color of the selected action sheet button
-$action-sheet-ios-button-background-selected:                     var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color));
+$action-sheet-ios-button-background-selected:                     var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default;
 
 /// @prop - Destructive text color of the action sheet button
-$action-sheet-ios-button-destructive-text-color:                  ion-color(danger, base);
+$action-sheet-ios-button-destructive-text-color:                  ion-color(danger, base) !default;
 
 /// @prop - Font weight of the action sheet cancel button
-$action-sheet-ios-button-cancel-font-weight:                      600;
+$action-sheet-ios-button-cancel-font-weight:                      600 !default;
 
 
 // Action Sheet Translucent
 // --------------------------------------------------
 
 /// @prop - Background color alpha of the action sheet when translucent
-$action-sheet-ios-translucent-background-color-alpha:             .8;
+$action-sheet-ios-translucent-background-color-alpha:             .8 !default;
 
 /// @prop - Background color of the action sheet when translucent
-$action-sheet-ios-translucent-background-color:                   rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha);
+$action-sheet-ios-translucent-background-color:                   rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha) !default;
 
 /// @prop - Border color alpha of the action sheet when translucent
-$action-sheet-ios-translucent-border-color-alpha:                 .4;
+$action-sheet-ios-translucent-border-color-alpha:                 .4 !default;
 
 /// @prop - Border color of the action sheet when translucent
-$action-sheet-ios-translucent-border-color:                       rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha);
+$action-sheet-ios-translucent-border-color:                       rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha) !default;
 
 /// @prop - Background color alpha of the activated action sheet when translucent
-$action-sheet-ios-translucent-background-color-activated-alpha:   .7;
+$action-sheet-ios-translucent-background-color-activated-alpha:   .7 !default;
 
 /// @prop - Background color of the activated action sheet when translucent
-$action-sheet-ios-translucent-background-color-activated:         rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha);
+$action-sheet-ios-translucent-background-color-activated:         rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha) !default;
 
 /// @prop - Filter of the translucent action-sheet group
-$action-sheet-ios-group-translucent-filter:                       saturate(280%) blur(20px);
+$action-sheet-ios-group-translucent-filter:                       saturate(280%) blur(20px) !default;
 
 /// @prop - Filter of the translucent action-sheet button
-$action-sheet-ios-button-translucent-filter:                      saturate(120%);
+$action-sheet-ios-button-translucent-filter:                      saturate(120%) !default;

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -4,100 +4,100 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-md-text-align:                            start;
+$action-sheet-md-text-align:                            start !default;
 
 /// @prop - Background color of the action sheet
-$action-sheet-md-background-color:                      $overlay-md-background-color;
+$action-sheet-md-background-color:                      $overlay-md-background-color !default;
 
 /// @prop - Padding top of the action sheet
-$action-sheet-md-padding-top:                           0;
+$action-sheet-md-padding-top:                           0 !default;
 
 /// @prop - Padding bottom of the action sheet
-$action-sheet-md-padding-bottom:                        var(--ion-safe-area-bottom);
+$action-sheet-md-padding-bottom:                        var(--ion-safe-area-bottom) !default;
 
 
 // Action Sheet Title
 // --------------------------------------------------
 
 /// @prop - Height of the action sheet title
-$action-sheet-md-title-height:                          60px;
+$action-sheet-md-title-height:                          60px !default;
 
 /// @prop - Color of the action sheet title
-$action-sheet-md-title-color:                           rgba($text-color-rgb, 0.54);
+$action-sheet-md-title-color:                           rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-md-title-font-size:                       dynamic-font(16px);
+$action-sheet-md-title-font-size:                       dynamic-font(16px) !default;
 
 /// @prop - Padding top of the action sheet title
-$action-sheet-md-title-padding-top:                     20px;
+$action-sheet-md-title-padding-top:                     20px !default;
 
 /// @prop - Padding end of the action sheet title
-$action-sheet-md-title-padding-end:                     16px;
+$action-sheet-md-title-padding-end:                     16px !default;
 
 /// @prop - Padding bottom of the action sheet title
-$action-sheet-md-title-padding-bottom:                  17px;
+$action-sheet-md-title-padding-bottom:                  17px !default;
 
 /// @prop - Padding start of the action sheet title
-$action-sheet-md-title-padding-start:                   $action-sheet-md-title-padding-end;
+$action-sheet-md-title-padding-start:                   $action-sheet-md-title-padding-end !default;
 
 
 // Action Sheet Subtitle
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-md-sub-title-font-size:                   dynamic-font(14px);
+$action-sheet-md-sub-title-font-size:                   dynamic-font(14px) !default;
 
 /// @prop - Padding top of the action sheet sub title
-$action-sheet-md-sub-title-padding-top:                 16px;
+$action-sheet-md-sub-title-padding-top:                 16px !default;
 
 /// @prop - Padding end of the action sheet sub title
-$action-sheet-md-sub-title-padding-end:                 0;
+$action-sheet-md-sub-title-padding-end:                 0 !default;
 
 /// @prop - Padding bottom of the action sheet sub title
-$action-sheet-md-sub-title-padding-bottom:              0;
+$action-sheet-md-sub-title-padding-bottom:              0 !default;
 
 /// @prop - Padding start of the action sheet sub title
-$action-sheet-md-sub-title-padding-start:               $action-sheet-md-sub-title-padding-end;
+$action-sheet-md-sub-title-padding-start:               $action-sheet-md-sub-title-padding-end !default;
 
 
 // Action Sheet Button
 // --------------------------------------------------
 
 /// @prop - Minimum height of the action sheet button
-$action-sheet-md-button-height:                         52px;
+$action-sheet-md-button-height:                         52px !default;
 
 /// @prop - Text color of the action sheet button
-$action-sheet-md-button-text-color:                     $text-color-step-150;
+$action-sheet-md-button-text-color:                     $text-color-step-150 !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-md-button-font-size:                      dynamic-font(16px);
+$action-sheet-md-button-font-size:                      dynamic-font(16px) !default;
 
 /// @prop - Padding top of the action sheet button
-$action-sheet-md-button-padding-top:                    12px;
+$action-sheet-md-button-padding-top:                    12px !default;
 
 /// @prop - Padding end of the action sheet button
-$action-sheet-md-button-padding-end:                    16px;
+$action-sheet-md-button-padding-end:                    16px !default;
 
 /// @prop - Padding bottom of the action sheet button
-$action-sheet-md-button-padding-bottom:                 $action-sheet-md-button-padding-top;
+$action-sheet-md-button-padding-bottom:                 $action-sheet-md-button-padding-top !default;
 
 /// @prop - Padding start of the action sheet button
-$action-sheet-md-button-padding-start:                  $action-sheet-md-button-padding-end;
+$action-sheet-md-button-padding-start:                  $action-sheet-md-button-padding-end !default;
 
 // Action Sheet Icon
 // --------------------------------------------------
 
 /// @prop - Font size of the icon in the action sheet button
-$action-sheet-md-icon-font-size:                        dynamic-font(24px);
+$action-sheet-md-icon-font-size:                        dynamic-font(24px) !default;
 
 /// @prop - Margin top of the icon in the action sheet button
-$action-sheet-md-icon-margin-top:                       0;
+$action-sheet-md-icon-margin-top:                       0 !default;
 
 /// @prop - Margin end of the icon in the action sheet button
-$action-sheet-md-icon-margin-end:                       32px;
+$action-sheet-md-icon-margin-end:                       32px !default;
 
 /// @prop - Margin bottom of the icon in the action sheet button
-$action-sheet-md-icon-margin-bottom:                    0;
+$action-sheet-md-icon-margin-bottom:                    0 !default;
 
 /// @prop - Margin start of the icon in the action sheet button
-$action-sheet-md-icon-margin-start:                     0;
+$action-sheet-md-icon-margin-start:                     0 !default;

core/src/components/action-sheet/action-sheet.tsx

@@ -18,7 +18,7 @@ import {
 } from '@utils/overlays';
 import { getClassMap } from '@utils/theme';
 
-import { getIonMode } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 
@@ -29,13 +29,15 @@ import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-action-sheet',
   styleUrls: {
     ios: 'action-sheet.ios.scss',
     md: 'action-sheet.md.scss',
+    ionic: 'action-sheet.md.scss',
   },
   scoped: true,
 })
@@ -105,7 +107,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   /**
    * If `true`, the action sheet will be translucent.
-   * Only applies when the mode is `"ios"` and the device supports
+   * Only applies when the theme is `"ios"` and the device supports
    * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    */
   @Prop() translucent = false;
@@ -310,12 +312,11 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   componentWillLoad() {
-    if (!this.htmlAttributes?.id) {
-      setOverlayId(this.el);
-    }
+    setOverlayId(this.el);
   }
 
   componentDidLoad() {
+    const mode = getIonMode(this);
     /**
      * Only create gesture if:
      * 1. A gesture does not already exist
@@ -324,7 +325,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
      * 4. A group ref exists
      */
     const { groupEl, wrapperEl } = this;
-    if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) {
+    if (!this.gesture && mode === 'ios' && wrapperEl && groupEl) {
       readTask(() => {
         const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
         if (!isScrollable) {
@@ -358,7 +359,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   render() {
     const { header, htmlAttributes, overlayIndex } = this;
-    const mode = getIonMode(this);
+    const theme = getIonTheme(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
     const buttons = allButtons.filter((b) => b.role !== 'cancel');
@@ -375,7 +376,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
           zIndex: `${20000 + this.overlayIndex}`,
         }}
         class={{
-          [mode]: true,
+          [theme]: true,
           ...getClassMap(this.cssClass),
           'overlay-hidden': true,
           'action-sheet-translucent': this.translucent,
@@ -385,7 +386,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
       >
         <ion-backdrop tappable={this.backdropDismiss} />
 
-        <div tabindex="0" aria-hidden="true"></div>
+        <div tabindex="0"></div>
 
         <div class="action-sheet-wrapper ion-overlay-wrapper" ref={(el) => (this.wrapperEl = el)}>
           <div class="action-sheet-container">
@@ -415,7 +416,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                     {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
                     {b.text}
                   </span>
-                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                  {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               ))}
             </div>
@@ -439,14 +440,14 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                     )}
                     {cancelButton.text}
                   </span>
-                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                  {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               </div>
             )}
           </div>
         </div>
 
-        <div tabindex="0" aria-hidden="true"></div>
+        <div tabindex="0"></div>
       </Host>
     );
   }

core/src/components/action-sheet/action-sheet.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Width of the action sheet
-$action-sheet-width:                             100%;
+$action-sheet-width:                             100% !default;
 
 /// @prop - Maximum width of the action sheet
-$action-sheet-max-width:                         500px;
+$action-sheet-max-width:                         500px !default;

core/src/components/action-sheet/test/a11y/index.html

@@ -19,14 +19,14 @@
     <main class="ion-padding">
       <h1>Action Sheet - A11y</h1>
 
-      <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
-      <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
-      <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
-      <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
-      <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
-      <button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
-        Aria Label Cancel Button
-      </button>
+      <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
+      <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
+      <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
+      <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
+      <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
+        >Aria Label Cancel Button</ion-button
+      >
     </main>
 
     <script>

core/src/components/action-sheet/test/action-sheet-id.spec.ts

@@ -0,0 +1,41 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { ActionSheet } from '../action-sheet';
+
+it('action sheet should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [ActionSheet],
+    html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
+  });
+  let actionSheet: HTMLIonActionSheetElement;
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet).not.toBe(null);
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
+
+  // Remove the action sheet from the DOM
+  actionSheet.remove();
+  await page.waitForChanges();
+
+  // Create a new action sheet to verify the id is incremented
+  actionSheet = document.createElement('ion-action-sheet');
+  actionSheet.isOpen = true;
+  page.body.appendChild(actionSheet);
+  await page.waitForChanges();
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+
+  // Presenting the same action sheet again should reuse the existing id
+
+  actionSheet.isOpen = false;
+  await page.waitForChanges();
+  actionSheet.isOpen = true;
+  await page.waitForChanges();
+
+  actionSheet = page.body.querySelector('ion-action-sheet')!;
+
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+});

core/src/components/action-sheet/test/action-sheet-id.spec.tsx

@@ -1,55 +0,0 @@
-import { newSpecPage } from '@stencil/core/testing';
-
-import { ActionSheet } from '../action-sheet';
-import { h } from '@stencil/core';
-
-describe('action-sheet: id', () => {
-  it('action sheet should be assigned an incrementing id', async () => {
-    const page = await newSpecPage({
-      components: [ActionSheet],
-      html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
-    });
-    let actionSheet: HTMLIonActionSheetElement;
-
-    actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-    expect(actionSheet).not.toBe(null);
-    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
-
-    // Remove the action sheet from the DOM
-    actionSheet.remove();
-    await page.waitForChanges();
-
-    // Create a new action sheet to verify the id is incremented
-    actionSheet = document.createElement('ion-action-sheet');
-    actionSheet.isOpen = true;
-    page.body.appendChild(actionSheet);
-    await page.waitForChanges();
-
-    actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-
-    // Presenting the same action sheet again should reuse the existing id
-
-    actionSheet.isOpen = false;
-    await page.waitForChanges();
-    actionSheet.isOpen = true;
-    await page.waitForChanges();
-
-    actionSheet = page.body.querySelector('ion-action-sheet')!;
-
-    expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
-  });
-
-  it('should not overwrite the id set in htmlAttributes', async () => {
-    const id = 'custom-id';
-    const page = await newSpecPage({
-      components: [ActionSheet],
-      template: () => <ion-action-sheet htmlAttributes={{ id }} overlayIndex={-1}></ion-action-sheet>,
-    });
-
-    const alert = page.body.querySelector('ion-action-sheet')!;
-    expect(alert.id).toBe(id);
-  });
-});