fix

Issue number: resolves #28524

---------

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

Watchers in Stencil are constructed sometime between `connectedCallback`
and `componentDidLoad`. If a property is set/changed during that time it
is possible for the callback associated with the watcher to not fire
because the watcher has not been setup yet. This is most often with
`dist-custom-elements` and frameworks such as Angular when using a
binding (i.e. `[trigger]` instead of `trigger`)

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

- The trigger callback associated with the watcher is manually called in
`componentDidLoad` for each overlay.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

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


Dev build: `7.5.5-dev.11699974376.13a15397`

Note: This is a timing related bug due to a behavior in Stencil, so I
did not write automated tests. However, I manually verified that this
issue a) reproduces on `main` and b) is fixed with this dev build for
each overlay component.

.github/CODEOWNERS

@@ -11,6 +11,8 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.
 
+* @ionic-team/framework
+
 # Frameworks
 
 ## Angular
@@ -81,10 +83,3 @@
 
 /core/src/css/ @brandyscarney
 /core/src/themes/ @brandyscarney
-
-# Tests
-
-**/datetime.e2e.ts @mapsandapps
-**/datetime-button.e2e.ts @mapsandapps
-**/icon.e2e.ts @mapsandapps
-**/loading.e2e.ts @mapsandapps

.github/CONTRIBUTING.md

@@ -163,7 +163,7 @@ npm i
 npm run build
 npm pack --pack-destination ~
 
-cd ../angular
+cd ../packages/angular
 npm i
 npm run sync
 npm run build

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

@@ -1,5 +1,10 @@
 name: 'Build Ionic Core'
 description: 'Build Ionic Core'
+inputs:
+  ionicons-version:
+    description: 'The NPM tag of ionicons to install.'
+    type: string
+    required: false
 runs:
   using: 'composite'
   steps:
@@ -11,6 +16,13 @@ runs:
       run: npm install
       working-directory: ./core
       shell: bash
+    # If an Ionicons version was specified install that.
+    # Otherwise just use the version defined in the package.json.
+    - name: Install Ionicons Version
+      if: inputs.ionicons-version != ''
+      run: npm install ionicons@${{ inputs.ionicons-version }}
+      working-directory: ./core
+      shell: bash
     - name: Build Core
       run: npm run build -- --ci
       working-directory: ./core

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

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

.github/workflows/build.yml

@@ -4,6 +4,12 @@ on:
   pull_request:
     branches: [ '**' ]
   merge_group:
+  workflow_dispatch:
+    inputs:
+      ionicons_npm_release_tag:
+        required: false
+        type: string
+        description: What version of ionicons should be pulled from NPM? Use this if you want to test a custom version of Ionicons with Ionic.
 
 # When pushing a new commit we should
 # cancel the previous test run to not
@@ -18,6 +24,8 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/build-core
+        with:
+          ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
 
   test-core-clean-build:
     needs: [build-core]
@@ -132,7 +140,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [ng14, ng15, ng16]
+        apps: [ng14, ng15, ng16, ng17]
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:

CHANGELOG.md

@@ -3,6 +3,112 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+
+### Bug Fixes
+
+* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
+* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
+
+
+
+
+
+## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
+
+
+### Bug Fixes
+
+* **alert:** match MD spec on tablet  ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
+* **angular:** ng add @ionic/angular in standalone projects ([#28523](https://github.com/ionic-team/ionic-framework/issues/28523)) ([c07312e](https://github.com/ionic-team/ionic-framework/commit/c07312e5ed931f6f825ccf083c9dead9fa815843)), closes [#28514](https://github.com/ionic-team/ionic-framework/issues/28514)
+* **angular:** overlays are defined when using standalone controllers ([#28560](https://github.com/ionic-team/ionic-framework/issues/28560)) ([9453132](https://github.com/ionic-team/ionic-framework/commit/9453132aa8952b4adfa1326e61138b329e254f76)), closes [#28385](https://github.com/ionic-team/ionic-framework/issues/28385)
+* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
+
+
+
+
+
+## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
+
+
+### Bug Fixes
+
+* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
+* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
+* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
+* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
+* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
+* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
+
+
+
+
+
+## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
+
+
+### Bug Fixes
+
+* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
+* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
+* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
+
+
+
+
+
+## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
+
+
+### Bug Fixes
+
+* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
+* **angular:** inputs on standalone form controls are reactive ([#28434](https://github.com/ionic-team/ionic-framework/issues/28434)) ([3b6e631](https://github.com/ionic-team/ionic-framework/commit/3b6e6318bf94125b3f8305b4d072a5945ceb3730)), closes [#28431](https://github.com/ionic-team/ionic-framework/issues/28431)
+* **angular:** NavController works with nested outlets ([#28421](https://github.com/ionic-team/ionic-framework/issues/28421)) ([90acad1](https://github.com/ionic-team/ionic-framework/commit/90acad1837b117542830ec0083389a35c5b4ee76)), closes [#28417](https://github.com/ionic-team/ionic-framework/issues/28417)
+* **angular:** run platform subscriptions inside zone ([#28404](https://github.com/ionic-team/ionic-framework/issues/28404)) ([a4b303e](https://github.com/ionic-team/ionic-framework/commit/a4b303e1338a35756a9cf7f67508d24d2f8537a2)), closes [#19539](https://github.com/ionic-team/ionic-framework/issues/19539)
+* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
+* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
+* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
+* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
+* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
+* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
+
+
+
+
+
+## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
+
+
+### Bug Fixes
+
+* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487)
+* **angular:** remove form control side effects ([#28359](https://github.com/ionic-team/ionic-framework/issues/28359)) ([82d6309](https://github.com/ionic-team/ionic-framework/commit/82d6309ef1675c0a6e767e87c23f166d84579d8f)), closes [#28358](https://github.com/ionic-team/ionic-framework/issues/28358)
+* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90))
+* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283)
+* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341)
+* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e))
+
+
+
+
+
+## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* **angular:** do not create duplicate menuController instances ([#28343](https://github.com/ionic-team/ionic-framework/issues/28343)) ([fa78676](https://github.com/ionic-team/ionic-framework/commit/fa78676d57eb80655ee9447ffa07dcfdae0c6b2a)), closes [#28337](https://github.com/ionic-team/ionic-framework/issues/28337)
+* **angular:** export missing lifecycle interfaces for standalone package ([#28346](https://github.com/ionic-team/ionic-framework/issues/28346)) ([dd93e0b](https://github.com/ionic-team/ionic-framework/commit/dd93e0b2689511f3145606f4dbb2c30dcf4c2950)), closes [/github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a#r1356414362](https://github.com//github.com/ionic-team/ionic-angular-standalone-codemods/pull/13/files/baa37ef1e3e8ba773b693db280542efba815482a/issues/r1356414362)
+* **react:** cleanup functions are execute for lifecycle hooks ([#28319](https://github.com/ionic-team/ionic-framework/issues/28319)) ([1ba9973](https://github.com/ionic-team/ionic-framework/commit/1ba9973857503c6e47cb225b77a5b89e0a9d2718)), closes [#28186](https://github.com/ionic-team/ionic-framework/issues/28186)
+* **react:** lifecycle events are removed on page unmount ([#28316](https://github.com/ionic-team/ionic-framework/issues/28316)) ([f14a59c](https://github.com/ionic-team/ionic-framework/commit/f14a59c5e0670ed7cc9ce1a73a087a5af13266e2))
+* **title:** large title transition supports dynamic font scaling ([#28290](https://github.com/ionic-team/ionic-framework/issues/28290)) ([fe47594](https://github.com/ionic-team/ionic-framework/commit/fe47594dc0bbb047f0bade144cf07b084fbeef5e)), closes [#28351](https://github.com/ionic-team/ionic-framework/issues/28351)
+
+
+
+
+
 # [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
 
 

core/CHANGELOG.md

@@ -3,6 +3,106 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.5.7](https://github.com/ionic-team/ionic-framework/compare/v7.5.6...v7.5.7) (2023-11-29)
+
+
+### Bug Fixes
+
+* **alert:** date inputs render correctly in mobile safari ([#28495](https://github.com/ionic-team/ionic-framework/issues/28495)) ([b833f0e](https://github.com/ionic-team/ionic-framework/commit/b833f0e826ddd261230e2e29b70e2dc884d8cb04)), closes [#28494](https://github.com/ionic-team/ionic-framework/issues/28494)
+* **datetime:** allow disabling datetime with prefer-wheel ([#28511](https://github.com/ionic-team/ionic-framework/issues/28511)) ([01130e1](https://github.com/ionic-team/ionic-framework/commit/01130e12e1d73bbf558da9d4dffd7122822ff39c))
+
+
+
+
+
+## [7.5.6](https://github.com/ionic-team/ionic-framework/compare/v7.5.5...v7.5.6) (2023-11-21)
+
+
+### Bug Fixes
+
+* **alert:** match MD spec on tablet  ([#28501](https://github.com/ionic-team/ionic-framework/issues/28501)) ([6a2be9f](https://github.com/ionic-team/ionic-framework/commit/6a2be9fa3c12a893d98dc139a1575a6e7e3c7c26)), closes [#23977](https://github.com/ionic-team/ionic-framework/issues/23977)
+* **datetime:** updating value with min scrolls to new value ([#28549](https://github.com/ionic-team/ionic-framework/issues/28549)) ([388d19e](https://github.com/ionic-team/ionic-framework/commit/388d19e04f83f85abd4602adb04cc71ac575764a)), closes [#28548](https://github.com/ionic-team/ionic-framework/issues/28548)
+
+
+
+
+
+## [7.5.5](https://github.com/ionic-team/ionic-framework/compare/v7.5.4...v7.5.5) (2023-11-15)
+
+
+### Bug Fixes
+
+* **accordion-group:** correct accordion is open on load ([#28510](https://github.com/ionic-team/ionic-framework/issues/28510)) ([a000dd2](https://github.com/ionic-team/ionic-framework/commit/a000dd2c0b65be8ab5b2ad19f2748fbca13d5085)), closes [#28506](https://github.com/ionic-team/ionic-framework/issues/28506)
+* **action-sheet:** adjust height for safe area with scrollable options ([#28504](https://github.com/ionic-team/ionic-framework/issues/28504)) ([900267e](https://github.com/ionic-team/ionic-framework/commit/900267eb36c36f2af63435f6b46acca52b3bdab7)), closes [#27777](https://github.com/ionic-team/ionic-framework/issues/27777)
+* **header:** collapsible large title does not flicker when collapse prop not reflected ([#28472](https://github.com/ionic-team/ionic-framework/issues/28472)) ([8227b0e](https://github.com/ionic-team/ionic-framework/commit/8227b0ee6d5250e122a34a83c644f8a74fbbafd5)), closes [#28466](https://github.com/ionic-team/ionic-framework/issues/28466)
+* **item-divider:** apply safe area to proper side regardless of direction ([#28420](https://github.com/ionic-team/ionic-framework/issues/28420)) ([4513e0c](https://github.com/ionic-team/ionic-framework/commit/4513e0c6b066d4990800c707e1d97f69c8fcfb0c))
+* **radio-group:** emit value change on componentDidLoad ([#28488](https://github.com/ionic-team/ionic-framework/issues/28488)) ([73b8bfd](https://github.com/ionic-team/ionic-framework/commit/73b8bfde3f060490958c10f58d0f68de80cb957f)), closes [#28356](https://github.com/ionic-team/ionic-framework/issues/28356)
+* **searchbar:** cancel icon aligns with back button ([#28478](https://github.com/ionic-team/ionic-framework/issues/28478)) ([c053fd9](https://github.com/ionic-team/ionic-framework/commit/c053fd9c68d9b1add1335db80be962215946a0b1)), closes [#28468](https://github.com/ionic-team/ionic-framework/issues/28468)
+
+> [!NOTE]
+> Ionic Vue developers utilizing the `v-ion-change` or `v-ion-input` workaround for https://github.com/ionic-team/ionic-framework/issues/27292 should remove this workaround when updating to Ionic v7.5.5.
+
+
+
+
+
+## [7.5.4](https://github.com/ionic-team/ionic-framework/compare/v7.5.3...v7.5.4) (2023-11-08)
+
+
+### Bug Fixes
+
+* **inputs:** remove invalid legacy warnings in input, textarea, and select ([#28484](https://github.com/ionic-team/ionic-framework/issues/28484)) ([c765dcb](https://github.com/ionic-team/ionic-framework/commit/c765dcbac4148762768d8c2bea9103e7d38c510b))
+* **item:** apply safe area to proper side regardless of direction ([#28403](https://github.com/ionic-team/ionic-framework/issues/28403)) ([ed040b0](https://github.com/ionic-team/ionic-framework/commit/ed040b09e9cbd4246864e690542132defc6a6578))
+* **list:** remove border from last item with item-sliding ([#28439](https://github.com/ionic-team/ionic-framework/issues/28439)) ([cafafcc](https://github.com/ionic-team/ionic-framework/commit/cafafcc9d166ef536dcb73edd522c8f2a0fb95b6)), closes [#28435](https://github.com/ionic-team/ionic-framework/issues/28435)
+
+
+
+
+
+## [7.5.3](https://github.com/ionic-team/ionic-framework/compare/v7.5.2...v7.5.3) (2023-11-01)
+
+
+### Bug Fixes
+
+* **alert:** long words wrap to next line ([#28408](https://github.com/ionic-team/ionic-framework/issues/28408)) ([34257d6](https://github.com/ionic-team/ionic-framework/commit/34257d681e9034b0a001aa45e17222f3aab5ed76)), closes [#28406](https://github.com/ionic-team/ionic-framework/issues/28406)
+* **angular:** standalone form components do not error when multiple are used ([#28423](https://github.com/ionic-team/ionic-framework/issues/28423)) ([89698b3](https://github.com/ionic-team/ionic-framework/commit/89698b338fb05cde427c98720c238d2365abdaa7)), closes [#28418](https://github.com/ionic-team/ionic-framework/issues/28418)
+* **datetime:** allow calendar navigation in readonly mode; disallow keyboard navigation when disabled ([#28336](https://github.com/ionic-team/ionic-framework/issues/28336)) ([f6a6877](https://github.com/ionic-team/ionic-framework/commit/f6a6877044a6d912a92aab00c3c78897da09415d)), closes [#28121](https://github.com/ionic-team/ionic-framework/issues/28121)
+* **input, textarea, select:** use consistent sizes ([#28390](https://github.com/ionic-team/ionic-framework/issues/28390)) ([b31ecbb](https://github.com/ionic-team/ionic-framework/commit/b31ecbbfe8deb87604686d752e92e672dd9b277a)), closes [#28388](https://github.com/ionic-team/ionic-framework/issues/28388)
+* **list-header:** apply safe area to proper side regardless of direction ([#28371](https://github.com/ionic-team/ionic-framework/issues/28371)) ([f99d530](https://github.com/ionic-team/ionic-framework/commit/f99d5305fb4b1607b42e34a0b7653d8e1b5bf23f))
+* **segment:** avoid scrolling webkit bug ([#28376](https://github.com/ionic-team/ionic-framework/issues/28376)) ([8e2f818](https://github.com/ionic-team/ionic-framework/commit/8e2f81867175e9980e6d072b0a4414baae571223)), closes [#28373](https://github.com/ionic-team/ionic-framework/issues/28373)
+* **tab-bar:** apply safe area to proper side regardless of direction ([#28372](https://github.com/ionic-team/ionic-framework/issues/28372)) ([d47b7e7](https://github.com/ionic-team/ionic-framework/commit/d47b7e750310ceb2f2c7ecfda8343923ff8d564a))
+
+
+
+
+
+## [7.5.2](https://github.com/ionic-team/ionic-framework/compare/v7.5.1...v7.5.2) (2023-10-25)
+
+
+### Bug Fixes
+
+* **alert, action-sheet:** show scrollbar for long list of options ([#28369](https://github.com/ionic-team/ionic-framework/issues/28369)) ([60f3d65](https://github.com/ionic-team/ionic-framework/commit/60f3d6579498ebad75c4f5163fca3947ac2dadff)), closes [#18487](https://github.com/ionic-team/ionic-framework/issues/18487)
+* **fab:** apply safe area in positioning to proper side regardless of direction ([#28377](https://github.com/ionic-team/ionic-framework/issues/28377)) ([331c08a](https://github.com/ionic-team/ionic-framework/commit/331c08aad542de158e53ed351705d4c396bb4e90))
+* **input, searchbar, textarea:** ensure nativeInput is always available ([#28362](https://github.com/ionic-team/ionic-framework/issues/28362)) ([2b015b2](https://github.com/ionic-team/ionic-framework/commit/2b015b22144e306444f2bf30ace0b5cc7e32a710)), closes [#28283](https://github.com/ionic-team/ionic-framework/issues/28283)
+* **menu:** menu no longer disappears with multiple split panes ([#28370](https://github.com/ionic-team/ionic-framework/issues/28370)) ([5a30082](https://github.com/ionic-team/ionic-framework/commit/5a30082546cb19eb98128ca9091b35094841d4f2)), closes [#18683](https://github.com/ionic-team/ionic-framework/issues/18683) [#15538](https://github.com/ionic-team/ionic-framework/issues/15538) [#22341](https://github.com/ionic-team/ionic-framework/issues/22341)
+* **rtl:** allow :host to use rtl() ([#28353](https://github.com/ionic-team/ionic-framework/issues/28353)) ([6b7d288](https://github.com/ionic-team/ionic-framework/commit/6b7d288536307fcb49231dca66ab938b389ea85e))
+
+
+
+
+
+## [7.5.1](https://github.com/ionic-team/ionic-framework/compare/v7.5.0...v7.5.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* **angular:** do not create duplicate menuController instances ([#28343](https://github.com/ionic-team/ionic-framework/issues/28343)) ([fa78676](https://github.com/ionic-team/ionic-framework/commit/fa78676d57eb80655ee9447ffa07dcfdae0c6b2a)), closes [#28337](https://github.com/ionic-team/ionic-framework/issues/28337)
+* **title:** large title transition supports dynamic font scaling ([#28290](https://github.com/ionic-team/ionic-framework/issues/28290)) ([fe47594](https://github.com/ionic-team/ionic-framework/commit/fe47594dc0bbb047f0bade144cf07b084fbeef5e)), closes [#28351](https://github.com/ionic-team/ionic-framework/issues/28351)
+
+
+
+
+
 # [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
 
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.0",
+  "version": "7.5.7",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,27 +31,26 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.4.1",
+    "@stencil/core": "^4.8.0",
     "ionicons": "^7.2.1",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.7.3",
-    "@capacitor/core": "^5.4.2",
+    "@axe-core/playwright": "^4.8.1",
+    "@capacitor/core": "^5.5.1",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.8.2",
+    "@stencil/angular-output-target": "^0.8.3",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.6",
-    "@stencil/vue-output-target": "^0.8.6",
-    "@types/jest": "^27.5.2",
+    "@stencil/sass": "^3.0.7",
+    "@stencil/vue-output-target": "^0.8.7",
+    "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
@@ -62,9 +61,10 @@
     "eslint-plugin-custom-rules": "file:custom-rules",
     "execa": "^5.0.0",
     "fs-extra": "^9.0.1",
-    "jest": "^27.5.1",
-    "jest-cli": "^27.5.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
     "prettier": "^2.6.1",
+    "puppeteer": "21.1.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
@@ -86,13 +86,11 @@
     "lint.sass.fix": "npm run lint.sass -- --fix",
     "lint.ts": "npm run eslint",
     "lint.ts.fix": "npm run eslint -- --fix",
-    "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
     "start": "npm run build.css && stencil build --dev --watch --serve",
     "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
-    "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
     "test.e2e": "npx playwright test",
     "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
     "test.watch": "jest --watch --no-cache",

core/scripts/testing/themes/dark.css

@@ -0,0 +1,151 @@
+/*
+ * Dark Colors
+ * -------------------------------------------
+ */
+
+:root {
+  --ion-color-primary: #428cff;
+  --ion-color-primary-rgb: 66, 140, 255;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: #3a7be0;
+  --ion-color-primary-tint: #5598ff;
+
+  --ion-color-secondary: #50c8ff;
+  --ion-color-secondary-rgb: 80, 200, 255;
+  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-shade: #46b0e0;
+  --ion-color-secondary-tint: #62ceff;
+
+  --ion-color-tertiary: #6a64ff;
+  --ion-color-tertiary-rgb: 106, 100, 255;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+  --ion-color-tertiary-shade: #5d58e0;
+  --ion-color-tertiary-tint: #7974ff;
+
+  --ion-color-success: #2fdf75;
+  --ion-color-success-rgb: 47, 223, 117;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0, 0, 0;
+  --ion-color-success-shade: #29c467;
+  --ion-color-success-tint: #44e283;
+
+  --ion-color-warning: #ffd534;
+  --ion-color-warning-rgb: 255, 213, 52;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
+  --ion-color-warning-shade: #e0bb2e;
+  --ion-color-warning-tint: #ffd948;
+
+  --ion-color-danger: #ff4961;
+  --ion-color-danger-rgb: 255, 73, 97;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
+  --ion-color-danger-shade: #e04055;
+  --ion-color-danger-tint: #ff5b71;
+
+  --ion-color-dark: #f4f5f8;
+  --ion-color-dark-rgb: 244, 245, 248;
+  --ion-color-dark-contrast: #000000;
+  --ion-color-dark-contrast-rgb: 0, 0, 0;
+  --ion-color-dark-shade: #d7d8da;
+  --ion-color-dark-tint: #f5f6f9;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152, 154, 162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0, 0, 0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34, 36, 40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255, 255, 255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body {
+  --ion-background-color: #000000;
+  --ion-background-color-rgb: 0, 0, 0;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-color-step-50: #0d0d0d;
+  --ion-color-step-100: #1a1a1a;
+  --ion-color-step-150: #262626;
+  --ion-color-step-200: #333333;
+  --ion-color-step-250: #404040;
+  --ion-color-step-300: #4d4d4d;
+  --ion-color-step-350: #595959;
+  --ion-color-step-400: #666666;
+  --ion-color-step-450: #737373;
+  --ion-color-step-500: #808080;
+  --ion-color-step-550: #8c8c8c;
+  --ion-color-step-600: #999999;
+  --ion-color-step-650: #a6a6a6;
+  --ion-color-step-700: #b3b3b3;
+  --ion-color-step-750: #bfbfbf;
+  --ion-color-step-800: #cccccc;
+  --ion-color-step-850: #d9d9d9;
+  --ion-color-step-900: #e6e6e6;
+  --ion-color-step-950: #f2f2f2;
+
+  --ion-toolbar-background: #0d0d0d;
+
+  --ion-item-background: #000000;
+
+  --ion-card-background: #1c1c1d;
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body {
+  --ion-background-color: #121212;
+  --ion-background-color-rgb: 18, 18, 18;
+
+  --ion-text-color: #ffffff;
+  --ion-text-color-rgb: 255, 255, 255;
+
+  --ion-border-color: #222222;
+
+  --ion-color-step-50: #1e1e1e;
+  --ion-color-step-100: #2a2a2a;
+  --ion-color-step-150: #363636;
+  --ion-color-step-200: #414141;
+  --ion-color-step-250: #4d4d4d;
+  --ion-color-step-300: #595959;
+  --ion-color-step-350: #656565;
+  --ion-color-step-400: #717171;
+  --ion-color-step-450: #7d7d7d;
+  --ion-color-step-500: #898989;
+  --ion-color-step-550: #949494;
+  --ion-color-step-600: #a0a0a0;
+  --ion-color-step-650: #acacac;
+  --ion-color-step-700: #b8b8b8;
+  --ion-color-step-750: #c4c4c4;
+  --ion-color-step-800: #d0d0d0;
+  --ion-color-step-850: #dbdbdb;
+  --ion-color-step-900: #e7e7e7;
+  --ion-color-step-950: #f3f3f3;
+
+  --ion-item-background: #1e1e1e;
+
+  --ion-toolbar-background: #1f1f1f;
+
+  --ion-tab-bar-background: #1f1f1f;
+
+  --ion-card-background: #1e1e1e;
+}

core/src/components.d.ts

@@ -915,7 +915,7 @@ export namespace Components {
          */
         "presentation": DatetimePresentation;
         /**
-          * If `true`, the datetime appears normal but is not interactive.
+          * If `true`, the datetime appears normal but the selected date cannot be changed.
          */
         "readonly": boolean;
         /**
@@ -2043,6 +2043,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled": boolean;
         /**
           * A list of options to be displayed in the picker
          */
@@ -2254,7 +2258,7 @@ export namespace Components {
          */
         "name": string;
         "setButtonTabindex": (value: number) => Promise<void>;
-        "setFocus": (ev: any) => Promise<void>;
+        "setFocus": (ev: globalThis.Event) => Promise<void>;
         /**
           * the value of the radio.
          */
@@ -3425,19 +3429,67 @@ declare global {
         prototype: HTMLIonAccordionElement;
         new (): HTMLIonAccordionElement;
     };
+    interface HTMLIonAccordionGroupElementEventMap {
+        "ionChange": AccordionGroupChangeEventDetail;
+        "ionValueChange": AccordionGroupChangeEventDetail;
+    }
     interface HTMLIonAccordionGroupElement extends Components.IonAccordionGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonAccordionGroupElementEventMap>(type: K, listener: (this: HTMLIonAccordionGroupElement, ev: IonAccordionGroupCustomEvent<HTMLIonAccordionGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonAccordionGroupElementEventMap>(type: K, listener: (this: HTMLIonAccordionGroupElement, ev: IonAccordionGroupCustomEvent<HTMLIonAccordionGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonAccordionGroupElement: {
         prototype: HTMLIonAccordionGroupElement;
         new (): HTMLIonAccordionGroupElement;
     };
+    interface HTMLIonActionSheetElementEventMap {
+        "ionActionSheetDidPresent": void;
+        "ionActionSheetWillPresent": void;
+        "ionActionSheetWillDismiss": OverlayEventDetail;
+        "ionActionSheetDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+    }
     interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonActionSheetElementEventMap>(type: K, listener: (this: HTMLIonActionSheetElement, ev: IonActionSheetCustomEvent<HTMLIonActionSheetElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonActionSheetElementEventMap>(type: K, listener: (this: HTMLIonActionSheetElement, ev: IonActionSheetCustomEvent<HTMLIonActionSheetElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonActionSheetElement: {
         prototype: HTMLIonActionSheetElement;
         new (): HTMLIonActionSheetElement;
     };
+    interface HTMLIonAlertElementEventMap {
+        "ionAlertDidPresent": void;
+        "ionAlertWillPresent": void;
+        "ionAlertWillDismiss": OverlayEventDetail;
+        "ionAlertDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+    }
     interface HTMLIonAlertElement extends Components.IonAlert, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonAlertElementEventMap>(type: K, listener: (this: HTMLIonAlertElement, ev: IonAlertCustomEvent<HTMLIonAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonAlertElementEventMap>(type: K, listener: (this: HTMLIonAlertElement, ev: IonAlertCustomEvent<HTMLIonAlertElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonAlertElement: {
         prototype: HTMLIonAlertElement;
@@ -3461,7 +3513,18 @@ declare global {
         prototype: HTMLIonBackButtonElement;
         new (): HTMLIonBackButtonElement;
     };
+    interface HTMLIonBackdropElementEventMap {
+        "ionBackdropTap": void;
+    }
     interface HTMLIonBackdropElement extends Components.IonBackdrop, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonBackdropElementEventMap>(type: K, listener: (this: HTMLIonBackdropElement, ev: IonBackdropCustomEvent<HTMLIonBackdropElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonBackdropElementEventMap>(type: K, listener: (this: HTMLIonBackdropElement, ev: IonBackdropCustomEvent<HTMLIonBackdropElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonBackdropElement: {
         prototype: HTMLIonBackdropElement;
@@ -3473,19 +3536,55 @@ declare global {
         prototype: HTMLIonBadgeElement;
         new (): HTMLIonBadgeElement;
     };
+    interface HTMLIonBreadcrumbElementEventMap {
+        "ionFocus": void;
+        "ionBlur": void;
+        "collapsedClick": BreadcrumbCollapsedClickEventDetail;
+    }
     interface HTMLIonBreadcrumbElement extends Components.IonBreadcrumb, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonBreadcrumbElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbElement, ev: IonBreadcrumbCustomEvent<HTMLIonBreadcrumbElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonBreadcrumbElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbElement, ev: IonBreadcrumbCustomEvent<HTMLIonBreadcrumbElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonBreadcrumbElement: {
         prototype: HTMLIonBreadcrumbElement;
         new (): HTMLIonBreadcrumbElement;
     };
+    interface HTMLIonBreadcrumbsElementEventMap {
+        "ionCollapsedClick": BreadcrumbCollapsedClickEventDetail;
+    }
     interface HTMLIonBreadcrumbsElement extends Components.IonBreadcrumbs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonBreadcrumbsElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbsElement, ev: IonBreadcrumbsCustomEvent<HTMLIonBreadcrumbsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonBreadcrumbsElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbsElement, ev: IonBreadcrumbsCustomEvent<HTMLIonBreadcrumbsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonBreadcrumbsElement: {
         prototype: HTMLIonBreadcrumbsElement;
         new (): HTMLIonBreadcrumbsElement;
     };
+    interface HTMLIonButtonElementEventMap {
+        "ionFocus": void;
+        "ionBlur": void;
+    }
     interface HTMLIonButtonElement extends Components.IonButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonButtonElementEventMap>(type: K, listener: (this: HTMLIonButtonElement, ev: IonButtonCustomEvent<HTMLIonButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonButtonElementEventMap>(type: K, listener: (this: HTMLIonButtonElement, ev: IonButtonCustomEvent<HTMLIonButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonButtonElement: {
         prototype: HTMLIonButtonElement;
@@ -3527,7 +3626,21 @@ declare global {
         prototype: HTMLIonCardTitleElement;
         new (): HTMLIonCardTitleElement;
     };
+    interface HTMLIonCheckboxElementEventMap {
+        "ionChange": CheckboxChangeEventDetail;
+        "ionFocus": void;
+        "ionBlur": void;
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonCheckboxElement extends Components.IonCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonCheckboxElementEventMap>(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent<HTMLIonCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonCheckboxElementEventMap>(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent<HTMLIonCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonCheckboxElement: {
         prototype: HTMLIonCheckboxElement;
@@ -3545,13 +3658,43 @@ declare global {
         prototype: HTMLIonColElement;
         new (): HTMLIonColElement;
     };
+    interface HTMLIonContentElementEventMap {
+        "ionScrollStart": ScrollBaseDetail;
+        "ionScroll": ScrollDetail;
+        "ionScrollEnd": ScrollBaseDetail;
+    }
     interface HTMLIonContentElement extends Components.IonContent, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonContentElementEventMap>(type: K, listener: (this: HTMLIonContentElement, ev: IonContentCustomEvent<HTMLIonContentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonContentElementEventMap>(type: K, listener: (this: HTMLIonContentElement, ev: IonContentCustomEvent<HTMLIonContentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonContentElement: {
         prototype: HTMLIonContentElement;
         new (): HTMLIonContentElement;
     };
+    interface HTMLIonDatetimeElementEventMap {
+        "ionCancel": void;
+        "ionChange": DatetimeChangeEventDetail;
+        "ionValueChange": DatetimeChangeEventDetail;
+        "ionFocus": void;
+        "ionBlur": void;
+        "ionStyle": StyleEventDetail;
+        "ionRender": void;
+    }
     interface HTMLIonDatetimeElement extends Components.IonDatetime, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonDatetimeElementEventMap>(type: K, listener: (this: HTMLIonDatetimeElement, ev: IonDatetimeCustomEvent<HTMLIonDatetimeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonDatetimeElementEventMap>(type: K, listener: (this: HTMLIonDatetimeElement, ev: IonDatetimeCustomEvent<HTMLIonDatetimeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonDatetimeElement: {
         prototype: HTMLIonDatetimeElement;
@@ -3569,7 +3712,19 @@ declare global {
         prototype: HTMLIonFabElement;
         new (): HTMLIonFabElement;
     };
+    interface HTMLIonFabButtonElementEventMap {
+        "ionFocus": void;
+        "ionBlur": void;
+    }
     interface HTMLIonFabButtonElement extends Components.IonFabButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonFabButtonElementEventMap>(type: K, listener: (this: HTMLIonFabButtonElement, ev: IonFabButtonCustomEvent<HTMLIonFabButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonFabButtonElementEventMap>(type: K, listener: (this: HTMLIonFabButtonElement, ev: IonFabButtonCustomEvent<HTMLIonFabButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonFabButtonElement: {
         prototype: HTMLIonFabButtonElement;
@@ -3599,13 +3754,37 @@ declare global {
         prototype: HTMLIonHeaderElement;
         new (): HTMLIonHeaderElement;
     };
+    interface HTMLIonImgElementEventMap {
+        "ionImgWillLoad": void;
+        "ionImgDidLoad": void;
+        "ionError": void;
+    }
     interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonImgElementEventMap>(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent<HTMLIonImgElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonImgElementEventMap>(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent<HTMLIonImgElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonImgElement: {
         prototype: HTMLIonImgElement;
         new (): HTMLIonImgElement;
     };
+    interface HTMLIonInfiniteScrollElementEventMap {
+        "ionInfinite": void;
+    }
     interface HTMLIonInfiniteScrollElement extends Components.IonInfiniteScroll, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonInfiniteScrollElementEventMap>(type: K, listener: (this: HTMLIonInfiniteScrollElement, ev: IonInfiniteScrollCustomEvent<HTMLIonInfiniteScrollElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonInfiniteScrollElementEventMap>(type: K, listener: (this: HTMLIonInfiniteScrollElement, ev: IonInfiniteScrollCustomEvent<HTMLIonInfiniteScrollElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonInfiniteScrollElement: {
         prototype: HTMLIonInfiniteScrollElement;
@@ -3617,7 +3796,22 @@ declare global {
         prototype: HTMLIonInfiniteScrollContentElement;
         new (): HTMLIonInfiniteScrollContentElement;
     };
+    interface HTMLIonInputElementEventMap {
+        "ionInput": InputInputEventDetail;
+        "ionChange": InputChangeEventDetail;
+        "ionBlur": FocusEvent;
+        "ionFocus": FocusEvent;
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonInputElementEventMap>(type: K, listener: (this: HTMLIonInputElement, ev: IonInputCustomEvent<HTMLIonInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonInputElementEventMap>(type: K, listener: (this: HTMLIonInputElement, ev: IonInputCustomEvent<HTMLIonInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonInputElement: {
         prototype: HTMLIonInputElement;
@@ -3647,19 +3841,53 @@ declare global {
         prototype: HTMLIonItemOptionElement;
         new (): HTMLIonItemOptionElement;
     };
+    interface HTMLIonItemOptionsElementEventMap {
+        "ionSwipe": any;
+    }
     interface HTMLIonItemOptionsElement extends Components.IonItemOptions, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonItemOptionsElementEventMap>(type: K, listener: (this: HTMLIonItemOptionsElement, ev: IonItemOptionsCustomEvent<HTMLIonItemOptionsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonItemOptionsElementEventMap>(type: K, listener: (this: HTMLIonItemOptionsElement, ev: IonItemOptionsCustomEvent<HTMLIonItemOptionsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonItemOptionsElement: {
         prototype: HTMLIonItemOptionsElement;
         new (): HTMLIonItemOptionsElement;
     };
+    interface HTMLIonItemSlidingElementEventMap {
+        "ionDrag": any;
+    }
     interface HTMLIonItemSlidingElement extends Components.IonItemSliding, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonItemSlidingElementEventMap>(type: K, listener: (this: HTMLIonItemSlidingElement, ev: IonItemSlidingCustomEvent<HTMLIonItemSlidingElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonItemSlidingElementEventMap>(type: K, listener: (this: HTMLIonItemSlidingElement, ev: IonItemSlidingCustomEvent<HTMLIonItemSlidingElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonItemSlidingElement: {
         prototype: HTMLIonItemSlidingElement;
         new (): HTMLIonItemSlidingElement;
     };
+    interface HTMLIonLabelElementEventMap {
+        "ionColor": StyleEventDetail;
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonLabelElement extends Components.IonLabel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonLabelElementEventMap>(type: K, listener: (this: HTMLIonLabelElement, ev: IonLabelCustomEvent<HTMLIonLabelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonLabelElementEventMap>(type: K, listener: (this: HTMLIonLabelElement, ev: IonLabelCustomEvent<HTMLIonLabelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonLabelElement: {
         prototype: HTMLIonLabelElement;
@@ -3677,13 +3905,46 @@ declare global {
         prototype: HTMLIonListHeaderElement;
         new (): HTMLIonListHeaderElement;
     };
+    interface HTMLIonLoadingElementEventMap {
+        "ionLoadingDidPresent": void;
+        "ionLoadingWillPresent": void;
+        "ionLoadingWillDismiss": OverlayEventDetail;
+        "ionLoadingDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+    }
     interface HTMLIonLoadingElement extends Components.IonLoading, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonLoadingElementEventMap>(type: K, listener: (this: HTMLIonLoadingElement, ev: IonLoadingCustomEvent<HTMLIonLoadingElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonLoadingElementEventMap>(type: K, listener: (this: HTMLIonLoadingElement, ev: IonLoadingCustomEvent<HTMLIonLoadingElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonLoadingElement: {
         prototype: HTMLIonLoadingElement;
         new (): HTMLIonLoadingElement;
     };
+    interface HTMLIonMenuElementEventMap {
+        "ionWillOpen": void;
+        "ionWillClose": void;
+        "ionDidOpen": void;
+        "ionDidClose": void;
+        "ionMenuChange": MenuChangeEventDetail;
+    }
     interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonMenuElementEventMap>(type: K, listener: (this: HTMLIonMenuElement, ev: IonMenuCustomEvent<HTMLIonMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonMenuElementEventMap>(type: K, listener: (this: HTMLIonMenuElement, ev: IonMenuCustomEvent<HTMLIonMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonMenuElement: {
         prototype: HTMLIonMenuElement;
@@ -3701,13 +3962,46 @@ declare global {
         prototype: HTMLIonMenuToggleElement;
         new (): HTMLIonMenuToggleElement;
     };
+    interface HTMLIonModalElementEventMap {
+        "ionModalDidPresent": void;
+        "ionModalWillPresent": void;
+        "ionModalWillDismiss": OverlayEventDetail;
+        "ionModalDidDismiss": OverlayEventDetail;
+        "ionBreakpointDidChange": ModalBreakpointChangeEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+        "ionMount": void;
+    }
     interface HTMLIonModalElement extends Components.IonModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonModalElementEventMap>(type: K, listener: (this: HTMLIonModalElement, ev: IonModalCustomEvent<HTMLIonModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonModalElementEventMap>(type: K, listener: (this: HTMLIonModalElement, ev: IonModalCustomEvent<HTMLIonModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonModalElement: {
         prototype: HTMLIonModalElement;
         new (): HTMLIonModalElement;
     };
+    interface HTMLIonNavElementEventMap {
+        "ionNavWillLoad": void;
+        "ionNavWillChange": void;
+        "ionNavDidChange": void;
+    }
     interface HTMLIonNavElement extends Components.IonNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonNavElementEventMap>(type: K, listener: (this: HTMLIonNavElement, ev: IonNavCustomEvent<HTMLIonNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonNavElementEventMap>(type: K, listener: (this: HTMLIonNavElement, ev: IonNavCustomEvent<HTMLIonNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonNavElement: {
         prototype: HTMLIonNavElement;
@@ -3725,31 +4019,101 @@ declare global {
         prototype: HTMLIonNoteElement;
         new (): HTMLIonNoteElement;
     };
+    interface HTMLIonPickerElementEventMap {
+        "ionPickerDidPresent": void;
+        "ionPickerWillPresent": void;
+        "ionPickerWillDismiss": OverlayEventDetail;
+        "ionPickerDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+    }
     interface HTMLIonPickerElement extends Components.IonPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerElementEventMap>(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent<HTMLIonPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerElementEventMap>(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent<HTMLIonPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonPickerElement: {
         prototype: HTMLIonPickerElement;
         new (): HTMLIonPickerElement;
     };
+    interface HTMLIonPickerColumnElementEventMap {
+        "ionPickerColChange": PickerColumn;
+    }
     interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonPickerColumnElement: {
         prototype: HTMLIonPickerColumnElement;
         new (): HTMLIonPickerColumnElement;
     };
+    interface HTMLIonPickerColumnInternalElementEventMap {
+        "ionChange": PickerColumnItem;
+    }
     interface HTMLIonPickerColumnInternalElement extends Components.IonPickerColumnInternal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerColumnInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent<HTMLIonPickerColumnInternalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerColumnInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnInternalElement, ev: IonPickerColumnInternalCustomEvent<HTMLIonPickerColumnInternalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonPickerColumnInternalElement: {
         prototype: HTMLIonPickerColumnInternalElement;
         new (): HTMLIonPickerColumnInternalElement;
     };
+    interface HTMLIonPickerInternalElementEventMap {
+        "ionInputModeChange": PickerInternalChangeEventDetail;
+    }
     interface HTMLIonPickerInternalElement extends Components.IonPickerInternal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent<HTMLIonPickerInternalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerInternalElementEventMap>(type: K, listener: (this: HTMLIonPickerInternalElement, ev: IonPickerInternalCustomEvent<HTMLIonPickerInternalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonPickerInternalElement: {
         prototype: HTMLIonPickerInternalElement;
         new (): HTMLIonPickerInternalElement;
     };
+    interface HTMLIonPopoverElementEventMap {
+        "ionPopoverDidPresent": void;
+        "ionPopoverWillPresent": void;
+        "ionPopoverWillDismiss": OverlayEventDetail;
+        "ionPopoverDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+        "ionMount": void;
+    }
     interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPopoverElementEventMap>(type: K, listener: (this: HTMLIonPopoverElement, ev: IonPopoverCustomEvent<HTMLIonPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPopoverElementEventMap>(type: K, listener: (this: HTMLIonPopoverElement, ev: IonPopoverCustomEvent<HTMLIonPopoverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonPopoverElement: {
         prototype: HTMLIonPopoverElement;
@@ -3761,25 +4125,80 @@ declare global {
         prototype: HTMLIonProgressBarElement;
         new (): HTMLIonProgressBarElement;
     };
+    interface HTMLIonRadioElementEventMap {
+        "ionStyle": StyleEventDetail;
+        "ionFocus": void;
+        "ionBlur": void;
+    }
     interface HTMLIonRadioElement extends Components.IonRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRadioElementEventMap>(type: K, listener: (this: HTMLIonRadioElement, ev: IonRadioCustomEvent<HTMLIonRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRadioElementEventMap>(type: K, listener: (this: HTMLIonRadioElement, ev: IonRadioCustomEvent<HTMLIonRadioElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRadioElement: {
         prototype: HTMLIonRadioElement;
         new (): HTMLIonRadioElement;
     };
+    interface HTMLIonRadioGroupElementEventMap {
+        "ionChange": RadioGroupChangeEventDetail;
+        "ionValueChange": RadioGroupChangeEventDetail;
+    }
     interface HTMLIonRadioGroupElement extends Components.IonRadioGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRadioGroupElementEventMap>(type: K, listener: (this: HTMLIonRadioGroupElement, ev: IonRadioGroupCustomEvent<HTMLIonRadioGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRadioGroupElementEventMap>(type: K, listener: (this: HTMLIonRadioGroupElement, ev: IonRadioGroupCustomEvent<HTMLIonRadioGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRadioGroupElement: {
         prototype: HTMLIonRadioGroupElement;
         new (): HTMLIonRadioGroupElement;
     };
+    interface HTMLIonRangeElementEventMap {
+        "ionChange": RangeChangeEventDetail;
+        "ionInput": RangeChangeEventDetail;
+        "ionStyle": StyleEventDetail;
+        "ionFocus": void;
+        "ionBlur": void;
+        "ionKnobMoveStart": RangeKnobMoveStartEventDetail;
+        "ionKnobMoveEnd": RangeKnobMoveEndEventDetail;
+    }
     interface HTMLIonRangeElement extends Components.IonRange, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRangeElementEventMap>(type: K, listener: (this: HTMLIonRangeElement, ev: IonRangeCustomEvent<HTMLIonRangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRangeElementEventMap>(type: K, listener: (this: HTMLIonRangeElement, ev: IonRangeCustomEvent<HTMLIonRangeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRangeElement: {
         prototype: HTMLIonRangeElement;
         new (): HTMLIonRangeElement;
     };
+    interface HTMLIonRefresherElementEventMap {
+        "ionRefresh": RefresherEventDetail;
+        "ionPull": void;
+        "ionStart": void;
+    }
     interface HTMLIonRefresherElement extends Components.IonRefresher, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRefresherElementEventMap>(type: K, listener: (this: HTMLIonRefresherElement, ev: IonRefresherCustomEvent<HTMLIonRefresherElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRefresherElementEventMap>(type: K, listener: (this: HTMLIonRefresherElement, ev: IonRefresherCustomEvent<HTMLIonRefresherElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRefresherElement: {
         prototype: HTMLIonRefresherElement;
@@ -3797,7 +4216,18 @@ declare global {
         prototype: HTMLIonReorderElement;
         new (): HTMLIonReorderElement;
     };
+    interface HTMLIonReorderGroupElementEventMap {
+        "ionItemReorder": ItemReorderEventDetail;
+    }
     interface HTMLIonReorderGroupElement extends Components.IonReorderGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonReorderGroupElementEventMap>(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent<HTMLIonReorderGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonReorderGroupElementEventMap>(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent<HTMLIonReorderGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonReorderGroupElement: {
         prototype: HTMLIonReorderGroupElement;
@@ -3809,19 +4239,53 @@ declare global {
         prototype: HTMLIonRippleEffectElement;
         new (): HTMLIonRippleEffectElement;
     };
+    interface HTMLIonRouteElementEventMap {
+        "ionRouteDataChanged": any;
+    }
     interface HTMLIonRouteElement extends Components.IonRoute, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRouteElementEventMap>(type: K, listener: (this: HTMLIonRouteElement, ev: IonRouteCustomEvent<HTMLIonRouteElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRouteElementEventMap>(type: K, listener: (this: HTMLIonRouteElement, ev: IonRouteCustomEvent<HTMLIonRouteElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRouteElement: {
         prototype: HTMLIonRouteElement;
         new (): HTMLIonRouteElement;
     };
+    interface HTMLIonRouteRedirectElementEventMap {
+        "ionRouteRedirectChanged": any;
+    }
     interface HTMLIonRouteRedirectElement extends Components.IonRouteRedirect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRouteRedirectElementEventMap>(type: K, listener: (this: HTMLIonRouteRedirectElement, ev: IonRouteRedirectCustomEvent<HTMLIonRouteRedirectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRouteRedirectElementEventMap>(type: K, listener: (this: HTMLIonRouteRedirectElement, ev: IonRouteRedirectCustomEvent<HTMLIonRouteRedirectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRouteRedirectElement: {
         prototype: HTMLIonRouteRedirectElement;
         new (): HTMLIonRouteRedirectElement;
     };
+    interface HTMLIonRouterElementEventMap {
+        "ionRouteWillChange": RouterEventDetail;
+        "ionRouteDidChange": RouterEventDetail;
+    }
     interface HTMLIonRouterElement extends Components.IonRouter, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRouterElementEventMap>(type: K, listener: (this: HTMLIonRouterElement, ev: IonRouterCustomEvent<HTMLIonRouterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRouterElementEventMap>(type: K, listener: (this: HTMLIonRouterElement, ev: IonRouterCustomEvent<HTMLIonRouterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRouterElement: {
         prototype: HTMLIonRouterElement;
@@ -3833,7 +4297,20 @@ declare global {
         prototype: HTMLIonRouterLinkElement;
         new (): HTMLIonRouterLinkElement;
     };
+    interface HTMLIonRouterOutletElementEventMap {
+        "ionNavWillLoad": void;
+        "ionNavWillChange": void;
+        "ionNavDidChange": void;
+    }
     interface HTMLIonRouterOutletElement extends Components.IonRouterOutlet, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonRouterOutletElementEventMap>(type: K, listener: (this: HTMLIonRouterOutletElement, ev: IonRouterOutletCustomEvent<HTMLIonRouterOutletElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonRouterOutletElementEventMap>(type: K, listener: (this: HTMLIonRouterOutletElement, ev: IonRouterOutletCustomEvent<HTMLIonRouterOutletElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonRouterOutletElement: {
         prototype: HTMLIonRouterOutletElement;
@@ -3845,13 +4322,43 @@ declare global {
         prototype: HTMLIonRowElement;
         new (): HTMLIonRowElement;
     };
+    interface HTMLIonSearchbarElementEventMap {
+        "ionInput": SearchbarInputEventDetail;
+        "ionChange": SearchbarChangeEventDetail;
+        "ionCancel": void;
+        "ionClear": void;
+        "ionBlur": void;
+        "ionFocus": void;
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonSearchbarElement extends Components.IonSearchbar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonSearchbarElementEventMap>(type: K, listener: (this: HTMLIonSearchbarElement, ev: IonSearchbarCustomEvent<HTMLIonSearchbarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonSearchbarElementEventMap>(type: K, listener: (this: HTMLIonSearchbarElement, ev: IonSearchbarCustomEvent<HTMLIonSearchbarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonSearchbarElement: {
         prototype: HTMLIonSearchbarElement;
         new (): HTMLIonSearchbarElement;
     };
+    interface HTMLIonSegmentElementEventMap {
+        "ionChange": SegmentChangeEventDetail;
+        "ionSelect": SegmentChangeEventDetail;
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonSegmentElement extends Components.IonSegment, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonSegmentElementEventMap>(type: K, listener: (this: HTMLIonSegmentElement, ev: IonSegmentCustomEvent<HTMLIonSegmentElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonSegmentElementEventMap>(type: K, listener: (this: HTMLIonSegmentElement, ev: IonSegmentCustomEvent<HTMLIonSegmentElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonSegmentElement: {
         prototype: HTMLIonSegmentElement;
@@ -3863,7 +4370,23 @@ declare global {
         prototype: HTMLIonSegmentButtonElement;
         new (): HTMLIonSegmentButtonElement;
     };
+    interface HTMLIonSelectElementEventMap {
+        "ionChange": SelectChangeEventDetail;
+        "ionCancel": void;
+        "ionDismiss": void;
+        "ionFocus": void;
+        "ionBlur": void;
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonSelectElement extends Components.IonSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonSelectElementEventMap>(type: K, listener: (this: HTMLIonSelectElement, ev: IonSelectCustomEvent<HTMLIonSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonSelectElementEventMap>(type: K, listener: (this: HTMLIonSelectElement, ev: IonSelectCustomEvent<HTMLIonSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonSelectElement: {
         prototype: HTMLIonSelectElement;
@@ -3893,7 +4416,18 @@ declare global {
         prototype: HTMLIonSpinnerElement;
         new (): HTMLIonSpinnerElement;
     };
+    interface HTMLIonSplitPaneElementEventMap {
+        "ionSplitPaneVisible": { visible: boolean };
+    }
     interface HTMLIonSplitPaneElement extends Components.IonSplitPane, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonSplitPaneElementEventMap>(type: K, listener: (this: HTMLIonSplitPaneElement, ev: IonSplitPaneCustomEvent<HTMLIonSplitPaneElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonSplitPaneElementEventMap>(type: K, listener: (this: HTMLIonSplitPaneElement, ev: IonSplitPaneCustomEvent<HTMLIonSplitPaneElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonSplitPaneElement: {
         prototype: HTMLIonSplitPaneElement;
@@ -3905,19 +4439,55 @@ declare global {
         prototype: HTMLIonTabElement;
         new (): HTMLIonTabElement;
     };
+    interface HTMLIonTabBarElementEventMap {
+        "ionTabBarChanged": TabBarChangedEventDetail;
+        "ionTabBarLoaded": void;
+    }
     interface HTMLIonTabBarElement extends Components.IonTabBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonTabBarElementEventMap>(type: K, listener: (this: HTMLIonTabBarElement, ev: IonTabBarCustomEvent<HTMLIonTabBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonTabBarElementEventMap>(type: K, listener: (this: HTMLIonTabBarElement, ev: IonTabBarCustomEvent<HTMLIonTabBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonTabBarElement: {
         prototype: HTMLIonTabBarElement;
         new (): HTMLIonTabBarElement;
     };
+    interface HTMLIonTabButtonElementEventMap {
+        "ionTabButtonClick": TabButtonClickEventDetail;
+    }
     interface HTMLIonTabButtonElement extends Components.IonTabButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonTabButtonElementEventMap>(type: K, listener: (this: HTMLIonTabButtonElement, ev: IonTabButtonCustomEvent<HTMLIonTabButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonTabButtonElementEventMap>(type: K, listener: (this: HTMLIonTabButtonElement, ev: IonTabButtonCustomEvent<HTMLIonTabButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonTabButtonElement: {
         prototype: HTMLIonTabButtonElement;
         new (): HTMLIonTabButtonElement;
     };
+    interface HTMLIonTabsElementEventMap {
+        "ionNavWillLoad": void;
+        "ionTabsWillChange": { tab: string };
+        "ionTabsDidChange": { tab: string };
+    }
     interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonTabsElement: {
         prototype: HTMLIonTabsElement;
@@ -3929,7 +4499,22 @@ declare global {
         prototype: HTMLIonTextElement;
         new (): HTMLIonTextElement;
     };
+    interface HTMLIonTextareaElementEventMap {
+        "ionChange": TextareaChangeEventDetail;
+        "ionInput": TextareaInputEventDetail;
+        "ionStyle": StyleEventDetail;
+        "ionBlur": FocusEvent;
+        "ionFocus": FocusEvent;
+    }
     interface HTMLIonTextareaElement extends Components.IonTextarea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonTextareaElementEventMap>(type: K, listener: (this: HTMLIonTextareaElement, ev: IonTextareaCustomEvent<HTMLIonTextareaElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonTextareaElementEventMap>(type: K, listener: (this: HTMLIonTextareaElement, ev: IonTextareaCustomEvent<HTMLIonTextareaElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonTextareaElement: {
         prototype: HTMLIonTextareaElement;
@@ -3941,19 +4526,62 @@ declare global {
         prototype: HTMLIonThumbnailElement;
         new (): HTMLIonThumbnailElement;
     };
+    interface HTMLIonTitleElementEventMap {
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonTitleElement extends Components.IonTitle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonTitleElementEventMap>(type: K, listener: (this: HTMLIonTitleElement, ev: IonTitleCustomEvent<HTMLIonTitleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonTitleElementEventMap>(type: K, listener: (this: HTMLIonTitleElement, ev: IonTitleCustomEvent<HTMLIonTitleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonTitleElement: {
         prototype: HTMLIonTitleElement;
         new (): HTMLIonTitleElement;
     };
+    interface HTMLIonToastElementEventMap {
+        "ionToastDidPresent": void;
+        "ionToastWillPresent": void;
+        "ionToastWillDismiss": OverlayEventDetail;
+        "ionToastDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+    }
     interface HTMLIonToastElement extends Components.IonToast, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonToastElementEventMap>(type: K, listener: (this: HTMLIonToastElement, ev: IonToastCustomEvent<HTMLIonToastElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonToastElementEventMap>(type: K, listener: (this: HTMLIonToastElement, ev: IonToastCustomEvent<HTMLIonToastElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonToastElement: {
         prototype: HTMLIonToastElement;
         new (): HTMLIonToastElement;
     };
+    interface HTMLIonToggleElementEventMap {
+        "ionChange": ToggleChangeEventDetail;
+        "ionFocus": void;
+        "ionBlur": void;
+        "ionStyle": StyleEventDetail;
+    }
     interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonToggleElementEventMap>(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent<HTMLIonToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonToggleElementEventMap>(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent<HTMLIonToggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIonToggleElement: {
         prototype: HTMLIonToggleElement;
@@ -4971,7 +5599,7 @@ declare namespace LocalJSX {
          */
         "presentation"?: DatetimePresentation;
         /**
-          * If `true`, the datetime appears normal but is not interactive.
+          * If `true`, the datetime appears normal but the selected date cannot be changed.
          */
         "readonly"?: boolean;
         /**
@@ -6059,6 +6687,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the picker.
+         */
+        "disabled"?: boolean;
         /**
           * A list of options to be displayed in the picker
          */

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

@@ -180,6 +180,16 @@ export class AccordionGroup implements ComponentInterface {
     if (this.readonly) {
       this.readonlyChanged();
     }
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.valueChanged();
   }
 
   /**

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

@@ -1,8 +1,8 @@
 import { newSpecPage } from '@stencil/core/testing';
 
-import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
-import { Item } from '../../item/item.tsx';
-import { Accordion } from '../accordion.tsx';
+import { AccordionGroup } from '../../accordion-group/accordion-group';
+import { Item } from '../../item/item';
+import { Accordion } from '../accordion';
 
 it('should open correct accordions when accordion group value is set', async () => {
   const page = await newSpecPage({
@@ -25,7 +25,7 @@ it('should open correct accordions when accordion group value is set', async ()
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   accordions.forEach((accordion) => {
@@ -61,7 +61,7 @@ it('should open correct accordions when accordion value is set', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   accordions.forEach((accordion) => {
@@ -97,7 +97,7 @@ it('should open more than one accordion when multiple="true"', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   accordions.forEach((accordion) => {
@@ -133,7 +133,7 @@ it('should render with accordion open', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
@@ -162,7 +162,7 @@ it('should accept a string when multiple="true"', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
   const accordions = accordionGroup.querySelectorAll('ion-accordion');
 
   expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
@@ -183,8 +183,8 @@ it('should set default values if not provided', async () => {
     `,
   });
 
-  const accordionGroup = page.body.querySelector('ion-accordion-group');
-  const accordion = accordionGroup.querySelector('ion-accordion');
+  const accordionGroup = page.body.querySelector('ion-accordion-group')!;
+  const accordion = accordionGroup.querySelector('ion-accordion')!;
 
   /**
    * ID is determined via an auto incrementing counter

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

@@ -58,19 +58,6 @@ $action-sheet-ios-title-font-weight:                              400 !default;
 /// @prop - Font weight of the action sheet title when it has a sub title
 $action-sheet-ios-title-with-sub-title-font-weight:               600 !default;
 
-/// @prop - Border width of the action sheet title
-$action-sheet-ios-title-border-width:                             $hairlines-width !default;
-
-/// @prop - Border style of the action sheet title
-$action-sheet-ios-title-border-style:                             solid !default;
-
-/// @prop - Border color alpha of the action sheet title
-$action-sheet-ios-title-border-color-alpha:                       .08 !default;
-
-/// @prop - Border color of the action sheet title
-$action-sheet-ios-title-border-color:                             rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default;
-
-
 // Action Sheet Subtitle
 // --------------------------------------------------
 
@@ -129,9 +116,6 @@ $action-sheet-ios-button-background-selected:                     var(--ion-colo
 /// @prop - Destructive text color of the action sheet button
 $action-sheet-ios-button-destructive-text-color:                  ion-color(danger, base) !default;
 
-/// @prop - Background color of the action sheet cancel button
-$action-sheet-ios-button-cancel-background:                       $background-color !default;
-
 /// @prop - Font weight of the action sheet cancel button
 $action-sheet-ios-button-cancel-font-weight:                      600 !default;
 

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

@@ -84,9 +84,6 @@ $action-sheet-md-button-padding-bottom:                 $action-sheet-md-button-
 /// @prop - Padding start of the action sheet button
 $action-sheet-md-button-padding-start:                  $action-sheet-md-button-padding-end !default;
 
-/// @prop - Background color of the action sheet button
-$action-sheet-md-button-background:                     transparent !default;
-
 // Action Sheet Icon
 // --------------------------------------------------
 
@@ -104,6 +101,3 @@ $action-sheet-md-icon-margin-bottom:                    0 !default;
 
 /// @prop - Margin start of the icon in the action sheet button
 $action-sheet-md-icon-margin-start:                     0 !default;
-
-/// @prop - Color of the icon in the action sheet button
-$action-sheet-md-icon-color:                            $action-sheet-md-title-color !default;

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

@@ -128,8 +128,8 @@
   height: 100%;
 
   /* Fallback for browsers that do not support dvh */
-  max-height: 100vh;
-  max-height: 100dvh;
+  max-height: calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
+  max-height: calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));
 }
 
 .action-sheet-group {
@@ -142,8 +142,22 @@
   background: var(--background);
 }
 
-.action-sheet-group::-webkit-scrollbar {
-  display: none;
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .action-sheet-group::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .action-sheet-group-cancel {

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

@@ -337,6 +337,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   render() {

core/src/components/action-sheet/test/basic/action-sheet.e2e.ts

@@ -100,3 +100,69 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) =>
     });
   });
 });
+
+/**
+ * This behavior needs to be tested in both modes but does not vary
+ * across directions due to the component only applying safe area
+ * to the top and bottom
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('action-sheet: basic'), () => {
+    test.describe('safe area', () => {
+      test('should have padding added by the safe area', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/27777',
+        });
+        await page.setContent(
+          `
+          <style>
+            :root {
+              --ion-safe-area-top: 60px;
+              --ion-safe-area-bottom: 40px;
+            }
+          </style>
+
+          <ion-action-sheet></ion-action-sheet>
+
+          <script>
+            const actionSheet = document.querySelector('ion-action-sheet');
+            actionSheet.header = 'Header';
+            actionSheet.subHeader = 'Sub Header';
+            actionSheet.buttons = [
+              'Add Reaction',
+              'Copy Text',
+              'Share Text',
+              'Copy Link to Message',
+              'Remind Me',
+              'Pin File',
+              'Star File',
+              'Mark Unread',
+              'Mark Read',
+              'Edit Title',
+              'Erase Title',
+              'Save Image',
+              'Copy Image',
+              'Erase Image',
+              'Delete File',
+              {
+                text: 'Cancel',
+                role: 'cancel'
+              },
+            ];
+          </script>
+        `,
+          config
+        );
+
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+        const actionSheet = page.locator('ion-action-sheet');
+
+        await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
+        await ionActionSheetDidPresent.next();
+
+        await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-safe-area`));
+      });
+    });
+  });
+});

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

@@ -7,10 +7,17 @@ describe('action sheet: htmlAttributes inheritance', () => {
   it('should correctly inherit attributes on host', async () => {
     const page = await newSpecPage({
       components: [ActionSheet],
-      template: () => <ion-action-sheet htmlAttributes={{ 'data-testid': 'basic-action-sheet' }}></ion-action-sheet>,
+      template: () => (
+        <ion-action-sheet
+          htmlAttributes={{
+            'data-testid': 'basic-action-sheet',
+          }}
+          overlayIndex={1}
+        ></ion-action-sheet>
+      ),
     });
 
-    const actionSheet = page.body.querySelector('ion-action-sheet');
+    const actionSheet = page.body.querySelector('ion-action-sheet')!;
 
     await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
   });

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

@@ -105,6 +105,17 @@
   &::-ms-clear {
     display: none;
   }
+
+  &::-webkit-date-and-time-value {
+    /**
+     * The -webkit-date-and-time-value pseudo element is used 
+     * to style the date/time input on iOS/Mobile Safari.
+     * To avoid layout shift between an empty state and a selected state,
+     * we set the height `18px` to match the native input height for 
+     * date/time inputs on iOS/Mobile Safari.
+     */
+    height: 18px;
+  }
 }
 
 

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

@@ -52,11 +52,20 @@
 }
 
 .alert-message {
-  max-height: $alert-md-content-max-height;
-
   font-size: $alert-md-message-font-size;
 }
 
+/**
+ * MD Alerts on tablets can expand vertically up to
+ * a total maximum height. We only want to set a max-height
+ * on mobile phones.
+ */
+@include mobile-viewport() {
+  .alert-message {
+    max-height: $alert-md-content-max-height;
+  }
+}
+
 .alert-message:empty {
   @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
 }
@@ -102,14 +111,24 @@
 .alert-checkbox-group {
   position: relative;
 
-  max-height: $alert-md-content-max-height;
-
   border-top: $alert-md-list-border-top;
   border-bottom: $alert-md-list-border-bottom;
 
   overflow: auto;
 }
 
+/**
+ * MD Alerts on tablets can expand vertically up to
+ * a total maximum height. We only want to set a max-height
+ * on mobile phones.
+ */
+@include mobile-viewport() {
+  .alert-radio-group,
+  .alert-checkbox-group {
+    max-height: $alert-md-content-max-height;
+  }
+}
+
 .alert-tappable {
   position: relative;
 
@@ -282,3 +301,14 @@
 .alert-button-inner {
   justify-content: $alert-md-button-group-justify-content;
 }
+
+/**
+ * MD alerts should scale up to 560px x 560px
+ * on tablet dimensions.
+ */
+@include tablet-viewport() {
+  :host {
+    --max-width: #{$alert-md-max-width-tablet};
+    --max-height: #{$alert-md-max-height-tablet};
+  }
+}

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

@@ -10,6 +10,20 @@ $alert-md-font-size:                          dynamic-font(14px) !default;
 /// @prop - Max width of the alert
 $alert-md-max-width:                          280px !default;
 
+/// @prop - Max width of the alert on a tablet
+/**
+ * Large display requirements for MD Alert:
+ * 1. Maintain a minimum of 48px distance from the leading and
+ * trailing edges of the screen. (48px * 2 = 96px)
+ * 2. The width can increase up to 560px.
+ * 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;
+
+/// @prop - Max width of the alert on a tablet
+$alert-md-max-height-tablet:                          min(calc(100vh - 96px), 560px) !default;
+
 /// @prop - Border radius of the alert
 $alert-md-border-radius:                      4px !default;
 
@@ -157,9 +171,6 @@ $alert-md-button-text-color:                  ion-color(primary, base) !default;
 /// @prop - Background color of the alert button
 $alert-md-button-background-color:            transparent !default;
 
-/// @prop - Background color of the alert activated button
-$alert-md-button-background-color-activated:  ion-color(primary, base, .04) !default;
-
 /// @prop - Border radius of the alert button
 $alert-md-button-border-radius:               2px !default;
 

core/src/components/alert/alert.scss

@@ -84,17 +84,59 @@
   font-weight: normal;
 }
 
-.alert-message {
+/**
+ * Alert has a maximum height in scenarios
+ * such as the MD alert on tablet devices.
+ * As a result, we need to make sure the inner
+ * containers can scroll otherwise content
+ * may be cut off.
+ */
+.alert-message,
+.alert-input-group {
   box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
 
-.alert-checkbox-group::-webkit-scrollbar,
-.alert-radio-group::-webkit-scrollbar,
-.alert-message::-webkit-scrollbar {
-  display: none;
+.alert-checkbox-label,
+.alert-radio-label {
+  /**
+   * This allows long words to wrap to the next line
+   * instead of flowing outside of the container.
+   *
+   * The "anywhere" keyword should be used instead
+   * of the "break-word" keyword since the parent
+   * container is using flexbox. Flex relies on min-content and
+   * max-content intrinsic sizes to structure the layout. Flex will
+   * wrap content only until it reaches its min-content intrinsic size
+   * which in this case is equal to the longest word in this container.
+   * "break-word" does not shrink the min-content intrinsic size
+   * of the flex item which causes the long word to still overflow.
+   * "anywhere" on the other hand does shrink the min-content
+   * intrinsic size which allows the long word to wrap to the next line.
+   */
+  overflow-wrap: anywhere;
+}
+
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .alert-checkbox-group::-webkit-scrollbar,
+  .alert-radio-group::-webkit-scrollbar,
+  .alert-message::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .alert-input {

core/src/components/alert/alert.tsx

@@ -376,6 +376,17 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
+
+    /**
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
+     */
+    this.triggerChanged();
   }
 
   /**

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

@@ -28,6 +28,67 @@ const testAria = async (
   expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
 };
 
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('alert: text wrapping'), () => {
+    test('should break on words and white spaces for radios', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
+      });
+      await page.setContent(
+        `
+        <ion-alert header='Text Wrapping'></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'radio', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
+            { type: 'radio', value: 'b', label: 'These are separate words that should wrap' }
+          ];
+        </script>
+      `,
+        config
+      );
+
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const alert = page.locator('ion-alert');
+
+      await alert.evaluate((el: HTMLIonAlertElement) => el.present());
+      await ionAlertDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`));
+    });
+    test('should break on words and white spaces for checkboxes', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
+      });
+      await page.setContent(
+        `
+        <ion-alert header='Text Wrapping'></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'checkbox', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
+            { type: 'checkbox', value: 'b', label: 'These are separate words that should wrap' }
+          ];
+        </script>
+      `,
+        config
+      );
+
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const alert = page.locator('ion-alert');
+
+      await alert.evaluate((el: HTMLIonAlertElement) => el.present());
+      await ionAlertDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`));
+    });
+  });
+});
+
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('alert: a11y'), () => {
     test.beforeEach(async ({ page }) => {

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

@@ -1,6 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
-import { Alert } from '../alert';
+
 import { config } from '../../../global/config';
+import { Alert } from '../alert';
 
 describe('alert: custom html', () => {
   it('should not allow for custom html by default', async () => {
@@ -9,7 +10,7 @@ describe('alert: custom html', () => {
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
     });
 
-    const content = page.body.querySelector('.alert-message');
+    const content = page.body.querySelector('.alert-message')!;
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });
@@ -21,7 +22,7 @@ describe('alert: custom html', () => {
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
     });
 
-    const content = page.body.querySelector('.alert-message');
+    const content = page.body.querySelector('.alert-message')!;
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).not.toBe(null);
   });
@@ -33,7 +34,7 @@ describe('alert: custom html', () => {
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
     });
 
-    const content = page.body.querySelector('.alert-message');
+    const content = page.body.querySelector('.alert-message')!;
     expect(content.textContent).toContain('Custom Text');
     expect(content.querySelector('button.custom-html')).toBe(null);
   });

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

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('alert: rendering - tablet'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setViewportSize(Viewports.tablet.portrait);
+      await page.goto('/src/components/alert/test/basic', config);
+    });
+
+    test('should expand width and height on larger displays with text', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#longMessage');
+      const alert = page.locator('ion-alert');
+
+      await button.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-text'));
+    });
+
+    test('should expand width and height on larger displays with checkboxes', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#checkbox');
+      const alert = page.locator('ion-alert');
+
+      await button.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-checkboxes'));
+    });
+
+    test('should expand width and height on larger displays with radios', async ({ page }) => {
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const button = page.locator('#radio');
+      const alert = page.locator('ion-alert');
+
+      await button.click();
+      await ionAlertDidPresent.next();
+
+      await expect(alert).toHaveScreenshot(screenshot('alert-tablet-radios'));
+    });
+  });
+});

core/src/components/app/app.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
+import type { FocusVisibleUtility } from '@utils/focus-visible';
 import { isPlatform } from '@utils/platform';
 
 import { config } from '../../global/config';
@@ -10,7 +11,7 @@ import { getIonMode } from '../../global/ionic-global';
   styleUrl: 'app.scss',
 })
 export class App implements ComponentInterface {
-  private focusVisible?: any; // TODO(FW-2832): type
+  private focusVisible?: FocusVisibleUtility;
 
   @Element() el!: HTMLElement;
 

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

@@ -1,7 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 
-import { Breadcrumb } from '../../breadcrumb/breadcrumb.tsx';
-import { Breadcrumbs } from '../breadcrumbs.tsx';
+import { Breadcrumb } from '../../breadcrumb/breadcrumb';
+import { Breadcrumbs } from '../breadcrumbs';
 
 it('should correctly provide the collapsed breadcrumbs in the event payload', async () => {
   const page = await newSpecPage({
@@ -18,8 +18,8 @@ it('should correctly provide the collapsed breadcrumbs in the event payload', as
   });
 
   const onCollapsedClick = jest.fn((ev) => ev);
-  const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
-  const breadcrumb = page.body.querySelectorAll('ion-breadcrumb');
+  const breadcrumbs = page.body.querySelector('ion-breadcrumbs')!;
+  const breadcrumb = page.body.querySelectorAll('ion-breadcrumb')!;
 
   breadcrumbs.addEventListener('ionCollapsedClick', onCollapsedClick);
 
@@ -46,8 +46,8 @@ it('should exclude the separator from narrators', async () => {
     `,
   });
 
-  const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type');
-  const separator = firstBreadcrumb.shadowRoot.querySelector('[part="separator"]');
+  const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type')!;
+  const separator = firstBreadcrumb.shadowRoot!.querySelector('[part="separator"]')!;
 
   expect(separator.getAttribute('aria-hidden')).toBe('true');
 });
@@ -62,7 +62,7 @@ it('should have color attribute', async () => {
     `,
   });
 
-  const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
+  const breadcrumbs = page.body.querySelector('ion-breadcrumbs')!;
 
   expect(breadcrumbs.hasAttribute('color')).toBe(true);
 });

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

@@ -41,28 +41,6 @@ $button-ios-font-size:                                dynamic-font-max(16px, 3)
 /// @prop - Font weight of the button text
 $button-ios-font-weight:                              500 !default;
 
-/// @prop - Background color of the button
-$button-ios-background-color:                         ion-color(primary, base) !default;
-
-/// @prop - Text color of the button
-$button-ios-text-color:                               ion-color(primary, contrast) !default;
-
-/// @prop - Background color of the activated button
-$button-ios-background-color-activated:               ion-color(primary, shade) !default;
-
-/// @prop - Opacity of the activated button
-$button-ios-opacity-activated:                        1 !default;
-
-/// @prop - Opacity of the button on hover
-$button-ios-opacity-hover:                            .8 !default;
-
-/// @prop - Background color of the focused button
-$button-ios-background-color-focused:                 ion-color(primary, shade) !default;
-
-/// @prop - Opacity of the button when disabled
-$button-ios-opacity-disabled:                         .5 !default;
-
-
 // iOS Large Button
 // --------------------------------------------------
 
@@ -129,30 +107,6 @@ $button-ios-outline-border-style:                     solid !default;
 /// @prop - Border radius of the outline button
 $button-ios-outline-border-radius:                    $button-ios-border-radius !default;
 
-/// @prop - Border color of the outline button
-$button-ios-outline-border-color:                     $button-ios-background-color !default;
-
-/// @prop - Text color of the outline button
-$button-ios-outline-text-color:                       $button-ios-background-color !default;
-
-/// @prop - Background color of the outline button
-$button-ios-outline-background-color:                 transparent !default;
-
-/// @prop - Text color of the activated outline button
-$button-ios-outline-text-color-activated:             ion-color(primary, contrast) !default;
-
-/// @prop - Background color of the activated outline button
-$button-ios-outline-background-color-activated:       $button-ios-background-color !default;
-
-/// @prop - Opacity of the activated outline button
-$button-ios-outline-opacity-activated:                1 !default;
-
-/// @prop - Background color alpha of the focused outline button
-$button-ios-outline-background-color-alpha-focused:   .25 !default;
-
-/// @prop - Background color of the focused outline button
-$button-ios-outline-background-color-focused:         ion-color(primary, base, $button-ios-outline-background-color-alpha-focused) !default;
-
 // iOS Clear Button
 // --------------------------------------------------
 
@@ -167,30 +121,12 @@ $button-ios-clear-font-weight:                        normal !default;
 /// @prop - Letter spacing of the button
 $button-ios-letter-spacing:                           0 !default;
 
-/// @prop - Border color of the clear button
-$button-ios-clear-border-color:                       transparent !default;
-
-/// @prop - Background color of the clear button
-$button-ios-clear-background-color:                   transparent !default;
-
-/// @prop - Background color of the activated clear button
-$button-ios-clear-background-color-activated:         $button-ios-clear-background-color !default;
-
 /// @prop - Opacity of the activated clear button
 $button-ios-clear-opacity-activated:                  .4 !default;
 
-/// @prop - Text color of the clear button on hover
-$button-ios-clear-text-color-hover:                   $button-ios-background-color !default;
-
 /// @prop - Opacity of the clear button on hover
 $button-ios-clear-opacity-hover:                      .6 !default;
 
-/// @prop - Background color alpha of the focused clear button
-$button-ios-clear-background-color-alpha-focused:     .25 !default;
-
-/// @prop - Background color of the focused clear button
-$button-ios-clear-background-color-focused:           ion-color(primary, base, $button-ios-clear-background-color-alpha-focused) !default;
-
 // iOS Round Button
 // --------------------------------------------------
 

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

@@ -47,18 +47,9 @@ $button-md-letter-spacing:                              0.06em;
 /// @prop - Box shadow of the button
 $button-md-box-shadow:                                  0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 
-/// @prop - Opacity of the activated button
-$button-md-opacity-activated:                           1 !default;
-
 /// @prop - Box shadow of the activated button
 $button-md-box-shadow-activated:                        0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
 
-/// @prop - Background color of the ripple on the button
-$button-md-ripple-background-color:                     $text-color-step-400 !default;
-
-/// @prop - Opacity of the button when disabled
-$button-md-opacity-disabled:                           .5 !default;
-
 // Material Design Large Button
 // --------------------------------------------------
 
@@ -102,82 +93,6 @@ $button-md-small-min-height:                            2.1em !default;
 /// @prop - Font size of the small button
 $button-md-small-font-size:                             dynamic-font(13px) !default;
 
-
-// Material Design Outline Button
-// --------------------------------------------------
-
-/// @prop - Border width of the outline button
-$button-md-outline-border-width:                        1px !default;
-
-/// @prop - Border style of the outline button
-$button-md-outline-border-style:                        solid !default;
-
-/// @prop - Background color of the outline button
-$button-md-outline-background-color:                    transparent !default;
-
-/// @prop - Box shadow of the outline button
-$button-md-outline-box-shadow:                          none !default;
-
-/// @prop - Background color alpha of the outline button on hover
-$button-md-outline-background-color-alpha-hover:        .1 !default;
-
-/// @prop - Background color of the outline button on hover
-$button-md-outline-background-color-hover:              rgba($text-color-rgb, $button-md-outline-background-color-alpha-hover) !default;
-
-/// @prop - Background color of the activated outline button
-$button-md-outline-background-color-activated:          transparent !default;
-
-/// @prop - Box shadow of the activated outline button
-$button-md-outline-box-shadow-activated:                none !default;
-
-/// @prop - Opacity of the activated outline button
-$button-md-outline-opacity-activated:                   1 !default;
-
-/// @prop - Background color alpha of the focused outline button
-$button-md-outline-background-color-alpha-focused:      .1 !default;
-
-/// @prop - Background color of the focused outline button
-$button-md-outline-background-color-focused:            ion-color(primary, base, $button-md-outline-background-color-alpha-focused) !default;
-
-// Material Design Clear Button
-// --------------------------------------------------
-
-/// @prop - Border color of the clear button
-$button-md-clear-border-color:                          transparent !default;
-
-/// @prop - Background color of the clear button
-$button-md-clear-background-color:                      transparent !default;
-
-/// @prop - Box shadow of the clear button
-$button-md-clear-box-shadow:                            none !default;
-
-/// @prop - Opacity of the clear button
-$button-md-clear-opacity:                               1 !default;
-
-/// @prop - Background color alpha of the activated clear button
-$button-md-clear-background-color-alpha-activated:      .1 !default;
-
-/// @prop - Background color of the activated clear button
-$button-md-clear-background-color-activated:            rgba($text-color-rgb, $button-md-clear-background-color-alpha-activated) !default;
-
-/// @prop - Box shadow of the activated clear button
-$button-md-clear-box-shadow-activated:                  $button-md-clear-box-shadow !default;
-
-/// @prop - Background color alpha of the clear button on hover
-$button-md-clear-background-color-alpha-hover:          .1 !default;
-
-/// @prop - Background color of the clear button on hover
-$button-md-clear-background-color-hover:                rgba($text-color-rgb, $button-md-clear-background-color-alpha-hover) !default;
-
-/// @prop - Background color of the ripple on the clear button
-$button-md-clear-ripple-background-color:               $text-color-step-600 !default;
-
-/// @props - Background color of the focused clear button
-$button-md-clear-background-color-alpha-focused:        .1 !default;
-
-/// @props - Background color of the focused clear button
-$button-md-clear-background-color-focused:              ion-color(primary, base, $button-md-clear-background-color-alpha-focused) !default;
-
 // Material Design Round Button
 // --------------------------------------------------
 

core/src/components/button/test/form-reference/button.spec.ts

@@ -1,4 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing';
+
 import { Button } from '../../button';
 
 describe('Button: Hidden Form Button', () => {
@@ -15,8 +16,7 @@ describe('Button: Hidden Form Button', () => {
       return page.body.querySelectorAll('form button');
     };
 
-    const form = page.body.querySelectorAll('form');
-    const button = page.body.querySelector('ion-button');
+    const button = page.body.querySelector('ion-button')!;
 
     await page.waitForChanges();
 

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

@@ -8,21 +8,12 @@
 /// @prop - Background color of the checkbox when off
 $checkbox-ios-background-color-off:       $item-ios-background !default;
 
-/// @prop - Background color of the checkbox when on
-$checkbox-ios-background-color-on:        ion-color(primary, base) !default;
-
-/// @prop - Background color of focus indicator for checkbox when focused
-$checkbox-ios-background-color-focused:   ion-color(primary, tint) !default;
-
 /// @prop - Size of the checkbox icon
 $checkbox-ios-icon-size:                  dynamic-font-max(26px, 2.538) !default;
 
 /// @prop - Border color of the checkbox icon when off
 $checkbox-ios-icon-border-color-off:      rgba($text-color-rgb, 0.23) !default;
 
-/// @prop - Border color of the checkbox icon when on
-$checkbox-ios-icon-border-color-on:       $checkbox-ios-background-color-on !default;
-
 /// @prop - Border width of the checkbox icon
 $checkbox-ios-icon-border-width:          dynamic-font(1px) !default;
 
@@ -32,27 +23,6 @@ $checkbox-ios-icon-border-style:          solid !default;
 /// @prop - Border radius of the checkbox icon
 $checkbox-ios-icon-border-radius:         50% !default;
 
-/// @prop - Width of the checkmark border in the checkbox
-$checkbox-ios-checkmark-border-width:     1px !default;
-
-/// @prop - Style of the checkmark border in the checkbox
-$checkbox-ios-checkmark-border-style:     solid !default;
-
-/// @prop - Color of the checkmark border in the checkbox
-$checkbox-ios-checkmark-border-color:     ion-color(primary, contrast) !default;
-
-/// @prop - Top of the checkmark in the checkbox
-$checkbox-ios-checkmark-top:              calc($checkbox-ios-icon-size / 6) !default;
-
-/// @prop - Start of the checkmark in the checkbox
-$checkbox-ios-checkmark-start:            calc($checkbox-ios-icon-size / 3 + 1px) !default;
-
-/// @prop - Width of the checkmark in the checkbox
-$checkbox-ios-checkmark-width:            calc($checkbox-ios-icon-size / 6 + 1px) !default;
-
-/// @prop - Height of the checkmark in the checkbox
-$checkbox-ios-checkmark-height:           calc($checkbox-ios-icon-size * 0.5) !default;
-
 /// @prop - Opacity of the disabled checkbox
 $checkbox-ios-disabled-opacity:           $form-control-ios-disabled-opacity !default;
 

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

@@ -10,41 +10,20 @@ $checkbox-md-disabled-opacity:           $form-control-md-disabled-opacity !defa
 /// @prop - Background color of the checkbox icon when off
 $checkbox-md-icon-background-color-off:  $item-md-background !default;
 
-/// @prop - Background color of focus indicator for checkbox when focused
-$checkbox-md-background-color-focused:   ion-color(primary, tint) !default;
-
-/// @prop - Background color of the checkbox icon when on
-$checkbox-md-icon-background-color-on:   ion-color(primary, base) !default;
-
 /// @prop - Size of the checkbox icon
 /// The icon size does not use dynamic font
 /// because it does not scale in native.
 $checkbox-md-icon-size:                  18px !default;
 
-/// @prop - Width of the checkbox icon checkmark
-$checkbox-md-icon-checkmark-width:       2px !default;
-
-/// @prop - Style of the checkbox icon checkmark
-$checkbox-md-icon-checkmark-style:       solid !default;
-
-/// @prop - Color of the checkbox icon checkmark
-$checkbox-md-icon-checkmark-color:       ion-color(primary, contrast) !default;
-
 /// @prop - Border width of the checkbox icon
 $checkbox-md-icon-border-width:          2px !default;
 
 /// @prop - Border style of the checkbox icon
 $checkbox-md-icon-border-style:          solid !default;
 
-/// @prop - Border radius of the checkbox icon
-$checkbox-md-icon-border-radius:         2px !default;
-
 /// @prop - Border color of the checkbox icon when off
 $checkbox-md-icon-border-color-off:      rgb($text-color-rgb, 0.60) !default;
 
-/// @prop - Border color of the checkbox icon when on
-$checkbox-md-icon-border-color-on:       ion-color(primary, base) !default;
-
 /// @prop - Transition duration of the checkbox
 $checkbox-md-transition-duration:        180ms !default;
 

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

@@ -11,7 +11,7 @@ describe('ion-checkbox: disabled', () => {
       `,
     });
 
-    const checkbox = page.body.querySelector('ion-checkbox');
+    const checkbox = page.body.querySelector('ion-checkbox')!;
 
     expect(checkbox.checked).toBe(false);
 

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

@@ -7,15 +7,6 @@ $datetime-ios-border-color:         0.55px solid $background-color-step-200 !def
 /// @prop - Padding for content
 $datetime-ios-padding:              16px !default;
 
-/// @prop - Height of the time picker
-$datetime-ios-time-height:          28px !default;
-
-/// @prop - Width of the time picker
-$datetime-ios-time-width:           68px !default;
-
-/// @prop - Border radius of the time picker
-$datetime-ios-time-border-radius:   8px !default;
-
 /// @prop - The font size at which layouts may change to accommodate Dynamic Type
 $datetime-dynamic-font-breakpoint: 24px !default;
 

core/src/components/datetime/datetime.md.scss

@@ -136,7 +136,3 @@
 
   justify-content: flex-end;
 }
-
-:host .datetime-view-buttons ion-button {
-  color: $text-color-step-200;
-}

core/src/components/datetime/datetime.scss

@@ -1,4 +1,4 @@
-@import "./datetime.vars";
+@import "../../themes/ionic.globals";
 
 // Datetime
 // --------------------------------------------------
@@ -185,13 +185,37 @@ ion-picker-column-internal {
   display: none;
 }
 
-:host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
+
+  .calendar-days-of-week,
+  .datetime-time {
+    opacity: 0.4;
+  }
 }
 
-:host(.datetime-disabled) {
-  opacity: 0.4;
+:host(.datetime-readonly) {
+  pointer-events: none;
+
+  /**
+   * Allow user to navigate months
+   * while in readonly mode
+   */
+  .calendar-action-buttons,
+  .calendar-body,
+  .datetime-year {
+    pointer-events: initial;
+  }
+
+  /**
+   * Disabled buttons should have full opacity
+   * in readonly mode
+   */
+
+  .calendar-day[disabled]:not(.calendar-day-constrained),
+  .datetime-action-buttons ion-button[disabled] {
+    opacity: 1;
+  }
 }
 
 /**

core/src/components/datetime/datetime.tsx

@@ -172,7 +172,7 @@ export class Datetime implements ComponentInterface {
   @Prop() disabled = false;
 
   /**
-   * If `true`, the datetime appears normal but is not interactive.
+   * If `true`, the datetime appears normal but the selected date cannot be changed.
    */
   @Prop() readonly = false;
 
@@ -599,6 +599,14 @@ export class Datetime implements ComponentInterface {
   };
 
   private setActiveParts = (parts: DatetimeParts, removeDate = false) => {
+    /** if the datetime component is in readonly mode,
+     * allow browsing of the calendar without changing
+     * the set value
+     */
+    if (this.readonly) {
+      return;
+    }
+
     const { multiple, minParts, maxParts, activeParts } = this;
 
     /**
@@ -1124,7 +1132,7 @@ export class Datetime implements ComponentInterface {
    * so we need to re-init behavior with the new elements.
    */
   componentDidRender() {
-    const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel } = this;
+    const { presentation, prevPresentation, calendarBodyRef, minParts, preferWheel, forceRenderDate } = this;
 
     /**
      * TODO(FW-2165)
@@ -1142,7 +1150,20 @@ export class Datetime implements ComponentInterface {
     const hasCalendarGrid = !preferWheel && ['date-time', 'time-date', 'date'].includes(presentation);
     if (minParts !== undefined && hasCalendarGrid && calendarBodyRef) {
       const workingMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(1)');
-      if (workingMonth) {
+      /**
+       * We need to make sure the datetime is not in the process
+       * of scrolling to a new datetime value if the value
+       * is updated programmatically.
+       * Otherwise, the datetime will appear to not scroll at all because
+       * we are resetting the scroll position to the center of the view.
+       * Prior to the datetime's value being updated programmatically,
+       * the calendarBodyRef is scrolled such that the middle month is centered
+       * in the view. The below code updates the scroll position so the middle
+       * month is also centered in the view. Since the scroll position did not change,
+       * the scroll callback in this file does not fire,
+       * and the resolveForceDateScrolling promise never resolves.
+       */
+      if (workingMonth && forceRenderDate === undefined) {
         calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
       }
     }
@@ -1414,7 +1435,13 @@ export class Datetime implements ComponentInterface {
    */
 
   private renderFooter() {
-    const { showDefaultButtons, showClearButton } = this;
+    const { disabled, readonly, showDefaultButtons, showClearButton } = this;
+    /**
+     * The cancel, clear, and confirm buttons
+     * should not be interactive if the datetime
+     * is disabled or readonly.
+     */
+    const isButtonDisabled = disabled || readonly;
     const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
     if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
       return;
@@ -1444,18 +1471,33 @@ export class Datetime implements ComponentInterface {
             <slot name="buttons">
               <ion-buttons>
                 {showDefaultButtons && (
-                  <ion-button id="cancel-button" color={this.color} onClick={() => this.cancel(true)}>
+                  <ion-button
+                    id="cancel-button"
+                    color={this.color}
+                    onClick={() => this.cancel(true)}
+                    disabled={isButtonDisabled}
+                  >
                     {this.cancelText}
                   </ion-button>
                 )}
                 <div class="datetime-action-buttons-container">
                   {showClearButton && (
-                    <ion-button id="clear-button" color={this.color} onClick={() => clearButtonClick()}>
+                    <ion-button
+                      id="clear-button"
+                      color={this.color}
+                      onClick={() => clearButtonClick()}
+                      disabled={isButtonDisabled}
+                    >
                       {this.clearText}
                     </ion-button>
                   )}
                   {showDefaultButtons && (
-                    <ion-button id="confirm-button" color={this.color} onClick={() => this.confirm(true)}>
+                    <ion-button
+                      id="confirm-button"
+                      color={this.color}
+                      onClick={() => this.confirm(true)}
+                      disabled={isButtonDisabled}
+                    >
                       {this.doneText}
                     </ion-button>
                   )}
@@ -1496,7 +1538,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderCombinedDatePickerColumn() {
-    const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1575,6 +1617,7 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="date-column"
         color={this.color}
+        disabled={disabled}
         items={items}
         value={todayString}
         onIonChange={(ev: CustomEvent) => {
@@ -1686,7 +1729,7 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1694,6 +1737,7 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="day-column"
         color={this.color}
+        disabled={disabled}
         items={days}
         value={(workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined}
         onIonChange={(ev: CustomEvent) => {
@@ -1730,7 +1774,7 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1738,6 +1782,7 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="month-column"
         color={this.color}
+        disabled={disabled}
         items={months}
         value={workingParts.month}
         onIonChange={(ev: CustomEvent) => {
@@ -1773,7 +1818,7 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
 
     const activePart = this.getActivePartsWithFallback();
 
@@ -1781,6 +1826,7 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         class="year-column"
         color={this.color}
+        disabled={disabled}
         items={years}
         value={workingParts.year}
         onIonChange={(ev: CustomEvent) => {
@@ -1846,7 +1892,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderHourPickerColumn(hoursData: PickerColumnItem[]) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (hoursData.length === 0) return [];
 
     const activePart = this.getActivePartsWithFallback();
@@ -1854,6 +1900,7 @@ export class Datetime implements ComponentInterface {
     return (
       <ion-picker-column-internal
         color={this.color}
+        disabled={disabled}
         value={activePart.hour}
         items={hoursData}
         numericInput
@@ -1874,7 +1921,7 @@ export class Datetime implements ComponentInterface {
     );
   }
   private renderMinutePickerColumn(minutesData: PickerColumnItem[]) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (minutesData.length === 0) return [];
 
     const activePart = this.getActivePartsWithFallback();
@@ -1882,6 +1929,7 @@ export class Datetime implements ComponentInterface {
     return (
       <ion-picker-column-internal
         color={this.color}
+        disabled={disabled}
         value={activePart.minute}
         items={minutesData}
         numericInput
@@ -1902,7 +1950,7 @@ export class Datetime implements ComponentInterface {
     );
   }
   private renderDayPeriodPickerColumn(dayPeriodData: PickerColumnItem[]) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (dayPeriodData.length === 0) {
       return [];
     }
@@ -1914,6 +1962,7 @@ export class Datetime implements ComponentInterface {
       <ion-picker-column-internal
         style={isDayPeriodRTL ? { order: '-1' } : {}}
         color={this.color}
+        disabled={disabled}
         value={activePart.ampm}
         items={dayPeriodData}
         onIonChange={(ev: CustomEvent) => {
@@ -1957,11 +2006,12 @@ export class Datetime implements ComponentInterface {
    */
 
   private renderCalendarHeader(mode: Mode) {
+    const { disabled } = this;
     const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
     const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
 
-    const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
-    const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
+    const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
+    const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
 
     // don't use the inheritAttributes util because it removes dir from the host, and we still need that
     const hostDir = this.el.getAttribute('dir') || undefined;
@@ -1977,6 +2027,7 @@ export class Datetime implements ComponentInterface {
               aria-label="Show year picker"
               detail={false}
               lines="none"
+              disabled={disabled}
               onClick={() => {
                 this.toggleMonthAndYearView();
                 /**
@@ -2043,23 +2094,28 @@ export class Datetime implements ComponentInterface {
     );
   }
   private renderMonth(month: number, year: number) {
+    const { disabled, readonly } = this;
+
     const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
     const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
     const isCalMonthDisabled = !yearAllowed || !monthAllowed;
-    const swipeDisabled = isMonthDisabled(
-      {
-        month,
-        year,
-        day: null,
-      },
-      {
-        // The day is not used when checking if a month is disabled.
-        // Users should be able to access the min or max month, even if the
-        // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
-        minParts: { ...this.minParts, day: null },
-        maxParts: { ...this.maxParts, day: null },
-      }
-    );
+    const isDatetimeDisabled = disabled || readonly;
+    const swipeDisabled =
+      disabled ||
+      isMonthDisabled(
+        {
+          month,
+          year,
+          day: null,
+        },
+        {
+          // The day is not used when checking if a month is disabled.
+          // Users should be able to access the min or max month, even if the
+          // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
+          minParts: { ...this.minParts, day: null },
+          maxParts: { ...this.maxParts, day: null },
+        }
+      );
     // The working month should never have swipe disabled.
     // Otherwise the CSS scroll snap will not work and the user
     // can free-scroll the calendar.
@@ -2083,7 +2139,14 @@ export class Datetime implements ComponentInterface {
             const { el, highlightedDates, isDateEnabled, multiple } = this;
             const referenceParts = { month, day, year };
             const isCalendarPadding = day === null;
-            const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(
+            const {
+              isActive,
+              isToday,
+              ariaLabel,
+              ariaSelected,
+              disabled: isDayDisabled,
+              text,
+            } = getCalendarDayState(
               this.locale,
               referenceParts,
               this.activeParts,
@@ -2094,7 +2157,8 @@ export class Datetime implements ComponentInterface {
             );
 
             const dateIsoString = convertDataToISO(referenceParts);
-            let isCalDayDisabled = isCalMonthDisabled || disabled;
+
+            let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
 
             if (!isCalDayDisabled && isDateEnabled !== undefined) {
               try {
@@ -2113,6 +2177,15 @@ export class Datetime implements ComponentInterface {
               }
             }
 
+            /**
+             * Some days are constrained through max & min or allowed dates
+             * and also disabled because the component is readonly or disabled.
+             * These need to be displayed differently.
+             */
+            const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
+
+            const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
+
             let dateStyle: DatetimeHighlightStyle | undefined = undefined;
 
             /**
@@ -2158,11 +2231,12 @@ export class Datetime implements ComponentInterface {
                   data-year={year}
                   data-index={index}
                   data-day-of-week={dayOfWeek}
-                  disabled={isCalDayDisabled}
+                  disabled={isButtonDisabled}
                   class={{
                     'calendar-day-padding': isCalendarPadding,
                     'calendar-day': true,
                     'calendar-day-active': isActive,
+                    'calendar-day-constrained': isCalDayConstrained,
                     'calendar-day-today': isToday,
                   }}
                   part={dateParts}
@@ -2237,7 +2311,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderTimeOverlay() {
-    const { hourCycle, isTimePopoverOpen, locale } = this;
+    const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
     const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
 
@@ -2251,6 +2325,7 @@ export class Datetime implements ComponentInterface {
         part={`time-button${isTimePopoverOpen ? ' active' : ''}`}
         aria-expanded="false"
         aria-haspopup="true"
+        disabled={disabled}
         onClick={async (ev) => {
           const { popoverRef } = this;
 

core/src/components/datetime/datetime.vars.scss

@@ -1,10 +0,0 @@
-@import "../../themes/ionic.globals";
-
-// Datetime
-// --------------------------------------------------
-
-/// @prop - Minimum width of the datetime
-$datetime-min-width:             16px !default;
-
-/// @prop - Minimum height of the datetime
-$datetime-min-height:            1.2em !default;

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

@@ -30,3 +30,102 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: a11y'), () => {
+    test('datetime should be keyboard navigable', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
+    `,
+        config
+      );
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+
+      await page.keyboard.press(tabKey);
+      await expect(prevButton).toBeFocused();
+
+      await page.keyboard.press(tabKey);
+      await expect(nextButton).toBeFocused();
+
+      // check value before & after selecting via keyboard
+      const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+      expect(initialValue).toBe('2022-02-22T16:30:00');
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('ArrowLeft');
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+
+      await page.waitForChanges();
+
+      const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+      expect(newValue).not.toBe('2022-02-22T16:30:00');
+    });
+
+    test('buttons should be keyboard navigable', async ({ page }) => {
+      await page.setContent(
+        `
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+
+      const clearButton = page.locator('#clear-button button');
+      const selectedDay = page.locator('.calendar-day-active');
+
+      await expect(selectedDay).toHaveText('22');
+
+      await clearButton.focus();
+      await page.waitForChanges();
+
+      await expect(clearButton).toBeFocused();
+      await page.keyboard.press('Enter');
+
+      await page.waitForChanges();
+
+      await expect(selectedDay).toHaveCount(0);
+    });
+
+    test('should navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(
+        `
+
+        <ion-datetime value="2022-02-28"></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+
+      await calendarBody.focus();
+      await page.waitForChanges();
+
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+
+      await expect(calendarMonthYear).toHaveText('March 2022');
+    });
+  });
+});

core/src/components/datetime/test/comparison.spec.ts

@@ -1,21 +1,22 @@
+import type { DatetimeParts } from '../datetime-interface';
 import { isSameDay, isBefore, isAfter } from '../utils/comparison';
 
 describe('isSameDay()', () => {
   it('should return correct results for month, day, and year', () => {
-    const reference = { month: 1, day: 1, year: 2021 };
+    const reference: DatetimeParts = { month: 1, day: 1, year: 2021 };
 
     expect(isSameDay(reference, { month: 1, day: 1, year: 2021 })).toEqual(true);
     expect(isSameDay(reference, { month: 2, day: 1, year: 2021 })).toEqual(false);
     expect(isSameDay(reference, { month: 1, day: 2, year: 2021 })).toEqual(false);
     expect(isSameDay(reference, { month: 1, day: 1, year: 2022 })).toEqual(false);
     expect(isSameDay(reference, { month: 0, day: 0, year: 0 })).toEqual(false);
-    expect(isSameDay(reference, { month: null, day: null, year: null })).toEqual(false);
+    expect(isSameDay(reference, { month: null, day: null, year: null } as any)).toEqual(false);
   });
 });
 
 describe('isBefore()', () => {
   it('should return correct results for month, day, and year', () => {
-    const reference = { month: 1, day: 1, year: 2021 };
+    const reference: DatetimeParts = { month: 1, day: 1, year: 2021 };
 
     expect(isBefore(reference, { month: 1, day: 1, year: 2021 })).toEqual(false);
     expect(isBefore(reference, { month: 2, day: 1, year: 2021 })).toEqual(true);
@@ -23,13 +24,13 @@ describe('isBefore()', () => {
     expect(isBefore(reference, { month: 1, day: 1, year: 2022 })).toEqual(true);
     expect(isBefore(reference, { month: 1, day: 1, year: 2020 })).toEqual(false);
     expect(isBefore(reference, { month: 0, day: 0, year: 0 })).toEqual(false);
-    expect(isBefore(reference, { month: null, day: null, year: null })).toEqual(false);
+    expect(isBefore(reference, { month: null, day: null, year: null } as any)).toEqual(false);
   });
 });
 
 describe('isAfter()', () => {
   it('should return correct results for month, day, and year', () => {
-    const reference = { month: 2, day: 2, year: 2021 };
+    const reference: DatetimeParts = { month: 2, day: 2, year: 2021 };
 
     expect(isAfter(reference, { month: 2, day: 2, year: 2021 })).toEqual(false);
     expect(isAfter(reference, { month: 2, day: 1, year: 2021 })).toEqual(true);
@@ -42,6 +43,6 @@ describe('isAfter()', () => {
      * 2021 > undefined === false
      * 2021 > null === true
      */
-    expect(isAfter(reference, { month: null, day: null, year: null })).toEqual(true);
+    expect(isAfter(reference, { month: null, day: null, year: null } as any)).toEqual(true);
   });
 });

core/src/components/datetime/test/data.spec.ts

@@ -1,3 +1,4 @@
+import type { DatetimeParts } from '../datetime-interface';
 import {
   generateMonths,
   getDaysOfWeek,
@@ -364,7 +365,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 19,
         minute: 50,
-      };
+      } as unknown as DatetimeParts;
 
       const minParts = {
         day: undefined,
@@ -372,7 +373,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 19,
         minute: 50,
-      };
+      } as unknown as DatetimeParts;
 
       const { hours } = generateTime('en-US', refValue, 'h23', minParts);
 
@@ -387,7 +388,7 @@ describe('generateTime()', () => {
           year: undefined,
           hour: 20,
           minute: 22,
-        };
+        } as unknown as DatetimeParts;
 
         const minParts = {
           day: undefined,
@@ -395,7 +396,7 @@ describe('generateTime()', () => {
           year: undefined,
           hour: 19,
           minute: 30,
-        };
+        } as unknown as DatetimeParts;
 
         const { hours, minutes } = generateTime('en-US', refValue, 'h23', minParts);
 
@@ -411,7 +412,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 20,
         minute: 30,
-      };
+      } as unknown as DatetimeParts;
 
       const minParts = {
         day: undefined,
@@ -419,7 +420,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 19,
         minute: 30,
-      };
+      } as unknown as DatetimeParts;
 
       const maxParts = {
         day: undefined,
@@ -427,7 +428,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 20,
         minute: 40,
-      };
+      } as unknown as DatetimeParts;
 
       const { hours } = generateTime('en-US', refValue, 'h23', minParts, maxParts);
 
@@ -441,7 +442,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 13,
         minute: 0,
-      };
+      } as unknown as DatetimeParts;
 
       const maxParts = {
         day: undefined,
@@ -449,7 +450,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 13,
         minute: 2,
-      };
+      } as unknown as DatetimeParts;
 
       const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
 
@@ -463,7 +464,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 12,
         minute: 0,
-      };
+      } as unknown as DatetimeParts;
 
       const maxParts = {
         day: undefined,
@@ -471,7 +472,7 @@ describe('generateTime()', () => {
         year: undefined,
         hour: 13,
         minute: 2,
-      };
+      } as unknown as DatetimeParts;
 
       const { minutes } = generateTime('en-US', refValue, 'h23', undefined, maxParts);
 
@@ -482,7 +483,7 @@ describe('generateTime()', () => {
 
 describe('getToday', () => {
   beforeAll(() => {
-    jest.useFakeTimers('modern');
+    jest.useFakeTimers();
     // System time is zero based, 1 = February
     jest.setSystemTime(new Date(2022, 1, 21, 18, 30));
   });

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

@@ -0,0 +1,103 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('datetime: disabled'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons disabled></ion-datetime>
+    `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-disabled`));
+    });
+
+    test('date should be disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+
+      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
+
+      await expect(febFirstButton).toBeDisabled();
+    });
+
+    test('month-year button should be disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear.locator('button')).toBeDisabled();
+    });
+
+    test('next and prev buttons should be disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `,
+        config
+      );
+
+      const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-of-type button');
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:last-of-type button');
+
+      await expect(prevMonthButton).toBeDisabled();
+      await expect(nextMonthButton).toBeDisabled();
+    });
+
+    test('clear button should be disabled', async ({ page }) => {
+      await page.setContent(
+        `
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+
+      const clearButton = page.locator('#clear-button button');
+
+      await expect(clearButton).toBeDisabled();
+    });
+
+    test('should not navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+
+      await calendarBody.focus();
+      await page.waitForChanges();
+
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+
+      await expect(calendarMonthYear).toHaveText('February 2022');
+    });
+  });
+});

core/src/components/datetime/test/disabled/datetime.spec.tsx

@@ -0,0 +1,39 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Datetime } from '../../../datetime/datetime';
+import { PickerColumnInternal } from '../../../picker-column-internal/picker-column-internal';
+import { PickerInternal } from '../../../picker-internal/picker-internal';
+
+describe('ion-datetime disabled', () => {
+  beforeEach(() => {
+    // IntersectionObserver isn't available in test environment
+    const mockIntersectionObserver = jest.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    global.IntersectionObserver = mockIntersectionObserver;
+  });
+
+  it('picker should be disabled in prefer wheel mode', async () => {
+    const page = await newSpecPage({
+      components: [Datetime, PickerColumnInternal, PickerInternal],
+      template: () => (
+        <ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
+      ),
+    });
+
+    await page.waitForChanges();
+
+    const datetime = page.body.querySelector('ion-datetime')!;
+    const columns = datetime.shadowRoot!.querySelectorAll('ion-picker-column-internal');
+
+    await expect(columns.length).toEqual(4);
+
+    columns.forEach((column) => {
+      expect(column.disabled).toBe(true);
+    });
+  });
+});

core/src/components/datetime/test/disabled/index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Datetime - Disabled</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Disabled</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Inline - Default Value</h2>
+            <ion-datetime id="inline-datetime-value" disabled value="2022-04-21T00:00:00"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inline</h2>
+            <ion-datetime
+              id="inline-datetime"
+              presentation="date"
+              disabled
+              show-default-buttons="true"
+              show-clear-button="true"
+              multiple="true"
+            ></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inline - No Default Value</h2>
+            <ion-datetime id="inline-datetime-no-value" disabled></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inline - Prefer Wheel</h2>
+            <ion-datetime id="inline-datetime-wheel" disabled prefer-wheel value="2022-04-21T00:00:00"></ion-datetime>
+          </div>
+        </div>
+      </ion-content>
+      <script>
+        const firstDatetime = document.querySelector('#inline-datetime');
+        firstDatetime.value = ['2023-08-03', '2023-08-13', '2023-08-29'];
+      </script>
+    </ion-app>
+  </body>
+</html>

core/src/components/datetime/test/format.spec.ts

@@ -1,3 +1,4 @@
+import type { DatetimeParts } from '../datetime-interface';
 import {
   generateDayAriaLabel,
   getMonthAndDay,
@@ -109,7 +110,7 @@ describe('getLocalizedDayPeriod', () => {
 
 describe('getLocalizedTime', () => {
   it('should localize the time to PM', () => {
-    const datetimeParts = {
+    const datetimeParts: DatetimeParts = {
       day: 1,
       month: 1,
       year: 2022,
@@ -121,7 +122,7 @@ describe('getLocalizedTime', () => {
   });
 
   it('should localize the time to AM', () => {
-    const datetimeParts = {
+    const datetimeParts: DatetimeParts = {
       day: 1,
       month: 1,
       year: 2022,
@@ -133,7 +134,7 @@ describe('getLocalizedTime', () => {
   });
 
   it('should avoid Chromium bug when using 12 hour time in a 24 hour locale', () => {
-    const datetimeParts = {
+    const datetimeParts: DatetimeParts = {
       day: 1,
       month: 1,
       year: 2022,
@@ -144,12 +145,12 @@ describe('getLocalizedTime', () => {
     expect(getLocalizedTime('en-GB', datetimeParts, 'h12')).toEqual('12:00 am');
   });
   it('should parse time-only values correctly', () => {
-    const datetimeParts = {
+    const datetimeParts: Partial<DatetimeParts> = {
       hour: 22,
       minute: 40,
     };
 
-    expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('10:40 PM');
-    expect(getLocalizedTime('en-US', datetimeParts, 'h23')).toEqual('22:40');
+    expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h12')).toEqual('10:40 PM');
+    expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h23')).toEqual('22:40');
   });
 });

core/src/components/datetime/test/manipulation.spec.ts

@@ -1,3 +1,4 @@
+import type { DatetimeParts } from '../datetime-interface';
 import {
   getPreviousYear,
   getNextYear,
@@ -103,31 +104,31 @@ describe('getInternalHourValue()', () => {
 
 describe('calculateHourFromAMPM()', () => {
   it('should correctly convert from AM to PM', () => {
-    expect(calculateHourFromAMPM({ hour: 12, ampm: 'am' }, 'pm')).toEqual(12);
-    expect(calculateHourFromAMPM({ hour: 1, ampm: 'am' }, 'pm')).toEqual(13);
-    expect(calculateHourFromAMPM({ hour: 2, ampm: 'am' }, 'pm')).toEqual(14);
-    expect(calculateHourFromAMPM({ hour: 3, ampm: 'am' }, 'pm')).toEqual(15);
-    expect(calculateHourFromAMPM({ hour: 4, ampm: 'am' }, 'pm')).toEqual(16);
-    expect(calculateHourFromAMPM({ hour: 5, ampm: 'am' }, 'pm')).toEqual(17);
-    expect(calculateHourFromAMPM({ hour: 6, ampm: 'am' }, 'pm')).toEqual(18);
-    expect(calculateHourFromAMPM({ hour: 7, ampm: 'am' }, 'pm')).toEqual(19);
-    expect(calculateHourFromAMPM({ hour: 8, ampm: 'am' }, 'pm')).toEqual(20);
-    expect(calculateHourFromAMPM({ hour: 9, ampm: 'am' }, 'pm')).toEqual(21);
-    expect(calculateHourFromAMPM({ hour: 10, ampm: 'am' }, 'pm')).toEqual(22);
-    expect(calculateHourFromAMPM({ hour: 11, ampm: 'am' }, 'pm')).toEqual(23);
+    expect(calculateHourFromAMPM({ hour: 12, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(12);
+    expect(calculateHourFromAMPM({ hour: 1, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(13);
+    expect(calculateHourFromAMPM({ hour: 2, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(14);
+    expect(calculateHourFromAMPM({ hour: 3, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(15);
+    expect(calculateHourFromAMPM({ hour: 4, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(16);
+    expect(calculateHourFromAMPM({ hour: 5, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(17);
+    expect(calculateHourFromAMPM({ hour: 6, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(18);
+    expect(calculateHourFromAMPM({ hour: 7, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(19);
+    expect(calculateHourFromAMPM({ hour: 8, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(20);
+    expect(calculateHourFromAMPM({ hour: 9, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(21);
+    expect(calculateHourFromAMPM({ hour: 10, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(22);
+    expect(calculateHourFromAMPM({ hour: 11, ampm: 'am' } as DatetimeParts, 'pm')).toEqual(23);
 
-    expect(calculateHourFromAMPM({ hour: 13, ampm: 'pm' }, 'am')).toEqual(1);
-    expect(calculateHourFromAMPM({ hour: 14, ampm: 'pm' }, 'am')).toEqual(2);
-    expect(calculateHourFromAMPM({ hour: 15, ampm: 'pm' }, 'am')).toEqual(3);
-    expect(calculateHourFromAMPM({ hour: 16, ampm: 'pm' }, 'am')).toEqual(4);
-    expect(calculateHourFromAMPM({ hour: 17, ampm: 'pm' }, 'am')).toEqual(5);
-    expect(calculateHourFromAMPM({ hour: 18, ampm: 'pm' }, 'am')).toEqual(6);
-    expect(calculateHourFromAMPM({ hour: 19, ampm: 'pm' }, 'am')).toEqual(7);
-    expect(calculateHourFromAMPM({ hour: 20, ampm: 'pm' }, 'am')).toEqual(8);
-    expect(calculateHourFromAMPM({ hour: 21, ampm: 'pm' }, 'am')).toEqual(9);
-    expect(calculateHourFromAMPM({ hour: 22, ampm: 'pm' }, 'am')).toEqual(10);
-    expect(calculateHourFromAMPM({ hour: 23, ampm: 'pm' }, 'am')).toEqual(11);
-    expect(calculateHourFromAMPM({ hour: 0, ampm: 'pm' }, 'am')).toEqual(12);
+    expect(calculateHourFromAMPM({ hour: 13, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(1);
+    expect(calculateHourFromAMPM({ hour: 14, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(2);
+    expect(calculateHourFromAMPM({ hour: 15, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(3);
+    expect(calculateHourFromAMPM({ hour: 16, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(4);
+    expect(calculateHourFromAMPM({ hour: 17, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(5);
+    expect(calculateHourFromAMPM({ hour: 18, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(6);
+    expect(calculateHourFromAMPM({ hour: 19, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(7);
+    expect(calculateHourFromAMPM({ hour: 20, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(8);
+    expect(calculateHourFromAMPM({ hour: 21, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(9);
+    expect(calculateHourFromAMPM({ hour: 22, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(10);
+    expect(calculateHourFromAMPM({ hour: 23, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(11);
+    expect(calculateHourFromAMPM({ hour: 0, ampm: 'pm' } as DatetimeParts, 'am')).toEqual(12);
   });
 });
 

core/src/components/datetime/test/parse.spec.ts

@@ -42,7 +42,8 @@ describe('parseDate()', () => {
    * See https://github.com/ionic-team/ionic-framework/commit/3fb4caf21ffac12f765c4c80bf1850e05d211c6a
    */
   it('should return the correct time zone offset', () => {
-    expect(parseDate('2022-12-15T13:47:30-02:00').tzOffset).toEqual(undefined);
+    // Casting as any since `tzOffset` does not exist on DatetimeParts
+    expect((parseDate('2022-12-15T13:47:30-02:00') as any)?.tzOffset).toEqual(undefined);
   });
 
   it('should parse an array of dates', () => {
@@ -162,8 +163,8 @@ describe('parseMinParts()', () => {
       minute: 4,
       hour: 2,
     };
-    expect(parseMinParts(undefined, today)).toEqual(undefined);
-    expect(parseMinParts(null, today)).toEqual(undefined);
+    expect(parseMinParts(undefined as any, today)).toEqual(undefined);
+    expect(parseMinParts(null as any, today)).toEqual(undefined);
     expect(parseMinParts('foo', today)).toEqual(undefined);
   });
 });
@@ -225,8 +226,8 @@ describe('parseMaxParts()', () => {
       minute: 4,
       hour: 2,
     };
-    expect(parseMaxParts(undefined, today)).toEqual(undefined);
-    expect(parseMaxParts(null, today)).toEqual(undefined);
+    expect(parseMaxParts(undefined as any, today)).toEqual(undefined);
+    expect(parseMaxParts(null as any, today)).toEqual(undefined);
     expect(parseMaxParts('foo', today)).toEqual(undefined);
   });
 });

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

@@ -0,0 +1,167 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('datetime: readonly'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons readonly></ion-datetime>
+    `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-readonly`));
+    });
+
+    test('date should be disabled', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-28" readonly></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+
+      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
+
+      await expect(febFirstButton).toBeDisabled();
+    });
+
+    test('should navigate months via month-year button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `,
+        config
+      );
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+
+      await calendarMonthYear.click();
+      await page.waitForChanges();
+      await page.locator('.month-column .picker-item[data-value="3"]').click();
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+
+    test('should open picker using keyboard navigation', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `,
+        config
+      );
+
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
+      await expect(marchPickerItem).toBeVisible();
+    });
+
+    test('should view next month via next button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `,
+        config
+      );
+
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button');
+      await nextMonthButton.click();
+      await page.waitForChanges();
+
+      await expect(calendarMonthYear).toHaveText('March 2022');
+      await expect(ionChange).not.toHaveReceivedEvent();
+    });
+
+    test('should not change value when the month is changed via keyboard navigation', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
+    `,
+        config
+      );
+
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+
+      await page.keyboard.press(tabKey);
+      await expect(prevButton).toBeFocused();
+
+      await page.keyboard.press(tabKey);
+      await expect(nextButton).toBeFocused();
+
+      // check value before & after selecting via keyboard
+      const initialValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+      expect(initialValue).toBe('2022-02-22T16:30:00');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('ArrowLeft');
+      await page.waitForChanges();
+
+      await expect(calendarMonthYear).toHaveText('January 2022');
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      const newValue = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+      // should not have changed
+      expect(newValue).toBe('2022-02-22T16:30:00');
+    });
+
+    test('clear button should be disabled', async ({ page }) => {
+      await page.setContent(
+        `
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" readonly></ion-datetime>
+    `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+
+      const clearButton = page.locator('#clear-button button');
+
+      await expect(clearButton).toBeDisabled();
+    });
+  });
+});

core/src/components/datetime/test/readonly/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Datetime - Readonly</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Readonly</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Inline</h2>
+            <ion-datetime
+              id="inline-datetime"
+              presentation="date"
+              readonly
+              show-default-buttons="true"
+              show-clear-button="true"
+              multiple="true"
+            ></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inline - No Default Value</h2>
+            <ion-datetime id="inline-datetime-no-value" readonly></ion-datetime>
+          </div>
+        </div>
+      </ion-content>
+      <script>
+        const firstDatetime = document.querySelector('#inline-datetime');
+        firstDatetime.value = ['2023-08-03', '2023-08-13', '2023-08-29'];
+
+        firstDatetime.isDateEnabled = (dateString) => {
+          const date = new Date(dateString);
+          const utcDay = date.getUTCDay();
+
+          /**
+           * Date will be enabled if it is not
+           * Sunday or Saturday
+           */
+          return utcDay !== 0 && utcDay !== 6;
+        };
+      </script>
+    </ion-app>
+  </body>
+</html>

core/src/components/datetime/test/state.spec.ts

@@ -84,13 +84,13 @@ describe('isPrevMonthDisabled()', () => {
     // Date month and year is the same as min month and year
     expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { month: 1, year: 2021, day: null })).toEqual(true);
     // Date year is the same as min year (month not provided)
-    expect(isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(
-      true
-    );
+    expect(
+      isPrevMonthDisabled({ month: 1, year: 2021, day: null }, { year: 2021, month: null, day: null } as any)
+    ).toEqual(true);
     // Date year is less than the min year (month not provided)
-    expect(isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { year: 2022, month: null, day: null })).toEqual(
-      true
-    );
+    expect(
+      isPrevMonthDisabled({ month: 5, year: 2021, day: null }, { year: 2022, month: null, day: null } as any)
+    ).toEqual(true);
 
     // Date is above the maximum bounds and the previous month does not does not fall within the
     // min-max range.
@@ -118,12 +118,12 @@ describe('isPrevMonthDisabled()', () => {
     expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null })).toEqual(false);
     // Date year is the same as min year,
     // but can navigate to a previous month without reducing the year.
-    expect(isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(
-      false
-    );
-    expect(isPrevMonthDisabled({ month: 2, year: 2021, day: null }, { year: 2021, month: null, day: null })).toEqual(
-      false
-    );
+    expect(
+      isPrevMonthDisabled({ month: 12, year: 2021, day: null }, { year: 2021, month: null, day: null } as any)
+    ).toEqual(false);
+    expect(
+      isPrevMonthDisabled({ month: 2, year: 2021, day: null }, { year: 2021, month: null, day: null } as any)
+    ).toEqual(false);
   });
 });
 

core/src/components/fab-button/fab-button.md.vars.scss

@@ -12,9 +12,6 @@ $fab-md-box-shadow-activated:                     0 7px 8px -4px rgba(0, 0, 0, .
 /// @prop - Background color of the button
 $fab-md-background-color:                         ion-color(primary, base) !default;
 
-/// @prop - Background color of the activated button
-$fab-md-background-color-activated:               ion-color(primary, contrast) !default;
-
 /// @prop - Text color of the button
 $fab-md-text-color:                               ion-color(primary, contrast) !default;
 

core/src/components/fab/fab.scss

@@ -23,15 +23,29 @@
 }
 
 :host(.fab-horizontal-start) {
-  @include position-horizontal(
-    calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)), null
-  );
+  /* stylelint-disable */
+  @include ltr() {
+    left: calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px));
+  }
+
+  @include rtl() {
+    right: calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px));
+    left: unset;
+  }
+  /* stylelint-enable */
 }
 
 :host(.fab-horizontal-end) {
-  @include position-horizontal(
-    null, calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px))
-  );
+  /* stylelint-disable */
+  @include ltr() {
+    right: calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px));
+  }
+
+  @include rtl() {
+    left: calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px));
+    right: unset;
+  }
+  /* stylelint-enable */
 }
 
 

core/src/components/fab/test/safe-area/fab.e2e.ts

@@ -0,0 +1,72 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('fab: safe area'), () => {
+    test('should ignore document direction in safe area positioning for start-positioned fab', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="start">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `,
+        config
+      );
+
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-start'));
+    });
+
+    test('should ignore document direction in safe area positioning for end-positioned fab', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            :root {
+              --ion-safe-area-left: 40px;
+              --ion-safe-area-right: 20px;
+            }
+          </style>
+
+          <ion-content>
+            <ion-fab vertical="center" horizontal="end">
+              <ion-fab-button>
+                <ion-icon name="add"></ion-icon>
+              </ion-fab-button>
+            </ion-fab>
+          </ion-content>
+        `,
+        config
+      );
+
+      /**
+       * We need to capture the entire page to check the fab's position,
+       * but we don't need much extra white space.
+       */
+      await page.setViewportSize({
+        width: 200,
+        height: 200,
+      });
+
+      await expect(page).toHaveScreenshot(screenshot('fab-safe-area-horizontal-end'));
+    });
+  });
+});

core/src/components/header/header.ios.scss

@@ -130,7 +130,10 @@
  * 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
  *
  * We use opacity: 0 to avoid a layout shift.
+ * We target both the attribute and the class in the event that the attribute
+ * is not reflected on the host in some frameworks.
  */
-ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) {
+ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"], 
+~ ion-content ion-header.header-collapse-condense) {
   opacity: 0;
 }