v8.1.2

Issue number: N/A

---------

<!-- 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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The tests for picker were failing because the focus was not set to the
appropriate element and because Firefox would focus on an element it
shouldn't be.

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

- Adjusted the `setFocus()`
- Skipped the `picker-opts` in the tab order
- Removed `skip()` from the tests

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


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

N/A

---------

Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
Co-authored-by: Brandy Carney <brandyscarney@gmail.com>

.github/CODEOWNERS

@@ -12,74 +12,3 @@
 # This should make it easy to add new rules without breaking existing ones.
 
 * @ionic-team/framework
-
-# Frameworks
-
-## Angular
-
-/packages/angular/ @sean-perkins @thetaPC
-/packages/angular-server @sean-perkins @thetaPC
-/packages/angular/test @thetaPC
-
-## React
-
-/packages/react/ @amandaejohnston
-/packages/react-router @amandaejohnston
-/packages/react/test-app/
-/packages/react-router/test-app/
-
-## Vue
-
-/packages/vue/ @liamdebeasi @thetaPC
-/packages/vue-router/ @liamdebeasi @thetaPC
-/packages/vue/test/ @thetaPC
-/packages/vue-router/__tests__ @thetaPC
-
-# Components
-
-/core/src/components/accordion/ @liamdebeasi
-/core/src/components/accordion-group/ @liamdebeasi
-
-/core/src/components/checkbox/ @amandaejohnston
-
-/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
-/core/src/components/datetime-button/ @liamdebeasi
-
-/core/src/components/item/ @brandyscarney
-
-/core/src/components/menu/ @amandaejohnston
-/core/src/components/menu-toggle/ @amandaejohnston
-
-/core/src/components/nav/ @sean-perkins
-/core/src/components/nav-link/ @sean-perkins
-
-/core/src/components/picker/ @liamdebeasi
-/core/src/components/picker-column/ @liamdebeasi
-
-/core/src/components/radio/ @amandaejohnston
-/core/src/components/radio-group/ @amandaejohnston
-
-/core/src/components/refresher/ @liamdebeasi
-/core/src/components/refresher-content/ @liamdebeasi
-
-/core/src/components/searchbar/ @brandyscarney
-
-/core/src/components/segment/ @brandyscarney
-/core/src/components/segment-button/ @brandyscarney
-
-/core/src/components/skeleton-text/ @brandyscarney
-
-# Utilities
-
-/core/src/utils/animation/ @liamdebeasi
-/core/src/utils/content/ @sean-perkins
-/core/src/utils/gesture/ @liamdebeasi
-/core/src/utils/input-shims/ @liamdebeasi
-/core/src/utils/keyboard/ @liamdebeasi
-/core/src/utils/logging/ @amandaejohnston
-/core/src/utils/sanitization/ @liamdebeasi
-/core/src/utils/tap-click/ @liamdebeasi
-/core/src/utils/transition/ @liamdebeasi
-
-/core/src/css/ @brandyscarney
-/core/src/themes/ @brandyscarney

.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/.github/CONTRIBUTING.md#creating-an-issue).
+        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/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 (Beta)
+        - v8.x
         - 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/.github/CONTRIBUTING.md#creating-an-issue).
+        - label: I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/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/PULL_REQUEST_TEMPLATE.md

@@ -25,7 +25,7 @@ Issue number: resolves #
   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/.github/CONTRIBUTING.md#footer for more information.
+  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.
 -->
 
 

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

@@ -29,7 +29,7 @@ runs:
       shell: bash
       working-directory: ./packages/angular/test
     - name: Install Dependencies
-      run: npm install
+      run: npm install --legacy-peer-deps # TODO(FW-6227): Remove legacy-peer-deps flag
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: Sync Built Changes

.github/workflows/assign-issues.yml

@@ -11,8 +11,8 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
+        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
         with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+          assignees: brandyscarney, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/build.yml

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

.github/workflows/conventional-commit.yml

@@ -0,0 +1,32 @@
+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-ionic.yml

@@ -41,8 +41,8 @@ jobs:
       uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-docs
-        output: docs/DocsBuild.zip
-        paths: docs/core.json docs/core.d.ts
+        output: packages/docs/DocsBuild.zip
+        paths: packages/docs/core.json packages/docs/core.d.ts
 
   release-docs:
     needs: [release-core]
@@ -53,7 +53,7 @@ jobs:
       uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-docs
-        path: ./docs
+        path: ./packages/docs
         filename: DocsBuild.zip
     - uses: ./.github/workflows/actions/publish-npm
       with:
@@ -61,7 +61,7 @@ jobs:
         tag: ${{ inputs.tag }}
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
-        working-directory: 'docs'
+        working-directory: 'packages/docs'
         token: ${{ secrets.NPM_TOKEN }}
 
   release-angular:

.github/workflows/release.yml

@@ -22,8 +22,6 @@ 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]
+        apps: [ng16, ng17, ng18]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

.vercelignore

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

CHANGELOG.md

@@ -3,6 +3,191 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.2) (2024-05-15)
+
+
+### 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)
+* **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))
+* **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.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)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
+# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
+# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27)
+
+
+### Bug Fixes
+
+* **angular:** schematics account for new theme files ([#29185](https://github.com/ionic-team/ionic-framework/issues/29185)) ([b0a10df](https://github.com/ionic-team/ionic-framework/commit/b0a10dfa56a65ee3905cc2c3d48d2221a42f222f))
+
+
+### Code Refactoring
+
+* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a))
+* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a))
+
+
+### Features
+
+* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd))
+* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172))
+* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64))
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`.
+* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
 # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-03-20)
 
 

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/blob/main/.github/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/blob/main/.github/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 />
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
 ### Contributing
 
 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
+[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.
 

core/CHANGELOG.md

@@ -3,6 +3,185 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.1.2](https://github.com/ionic-team/ionic-framework/compare/v8.1.0...v8.1.2) (2024-05-15)
+
+
+### 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)
+* **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))
+* **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.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)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
+# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+# [8.0.0-beta.4](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.3...v8.0.0-beta.4) (2024-03-27)
+
+
+### Code Refactoring
+
+* **haptics:** remove cordova haptics support ([#29186](https://github.com/ionic-team/ionic-framework/issues/29186)) ([9efeb0a](https://github.com/ionic-team/ionic-framework/commit/9efeb0ad31aadee5f5ae542641d928ecf93fe82a))
+* **searchbar:** autocapitalize defaults to off ([#29107](https://github.com/ionic-team/ionic-framework/issues/29107)) ([6e477b7](https://github.com/ionic-team/ionic-framework/commit/6e477b743e41b2b37627c8208901704f599b762a))
+
+
+### Features
+
+* **button:** add circular shape as round ([#29161](https://github.com/ionic-team/ionic-framework/issues/29161)) ([44529f0](https://github.com/ionic-team/ionic-framework/commit/44529f0a62f1b1ce42750a20f19e829b2789febd))
+* **input:** add input-password-toggle component ([#29175](https://github.com/ionic-team/ionic-framework/issues/29175)) ([6c500fd](https://github.com/ionic-team/ionic-framework/commit/6c500fd6b2e2553c11fcddc9d86ac9a29f76e172))
+* remove css animations support for ionic animations ([#29123](https://github.com/ionic-team/ionic-framework/issues/29123)) ([892594d](https://github.com/ionic-team/ionic-framework/commit/892594de0665e8fc5c8a737d292812842ea03d64))
+
+
+### BREAKING CHANGES
+
+* **searchbar:** The `autocapitalize` property on Searchbar now defaults to `'off'`.
+* **haptics:** Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
 # [8.0.0-beta.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v8.0.0-beta.3) (2024-03-20)
 
 

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.42.1
+FROM mcr.microsoft.com/playwright:v1.43.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](/.github/CONTRIBUTING.md)
+[Check out the CONTRIBUTE guide](/docs/CONTRIBUTING.md)
 
 ## Related
 

core/api.txt

@@ -3,7 +3,6 @@ ion-accordion,shadow
 ion-accordion,prop,disabled,boolean,false,false,false
 ion-accordion,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion,prop,readonly,boolean,false,false,false
-ion-accordion,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-accordion,prop,toggleIcon,string,chevronDown,false,false
 ion-accordion,prop,toggleIconSlot,"end" | "start",'end',false,false
 ion-accordion,prop,value,string,`ion-accordion-${accordionIds++}`,false,false
@@ -18,7 +17,6 @@ ion-accordion-group,prop,expand,"compact" | "inset",'compact',false,false
 ion-accordion-group,prop,mode,"ios" | "md",undefined,false,false
 ion-accordion-group,prop,multiple,boolean | undefined,undefined,false,false
 ion-accordion-group,prop,readonly,boolean,false,false,false
-ion-accordion-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-accordion-group,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-accordion-group,event,ionChange,AccordionGroupChangeEventDetail<any>,true
 
@@ -35,7 +33,6 @@ ion-action-sheet,prop,keyboardClose,boolean,true,false,false
 ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
 ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
-ion-action-sheet,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-action-sheet,prop,translucent,boolean,false,false,false
 ion-action-sheet,prop,trigger,string | undefined,undefined,false,false
 ion-action-sheet,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -90,7 +87,6 @@ ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false
 ion-alert,prop,mode,"ios" | "md",undefined,false,false
 ion-alert,prop,subHeader,string | undefined,undefined,false,false
-ion-alert,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-alert,prop,translucent,boolean,false,false,false
 ion-alert,prop,trigger,string | undefined,undefined,false,false
 ion-alert,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -115,12 +111,8 @@ ion-alert,css-prop,--min-width
 ion-alert,css-prop,--width
 
 ion-app,none
-ion-app,prop,mode,"ios" | "md",undefined,false,false
-ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-avatar,shadow
-ion-avatar,prop,mode,"ios" | "md",undefined,false,false
-ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-avatar,css-prop,--border-radius
 
 ion-back-button,shadow
@@ -131,7 +123,6 @@ ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
 ion-back-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
-ion-back-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-back-button,css-prop,--background
 ion-back-button,css-prop,--background-focused
@@ -170,17 +161,14 @@ ion-back-button,part,native
 ion-back-button,part,text
 
 ion-backdrop,shadow
-ion-backdrop,prop,mode,"ios" | "md",undefined,false,false
 ion-backdrop,prop,stopPropagation,boolean,true,false,false
 ion-backdrop,prop,tappable,boolean,true,false,false
-ion-backdrop,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-backdrop,prop,visible,boolean,true,false,false
 ion-backdrop,event,ionBackdropTap,void,true
 
 ion-badge,shadow
 ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
-ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-badge,css-prop,--background
 ion-badge,css-prop,--color
 ion-badge,css-prop,--padding-bottom
@@ -200,7 +188,6 @@ ion-breadcrumb,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | u
 ion-breadcrumb,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-breadcrumb,prop,separator,boolean | undefined,undefined,false,false
 ion-breadcrumb,prop,target,string | undefined,undefined,false,false
-ion-breadcrumb,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-breadcrumb,event,ionBlur,void,true
 ion-breadcrumb,event,ionFocus,void,true
 ion-breadcrumb,css-prop,--background-focused
@@ -218,7 +205,6 @@ ion-breadcrumbs,prop,itemsAfterCollapse,number,1,false,false
 ion-breadcrumbs,prop,itemsBeforeCollapse,number,1,false,false
 ion-breadcrumbs,prop,maxItems,number | undefined,undefined,false,false
 ion-breadcrumbs,prop,mode,"ios" | "md",undefined,false,false
-ion-breadcrumbs,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-breadcrumbs,event,ionCollapsedClick,BreadcrumbCollapsedClickEventDetail,true
 
 ion-button,shadow
@@ -234,11 +220,10 @@ ion-button,prop,mode,"ios" | "md",undefined,false,false
 ion-button,prop,rel,string | undefined,undefined,false,false
 ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-button,prop,shape,"rectangular" | "round" | undefined,undefined,false,true
-ion-button,prop,size,"default" | "large" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,true
+ion-button,prop,shape,"round" | undefined,undefined,false,true
+ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true
 ion-button,prop,strong,boolean,false,false,false
 ion-button,prop,target,string | undefined,undefined,false,false
-ion-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
@@ -269,8 +254,6 @@ ion-button,part,native
 
 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false
-ion-buttons,prop,mode,"ios" | "md",undefined,false,false
-ion-buttons,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-card,shadow
 ion-card,prop,button,boolean,false,false,false
@@ -283,7 +266,6 @@ ion-card,prop,rel,string | undefined,undefined,false,false
 ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-card,prop,target,string | undefined,undefined,false,false
-ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-card,css-prop,--background
 ion-card,css-prop,--color
@@ -291,24 +273,20 @@ ion-card,part,native
 
 ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
-ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-card-header,shadow
 ion-card-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-header,prop,mode,"ios" | "md",undefined,false,false
-ion-card-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card-header,prop,translucent,boolean,false,false,false
 
 ion-card-subtitle,shadow
 ion-card-subtitle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-subtitle,prop,mode,"ios" | "md",undefined,false,false
-ion-card-subtitle,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card-subtitle,css-prop,--color
 
 ion-card-title,shadow
 ion-card-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-card-title,prop,mode,"ios" | "md",undefined,false,false
-ion-card-title,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card-title,css-prop,--color
 
 ion-checkbox,shadow
@@ -321,7 +299,6 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',fals
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
-ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
@@ -346,12 +323,10 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
-ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-chip,css-prop,--background
 ion-chip,css-prop,--color
 
 ion-col,shadow
-ion-col,prop,mode,"ios" | "md",undefined,false,false
 ion-col,prop,offset,string | undefined,undefined,false,false
 ion-col,prop,offsetLg,string | undefined,undefined,false,false
 ion-col,prop,offsetMd,string | undefined,undefined,false,false
@@ -376,7 +351,6 @@ ion-col,prop,sizeMd,string | undefined,undefined,false,false
 ion-col,prop,sizeSm,string | undefined,undefined,false,false
 ion-col,prop,sizeXl,string | undefined,undefined,false,false
 ion-col,prop,sizeXs,string | undefined,undefined,false,false
-ion-col,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-col,css-prop,--ion-grid-column-padding
 ion-col,css-prop,--ion-grid-column-padding-lg
 ion-col,css-prop,--ion-grid-column-padding-md
@@ -387,13 +361,12 @@ ion-col,css-prop,--ion-grid-columns
 
 ion-content,shadow
 ion-content,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-content,prop,fixedSlotPlacement,"after" | "before",'after',false,false
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
 ion-content,prop,fullscreen,boolean,false,false,false
-ion-content,prop,mode,"ios" | "md",undefined,false,false
 ion-content,prop,scrollEvents,boolean,false,false,false
 ion-content,prop,scrollX,boolean,false,false,false
 ion-content,prop,scrollY,boolean,true,false,false
-ion-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-content,method,getScrollElement,getScrollElement() => Promise<HTMLElement>
 ion-content,method,scrollByPoint,scrollByPoint(x: number, y: number, duration: number) => Promise<void>
 ion-content,method,scrollToBottom,scrollToBottom(duration?: number) => Promise<void>
@@ -443,7 +416,6 @@ ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false
 ion-datetime,prop,size,"cover" | "fixed",'fixed',false,false
-ion-datetime,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-datetime,prop,titleSelectedDatesFormatter,((selectedDates: string[]) => string) | undefined,undefined,false,false
 ion-datetime,prop,value,null | string | string[] | undefined,undefined,false,false
 ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
@@ -475,15 +447,12 @@ ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary
 ion-datetime-button,prop,datetime,string | undefined,undefined,false,false
 ion-datetime-button,prop,disabled,boolean,false,false,true
 ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
-ion-datetime-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-datetime-button,part,native
 
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false
 ion-fab,prop,edge,boolean,false,false,false
 ion-fab,prop,horizontal,"center" | "end" | "start" | undefined,undefined,false,false
-ion-fab,prop,mode,"ios" | "md",undefined,false,false
-ion-fab,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-fab,prop,vertical,"bottom" | "center" | "top" | undefined,undefined,false,false
 ion-fab,method,close,close() => Promise<void>
 
@@ -501,7 +470,6 @@ ion-fab-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,
 ion-fab-button,prop,show,boolean,false,false,false
 ion-fab-button,prop,size,"small" | undefined,undefined,false,false
 ion-fab-button,prop,target,string | undefined,undefined,false,false
-ion-fab-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-fab-button,prop,translucent,boolean,false,false,false
 ion-fab-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-fab-button,event,ionBlur,void,true
@@ -534,20 +502,15 @@ ion-fab-button,part,native
 
 ion-fab-list,shadow
 ion-fab-list,prop,activated,boolean,false,false,false
-ion-fab-list,prop,mode,"ios" | "md",undefined,false,false
 ion-fab-list,prop,side,"bottom" | "end" | "start" | "top",'bottom',false,false
-ion-fab-list,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-footer,none
 ion-footer,prop,collapse,"fade" | undefined,undefined,false,false
 ion-footer,prop,mode,"ios" | "md",undefined,false,false
-ion-footer,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-footer,prop,translucent,boolean,false,false,false
 
 ion-grid,shadow
 ion-grid,prop,fixed,boolean,false,false,false
-ion-grid,prop,mode,"ios" | "md",undefined,false,false
-ion-grid,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-grid,css-prop,--ion-grid-padding
 ion-grid,css-prop,--ion-grid-padding-lg
 ion-grid,css-prop,--ion-grid-padding-md
@@ -564,14 +527,11 @@ ion-grid,css-prop,--ion-grid-width-xs
 ion-header,none
 ion-header,prop,collapse,"condense" | "fade" | undefined,undefined,false,false
 ion-header,prop,mode,"ios" | "md",undefined,false,false
-ion-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-header,prop,translucent,boolean,false,false,false
 
 ion-img,shadow
 ion-img,prop,alt,string | undefined,undefined,false,false
-ion-img,prop,mode,"ios" | "md",undefined,false,false
 ion-img,prop,src,string | undefined,undefined,false,false
-ion-img,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-img,event,ionError,void,true
 ion-img,event,ionImgDidLoad,void,true
 ion-img,event,ionImgWillLoad,void,true
@@ -579,9 +539,7 @@ ion-img,part,image
 
 ion-infinite-scroll,none
 ion-infinite-scroll,prop,disabled,boolean,false,false,false
-ion-infinite-scroll,prop,mode,"ios" | "md",undefined,false,false
 ion-infinite-scroll,prop,position,"bottom" | "top",'bottom',false,false
-ion-infinite-scroll,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-infinite-scroll,prop,threshold,string,'15%',false,false
 ion-infinite-scroll,method,complete,complete() => Promise<void>
 ion-infinite-scroll,event,ionInfinite,void,true
@@ -589,8 +547,6 @@ ion-infinite-scroll,event,ionInfinite,void,true
 ion-infinite-scroll-content,none
 ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
 ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefined,undefined,false,false
-ion-infinite-scroll-content,prop,mode,"ios" | "md",undefined,false,false
-ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-input,scoped
 ion-input,prop,autocapitalize,string,'off',false,false
@@ -598,6 +554,7 @@ ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "h
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
 ion-input,prop,autofocus,boolean,false,false,false
 ion-input,prop,clearInput,boolean,false,false,false
+ion-input,prop,clearInputIcon,string | undefined,undefined,false,false
 ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input,prop,counter,boolean,false,false,false
@@ -625,7 +582,6 @@ ion-input,prop,required,boolean,false,false,false
 ion-input,prop,shape,"round" | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
-ion-input,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-input,prop,type,"date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week",'text',false,false
 ion-input,prop,value,null | number | string | undefined,'',false,false
 ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
@@ -673,7 +629,6 @@ ion-item,prop,rel,string | undefined,undefined,false,false
 ion-item,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-item,prop,target,string | undefined,undefined,false,false
-ion-item,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background
 ion-item,css-prop,--background-activated
@@ -713,7 +668,6 @@ ion-item-divider,shadow
 ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
-ion-item-divider,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-divider,css-prop,--background
 ion-item-divider,css-prop,--color
 ion-item-divider,css-prop,--inner-padding-bottom
@@ -726,8 +680,6 @@ ion-item-divider,css-prop,--padding-start
 ion-item-divider,css-prop,--padding-top
 
 ion-item-group,none
-ion-item-group,prop,mode,"ios" | "md",undefined,false,false
-ion-item-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-item-option,shadow
 ion-item-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -738,22 +690,17 @@ ion-item-option,prop,href,string | undefined,undefined,false,false
 ion-item-option,prop,mode,"ios" | "md",undefined,false,false
 ion-item-option,prop,rel,string | undefined,undefined,false,false
 ion-item-option,prop,target,string | undefined,undefined,false,false
-ion-item-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item-option,css-prop,--background
 ion-item-option,css-prop,--color
 ion-item-option,part,native
 
 ion-item-options,none
-ion-item-options,prop,mode,"ios" | "md",undefined,false,false
 ion-item-options,prop,side,"end" | "start",'end',false,false
-ion-item-options,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-options,event,ionSwipe,any,true
 
 ion-item-sliding,none
 ion-item-sliding,prop,disabled,boolean,false,false,false
-ion-item-sliding,prop,mode,"ios" | "md",undefined,false,false
-ion-item-sliding,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-item-sliding,method,close,close() => Promise<void>
 ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
 ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
@@ -765,21 +712,18 @@ ion-label,scoped
 ion-label,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-label,prop,mode,"ios" | "md",undefined,false,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false,false
-ion-label,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-label,css-prop,--color
 
 ion-list,none
 ion-list,prop,inset,boolean,false,false,false
 ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list,prop,mode,"ios" | "md",undefined,false,false
-ion-list,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>
 
 ion-list-header,shadow
 ion-list-header,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-list-header,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list-header,prop,mode,"ios" | "md",undefined,false,false
-ion-list-header,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-list-header,css-prop,--background
 ion-list-header,css-prop,--border-color
 ion-list-header,css-prop,--border-style
@@ -801,7 +745,6 @@ ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,fa
 ion-loading,prop,mode,"ios" | "md",undefined,false,false
 ion-loading,prop,showBackdrop,boolean,true,false,false
 ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
-ion-loading,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-loading,prop,translucent,boolean,false,false,false
 ion-loading,prop,trigger,string | undefined,undefined,false,false
 ion-loading,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -831,10 +774,8 @@ ion-menu,prop,contentId,string | undefined,undefined,false,true
 ion-menu,prop,disabled,boolean,false,false,false
 ion-menu,prop,maxEdgeStart,number,50,false,false
 ion-menu,prop,menuId,string | undefined,undefined,false,true
-ion-menu,prop,mode,"ios" | "md",undefined,false,false
 ion-menu,prop,side,"end" | "start",'start',false,true
 ion-menu,prop,swipeGesture,boolean,true,false,false
-ion-menu,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-menu,prop,type,"overlay" | "push" | "reveal" | undefined,undefined,false,false
 ion-menu,method,close,close(animated?: boolean) => Promise<boolean>
 ion-menu,method,isActive,isActive() => Promise<boolean>
@@ -862,7 +803,6 @@ ion-menu-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" |
 ion-menu-button,prop,disabled,boolean,false,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
-ion-menu-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-menu-button,css-prop,--background
 ion-menu-button,css-prop,--background-focused
@@ -883,8 +823,6 @@ ion-menu-button,part,native
 ion-menu-toggle,shadow
 ion-menu-toggle,prop,autoHide,boolean,true,false,false
 ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
-ion-menu-toggle,prop,mode,"ios" | "md",undefined,false,false
-ion-menu-toggle,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-modal,shadow
 ion-modal,prop,animated,boolean,true,false,false
@@ -893,6 +831,7 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
 ion-modal,prop,canDismiss,((data?: any, role?: string | undefined) => Promise<boolean>) | boolean,true,false,false
 ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-modal,prop,focusTrap,boolean,true,false,false
 ion-modal,prop,handle,boolean | undefined,undefined,false,false
 ion-modal,prop,handleBehavior,"cycle" | "none" | undefined,'none',false,false
 ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
@@ -904,7 +843,6 @@ ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
-ion-modal,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-modal,method,getCurrentBreakpoint,getCurrentBreakpoint() => Promise<number | undefined>
@@ -940,11 +878,9 @@ ion-modal,part,handle
 ion-nav,shadow
 ion-nav,prop,animated,boolean,true,false,false
 ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
-ion-nav,prop,mode,"ios" | "md",undefined,false,false
 ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false,false
 ion-nav,prop,swipeGesture,boolean | undefined,undefined,false,false
-ion-nav,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-nav,method,canGoBack,canGoBack(view?: ViewController) => Promise<boolean>
 ion-nav,method,getActive,getActive() => Promise<ViewController | undefined>
 ion-nav,method,getByIndex,getByIndex(index: number) => Promise<ViewController | undefined>
@@ -965,20 +901,16 @@ ion-nav,event,ionNavWillChange,void,false
 ion-nav-link,none
 ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
-ion-nav-link,prop,mode,"ios" | "md",undefined,false,false
 ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-nav-link,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-note,shadow
 ion-note,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-note,prop,mode,"ios" | "md",undefined,false,false
-ion-note,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-note,css-prop,--color
 
 ion-picker,shadow
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
-ion-picker,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-picker,css-prop,--fade-background-rgb
 ion-picker,css-prop,--highlight-background
 ion-picker,css-prop,--highlight-border-radius
@@ -987,7 +919,6 @@ ion-picker-column,shadow
 ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
 ion-picker-column,prop,disabled,boolean,false,false,false
 ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
-ion-picker-column,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-picker-column,prop,value,number | string | undefined,undefined,false,false
 ion-picker-column,method,setFocus,setFocus() => Promise<void>
 ion-picker-column,event,ionChange,PickerColumnChangeEventDetail,true
@@ -995,8 +926,6 @@ ion-picker-column,event,ionChange,PickerColumnChangeEventDetail,true
 ion-picker-column-option,shadow
 ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
 ion-picker-column-option,prop,disabled,boolean,false,false,false
-ion-picker-column-option,prop,mode,"ios" | "md",undefined,false,false
-ion-picker-column-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-picker-column-option,prop,value,any,undefined,false,false
 
 ion-picker-legacy,scoped
@@ -1013,7 +942,6 @@ ion-picker-legacy,prop,keyboardClose,boolean,true,false,false
 ion-picker-legacy,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker-legacy,prop,mode,"ios" | "md",undefined,false,false
 ion-picker-legacy,prop,showBackdrop,boolean,true,false,false
-ion-picker-legacy,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-picker-legacy,prop,trigger,string | undefined,undefined,false,false
 ion-picker-legacy,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-picker-legacy,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
@@ -1052,6 +980,7 @@ ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,fa
 ion-popover,prop,dismissOnSelect,boolean,false,false,false
 ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
+ion-popover,prop,focusTrap,boolean,true,false,false
 ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-popover,prop,isOpen,boolean,false,false,false
 ion-popover,prop,keepContentsMounted,boolean,false,false,false
@@ -1062,7 +991,6 @@ ion-popover,prop,reference,"event" | "trigger",'trigger',false,false
 ion-popover,prop,showBackdrop,boolean,true,false,false
 ion-popover,prop,side,"bottom" | "end" | "left" | "right" | "start" | "top",'bottom',false,false
 ion-popover,prop,size,"auto" | "cover",'auto',false,false
-ion-popover,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-popover,prop,translucent,boolean,false,false,false
 ion-popover,prop,trigger,string | undefined,undefined,false,false
 ion-popover,prop,triggerAction,"click" | "context-menu" | "hover",'click',false,false
@@ -1098,7 +1026,6 @@ ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
-ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
 ion-progress-bar,css-prop,--background
@@ -1115,7 +1042,6 @@ ion-radio,prop,justify,"end" | "space-between" | "start",'space-between',false,f
 ion-radio,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
 ion-radio,prop,name,string,this.inputId,false,false
-ion-radio,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-radio,prop,value,any,undefined,false,false
 ion-radio,event,ionBlur,void,true
 ion-radio,event,ionFocus,void,true
@@ -1130,9 +1056,7 @@ ion-radio,part,mark
 ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
 ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
-ion-radio-group,prop,mode,"ios" | "md",undefined,false,false
 ion-radio-group,prop,name,string,this.inputId,false,false
-ion-radio-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
 
@@ -1152,7 +1076,6 @@ ion-range,prop,pin,boolean,false,false,false
 ion-range,prop,pinFormatter,(value: number) => string | number,(value: number): number => Math.round(value),false,false
 ion-range,prop,snaps,boolean,false,false,false
 ion-range,prop,step,number,1,false,false
-ion-range,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-range,prop,ticks,boolean,true,false,false
 ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
 ion-range,event,ionBlur,void,true
@@ -1188,7 +1111,6 @@ ion-refresher,prop,pullFactor,number,1,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
 ion-refresher,prop,pullMin,number,60,false,false
 ion-refresher,prop,snapbackDuration,string,'280ms',false,false
-ion-refresher,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-refresher,method,cancel,cancel() => Promise<void>
 ion-refresher,method,complete,complete() => Promise<void>
 ion-refresher,method,getProgress,getProgress() => Promise<number>
@@ -1197,28 +1119,20 @@ ion-refresher,event,ionRefresh,RefresherEventDetail,true
 ion-refresher,event,ionStart,void,true
 
 ion-refresher-content,none
-ion-refresher-content,prop,mode,"ios" | "md",undefined,false,false
 ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false
 ion-refresher-content,prop,pullingText,IonicSafeString | string | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingText,IonicSafeString | string | undefined,undefined,false,false
-ion-refresher-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-reorder,shadow
-ion-reorder,prop,mode,"ios" | "md",undefined,false,false
-ion-reorder,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-reorder,part,icon
 
 ion-reorder-group,none
 ion-reorder-group,prop,disabled,boolean,true,false,false
-ion-reorder-group,prop,mode,"ios" | "md",undefined,false,false
-ion-reorder-group,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[]) => Promise<any>
 ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
 
 ion-ripple-effect,shadow
-ion-ripple-effect,prop,mode,"ios" | "md",undefined,false,false
-ion-ripple-effect,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false
 ion-ripple-effect,method,addRipple,addRipple(x: number, y: number) => Promise<() => void>
 
@@ -1227,8 +1141,6 @@ ion-route,prop,beforeEnter,(() => NavigationHookResult | Promise<NavigationHookR
 ion-route,prop,beforeLeave,(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined,undefined,false,false
 ion-route,prop,component,string,undefined,true,false
 ion-route,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
-ion-route,prop,mode,"ios" | "md",undefined,false,false
-ion-route,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-route,prop,url,string,'',false,false
 ion-route,event,ionRouteDataChanged,any,true
 
@@ -1238,9 +1150,7 @@ ion-route-redirect,prop,to,null | string | undefined,undefined,true,false
 ion-route-redirect,event,ionRouteRedirectChanged,any,true
 
 ion-router,none
-ion-router,prop,mode,"ios" | "md",undefined,false,false
 ion-router,prop,root,string,'/',false,false
-ion-router,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-router,prop,useHash,boolean,true,false,false
 ion-router,method,back,back() => Promise<void>
 ion-router,method,push,push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>
@@ -1250,12 +1160,10 @@ ion-router,event,ionRouteWillChange,RouterEventDetail,true
 ion-router-link,shadow
 ion-router-link,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-router-link,prop,href,string | undefined,undefined,false,false
-ion-router-link,prop,mode,"ios" | "md",undefined,false,false
 ion-router-link,prop,rel,string | undefined,undefined,false,false
 ion-router-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-router-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-router-link,prop,target,string | undefined,undefined,false,false
-ion-router-link,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-router-link,css-prop,--background
 ion-router-link,css-prop,--color
 
@@ -1263,11 +1171,8 @@ ion-router-outlet,shadow
 ion-router-outlet,prop,animated,boolean,true,false,false
 ion-router-outlet,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false
-ion-router-outlet,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-row,shadow
-ion-row,prop,mode,"ios" | "md",undefined,false,false
-ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
@@ -1291,7 +1196,6 @@ ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
 ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
-ion-searchbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
 ion-searchbar,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
@@ -1321,7 +1225,6 @@ ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
 ion-segment,prop,selectOnFocus,boolean,false,false,false
 ion-segment,prop,swipeGesture,boolean,true,false,false
-ion-segment,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-segment,prop,value,number | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
@@ -1330,7 +1233,6 @@ ion-segment-button,shadow
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
-ion-segment-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-segment-button,prop,value,number | string,'ion-sb-' + ids++,false,false
 ion-segment-button,css-prop,--background
@@ -1384,7 +1286,6 @@ ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,shape,"round" | undefined,undefined,false,false
-ion-select,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-select,prop,toggleIcon,string | undefined,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
 ion-select,method,open,open(event?: UIEvent) => Promise<any>
@@ -1417,14 +1318,10 @@ ion-select,part,text
 
 ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
-ion-select-option,prop,mode,"ios" | "md",undefined,false,false
-ion-select-option,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-select-option,prop,value,any,undefined,false,false
 
 ion-skeleton-text,shadow
 ion-skeleton-text,prop,animated,boolean,false,false,false
-ion-skeleton-text,prop,mode,"ios" | "md",undefined,false,false
-ion-skeleton-text,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-skeleton-text,css-prop,--background
 ion-skeleton-text,css-prop,--background-rgb
 ion-skeleton-text,css-prop,--border-radius
@@ -1432,17 +1329,13 @@ ion-skeleton-text,css-prop,--border-radius
 ion-spinner,shadow
 ion-spinner,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-spinner,prop,duration,number | undefined,undefined,false,false
-ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
-ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-spinner,css-prop,--color
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
 ion-split-pane,prop,disabled,boolean,false,false,false
-ion-split-pane,prop,mode,"ios" | "md",undefined,false,false
-ion-split-pane,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
 ion-split-pane,css-prop,--border
@@ -1452,16 +1345,13 @@ ion-split-pane,css-prop,--side-width
 
 ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
-ion-tab,prop,mode,"ios" | "md",undefined,false,false
 ion-tab,prop,tab,string,undefined,true,false
-ion-tab,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab,method,setActive,setActive() => Promise<void>
 
 ion-tab-bar,shadow
 ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
-ion-tab-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab-bar,prop,translucent,boolean,false,false,false
 ion-tab-bar,css-prop,--background
 ion-tab-bar,css-prop,--border
@@ -1477,7 +1367,6 @@ ion-tab-button,prop,rel,string | undefined,undefined,false,false
 ion-tab-button,prop,selected,boolean,false,false,false
 ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
-ion-tab-button,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab-button,css-prop,--background
 ion-tab-button,css-prop,--background-focused
 ion-tab-button,css-prop,--background-focused-opacity
@@ -1492,8 +1381,6 @@ ion-tab-button,css-prop,--ripple-color
 ion-tab-button,part,native
 
 ion-tabs,shadow
-ion-tabs,prop,mode,"ios" | "md",undefined,false,false
-ion-tabs,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
@@ -1503,7 +1390,6 @@ ion-tabs,event,ionTabsWillChange,{ tab: string; },false
 ion-text,shadow
 ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-text,prop,mode,"ios" | "md",undefined,false,false
-ion-text,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
 ion-textarea,scoped
 ion-textarea,prop,autoGrow,boolean,false,false,true
@@ -1533,7 +1419,6 @@ ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
 ion-textarea,prop,shape,"round" | undefined,undefined,false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
-ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
 ion-textarea,method,getInputElement,getInputElement() => Promise<HTMLTextAreaElement>
@@ -1562,16 +1447,12 @@ ion-textarea,css-prop,--placeholder-font-weight
 ion-textarea,css-prop,--placeholder-opacity
 
 ion-thumbnail,shadow
-ion-thumbnail,prop,mode,"ios" | "md",undefined,false,false
-ion-thumbnail,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-thumbnail,css-prop,--border-radius
 ion-thumbnail,css-prop,--size
 
 ion-title,shadow
 ion-title,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-title,prop,mode,"ios" | "md",undefined,false,false
 ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-title,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-title,css-prop,--color
 
 ion-toast,shadow
@@ -1593,7 +1474,6 @@ ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
 ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
 ion-toast,prop,swipeGesture,"vertical" | undefined,undefined,false,false
-ion-toast,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,prop,trigger,string | undefined,undefined,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
@@ -1642,7 +1522,6 @@ ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
-ion-toggle,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true
@@ -1666,7 +1545,6 @@ ion-toggle,part,track
 ion-toolbar,shadow
 ion-toolbar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toolbar,prop,mode,"ios" | "md",undefined,false,false
-ion-toolbar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-toolbar,css-prop,--background
 ion-toolbar,css-prop,--border-color
 ion-toolbar,css-prop,--border-style
@@ -1677,7 +1555,4 @@ ion-toolbar,css-prop,--opacity
 ion-toolbar,css-prop,--padding-bottom
 ion-toolbar,css-prop,--padding-end
 ion-toolbar,css-prop,--padding-start
-ion-toolbar,css-prop,--padding-top
-
-test-header,scoped
-test-header,prop,testTitle,string | undefined,undefined,false,false
+ion-toolbar,css-prop,--padding-top

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.0.0-beta.3",
+  "version": "8.1.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,16 +31,16 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.12.2",
+    "@stencil/core": "^4.17.2",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@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",
+    "@capacitor/core": "^6.0.0",
+    "@capacitor/haptics": "^6.0.0",
+    "@capacitor/keyboard": "^6.0.0",
+    "@capacitor/status-bar": "^6.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.39.0",
@@ -54,12 +54,13 @@
     "@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": "^5.0.0",
+    "execa": "^8.0.1",
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -77,7 +78,7 @@
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
-    "css.sass": "sass --embed-sources src/css:./css",
+    "css.sass": "sass --embed-sources --style compressed src/css:./css",
     "eslint": "eslint src",
     "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
@@ -96,10 +97,9 @@
     "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 && 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": "npm run docker.build && node ./scripts/docker.mjs",
     "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
-    "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"
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
   },
   "author": "Ionic Team",
   "license": "MIT",

core/scripts/docker.mjs

@@ -0,0 +1,59 @@
+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/readme.md

@@ -1,44 +1,4 @@
 
-## Build
+# Core Scripts
 
-### 1. Clone ionic
-
-    git@github.com:ionic-team/ionic.git
-    cd ionic
-
-### 2. Run `npm install`
-
-  cd core
-  npm install
-
-
-Notice that `@ionic/core` lives in `core`.
-
-### 3. Run `npm start`
-
-Make sure you are inside the `core` directory.
-
-    npm start
-
-With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
-
-### 4. Preview
-
-Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
-
-As changes are made in an editor to source files, the e2e app will live-reload.
-
-## How to contribute
-
-1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
-
-2. When everything looks good, run  `npm run validate` to verify the tests linter and production build passes.
-
-
-# Deploy
-
-1. `npm run prepare.deploy`
-2. Review/update changelog
-3. Commit updates using the package name and version number as the commit message.
-4. `npm run deploy`
-5. :tada:
+This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).

core/scripts/testing/scripts.js

@@ -14,6 +14,20 @@
     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,3 +48,23 @@ html.ios.ios {
   --ion-font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
   font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }
+
+ion-content button,
+main button {
+  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;
+}
+
+ion-content button.expand,
+main button.expand {
+  display: block;
+  width: 100%;
+}

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

@@ -2,20 +2,18 @@ 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 { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 import type { AccordionGroupChangeEventDetail } from './accordion-group-interface';
 
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-accordion-group',
   styleUrls: {
     ios: 'accordion-group.ios.scss',
     md: 'accordion-group.md.scss',
-    ionic: 'accordion-group.md.scss',
   },
   shadow: true,
 })
@@ -61,10 +59,9 @@ 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>;
 
@@ -281,12 +278,12 @@ export class AccordionGroup implements ComponentInterface {
 
   render() {
     const { disabled, readonly, expand } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
 
     return (
       <Host
         class={{
-          [theme]: true,
+          [mode]: 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 !default;
+$accordion-md-border-radius:         6px;
 
 /// @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) !default;
+$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);
 
 /// @prop - Margin of the expanded accordion
-$accordion-md-expanded-margin:       16px !default;
+$accordion-md-expanded-margin:       16px;

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 { getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 
 const enum AccordionState {
   Collapsed = 1 << 0,
@@ -14,8 +14,7 @@ const enum AccordionState {
 }
 
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot header - Content is placed at the top and is used to
  * expand or collapse the accordion item.
@@ -32,7 +31,6 @@ const enum AccordionState {
   styleUrls: {
     ios: 'accordion.ios.scss',
     md: 'accordion.md.scss',
-    ionic: 'accordion.md.scss',
   },
   shadow: {
     delegatesFocus: true,
@@ -404,7 +402,7 @@ export class Accordion implements ComponentInterface {
 
   render() {
     const { disabled, readonly } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
     const expanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
     const headerPart = expanded ? 'header expanded' : 'header';
     const contentPart = expanded ? 'content expanded' : 'content';
@@ -414,7 +412,7 @@ export class Accordion implements ComponentInterface {
     return (
       <Host
         class={{
-          [theme]: true,
+          [mode]: 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) !default;
+$accordion-background-color:      var(--ion-background-color, #ffffff);
 
 /// @prop - Duration of the accordion transition
-$accordion-transition-duration:   300ms !default;
+$accordion-transition-duration:   300ms;
 
 /// @prop - Timing function of the accordion transition
-$accordion-transition-easing:     cubic-bezier(0.25, 0.8, 0.5, 1) !default;
+$accordion-transition-easing:     cubic-bezier(0.25, 0.8, 0.5, 1);
 
 /// @prop - Opacity of the disabled accordion
-$accordion-disabled-opacity:      0.4 !default;
+$accordion-disabled-opacity:      0.4;
 
 /// @prop - Margin of the inset accordion
-$accordion-inset-margin:          16px !default;
+$accordion-inset-margin:          16px;

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

@@ -3,10 +3,11 @@ import { configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ config, title }) => {
   test.describe(title('accordion: a11y'), () => {
-    test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
-      // TODO(FW-1764): remove skip once issue is resolved
+    // 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
       skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
-      // TODO (FW-2979)
+      // TODO (ROU-5437)
       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/standalone/index.html

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

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

@@ -1,16 +1,20 @@
-import type { OverlayOptions } from '@utils/overlays-interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
 
-import type { LiteralUnion } from '../../interface';
-
-export interface ActionSheetOptions extends OverlayOptions {
+export interface ActionSheetOptions {
   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 !default;
+$action-sheet-ios-text-align:                                     center;
 
 /// @prop - Padding top of the action sheet
-$action-sheet-ios-padding-top:                                    0 !default;
+$action-sheet-ios-padding-top:                                    0;
 
 /// @prop - Padding end of the action sheet
-$action-sheet-ios-padding-end:                                    8px !default;
+$action-sheet-ios-padding-end:                                    8px;
 
 /// @prop - Padding bottom of the action sheet
-$action-sheet-ios-padding-bottom:                                 $action-sheet-ios-padding-top !default;
+$action-sheet-ios-padding-bottom:                                 $action-sheet-ios-padding-top;
 
 /// @prop - Padding start of the action sheet
-$action-sheet-ios-padding-start:                                  $action-sheet-ios-padding-end !default;
+$action-sheet-ios-padding-start:                                  $action-sheet-ios-padding-end;
 
 /// @prop - Top margin of the action sheet button group
-$action-sheet-ios-group-margin-top:                               10px !default;
+$action-sheet-ios-group-margin-top:                               10px;
 
 /// @prop - Bottom margin of the action sheet button group
-$action-sheet-ios-group-margin-bottom:                            10px !default;
+$action-sheet-ios-group-margin-bottom:                            10px;
 
 /// @prop - Background color of the action sheet
-$action-sheet-ios-background-color:                               $overlay-ios-background-color !default;
+$action-sheet-ios-background-color:                               $overlay-ios-background-color;
 
 /// @prop - Border radius of the action sheet
-$action-sheet-ios-border-radius:                                  13px !default;
+$action-sheet-ios-border-radius:                                  13px;
 
 
 // Action Sheet Title
 // --------------------------------------------------
 
 /// @prop - Padding top of the action sheet title
-$action-sheet-ios-title-padding-top:                              14px !default;
+$action-sheet-ios-title-padding-top:                              14px;
 
 /// @prop - Padding end of the action sheet title
-$action-sheet-ios-title-padding-end:                              10px !default;
+$action-sheet-ios-title-padding-end:                              10px;
 
 /// @prop - Padding bottom of the action sheet title
-$action-sheet-ios-title-padding-bottom:                           13px !default;
+$action-sheet-ios-title-padding-bottom:                           13px;
 
 /// @prop - Padding start of the action sheet title
-$action-sheet-ios-title-padding-start:                            $action-sheet-ios-title-padding-end !default;
+$action-sheet-ios-title-padding-start:                            $action-sheet-ios-title-padding-end;
 
 /// @prop - Color of the action sheet title
-$action-sheet-ios-title-color:                                    $text-color-step-600 !default;
+$action-sheet-ios-title-color:                                    $text-color-step-600;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px) !default;
+$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px);
 
 /// @prop - Font weight of the action sheet title
-$action-sheet-ios-title-font-weight:                              400 !default;
+$action-sheet-ios-title-font-weight:                              400;
 
 /// @prop - Font weight of the action sheet title when it has a sub title
-$action-sheet-ios-title-with-sub-title-font-weight:               600 !default;
+$action-sheet-ios-title-with-sub-title-font-weight:               600;
 
 // Action Sheet Subtitle
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px) !default;
+$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px);
 
 /// @prop - Padding top of the action sheet sub title
-$action-sheet-ios-sub-title-padding-top:                          6px !default;
+$action-sheet-ios-sub-title-padding-top:                          6px;
 
 /// @prop - Padding end of the action sheet sub title
-$action-sheet-ios-sub-title-padding-end:                          0 !default;
+$action-sheet-ios-sub-title-padding-end:                          0;
 
 /// @prop - Padding bottom of the action sheet sub title
-$action-sheet-ios-sub-title-padding-bottom:                       0 !default;
+$action-sheet-ios-sub-title-padding-bottom:                       0;
 
 /// @prop - Padding start of the action sheet sub title
-$action-sheet-ios-sub-title-padding-start:                        $action-sheet-ios-sub-title-padding-end !default;
+$action-sheet-ios-sub-title-padding-start:                        $action-sheet-ios-sub-title-padding-end;
 
 
 // Action Sheet Button
 // --------------------------------------------------
 
 /// @prop - Minimum height of the action sheet button
-$action-sheet-ios-button-height:                                  56px !default;
+$action-sheet-ios-button-height:                                  56px;
 
 /// @prop - Padding of the action sheet button
-$action-sheet-ios-button-padding:                                 14px !default;
+$action-sheet-ios-button-padding:                                 14px;
 
 /// @prop - Text color of the action sheet button
-$action-sheet-ios-button-text-color:                              ion-color(primary, base) !default;
+$action-sheet-ios-button-text-color:                              ion-color(primary, base);
 
 /// @prop - Font size of the action sheet button icon
-$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px) !default;
+$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px);
 
 /// @prop - Padding right of the action sheet button icon
-$action-sheet-ios-button-icon-padding-right:                      .3em !default;
+$action-sheet-ios-button-icon-padding-right:                      .3em;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px) !default;
+$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px);
 
 /// @prop - Border color alpha of the action sheet button
-$action-sheet-ios-button-border-color-alpha:                      .08 !default;
+$action-sheet-ios-button-border-color-alpha:                      .08;
 
 /// @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) !default;
+$action-sheet-ios-button-border-color:                            rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha);
 
 /// @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 !default;
+$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;
 
 /// @prop - Background color of the activated action sheet button
-$action-sheet-ios-button-background-activated:                    $text-color !default;
+$action-sheet-ios-button-background-activated:                    $text-color;
 
 /// @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)) !default;
+$action-sheet-ios-button-background-selected:                     var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color));
 
 /// @prop - Destructive text color of the action sheet button
-$action-sheet-ios-button-destructive-text-color:                  ion-color(danger, base) !default;
+$action-sheet-ios-button-destructive-text-color:                  ion-color(danger, base);
 
 /// @prop - Font weight of the action sheet cancel button
-$action-sheet-ios-button-cancel-font-weight:                      600 !default;
+$action-sheet-ios-button-cancel-font-weight:                      600;
 
 
 // Action Sheet Translucent
 // --------------------------------------------------
 
 /// @prop - Background color alpha of the action sheet when translucent
-$action-sheet-ios-translucent-background-color-alpha:             .8 !default;
+$action-sheet-ios-translucent-background-color-alpha:             .8;
 
 /// @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) !default;
+$action-sheet-ios-translucent-background-color:                   rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha);
 
 /// @prop - Border color alpha of the action sheet when translucent
-$action-sheet-ios-translucent-border-color-alpha:                 .4 !default;
+$action-sheet-ios-translucent-border-color-alpha:                 .4;
 
 /// @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) !default;
+$action-sheet-ios-translucent-border-color:                       rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha);
 
 /// @prop - Background color alpha of the activated action sheet when translucent
-$action-sheet-ios-translucent-background-color-activated-alpha:   .7 !default;
+$action-sheet-ios-translucent-background-color-activated-alpha:   .7;
 
 /// @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) !default;
+$action-sheet-ios-translucent-background-color-activated:         rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha);
 
 /// @prop - Filter of the translucent action-sheet group
-$action-sheet-ios-group-translucent-filter:                       saturate(280%) blur(20px) !default;
+$action-sheet-ios-group-translucent-filter:                       saturate(280%) blur(20px);
 
 /// @prop - Filter of the translucent action-sheet button
-$action-sheet-ios-button-translucent-filter:                      saturate(120%) !default;
+$action-sheet-ios-button-translucent-filter:                      saturate(120%);

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

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

@@ -18,7 +18,7 @@ import {
 } from '@utils/overlays';
 import { getClassMap } from '@utils/theme';
 
-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, CssClassMap, FrameworkDelegate, OverlayInterface } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 
@@ -29,15 +29,13 @@ import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-action-sheet',
   styleUrls: {
     ios: 'action-sheet.ios.scss',
     md: 'action-sheet.md.scss',
-    ionic: 'action-sheet.md.scss',
   },
   scoped: true,
 })
@@ -107,7 +105,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   /**
    * If `true`, the action sheet will be translucent.
-   * Only applies when the theme is `"ios"` and the device supports
+   * Only applies when the mode is `"ios"` and the device supports
    * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    */
   @Prop() translucent = false;
@@ -316,7 +314,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   }
 
   componentDidLoad() {
-    const mode = getIonMode(this);
     /**
      * Only create gesture if:
      * 1. A gesture does not already exist
@@ -325,7 +322,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
      * 4. A group ref exists
      */
     const { groupEl, wrapperEl } = this;
-    if (!this.gesture && mode === 'ios' && wrapperEl && groupEl) {
+    if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) {
       readTask(() => {
         const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
         if (!isScrollable) {
@@ -359,7 +356,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   render() {
     const { header, htmlAttributes, overlayIndex } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
     const allButtons = this.getButtons();
     const cancelButton = allButtons.find((b) => b.role === 'cancel');
     const buttons = allButtons.filter((b) => b.role !== 'cancel');
@@ -376,7 +373,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
           zIndex: `${20000 + this.overlayIndex}`,
         }}
         class={{
-          [theme]: true,
+          [mode]: true,
           ...getClassMap(this.cssClass),
           'overlay-hidden': true,
           'action-sheet-translucent': this.translucent,
@@ -416,7 +413,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>
-                  {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               ))}
             </div>
@@ -440,7 +437,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                     )}
                     {cancelButton.text}
                   </span>
-                  {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               </div>
             )}

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

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

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

@@ -19,14 +19,14 @@
     <main class="ion-padding">
       <h1>Action Sheet - A11y</h1>
 
-      <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
-      >
+      <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>
     </main>
 
     <script>

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

@@ -27,24 +27,18 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
-          >Alert from Action Sheet</ion-button
-        >
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
-        <ion-button expand="block" id="custom" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
-        <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
-          >No Backdrop Dismiss</ion-button
-        >
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
-          >Scroll Without Cancel</ion-button
-        >
-        <ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')"
-          >Custom Backdrop Opacity</ion-button
-        >
-        <ion-button expand="block" id="buttonData" onclick="presentWithButtonData()">Button data</ion-button>
+        <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+        <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+        <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+        <button class="expand" id="custom" onclick="presentWithCssClass()">Custom CSS Class</button>
+        <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+        <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+        <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+        <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+        <button class="expand" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">
+          Custom Backdrop Opacity
+        </button>
+        <button class="expand" id="buttonData" onclick="presentWithButtonData()">Button data</button>
       </ion-content>
     </ion-app>
 

core/src/components/action-sheet/test/is-open/index.html

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default" onclick="openActionSheet()">Open ActionSheet</ion-button>
+            <button id="default" onclick="openActionSheet()">Open ActionSheet</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</ion-button>
+            <button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</button>
           </div>
         </div>
 

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

@@ -18,28 +18,16 @@
     window.actionSheetController = actionSheetController;
   </script>
   <body>
-    <button id="basic" onclick="presentBasic()">Basic</button>
-    <button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
-    <button id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
-    <button id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
-    <button id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
-    <button id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
-    <button id="icons" onclick="presentIcons()">Icons</button>
-    <button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
-
-    <style>
-      body > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
+    <main>
+      <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+      <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+      <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+      <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+      <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+      <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+      <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+      <button class="expand" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
+    </main>
 
     <script>
       window.addEventListener('ionActionSheetDidDismiss', function (e) {

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

@@ -12,6 +12,50 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      f {
+        display: block;
+        width: 100%;
+        height: 150px;
+      }
+
+      .red {
+        background-color: #ea445a;
+      }
+
+      .green {
+        background-color: #76d672;
+      }
+
+      .blue {
+        background-color: #3478f6;
+      }
+
+      .yellow {
+        background-color: #ffff80;
+      }
+
+      .pink {
+        background-color: #ff6b86;
+      }
+
+      .purple {
+        background-color: #7e34f6;
+      }
+
+      .black {
+        background-color: #000;
+      }
+
+      .fuchsia {
+        background-color: #cc00ff;
+      }
+
+      .orange {
+        background-color: #f69234;
+      }
+    </style>
   </head>
   <script type="module">
     import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
@@ -26,18 +70,12 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
-          >No Backdrop Dismiss</ion-button
-        >
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
-          >Alert from Action Sheet</ion-button
-        >
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
-          >Scroll Without Cancel</ion-button
-        >
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+        <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+        <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+        <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+        <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+        <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+        <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
 
         <ion-grid>
           <ion-row>
@@ -345,49 +383,5 @@
         });
       }
     </script>
-
-    <style>
-      f {
-        display: block;
-        width: 100%;
-        height: 150px;
-      }
-
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .fuchsia {
-        background-color: #cc00ff;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-    </style>
   </body>
 </html>

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

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default">Open ActionSheet</ion-button>
+            <button id="default">Open ActionSheet</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout">Open ActionSheet</ion-button>
+            <button id="timeout">Open ActionSheet</button>
           </div>
         </div>
 

core/src/components/alert/alert-interface.ts

@@ -1,9 +1,7 @@
-import type { OverlayOptions } from '@utils/overlays-interface';
-
-import type { LiteralUnion, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
-export interface AlertOptions extends OverlayOptions {
+export interface AlertOptions {
   header?: string;
   subHeader?: string;
   message?: string | IonicSafeString;
@@ -12,9 +10,15 @@ export interface AlertOptions extends OverlayOptions {
   buttons?: (AlertButton | string)[];
   backdropDismiss?: boolean;
   translucent?: boolean;
+  animated?: boolean;
   htmlAttributes?: { [key: string]: any };
 
+  mode?: Mode;
   keyboardClose?: boolean;
+  id?: string;
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
 }
 
 export interface AlertInput {

core/src/components/alert/alert.ios.vars.scss

@@ -6,136 +6,136 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the alert
-$alert-ios-font-size:                                   dynamic-font-min(1, 14px) !default;
+$alert-ios-font-size:                                   dynamic-font-min(1, 14px);
 
 /// @prop - Max width of the alert
-$alert-ios-max-width:                                   dynamic-font-clamp(1, 270px, 1.2) !default;
+$alert-ios-max-width:                                   dynamic-font-clamp(1, 270px, 1.2);
 
 /// @prop - Border radius of the alert
-$alert-ios-border-radius:                               13px !default;
+$alert-ios-border-radius:                               13px;
 
 /// @prop - Background color of the alert
-$alert-ios-background-color:                            $overlay-ios-background-color !default;
+$alert-ios-background-color:                            $overlay-ios-background-color;
 
 /// @prop - Background color alpha of the alert when translucent
-$alert-ios-translucent-background-color-alpha:          .9 !default;
+$alert-ios-translucent-background-color-alpha:          .9;
 
 /// @prop - Background color of the alert when translucent
-$alert-ios-translucent-background-color:                rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha) !default;
+$alert-ios-translucent-background-color:                rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha);
 
 /// @prop - Box shadow of the alert
-$alert-ios-box-shadow:                                  none !default;
+$alert-ios-box-shadow:                                  none;
 
 /// @prop - Padding top of the alert head
-$alert-ios-head-padding-top:                            12px !default;
+$alert-ios-head-padding-top:                            12px;
 
 /// @prop - Padding end of the alert head
-$alert-ios-head-padding-end:                            16px !default;
+$alert-ios-head-padding-end:                            16px;
 
 /// @prop - Padding bottom of the alert head
-$alert-ios-head-padding-bottom:                         7px !default;
+$alert-ios-head-padding-bottom:                         7px;
 
 /// @prop - Padding start of the alert head
-$alert-ios-head-padding-start:                          $alert-ios-head-padding-end !default;
+$alert-ios-head-padding-start:                          $alert-ios-head-padding-end;
 
 /// @prop - Text align of the alert head
-$alert-ios-head-text-align:                             center !default;
+$alert-ios-head-text-align:                             center;
 
 /// @prop - Color of the alert title
-$alert-ios-title-color:                                 $text-color !default;
+$alert-ios-title-color:                                 $text-color;
 
 /// @prop - Margin top of the alert title
-$alert-ios-title-margin-top:                            8px !default;
+$alert-ios-title-margin-top:                            8px;
 
 /// @prop - Font size of the alert title
-$alert-ios-title-font-size:                             dynamic-font-min(1, 17px) !default;
+$alert-ios-title-font-size:                             dynamic-font-min(1, 17px);
 
 /// @prop - Font weight of the alert title
-$alert-ios-title-font-weight:                           600 !default;
+$alert-ios-title-font-weight:                           600;
 
 /// @prop - Font size of the alert sub title
-$alert-ios-sub-title-font-size:                         dynamic-font-min(1, 14px) !default;
+$alert-ios-sub-title-font-size:                         dynamic-font-min(1, 14px);
 
 /// @prop - Text color of the alert sub title
-$alert-ios-sub-title-text-color:                        $text-color-step-400 !default;
+$alert-ios-sub-title-text-color:                        $text-color-step-400;
 
 /// @prop - Padding top of the alert message
-$alert-ios-message-padding-top:                         0 !default;
+$alert-ios-message-padding-top:                         0;
 
 /// @prop - Padding end of the alert message
-$alert-ios-message-padding-end:                         16px !default;
+$alert-ios-message-padding-end:                         16px;
 
 /// @prop - Padding bottom of the alert message
-$alert-ios-message-padding-bottom:                      21px !default;
+$alert-ios-message-padding-bottom:                      21px;
 
 /// @prop - Padding start of the alert message
-$alert-ios-message-padding-start:                       $alert-ios-message-padding-end !default;
+$alert-ios-message-padding-start:                       $alert-ios-message-padding-end;
 
 /// @prop - Font size of the alert message
-$alert-ios-message-font-size:                           dynamic-font-min(1, 13px) !default;
+$alert-ios-message-font-size:                           dynamic-font-min(1, 13px);
 
 /// @prop - Text align of the alert message
-$alert-ios-message-text-align:                          center !default;
+$alert-ios-message-text-align:                          center;
 
 /// @prop - Text color of the alert message
-$alert-ios-message-text-color:                          $text-color !default;
+$alert-ios-message-text-color:                          $text-color;
 
 /// @prop - Padding top of the alert empty message
-$alert-ios-message-empty-padding-top:                   0 !default;
+$alert-ios-message-empty-padding-top:                   0;
 
 /// @prop - Padding end of the alert empty message
-$alert-ios-message-empty-padding-end:                   0 !default;
+$alert-ios-message-empty-padding-end:                   0;
 
 /// @prop - Padding bottom of the alert empty message
-$alert-ios-message-empty-padding-bottom:                12px !default;
+$alert-ios-message-empty-padding-bottom:                12px;
 
 /// @prop - Padding start of the alert empty message
-$alert-ios-message-empty-padding-start:                 0 !default;
+$alert-ios-message-empty-padding-start:                 0;
 
 /// @prop - Maximum height of the alert content
-$alert-ios-content-max-height:                          240px !default;
+$alert-ios-content-max-height:                          240px;
 
 /// @prop - Margin top of the alert input
-$alert-ios-input-margin-top:                            10px !default;
+$alert-ios-input-margin-top:                            10px;
 
 /// @prop - Padding top on the alert input
-$alert-ios-input-padding-top:                           7px !default;
+$alert-ios-input-padding-top:                           7px;
 
 /// @prop - Padding end on the alert input
-$alert-ios-input-padding-end:                           $alert-ios-input-padding-top !default;
+$alert-ios-input-padding-end:                           $alert-ios-input-padding-top;
 
 /// @prop - Padding bottom on the alert input
-$alert-ios-input-padding-bottom:                        $alert-ios-input-padding-top !default;
+$alert-ios-input-padding-bottom:                        $alert-ios-input-padding-top;
 
 /// @prop - Padding start on the alert input
-$alert-ios-input-padding-start:                         $alert-ios-input-padding-end !default;
+$alert-ios-input-padding-start:                         $alert-ios-input-padding-end;
 
 /// @prop - Placeholder Color for input
-$alert-ios-input-placeholder-color:                     $placeholder-text-color !default;
+$alert-ios-input-placeholder-color:                     $placeholder-text-color;
 
 /// @prop - Border color of the alert input
-$alert-ios-input-border-color:                          $background-color-step-250 !default;
+$alert-ios-input-border-color:                          $background-color-step-250;
 
 /// @prop - Border of the alert input
-$alert-ios-input-border:                                $hairlines-width solid $alert-ios-input-border-color !default;
+$alert-ios-input-border:                                $hairlines-width solid $alert-ios-input-border-color;
 
 /// @prop - Border radius of the alert input
-$alert-ios-input-border-radius:                         7px !default;
+$alert-ios-input-border-radius:                         7px;
 
 /// @prop - Background color of the alert input
-$alert-ios-input-background-color:                      $background-color !default;
+$alert-ios-input-background-color:                      $background-color;
 
 /// @prop - Flex wrap of the alert button group
-$alert-ios-button-group-flex-wrap:                      wrap !default;
+$alert-ios-button-group-flex-wrap:                      wrap;
 
 /// @prop - Flex of the alert button
-$alert-ios-button-flex:                                 1 1 auto !default;
+$alert-ios-button-flex:                                 1 1 auto;
 
 /// @prop - Margin of the alert button
-$alert-ios-button-margin:                               0 !default;
+$alert-ios-button-margin:                               0;
 
 /// @prop - Min width of the alert button
-$alert-ios-button-min-width:                            50% !default;
+$alert-ios-button-min-width:                            50%;
 
 /// @prop - Height of the alert button
 /**
@@ -147,172 +147,172 @@ $alert-ios-button-min-width:                            50% !default;
  * a hairline (<1px) width, this will cause subpixel rendering
  * differences across browsers.
  */
-$alert-ios-button-height:                           dynamic-font-min(1, 44px) !default;
+$alert-ios-button-height:                           dynamic-font-min(1, 44px);
 
 /// @prop - Padding of the alert button
-$alert-ios-button-padding: 8px !default;
+$alert-ios-button-padding: 8px;
 
 /// @prop - Font size of the alert button
-$alert-ios-button-font-size:                            dynamic-font-min(1, 17px) !default;
+$alert-ios-button-font-size:                            dynamic-font-min(1, 17px);
 
 /// @prop - Color of the text in the alert button
-$alert-ios-button-text-color:                           ion-color(primary, base) !default;
+$alert-ios-button-text-color:                           ion-color(primary, base);
 
 /// @prop - Destructive text color of the alert button
-$alert-ios-button-destructive-text-color:               ion-color(danger, base) !default;
+$alert-ios-button-destructive-text-color:               ion-color(danger, base);
 
 /// @prop - Background color of the alert button
-$alert-ios-button-background-color:                     transparent !default;
+$alert-ios-button-background-color:                     transparent;
 
 /// @prop - Background color alpha of the alert activated button
-$alert-ios-button-background-color-alpha-activated:     .1 !default;
+$alert-ios-button-background-color-alpha-activated:     .1;
 
 /// @prop - Background color of the alert activated button
-$alert-ios-button-background-color-activated:           rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default;
+$alert-ios-button-background-color-activated:           rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated);
 
 /// @prop - Border width of the alert button
-$alert-ios-button-border-width:                         $hairlines-width !default;
+$alert-ios-button-border-width:                         $hairlines-width;
 
 /// @prop - Border style of the alert button
-$alert-ios-button-border-style:                         solid !default;
+$alert-ios-button-border-style:                         solid;
 
 /// @prop - Border color alpha of the alert button
-$alert-ios-button-border-color-alpha:                   .2 !default;
+$alert-ios-button-border-color-alpha:                   .2;
 
 /// @prop - Border color of the alert button
-$alert-ios-button-border-color:                         rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default;
+$alert-ios-button-border-color:                         rgba($text-color-rgb, $alert-ios-button-border-color-alpha);
 
 /// @prop - Border radius of the alert button
-$alert-ios-button-border-radius:                        0 !default;
+$alert-ios-button-border-radius:                        0;
 
 /// @prop - Font weight of the main text on the alert button
-$alert-ios-button-main-font-weight:                     bold !default;
+$alert-ios-button-main-font-weight:                     bold;
 
 /// @prop - Border top of the alert list
-$alert-ios-list-border-top:                             $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default;
+$alert-ios-list-border-top:                             $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
 
 /// @prop - Padding top on the label for the radio alert
-$alert-ios-radio-label-padding-top:                     13px !default;
+$alert-ios-radio-label-padding-top:                     13px;
 
 /// @prop - Padding end on the label for the radio alert
-$alert-ios-radio-label-padding-end:                     $alert-ios-radio-label-padding-top !default;
+$alert-ios-radio-label-padding-end:                     $alert-ios-radio-label-padding-top;
 
 /// @prop - Padding bottom on the label for the radio alert
-$alert-ios-radio-label-padding-bottom:                  $alert-ios-radio-label-padding-top !default;
+$alert-ios-radio-label-padding-bottom:                  $alert-ios-radio-label-padding-top;
 
 /// @prop - Padding start on the label for the radio alert
-$alert-ios-radio-label-padding-start:                   $alert-ios-radio-label-padding-end !default;
+$alert-ios-radio-label-padding-start:                   $alert-ios-radio-label-padding-end;
 
 /// @prop - Text color of the label for the radio alert
-$alert-ios-radio-label-text-color:                      $text-color !default;
+$alert-ios-radio-label-text-color:                      $text-color;
 
 /// @prop - Text color of the label for the checked radio alert
-$alert-ios-radio-label-text-color-checked:              $alert-ios-button-text-color !default;
+$alert-ios-radio-label-text-color-checked:              $alert-ios-button-text-color;
 
 /// @prop - Min width of the radio alert
-$alert-ios-radio-min-width:                             30px !default;
+$alert-ios-radio-min-width:                             30px;
 
 /// @prop - Top of the icon in the radio alert
-$alert-ios-radio-icon-top:                              -7px !default;
+$alert-ios-radio-icon-top:                              -7px;
 
 /// @prop - Start of the icon in the radio alert
-$alert-ios-radio-icon-start:                            7px !default;
+$alert-ios-radio-icon-start:                            7px;
 
 /// @prop - Width of the icon in the radio alert
-$alert-ios-radio-icon-width:                            6px !default;
+$alert-ios-radio-icon-width:                            6px;
 
 /// @prop - Height of the icon in the radio alert
-$alert-ios-radio-icon-height:                           12px !default;
+$alert-ios-radio-icon-height:                           12px;
 
 /// @prop - Border width of the icon in the radio alert
-$alert-ios-radio-icon-border-width:                     2px !default;
+$alert-ios-radio-icon-border-width:                     2px;
 
 /// @prop - Border style of the icon in the radio alert
-$alert-ios-radio-icon-border-style:                     solid !default;
+$alert-ios-radio-icon-border-style:                     solid;
 
 /// @prop - Border color of the icon in the radio alert
-$alert-ios-radio-icon-border-color:                     $alert-ios-button-text-color !default;
+$alert-ios-radio-icon-border-color:                     $alert-ios-button-text-color;
 
 /// @prop - Transform of the icon in the radio alert
-$alert-ios-radio-icon-transform:                        rotate(45deg) !default;
+$alert-ios-radio-icon-transform:                        rotate(45deg);
 
 /// @prop - Padding top of the label for the checkbox in the alert
-$alert-ios-checkbox-label-padding-top:                  13px !default;
+$alert-ios-checkbox-label-padding-top:                  13px;
 
 /// @prop - Padding end of the label for the checkbox in the alert
-$alert-ios-checkbox-label-padding-end:                  $alert-ios-checkbox-label-padding-top !default;
+$alert-ios-checkbox-label-padding-end:                  $alert-ios-checkbox-label-padding-top;
 
 /// @prop - Padding bottom of the label for the checkbox in the alert
-$alert-ios-checkbox-label-padding-bottom:               $alert-ios-checkbox-label-padding-top !default;
+$alert-ios-checkbox-label-padding-bottom:               $alert-ios-checkbox-label-padding-top;
 
 /// @prop - Padding start of the label for the checkbox in the alert
-$alert-ios-checkbox-label-padding-start:                $alert-ios-checkbox-label-padding-end !default;
+$alert-ios-checkbox-label-padding-start:                $alert-ios-checkbox-label-padding-end;
 
 /// @prop - Text color of the label for the checkbox in the alert
-$alert-ios-checkbox-label-text-color:                   $text-color !default;
+$alert-ios-checkbox-label-text-color:                   $text-color;
 
 /// @prop - Margin top of the checkbox in the alert
-$alert-ios-checkbox-margin-top:                         10px !default;
+$alert-ios-checkbox-margin-top:                         10px;
 
 /// @prop - Margin end of the checkbox in the alert
-$alert-ios-checkbox-margin-end:                         6px !default;
+$alert-ios-checkbox-margin-end:                         6px;
 
 /// @prop - Margin bottom of the checkbox in the alert
-$alert-ios-checkbox-margin-bottom:                      10px !default;
+$alert-ios-checkbox-margin-bottom:                      10px;
 
 /// @prop - Margin start of the checkbox in the alert
-$alert-ios-checkbox-margin-start:                       16px !default;
+$alert-ios-checkbox-margin-start:                       16px;
 
 /// @prop - Size of the checkbox in the alert
-$alert-ios-checkbox-size:                               dynamic-font-max(22px, 2.538) !default;
+$alert-ios-checkbox-size:                               dynamic-font-max(22px, 2.538);
 
 /// @prop - Border width of the checkbox in the alert
-$alert-ios-checkbox-border-width:                       dynamic-font(2px) !default;
+$alert-ios-checkbox-border-width:                       dynamic-font(2px);
 
 /// @prop - Border style of the checkbox in the alert
-$alert-ios-checkbox-border-style:                       solid !default;
+$alert-ios-checkbox-border-style:                       solid;
 
 /// @prop - Border radius of the checkbox in the alert
-$alert-ios-checkbox-border-radius:                      50% !default;
+$alert-ios-checkbox-border-radius:                      50%;
 
 /// @prop - Border color of the checkbox in the alert when off
-$alert-ios-checkbox-border-color-off:                   $item-ios-border-color !default;
+$alert-ios-checkbox-border-color-off:                   $item-ios-border-color;
 
 /// @prop - Border color of the checkbox in the alert when on
-$alert-ios-checkbox-border-color-on:                    ion-color(primary, base) !default;
+$alert-ios-checkbox-border-color-on:                    ion-color(primary, base);
 
 /// @prop - Background color of the checkbox in the alert when off
-$alert-ios-checkbox-background-color-off:               $item-ios-background !default;
+$alert-ios-checkbox-background-color-off:               $item-ios-background;
 
 /// @prop - Background color of the checkbox in the alert when on
-$alert-ios-checkbox-background-color-on:                ion-color(primary, base) !default;
+$alert-ios-checkbox-background-color-on:                ion-color(primary, base);
 
 /// @prop - Top of the icon in the checkbox alert
-$alert-ios-checkbox-icon-top:                           calc($alert-ios-checkbox-size / 8) !default;
+$alert-ios-checkbox-icon-top:                           calc($alert-ios-checkbox-size / 8);
 
 /// @prop - Start of the icon in the checkbox alert
-$alert-ios-checkbox-icon-start:                         calc($alert-ios-checkbox-size / 3) !default;
+$alert-ios-checkbox-icon-start:                         calc($alert-ios-checkbox-size / 3);
 
 /// @prop - Width of the icon in the checkbox alert
-$alert-ios-checkbox-icon-width:                         calc($alert-ios-checkbox-size / 6 + 1px) !default;
+$alert-ios-checkbox-icon-width:                         calc($alert-ios-checkbox-size / 6 + 1px);
 
 /// @prop - Height of the icon in the checkbox alert
-$alert-ios-checkbox-icon-height:                        calc($alert-ios-checkbox-size * 0.5) !default;
+$alert-ios-checkbox-icon-height:                        calc($alert-ios-checkbox-size * 0.5);
 
 /// @prop - Border width of the icon in the checkbox alert
-$alert-ios-checkbox-icon-border-width:                  $alert-ios-checkbox-border-width !default;
+$alert-ios-checkbox-icon-border-width:                  $alert-ios-checkbox-border-width;
 
 /// @prop - Border style of the icon in the checkbox alert
-$alert-ios-checkbox-icon-border-style:                  $alert-ios-checkbox-border-style !default;
+$alert-ios-checkbox-icon-border-style:                  $alert-ios-checkbox-border-style;
 
 /// @prop - Border color of the icon in the checkbox alert
-$alert-ios-checkbox-icon-border-color:                  $background-color !default;
+$alert-ios-checkbox-icon-border-color:                  $background-color;
 
 /// @prop - Transform of the icon in the checkbox alert
-$alert-ios-checkbox-icon-transform:                     rotate(45deg) !default;
+$alert-ios-checkbox-icon-transform:                     rotate(45deg);
 
 /// @prop - Filter of the translucent alert
-$alert-ios-translucent-filter:                          saturate(180%) blur(20px) !default;
+$alert-ios-translucent-filter:                          saturate(180%) blur(20px);
 
 /// @prop - Height of the tappable inputs in the checkbox alert
-$alert-ios-tappable-height:                             $item-ios-min-height !default;
+$alert-ios-tappable-height:                             $item-ios-min-height;

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

@@ -5,10 +5,10 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the alert
-$alert-md-font-size:                          dynamic-font(14px) !default;
+$alert-md-font-size:                          dynamic-font(14px);
 
 /// @prop - Max width of the alert
-$alert-md-max-width:                          280px !default;
+$alert-md-max-width:                          280px;
 
 /// @prop - Max width of the alert on a tablet
 /**
@@ -19,313 +19,313 @@ $alert-md-max-width:                          280px !default;
  * 3. The height can increase up to 560px.
  * Source: https://m2.material.io/components/dialogs#behavior
  */
-$alert-md-max-width-tablet:                          min(calc(100vw - 96px), 560px) !default;
+$alert-md-max-width-tablet:                          min(calc(100vw - 96px), 560px);
 
 /// @prop - Max width of the alert on a tablet
-$alert-md-max-height-tablet:                          min(calc(100vh - 96px), 560px) !default;
+$alert-md-max-height-tablet:                          min(calc(100vh - 96px), 560px);
 
 /// @prop - Border radius of the alert
-$alert-md-border-radius:                      4px !default;
+$alert-md-border-radius:                      4px;
 
 /// @prop - Background color of the alert
-$alert-md-background-color:                   $overlay-md-background-color !default;
+$alert-md-background-color:                   $overlay-md-background-color;
 
 /// @prop - Box shadow color of the alert
-$alert-md-box-shadow:                         0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default;
+$alert-md-box-shadow:                         0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
 
 /// @prop - Padding top of the alert head
-$alert-md-head-padding-top:                   20px !default;
+$alert-md-head-padding-top:                   20px;
 
 /// @prop - Padding end of the alert head
-$alert-md-head-padding-end:                   23px !default;
+$alert-md-head-padding-end:                   23px;
 
 /// @prop - Padding bottom of the alert head
-$alert-md-head-padding-bottom:                15px !default;
+$alert-md-head-padding-bottom:                15px;
 
 /// @prop - Padding start of the alert head
-$alert-md-head-padding-start:                 $alert-md-head-padding-end !default;
+$alert-md-head-padding-start:                 $alert-md-head-padding-end;
 
 /// @prop - Text align of the alert head
-$alert-md-head-text-align:                    start !default;
+$alert-md-head-text-align:                    start;
 
 /// @prop - Color of the alert title
-$alert-md-title-color:                        $text-color !default;
+$alert-md-title-color:                        $text-color;
 
 /// @prop - Font size of the alert title
-$alert-md-title-font-size:                    dynamic-font(20px) !default;
+$alert-md-title-font-size:                    dynamic-font(20px);
 
 /// @prop - Font weight of the alert title
-$alert-md-title-font-weight:                  500 !default;
+$alert-md-title-font-weight:                  500;
 
 /// @prop - Font size of the alert sub title
-$alert-md-sub-title-font-size:                dynamic-font(16px) !default;
+$alert-md-sub-title-font-size:                dynamic-font(16px);
 
 /// @prop - Text color of the alert sub title
-$alert-md-sub-title-text-color:               $text-color !default;
+$alert-md-sub-title-text-color:               $text-color;
 
 /// @prop - Padding top of the alert message
-$alert-md-message-padding-top:                20px !default;
+$alert-md-message-padding-top:                20px;
 
 /// @prop - Padding end of the alert message
-$alert-md-message-padding-end:                24px !default;
+$alert-md-message-padding-end:                24px;
 
 /// @prop - Padding bottom of the alert message
-$alert-md-message-padding-bottom:             $alert-md-message-padding-top !default;
+$alert-md-message-padding-bottom:             $alert-md-message-padding-top;
 
 /// @prop - Padding start of the alert message
-$alert-md-message-padding-start:              $alert-md-message-padding-end !default;
+$alert-md-message-padding-start:              $alert-md-message-padding-end;
 
 /// @prop - Font size of the alert message
-$alert-md-message-font-size:                  dynamic-font(16px) !default;
+$alert-md-message-font-size:                  dynamic-font(16px);
 
 /// @prop - Text color of the alert message
-$alert-md-message-text-color:                 $text-color-step-450 !default;
+$alert-md-message-text-color:                 $text-color-step-450;
 
 /// @prop - Padding top of the alert empty message
-$alert-md-message-empty-padding-top:          0 !default;
+$alert-md-message-empty-padding-top:          0;
 
 /// @prop - Padding end of the alert empty message
-$alert-md-message-empty-padding-end:          $alert-md-message-empty-padding-top !default;
+$alert-md-message-empty-padding-end:          $alert-md-message-empty-padding-top;
 
 /// @prop - Padding bottom of the alert empty message
-$alert-md-message-empty-padding-bottom:       $alert-md-message-empty-padding-top !default;
+$alert-md-message-empty-padding-bottom:       $alert-md-message-empty-padding-top;
 
 /// @prop - Padding start of the alert empty message
-$alert-md-message-empty-padding-start:        $alert-md-message-empty-padding-end !default;
+$alert-md-message-empty-padding-start:        $alert-md-message-empty-padding-end;
 
 /// @prop - Maximum height of the alert content
-$alert-md-content-max-height:                 266px !default;
+$alert-md-content-max-height:                 266px;
 
 /// @prop - Border width of the alert input
-$alert-md-input-border-width:                 1px !default;
+$alert-md-input-border-width:                 1px;
 
 /// @prop - Border style of the alert input
-$alert-md-input-border-style:                 solid !default;
+$alert-md-input-border-style:                 solid;
 
 /// @prop - Border color of the alert input
-$alert-md-input-border-color:                 $background-color-step-150 !default;
+$alert-md-input-border-color:                 $background-color-step-150;
 
 /// @prop - Text color of the alert input
-$alert-md-input-text-color:                   $text-color !default;
+$alert-md-input-text-color:                   $text-color;
 
 /// @prop - Border width of the alert input when focused
-$alert-md-input-border-width-focused:         2px !default;
+$alert-md-input-border-width-focused:         2px;
 
 /// @prop - Border style of the alert input when focused
-$alert-md-input-border-style-focused:         $alert-md-input-border-style !default;
+$alert-md-input-border-style-focused:         $alert-md-input-border-style;
 
 /// @prop - Border color of the alert input when focused
-$alert-md-input-border-color-focused:         ion-color(primary, base) !default;
+$alert-md-input-border-color-focused:         ion-color(primary, base);
 
 /// @prop - Margin top of the alert input
-$alert-md-input-margin-top:                   5px !default;
+$alert-md-input-margin-top:                   5px;
 
 /// @prop - Margin end of the alert input
-$alert-md-input-margin-end:                   0 !default;
+$alert-md-input-margin-end:                   0;
 
 /// @prop - Margin bottom of the alert input
-$alert-md-input-margin-bottom:                5px !default;
+$alert-md-input-margin-bottom:                5px;
 
 /// @prop - Margin start of the alert input
-$alert-md-input-margin-start:                 0 !default;
+$alert-md-input-margin-start:                 0;
 
 /// @prop - Placeholder Color for input
-$alert-md-input-placeholder-color:            $placeholder-text-color !default;
+$alert-md-input-placeholder-color:            $placeholder-text-color;
 
 /// @prop - Flex wrap of the alert button group
-$alert-md-button-group-flex-wrap:             wrap-reverse !default;
+$alert-md-button-group-flex-wrap:             wrap-reverse;
 
 /// @prop - Justify content of the alert button group
-$alert-md-button-group-justify-content:       flex-end !default;
+$alert-md-button-group-justify-content:       flex-end;
 
 /// @prop - Padding top of the alert button
-$alert-md-button-padding-top:                 10px !default;
+$alert-md-button-padding-top:                 10px;
 
 /// @prop - Padding end of the alert button
-$alert-md-button-padding-end:                 $alert-md-button-padding-top !default;
+$alert-md-button-padding-end:                 $alert-md-button-padding-top;
 
 /// @prop - Padding bottom of the alert button
-$alert-md-button-padding-bottom:              $alert-md-button-padding-top !default;
+$alert-md-button-padding-bottom:              $alert-md-button-padding-top;
 
 /// @prop - Padding start of the alert button
-$alert-md-button-padding-start:               $alert-md-button-padding-end !default;
+$alert-md-button-padding-start:               $alert-md-button-padding-end;
 
 /// @prop - Margin top of the alert button
-$alert-md-button-margin-top:                  0 !default;
+$alert-md-button-margin-top:                  0;
 
 /// @prop - Margin end of the alert button
-$alert-md-button-margin-end:                  8px !default;
+$alert-md-button-margin-end:                  8px;
 
 /// @prop - Margin bottom of the alert button
-$alert-md-button-margin-bottom:               0 !default;
+$alert-md-button-margin-bottom:               0;
 
 /// @prop - Margin start of the alert button
-$alert-md-button-margin-start:                0 !default;
+$alert-md-button-margin-start:                0;
 
 /// @prop - Font weight of the alert button
-$alert-md-button-font-weight:                 500 !default;
+$alert-md-button-font-weight:                 500;
 
 /// @prop - Text color of the alert button
-$alert-md-button-text-color:                  ion-color(primary, base) !default;
+$alert-md-button-text-color:                  ion-color(primary, base);
 
 /// @prop - Background color of the alert button
-$alert-md-button-background-color:            transparent !default;
+$alert-md-button-background-color:            transparent;
 
 /// @prop - Border radius of the alert button
-$alert-md-button-border-radius:               2px !default;
+$alert-md-button-border-radius:               2px;
 
 /// @prop - Text transform of the alert button
-$alert-md-button-text-transform:              uppercase !default;
+$alert-md-button-text-transform:              uppercase;
 
 /// @prop - Text align of the alert button
-$alert-md-button-text-align:                  end !default;
+$alert-md-button-text-align:                  end;
 
 /// @prop - Border top of the alert list
-$alert-md-list-border-top:                    1px solid $alert-md-input-border-color !default;
+$alert-md-list-border-top:                    1px solid $alert-md-input-border-color;
 
 /// @prop - Border bottom of the alert list
-$alert-md-list-border-bottom:                 $alert-md-list-border-top !default;
+$alert-md-list-border-bottom:                 $alert-md-list-border-top;
 
 /// @prop - Top of the alert radio
-$alert-md-radio-top:                          0 !default;
+$alert-md-radio-top:                          0;
 
 /// @prop - Left of the alert radio
-$alert-md-radio-left:                         26px !default;
+$alert-md-radio-left:                         26px;
 
 /// @prop - Width of the alert radio
-$alert-md-radio-width:                        20px !default;
+$alert-md-radio-width:                        20px;
 
 /// @prop - Height of the alert radio
-$alert-md-radio-height:                       $alert-md-radio-width !default;
+$alert-md-radio-height:                       $alert-md-radio-width;
 
 /// @prop - Border width of the alert radio
-$alert-md-radio-border-width:                 2px !default;
+$alert-md-radio-border-width:                 2px;
 
 /// @prop - Border style of the alert radio
-$alert-md-radio-border-style:                 solid !default;
+$alert-md-radio-border-style:                 solid;
 
 /// @prop - Border radius of the alert radio
-$alert-md-radio-border-radius:                50% !default;
+$alert-md-radio-border-radius:                50%;
 
 /// @prop - Border color of the alert radio when off
-$alert-md-radio-border-color-off:             $background-color-step-550 !default;
+$alert-md-radio-border-color-off:             $background-color-step-550;
 
 /// @prop - Border color of the alert radio when on
-$alert-md-radio-border-color-on:              $alert-md-button-text-color !default;
+$alert-md-radio-border-color-on:              $alert-md-button-text-color;
 
 /// @prop - Width of the icon in the alert radio
-$alert-md-radio-icon-width:                   $alert-md-radio-width * 0.5 !default;
+$alert-md-radio-icon-width:                   $alert-md-radio-width * 0.5;
 
 /// @prop - Height of the icon in the alert radio
-$alert-md-radio-icon-height:                  $alert-md-radio-icon-width !default;
+$alert-md-radio-icon-height:                  $alert-md-radio-icon-width;
 
 /// @prop - Top of the icon in the alert radio
-$alert-md-radio-icon-top:                     ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default;
+$alert-md-radio-icon-top:                     ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5;
 
 /// @prop - Start of the icon in the radio alert
-$alert-md-radio-icon-start:                   $alert-md-radio-icon-top !default;
+$alert-md-radio-icon-start:                   $alert-md-radio-icon-top;
 
 /// @prop - Border radius of the icon in the alert radio
-$alert-md-radio-icon-border-radius:           $alert-md-radio-border-radius !default;
+$alert-md-radio-icon-border-radius:           $alert-md-radio-border-radius;
 
 /// @prop - Transform of the icon in the alert radio when off
-$alert-md-radio-icon-transform-off:           scale3d(0, 0, 0) !default;
+$alert-md-radio-icon-transform-off:           scale3d(0, 0, 0);
 
 /// @prop - Transform of the icon in the alert radio when on
-$alert-md-radio-icon-transform-on:            scale3d(1, 1, 1) !default;
+$alert-md-radio-icon-transform-on:            scale3d(1, 1, 1);
 
 /// @prop - Transition of the icon in the alert radio
-$alert-md-radio-icon-transition:              transform 280ms cubic-bezier(.4, 0, .2, 1) !default;
+$alert-md-radio-icon-transition:              transform 280ms cubic-bezier(.4, 0, .2, 1);
 
 /// @prop - Padding top on the label for the radio alert
-$alert-md-radio-label-padding-top:            13px !default;
+$alert-md-radio-label-padding-top:            13px;
 
 /// @prop - Padding end on the label for the radio alert
-$alert-md-radio-label-padding-end:            26px !default;
+$alert-md-radio-label-padding-end:            26px;
 
 /// @prop - Padding bottom on the label for the radio alert
-$alert-md-radio-label-padding-bottom:         $alert-md-radio-label-padding-top !default;
+$alert-md-radio-label-padding-bottom:         $alert-md-radio-label-padding-top;
 
 /// @prop - Padding start on the label for the radio alert
-$alert-md-radio-label-padding-start:          $alert-md-radio-label-padding-end + 26px !default;
+$alert-md-radio-label-padding-start:          $alert-md-radio-label-padding-end + 26px;
 
 /// @prop - Font size of the label for the radio alert
-$alert-md-radio-label-font-size:              dynamic-font(16px) !default;
+$alert-md-radio-label-font-size:              dynamic-font(16px);
 
 /// @prop - Text color of the label for the radio alert
-$alert-md-radio-label-text-color:             $text-color-step-150 !default;
+$alert-md-radio-label-text-color:             $text-color-step-150;
 
 /// @prop - Text color of the label for the checked radio alert
-$alert-md-radio-label-text-color-checked:     $alert-md-radio-label-text-color !default;
+$alert-md-radio-label-text-color-checked:     $alert-md-radio-label-text-color;
 
 /// @prop - Top of the checkbox in the alert
-$alert-md-checkbox-top:                       0 !default;
+$alert-md-checkbox-top:                       0;
 
 /// @prop - Left of the checkbox in the alert
-$alert-md-checkbox-left:                      26px !default;
+$alert-md-checkbox-left:                      26px;
 
 /// @prop - Width of the checkbox in the alert
-$alert-md-checkbox-width:                     16px !default;
+$alert-md-checkbox-width:                     16px;
 
 /// @prop - Height of the checkbox in the alert
-$alert-md-checkbox-height:                    16px !default;
+$alert-md-checkbox-height:                    16px;
 
 /// @prop - Border width of the checkbox in the alert
-$alert-md-checkbox-border-width:              2px !default;
+$alert-md-checkbox-border-width:              2px;
 
 /// @prop - Border style of the checkbox in the alert
-$alert-md-checkbox-border-style:              solid !default;
+$alert-md-checkbox-border-style:              solid;
 
 /// @prop - Border radius of the checkbox in the alert
-$alert-md-checkbox-border-radius:             2px !default;
+$alert-md-checkbox-border-radius:             2px;
 
 /// @prop - Border color of the checkbox in the alert when off
-$alert-md-checkbox-border-color-off:          $background-color-step-550 !default;
+$alert-md-checkbox-border-color-off:          $background-color-step-550;
 
 /// @prop - Border color of the checkbox in the alert when on
-$alert-md-checkbox-border-color-on:           $alert-md-button-text-color !default;
+$alert-md-checkbox-border-color-on:           $alert-md-button-text-color;
 
 /// @prop - Top of the icon in the checkbox alert
-$alert-md-checkbox-icon-top:                  0 !default;
+$alert-md-checkbox-icon-top:                  0;
 
 /// @prop - Start of the icon in the checkbox alert
-$alert-md-checkbox-icon-start:                3px !default;
+$alert-md-checkbox-icon-start:                3px;
 
 /// @prop - Width of the icon in the checkbox alert
-$alert-md-checkbox-icon-width:                6px !default;
+$alert-md-checkbox-icon-width:                6px;
 
 /// @prop - Height of the icon in the checkbox alert
-$alert-md-checkbox-icon-height:               10px !default;
+$alert-md-checkbox-icon-height:               10px;
 
 /// @prop - Border width of the icon in the checkbox alert
-$alert-md-checkbox-icon-border-width:         2px !default;
+$alert-md-checkbox-icon-border-width:         2px;
 
 /// @prop - Border style of the icon in the checkbox alert
-$alert-md-checkbox-icon-border-style:         solid !default;
+$alert-md-checkbox-icon-border-style:         solid;
 
 /// @prop - Border color of the icon in the checkbox alert
-$alert-md-checkbox-icon-border-color:         ion-color(primary, contrast) !default;
+$alert-md-checkbox-icon-border-color:         ion-color(primary, contrast);
 
 /// @prop - Transform of the icon in the checkbox alert
-$alert-md-checkbox-icon-transform:            rotate(45deg) !default;
+$alert-md-checkbox-icon-transform:            rotate(45deg);
 
 /// @prop - Padding top of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding-top:         13px !default;
+$alert-md-checkbox-label-padding-top:         13px;
 
 /// @prop - Padding end of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding-end:         $alert-md-checkbox-left !default;
+$alert-md-checkbox-label-padding-end:         $alert-md-checkbox-left;
 
 /// @prop - Padding bottom of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding-bottom:      $alert-md-checkbox-label-padding-top !default;
+$alert-md-checkbox-label-padding-bottom:      $alert-md-checkbox-label-padding-top;
 
 /// @prop - Padding start of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding-start:       $alert-md-checkbox-label-padding-end + 27px !default;
+$alert-md-checkbox-label-padding-start:       $alert-md-checkbox-label-padding-end + 27px;
 
 /// @prop - Text color of the label for the checkbox in the alert
-$alert-md-checkbox-label-text-color:          $text-color-step-150 !default;
+$alert-md-checkbox-label-text-color:          $text-color-step-150;
 
 /// @prop - Font size of the label for the checkbox in the alert
-$alert-md-checkbox-label-font-size:           dynamic-font(16px) !default;
+$alert-md-checkbox-label-font-size:           dynamic-font(16px);
 
 /// @prop - Height of the tappable inputs in the checkbox alert
-$alert-md-tappable-height:                    $item-md-min-height !default;
+$alert-md-tappable-height:                    $item-md-min-height;

core/src/components/alert/alert.tsx

@@ -21,7 +21,7 @@ import { sanitizeDOMString } from '@utils/sanitization';
 import { getClassMap } from '@utils/theme';
 
 import { config } from '../../global/config';
-import { getIonMode, getIonTheme } from '../../global/ionic-global';
+import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
@@ -35,15 +35,13 @@ import { mdLeaveAnimation } from './animations/md.leave';
 // TODO(FW-2832): types
 
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 @Component({
   tag: 'ion-alert',
   styleUrls: {
     ios: 'alert.ios.scss',
     md: 'alert.md.scss',
-    ionic: 'alert.md.scss',
   },
   scoped: true,
 })
@@ -137,7 +135,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * If `true`, the alert will be translucent.
-   * Only applies when the theme is `"ios"` and the device supports
+   * Only applies when the mode is `"ios"` and the device supports
    * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    */
   @Prop() translucent = false;
@@ -535,7 +533,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private renderCheckbox() {
     const inputs = this.processedInputs;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
 
     if (inputs.length === 0) {
       return null;
@@ -567,7 +565,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
               </div>
               <div class="alert-checkbox-label">{i.label}</div>
             </div>
-            {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
           </button>
         ))}
       </div>
@@ -684,7 +682,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   private renderAlertButtons() {
     const buttons = this.processedButtons;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
     const alertButtonGroupClass = {
       'alert-button-group': true,
       'alert-button-group-vertical': buttons.length > 2,
@@ -701,7 +699,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             onClick={() => this.buttonClick(button)}
           >
             <span class="alert-button-inner">{button.text}</span>
-            {theme === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
           </button>
         ))}
       </div>
@@ -723,7 +721,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   render() {
     const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
     const hdrId = `alert-${overlayIndex}-hdr`;
     const subHdrId = `alert-${overlayIndex}-sub-hdr`;
     const msgId = `alert-${overlayIndex}-msg`;
@@ -748,7 +746,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
         }}
         class={{
           ...getClassMap(this.cssClass),
-          [theme]: true,
+          [mode]: true,
           'overlay-hidden': true,
           'alert-translucent': this.translucent,
         }}

core/src/components/alert/alert.vars.scss

@@ -4,16 +4,16 @@
 // --------------------------------------------------
 
 /// @prop - Minimum width of the alert
-$alert-min-width:                 250px !default;
+$alert-min-width:                 250px;
 
 /// @prop - Maximum height of the alert
-$alert-max-height:                90% !default;
+$alert-max-height:                90%;
 
 /// @prop - Line height of the alert button
-$alert-button-line-height:        dynamic-font(20px) !default;
+$alert-button-line-height:        dynamic-font(20px);
 
 /// @prop - Font size of the alert button
-$alert-button-font-size:          dynamic-font(14px) !default;
+$alert-button-font-size:          dynamic-font(14px);
 
 /// @prop - Minimum height of a textarea in the alert
-$alert-input-min-height:          37px !default;
+$alert-input-min-height:          37px;

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

@@ -180,7 +180,10 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
  */
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('alert: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
+    test('should scale text on larger font sizes', async ({ page, skip }) => {
+      // TODO(ROU-8158): unskip this test when a solution is found
+      skip.browser('chromium', 'Rendering is flaky in Chrome.');
+
       await page.setContent(
         `
         <style>

core/src/components/alert/test/a11y/index.html

@@ -9,19 +9,6 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      main > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
   </head>
   <script type="module">
     import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -32,13 +19,13 @@
     <main class="ion-padding">
       <h1>Alert - A11y</h1>
 
-      <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
-      <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
-      <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
-      <button id="noMessage" onclick="presentNoMessage()">No Message</button>
-      <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
-      <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
-      <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+      <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="noMessage" onclick="presentNoMessage()">No Message</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="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
     </main>
 
     <script>