refactor(tabs): export correct interface

.github/workflows/stencil-nightly.yml

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

CHANGELOG.md

@@ -3,45 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
-
-
-### Bug Fixes
-
-* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
-* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
-* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838)
-* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
-
-
-
-
-
-# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
-
-
-### Features
-
-* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
-
-
-
-
-
-## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
-
-
-### Bug Fixes
-
-* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
-* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
-* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
-* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
-
-
-
-
-
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
 
 

core/CHANGELOG.md

@@ -3,44 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
-
-
-### Bug Fixes
-
-* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
-* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
-* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
-
-
-
-
-
-# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
-
-
-### Features
-
-* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
-
-
-
-
-
-## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
-
-
-### Bug Fixes
-
-* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
-* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
-* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
-* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
-
-
-
-
-
 ## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
 
 

core/api.txt

@@ -394,7 +394,6 @@ ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,fal
 ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,firstDayOfWeek,number,0,false,false
-ion-datetime,prop,formatOptions,undefined | { date?: DateTimeFormatOptions | undefined; time?: DateTimeFormatOptions | undefined; },undefined,false,false
 ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
 ion-datetime,prop,hourCycle,"h11" | "h12" | "h23" | "h24" | undefined,undefined,false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
@@ -1363,8 +1362,8 @@ ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
-ion-tabs,event,ionTabsDidChange,{ tab: string; },false
-ion-tabs,event,ionTabsWillChange,{ tab: string; },false
+ion-tabs,event,ionTabsDidChange,TabsEventDetail,false
+ion-tabs,event,ionTabsWillChange,TabsEventDetail,false
 
 ion-text,shadow
 ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true

core/package-lock.json

@@ -1,32 +1,32 @@
 {
   "name": "@ionic/core",
-  "version": "7.7.1",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.7.1",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.12.0",
+        "@stencil/core": "^4.10.0",
         "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
         "@axe-core/playwright": "^4.8.4",
         "@capacitor/core": "^5.6.0",
-        "@capacitor/haptics": "^5.0.7",
-        "@capacitor/keyboard": "^5.0.8",
-        "@capacitor/status-bar": "^5.0.7",
+        "@capacitor/haptics": "^5.0.6",
+        "@capacitor/keyboard": "^5.0.7",
+        "@capacitor/status-bar": "^5.0.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@playwright/test": "^1.39.0",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.8.4",
+        "@stencil/angular-output-target": "^0.8.3",
         "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.9",
+        "@stencil/sass": "^3.0.8",
         "@stencil/vue-output-target": "^0.8.7",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
@@ -643,27 +643,27 @@
       }
     },
     "node_modules/@capacitor/haptics": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
-      "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
+      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
-      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
+      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
-      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
+      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
@@ -1816,18 +1816,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
-      "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
+      "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
-      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1846,9 +1846,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
-      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
+      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0",
@@ -11333,23 +11333,23 @@
       }
     },
     "@capacitor/haptics": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz",
-      "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.6.tgz",
+      "integrity": "sha512-UrMcR7p2X10ql4VLlowUuH/VckTeu0lj+RQpekxox14uxDmu5AGIFDK/iDTi8W6QZkxTJRZK6sbCjgwYgNJ7Pw==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
-      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.7.tgz",
+      "integrity": "sha512-+6lW8z2nXTM2NOG7D7pOasCfIGicz26+EeDRXIj5AtJibbjwtE1Q5GIY+qGHgzpmwOF0qmcrGJBz4zagDwUapg==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/status-bar": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz",
-      "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
+      "integrity": "sha512-7od8CxsBnot1XMK3IeOkproFL4hgoKoWAc3pwUvmDOkQsXoxwQm4SR9mLwQavv1XfxtHbFV9Ukd7FwMxOPSViw==",
       "dev": true,
       "requires": {}
     },
@@ -12177,16 +12177,16 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.4.tgz",
-      "integrity": "sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.8.3.tgz",
+      "integrity": "sha512-I/QO1sEx09WWUaNlA30EBhlXYftOSfSBTwYBwC65qlpHDIlD5WU3EAtKhU5IphfwhxnD63kvOoU1YvTUXFHNng==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
-      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg=="
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -12196,9 +12196,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
-      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.8.tgz",
+      "integrity": "sha512-QJUG4Dr/b3wSizViwQXorrk1PJzxOsKkq5hSqtUHc3NNG3iomC4DQFYGeu15yNfoCDBtt4qkyHSCynsekQ8F6A==",
       "dev": true,
       "requires": {}
     },

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.7.1",
+  "version": "7.6.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,24 +31,24 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.12.0",
+    "@stencil/core": "^4.10.0",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.8.4",
     "@capacitor/core": "^5.6.0",
-    "@capacitor/haptics": "^5.0.7",
-    "@capacitor/keyboard": "^5.0.8",
-    "@capacitor/status-bar": "^5.0.7",
+    "@capacitor/haptics": "^5.0.6",
+    "@capacitor/keyboard": "^5.0.7",
+    "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.8.4",
+    "@stencil/angular-output-target": "^0.8.3",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.9",
+    "@stencil/sass": "^3.0.8",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",

core/src/components.d.ts

@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeFormatOptions, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -38,6 +38,7 @@ import { SegmentButtonLayout } from "./components/segment-button/segment-button-
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+import { TabsEventDetail } from "./components/tabs/tabs-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -51,7 +52,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeFormatOptions, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -74,6 +75,7 @@ export { SegmentButtonLayout } from "./components/segment-button/segment-button-
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+export { TabsEventDetail } from "./components/tabs/tabs-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -858,10 +860,6 @@ export namespace Components {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek": number;
-        /**
-          * Formatting options, separated by date and time.
-         */
-        "formatOptions"?: DatetimeFormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -4507,8 +4505,8 @@ declare global {
     };
     interface HTMLIonTabsElementEventMap {
         "ionNavWillLoad": void;
-        "ionTabsWillChange": { tab: string };
-        "ionTabsDidChange": { tab: string };
+        "ionTabsWillChange": TabsEventDetail;
+        "ionTabsDidChange": TabsEventDetail;
     }
     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;
@@ -5545,10 +5543,6 @@ declare namespace LocalJSX {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek"?: number;
-        /**
-          * Formatting options, separated by date and time.
-         */
-        "formatOptions"?: DatetimeFormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -7719,11 +7713,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the navigation has finished transitioning to a new component.
          */
-        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
+        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
         /**
           * Emitted when the navigation is about to transition to a new component.
          */
-        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
+        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
         "useRouter"?: boolean;
     }
     interface IonText {

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

@@ -23,22 +23,28 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-input label="Name" type="text"></ion-input>
+                <ion-label>Name</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Email" type="email"></ion-input>
+                <ion-label>Email</ion-label>
+                <ion-input type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Phone" type="tel"></ion-input>
+                <ion-label>Phone</ion-label>
+                <ion-input type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Extension" type="text"></ion-input>
+                <ion-label>Extension</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Country" type="text"></ion-input>
+                <ion-label>Country</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="City/Province" type="text"></ion-input>
+                <ion-label>City/Province</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -50,19 +56,24 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-input label="Address 1" type="text"></ion-input>
+                <ion-label>Address 1</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Address 2" type="email"></ion-input>
+                <ion-label>Address 2</ion-label>
+                <ion-input type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="City" type="tel"></ion-input>
+                <ion-label>City</ion-label>
+                <ion-input type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="State" type="text"></ion-input>
+                <ion-label>State</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Zip Code" type="text"></ion-input>
+                <ion-label>Zip Code</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -74,19 +85,24 @@
 
             <ion-list slot="content">
               <ion-item>
-                <ion-input label="Address 1" id="address1" type="text"></ion-input>
+                <ion-label>Address 1</ion-label>
+                <ion-input id="address1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Address 2" type="email"></ion-input>
+                <ion-label>Address 2</ion-label>
+                <ion-input type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="City" type="tel"></ion-input>
+                <ion-label>City</ion-label>
+                <ion-input type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input lable="State" type="text"></ion-input>
+                <ion-label>State</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-input label="Zip Code" type="text"></ion-input>
+                <ion-label>Zip Code</ion-label>
+                <ion-input type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>

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

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
+import type { AnimationBuilder, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
   header?: string;
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
 
 export interface ActionSheetButton<T = any> {
   text?: string;
-  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
+  role?: 'cancel' | 'destructive' | 'selected' | string;
   icon?: string;
   cssClass?: string | string[];
   id?: string;

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

@@ -26,24 +26,7 @@
 // ---------------------------------------------------
 
 .action-sheet-wrapper {
-  @include margin(var(--ion-safe-area-top, 0), auto, null, auto);
-  /**
-   * Bottom safe area is applied as padding so that it impacts the bounding box.
-   * When the action sheet is shown/hidden, this element is transformed by translating
-   * 100% of its height. This translation needs to include the bottom safe area
-   * otherwise part of the action sheet will still be visible at the end of
-   * the show transition.
-   *
-   * If this code is changed, reviewers should verify that the action
-   * sheet still translates out of the viewport completely when the bottom
-   * safe area is a positive value.
-   */
-  @include padding(null, null, var(--ion-safe-area-bottom, 0), null);
-
-  // Using content-box to increase the height of the action sheet
-  // wrapper by the bottom padding (safe area) to animate the
-  // action sheet completely off the screen when safe area is set.
-  box-sizing: content-box;
+  @include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
 }
 
 // iOS Action Sheet Container

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

@@ -1,4 +1,4 @@
-import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface AlertOptions {
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
 
 export interface AlertButton {
   text: string;
-  role?: LiteralUnion<'cancel' | 'destructive', string>;
+  role?: 'cancel' | 'destructive' | string;
   cssClass?: string | string[];
   id?: string;
   htmlAttributes?: { [key: string]: any };

core/src/components/app/app.tsx

@@ -1,8 +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 { shoudUseCloseWatcher } from '@utils/hardware-back-button';
-import { printIonWarning } from '@utils/logging';
 import { isPlatform } from '@utils/platform';
 
 import { config } from '../../global/config';
@@ -36,20 +34,9 @@ export class App implements ComponentInterface {
           import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
         }
         const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-        const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
-        if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
+        if (config.getBoolean('hardwareBackButton', isHybrid)) {
           hardwareBackButtonModule.startHardwareBackButton();
         } else {
-          /**
-           * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
-           * then the close watcher will not be used.
-           */
-          if (shoudUseCloseWatcher()) {
-            printIonWarning(
-              'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
-            );
-          }
-
           hardwareBackButtonModule.blockHardwareBackButton();
         }
         if (typeof (window as any) !== 'undefined') {

core/src/components/datetime-button/test/buttons/index.html

@@ -18,7 +18,7 @@
       </ion-header>
       <ion-content>
         <ion-item>
-          <ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
+          <ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
           <ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
             <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
             <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>

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

@@ -23,20 +23,16 @@ export type TitleSelectedDatesFormatter = (selectedDates: string[]) => string;
 
 export type DatetimeHighlightStyle =
   | {
-    textColor: string;
-    backgroundColor?: string;
-  }
+      textColor: string;
+      backgroundColor?: string;
+    }
   | {
-    textColor?: string;
-    backgroundColor: string;
-  };
+      textColor?: string;
+      backgroundColor: string;
+    };
 
 export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
 
 export type DatetimeHighlightCallback = (dateIsoString: string) => DatetimeHighlightStyle | undefined;
 
 export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';
-
-export type TimeFormatOptions = { time: Intl.DateTimeFormatOptions };
-export type DateFormatOptions = { date: Intl.DateTimeFormatOptions };
-export type DatetimeFormatOptions = TimeFormatOptions | DateFormatOptions;

core/src/components/datetime/datetime.tsx

@@ -20,9 +20,6 @@ import type {
   DatetimeHighlightStyle,
   DatetimeHighlightCallback,
   DatetimeHourCycle,
-  DatetimeFormatOptions,
-  TimeFormatOptions,
-  DateFormatOptions,
 } from './datetime-interface';
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
 import {
@@ -174,16 +171,6 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() disabled = false;
 
-  /**
-   * Formatting options, separated by date and time.
-   */
-  @Prop() formatOptions?: DatetimeFormatOptions;
-
-  @Watch('formatOptions')
-  protected formatOptionsChanged() {
-    this.errorIfTimeZoneProvided();
-  }
-
   /**
    * If `true`, the datetime appears normal but the selected date cannot be changed.
    */
@@ -1370,7 +1357,7 @@ export class Datetime implements ComponentInterface {
   };
 
   componentWillLoad() {
-    const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
+    const { el, highlightedDates, multiple, presentation, preferWheel } = this;
 
     if (multiple) {
       if (presentation !== 'date') {
@@ -1395,10 +1382,6 @@ export class Datetime implements ComponentInterface {
       }
     }
 
-    if (formatOptions) {
-      this.errorIfTimeZoneProvided();
-    }
-
     const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
     const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
     const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -1426,28 +1409,6 @@ export class Datetime implements ComponentInterface {
     this.emitStyle();
   }
 
-  get timeFormatOptions(): Intl.DateTimeFormatOptions | undefined {
-    const timeOptions = (this.formatOptions as TimeFormatOptions)?.time;
-    return timeOptions;
-  }
-
-  get dateFormatOptions(): Intl.DateTimeFormatOptions | undefined {
-    const dateOptions = (this.formatOptions as DateFormatOptions)?.date;
-    return dateOptions;
-  }
-
-  private errorIfTimeZoneProvided() {
-    const { timeFormatOptions, dateFormatOptions } = this;
-    if (
-      dateFormatOptions?.timeZone ||
-      timeFormatOptions?.timeZone ||
-      dateFormatOptions?.timeZoneName ||
-      timeFormatOptions?.timeZoneName
-    ) {
-      printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".');
-    }
-  }
-
   private emitStyle() {
     this.ionStyle.emit({
       interactive: true,
@@ -2393,16 +2354,10 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderTimeOverlay() {
-    const { disabled, timeFormatOptions, hourCycle, isTimePopoverOpen, locale } = this;
+    const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
     const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
 
-    const timeButtonFormatOptions = timeFormatOptions || {
-      hour: 'numeric',
-      minute: 'numeric',
-      computedHourCycle,
-    };
-
     return [
       <div class="time-header">{this.renderTimeLabel()}</div>,
       <button
@@ -2434,7 +2389,7 @@ export class Datetime implements ComponentInterface {
           }
         }}
       >
-        {getLocalizedTime(locale, activePart, computedHourCycle, timeButtonFormatOptions)}
+        {getLocalizedTime(locale, activePart, computedHourCycle)}
       </button>,
       <ion-popover
         alignment="center"
@@ -2469,7 +2424,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private getHeaderSelectedDateText() {
-    const { activeParts, dateFormatOptions, multiple, titleSelectedDatesFormatter } = this;
+    const { activeParts, multiple, titleSelectedDatesFormatter } = this;
     const isArray = Array.isArray(activeParts);
 
     let headerText: string;
@@ -2483,15 +2438,8 @@ export class Datetime implements ComponentInterface {
         }
       }
     } else {
-      const headerFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptions ?? {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-        timeZone: 'UTC',
-      };
-
       // for exactly 1 day selected (multiple set or not), show a formatted version of that
-      headerText = getMonthAndDay(this.locale, this.getActivePartsWithFallback(), headerFormatOptions);
+      headerText = getMonthAndDay(this.locale, this.getActivePartsWithFallback());
     }
 
     return headerText;

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

@@ -565,89 +565,3 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
-
-/**
- * This behavior does not differ across
- * directions.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('datetime: formatOptions'), () => {
-    test('should format header and time button', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-datetime value="2022-02-01T16:30:00">
-          <span slot="title">Select Date</span>
-        </ion-datetime>
-      `,
-        config
-      );
-
-      await page.locator('.datetime-ready').waitFor();
-
-      const datetime = page.locator('ion-datetime');
-
-      await datetime.evaluate(
-        (el: HTMLIonDatetimeElement) =>
-          (el.formatOptions = {
-            time: { hour: '2-digit', minute: '2-digit' },
-            date: { day: '2-digit', month: 'long', era: 'short' },
-          })
-      );
-
-      await page.waitForChanges();
-
-      const headerDate = page.locator('ion-datetime .datetime-selected-date');
-      await expect(headerDate).toHaveText('February 01 AD');
-
-      const timeBody = page.locator('ion-datetime .time-body');
-      await expect(timeBody).toHaveText('04:30 PM');
-
-      await expect(datetime).toHaveScreenshot(screenshot('datetime-format-options'));
-    });
-  });
-});
-
-/**
- * This behavior does not differ across
- * modes/directions.
- */
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('datetime: formatOptions timeZone error'), () => {
-    test('should throw a warning if time zone is provided', async ({ page }) => {
-      const logs: string[] = [];
-
-      page.on('console', (msg) => {
-        if (msg.type() === 'warning') {
-          logs.push(msg.text());
-        }
-      });
-
-      await page.setContent(
-        `
-        <ion-datetime value="2022-02-01T16:30:00">
-          <span slot="title">Select Date</span>
-        </ion-datetime>
-      `,
-        config
-      );
-
-      const datetime = page.locator('ion-datetime');
-
-      await datetime.evaluate(
-        (el: HTMLIonDatetimeElement) =>
-          (el.formatOptions = {
-            time: { timeZone: 'UTC' },
-          })
-      );
-
-      await page.locator('.datetime-ready').waitFor();
-
-      await page.waitForChanges();
-
-      expect(logs.length).toBe(1);
-      expect(logs[0]).toContain(
-        '[Ionic Warning]: Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".'
-      );
-    });
-  });
-});

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

@@ -214,7 +214,8 @@
           <ion-popover class="options-popover" trigger="popover-trigger">
             <ion-list lines="none">
               <ion-item>
-                <ion-checkbox>Dark Mode</ion-checkbox>
+                <ion-label>Dark Mode</ion-label>
+                <ion-checkbox slot="end"></ion-checkbox>
               </ion-item>
               <ion-item detail="true" href="?ionic:mode=ios">
                 <ion-label>iOS Mode</ion-label>
@@ -224,19 +225,23 @@
               </ion-item>
 
               <ion-item>
-                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
+                <ion-label>Show Default Title</ion-label>
+                <ion-toggle id="titleToggle"></ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
+                <ion-label>Show Default Buttons</ion-label>
+                <ion-toggle id="buttonsToggle"></ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
+                <ion-label>Locale</ion-label>
+                <ion-input placeholder="default" id="locale"></ion-input>
               </ion-item>
 
               <ion-item>
-                <ion-select label="Color" id="color" value="primary">
+                <ion-label>Color</ion-label>
+                <ion-select id="color" value="primary">
                   <ion-select-option value="primary">Primary</ion-select-option>
                   <ion-select-option value="secondary">Secondary</ion-select-option>
                   <ion-select-option value="tertiary">Tertiary</ion-select-option>

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

@@ -53,46 +53,6 @@ describe('getMonthAndDay()', () => {
   it('should return sáb, 1 abr', () => {
     expect(getMonthAndDay('es-ES', { month: 4, day: 1, year: 2006 })).toEqual('sáb, 1 abr');
   });
-
-  it('should use formatOptions', () => {
-    const datetimeParts: DatetimeParts = {
-      day: 1,
-      month: 1,
-      year: 2022,
-      hour: 9,
-      minute: 40,
-    };
-
-    const formatOptions: Intl.DateTimeFormatOptions = {
-      day: '2-digit',
-      weekday: 'long',
-      month: 'narrow',
-      hour: '2-digit',
-      minute: '2-digit',
-    };
-
-    // Even though this method is intended to be used for date, the time may be displayed as well when passing formatOptions
-    expect(getMonthAndDay('en-US', datetimeParts, formatOptions)).toEqual('Saturday, J 01, 09:40 AM');
-  });
-
-  it('should override provided time zone with UTC', () => {
-    const datetimeParts: DatetimeParts = {
-      day: 1,
-      month: 1,
-      year: 2022,
-      hour: 23,
-      minute: 40,
-    };
-
-    const formatOptions: Intl.DateTimeFormatOptions = {
-      timeZone: 'Australia/Sydney',
-      weekday: 'short',
-      month: 'short',
-      day: 'numeric',
-    };
-
-    expect(getMonthAndDay('en-US', datetimeParts, formatOptions)).toEqual('Sat, Jan 1');
-  });
 });
 
 describe('getFormattedHour()', () => {
@@ -184,7 +144,6 @@ describe('getLocalizedTime', () => {
 
     expect(getLocalizedTime('en-GB', datetimeParts, 'h12')).toEqual('12:00 am');
   });
-
   it('should parse time-only values correctly', () => {
     const datetimeParts: Partial<DatetimeParts> = {
       hour: 22,
@@ -194,42 +153,4 @@ describe('getLocalizedTime', () => {
     expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h12')).toEqual('10:40 PM');
     expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h23')).toEqual('22:40');
   });
-
-  it('should use formatOptions', () => {
-    const datetimeParts: DatetimeParts = {
-      day: 1,
-      month: 1,
-      year: 2022,
-      hour: 9,
-      minute: 40,
-    };
-
-    const formatOptions: Intl.DateTimeFormatOptions = {
-      hour: '2-digit',
-      minute: '2-digit',
-      dayPeriod: 'short',
-      day: '2-digit',
-    };
-
-    // Even though this method is intended to be used for time, the date may be displayed as well when passing formatOptions
-    expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('01, 09:40 in the morning');
-  });
-
-  it('should override provided time zone with UTC', () => {
-    const datetimeParts: DatetimeParts = {
-      day: 1,
-      month: 1,
-      year: 2022,
-      hour: 9,
-      minute: 40,
-    };
-
-    const formatOptions: Intl.DateTimeFormatOptions = {
-      timeZone: 'Australia/Sydney',
-      hour: 'numeric',
-      minute: 'numeric',
-    };
-
-    expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
-  });
 });

core/src/components/datetime/utils/format.ts

@@ -11,12 +11,7 @@ const getFormattedDayPeriod = (dayPeriod?: string) => {
   return dayPeriod.toUpperCase();
 };
 
-export const getLocalizedTime = (
-  locale: string,
-  refParts: DatetimeParts,
-  hourCycle: DatetimeHourCycle,
-  formatOptions?: Intl.DateTimeFormatOptions
-): string => {
+export const getLocalizedTime = (locale: string, refParts: DatetimeParts, hourCycle: DatetimeHourCycle): string => {
   const timeParts: Pick<DatetimeParts, 'hour' | 'minute'> = {
     hour: refParts.hour,
     minute: refParts.minute,
@@ -26,18 +21,9 @@ export const getLocalizedTime = (
     return 'Invalid Time';
   }
 
-  const defaultFormatOptions: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: 'numeric' };
-
-  // If any options are provided, don't use any of the defaults.
-  const options: Intl.DateTimeFormatOptions = formatOptions ?? defaultFormatOptions;
-
   return new Intl.DateTimeFormat(locale, {
-    ...options,
-    /**
-     * We use hourCycle here instead of hour12 due to:
-     * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
-     */
-    hourCycle,
+    hour: 'numeric',
+    minute: 'numeric',
     /**
      * Setting the timeZone to UTC prevents
      * new Intl.DatetimeFormat from subtracting
@@ -45,6 +31,11 @@ export const getLocalizedTime = (
      * when formatting the time.
      */
     timeZone: 'UTC',
+    /**
+     * We use hourCycle here instead of hour12 due to:
+     * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
+     */
+    hourCycle,
     /**
      * Setting Z at the end indicates that this
      * date string is in the UTC time zone. This
@@ -159,17 +150,11 @@ export const generateDayAriaLabel = (locale: string, today: boolean, refParts: D
  * Gets the day of the week, month, and day
  * Used for the header in MD mode.
  */
-export const getMonthAndDay = (locale: string, refParts: DatetimeParts, formatOptions?: Intl.DateTimeFormatOptions) => {
-  const defaultFormatOptions: Intl.DateTimeFormatOptions = { weekday: 'short', month: 'short', day: 'numeric' };
-
-  // If any options are provided, don't use any of the defaults. This way the developer can (for example) choose to not have the weekday displayed at all.
-  const options: Intl.DateTimeFormatOptions = formatOptions ?? defaultFormatOptions;
-
+export const getMonthAndDay = (locale: string, refParts: DatetimeParts) => {
   const date = getNormalizedDate(refParts);
-  return new Intl.DateTimeFormat(locale, {
-    ...options,
-    timeZone: 'UTC',
-  }).format(date);
+  return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(
+    date
+  );
 };
 
 /**

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

@@ -16,19 +16,23 @@
       <h1>Item</h1>
 
       <ion-item>
-        <ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
+        <ion-label>Item with Input</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item disabled>
-        <ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
+        <ion-label>Item disabled with Input</ion-label>
+        <ion-input placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
+        <ion-label>Item with Input disabled</ion-label>
+        <ion-input placeholder="Placeholder" disabled></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-select label="Item with Select" label-placement="floating">
+        <ion-label position="floating">Item with Select</ion-label>
+        <ion-select>
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -40,7 +44,8 @@
       </ion-item>
 
       <ion-item disabled>
-        <ion-select label="Item disabled with Select" label-placement="floating">
+        <ion-label position="floating">Item disabled with Select</ion-label>
+        <ion-select>
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -52,7 +57,8 @@
       </ion-item>
 
       <ion-item>
-        <ion-select label="Item with Select disabled" label-placement="floating" disabled>
+        <ion-label position="floating">Item with Select disabled</ion-label>
+        <ion-select disabled>
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -64,27 +70,33 @@
       </ion-item>
 
       <ion-item>
-        <ion-toggle>Item with Toggle</ion-toggle>
+        <ion-label>Item with Toggle</ion-label>
+        <ion-toggle slot="end"></ion-toggle>
       </ion-item>
 
       <ion-item disabled>
-        <ion-toggle>Item disabled with Toggle</ion-toggle>
+        <ion-label>Item disabled with Toggle</ion-label>
+        <ion-toggle slot="end"></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-toggle disabled>Item with Toggle disabled</ion-toggle>
+        <ion-label>Item with Toggle disabled</ion-label>
+        <ion-toggle slot="end" disabled></ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-radio value="biff">Item with Radio</ion-radio>
+        <ion-label>Item with Radio</ion-label>
+        <ion-radio slot="start" value="biff"></ion-radio>
       </ion-item>
 
       <ion-item disabled>
-        <ion-radio value="biff">Item disabled with Radio</ion-radio>
+        <ion-label>Item disabled with Radio</ion-label>
+        <ion-radio slot="start" value="biff"></ion-radio>
       </ion-item>
 
       <ion-item>
-        <ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
+        <ion-label>Item with Radio disabled</ion-label>
+        <ion-radio slot="start" value="biff" disabled></ion-radio>
       </ion-item>
     </main>
   </body>

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

@@ -98,9 +98,8 @@
         </ion-item>
 
         <ion-item class="overflow-visible">
+          <ion-label position="fixed">PIN:</ion-label>
           <ion-input
-            label="PIN:"
-            label-placement="fixed"
             type="number"
             pattern="[0-9]*"
             inputmode="numeric"

core/src/components/item/test/bottom/index.html

@@ -31,27 +31,32 @@
       <ion-content class="ion-padding-vertical">
         <ion-list class="basic">
           <ion-item>
-            <ion-input label="No Helper/Error" name="input" id="text"></ion-input>
+            <ion-label>No Helper/Error</ion-label>
+            <ion-input name="input" id="text"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-input label="Helper and Error"></ion-input>
+            <ion-label>Helper and Error</ion-label>
+            <ion-input></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-input label="Helper Only"></ion-input>
+            <ion-label>Helper Only</ion-label>
+            <ion-input></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-input label="Error Only"></ion-input>
+            <ion-label>Error Only</ion-label>
+            <ion-input></ion-input>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item class="custom">
-            <ion-input label="Both w/ Custom CSS"></ion-input>
+            <ion-label>Both w/ Custom CSS</ion-label>
+            <ion-input></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
@@ -61,14 +66,16 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid">
-                <ion-input label="Helper and Error (Fill Solid)"></ion-input>
+                <ion-label>Helper and Error (Fill Solid)</ion-label>
+                <ion-input></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline">
-                <ion-input label="Helper and Error (Fill Outline)"></ion-input>
+                <ion-label>Helper and Error (Fill Outline)</ion-label>
+                <ion-input></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -77,7 +84,8 @@
           <ion-row>
             <ion-col>
               <ion-item>
-                <ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
+                <ion-label>Toggle Error</ion-label>
+                <ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
               </ion-item>
             </ion-col>
           </ion-row>

core/src/components/item/test/inputs/index.html

@@ -39,6 +39,18 @@
               <ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
                 <ion-label>Set "undefined" values</ion-label>
               </ion-item>
+              <ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
+                <ion-label>Labels: Default</ion-label>
+              </ion-item>
+              <ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
+                <ion-label>Labels: Floating</ion-label>
+              </ion-item>
+              <ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
+                <ion-label>Labels: Stacked</ion-label>
+              </ion-item>
+              <ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
+                <ion-label>Labels: Fixed</ion-label>
+              </ion-item>
             </ion-list>
           </ion-popover>
         </ion-toolbar>
@@ -48,23 +60,28 @@
         <form onsubmit="return onSubmit(event)">
           <ion-list>
             <ion-item>
-              <ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
+              <ion-label>Input</ion-label>
+              <ion-input name="input" id="input" placeholder="Input"></ion-input>
             </ion-item>
 
             <ion-item>
-              <ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
+              <ion-label>Textarea</ion-label>
+              <ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
             </ion-item>
 
             <ion-item>
-              <ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
+              <ion-label>Toggle</ion-label>
+              <ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
             </ion-item>
 
             <ion-item>
-              <ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
+              <ion-label>Checkbox</ion-label>
+              <ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
             </ion-item>
 
             <ion-item>
-              <ion-select label="Select" name="select" id="select" placeholder="Select">
+              <ion-label>Select</ion-label>
+              <ion-select name="select" id="select" placeholder="Select">
                 <ion-select-option value="1">1</ion-select-option>
                 <ion-select-option value="2">2</ion-select-option>
                 <ion-select-option value="3">3</ion-select-option>
@@ -76,7 +93,8 @@
             </ion-item>
 
             <ion-item>
-              <ion-range label="Range" name="range" id="range" value="10"></ion-range>
+              <ion-label>Range</ion-label>
+              <ion-range name="range" id="range" value="10"></ion-range>
             </ion-item>
           </ion-list>
 
@@ -129,6 +147,28 @@
         toggle.checked = checkbox.checked = false;
       }
 
+      function setLabelDefault() {
+        setLabelPosition(undefined);
+      }
+
+      function setLabelFixed() {
+        setLabelPosition('fixed');
+      }
+
+      function setLabelFloating() {
+        setLabelPosition('floating');
+      }
+
+      function setLabelStacked() {
+        setLabelPosition('stacked');
+      }
+
+      function setLabelPosition(position) {
+        Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
+          (label) => (label.position = position)
+        );
+      }
+
       function getFormControls() {
         return formControlIds.reduce((acc, id) => {
           acc[id] = document.querySelector(`#${id}`);

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

@@ -41,45 +41,58 @@
         <ion-list>
           <ion-item>
             <ion-label>Default</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label color="tertiary">Tertiary</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="custom">Custom</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="fixed">Fixed</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="floating">Floating</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color">
             <ion-label position="floating" color="success">Floating: Success</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="stacked">Stacked</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color">
             <ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
+            <ion-input></ion-input>
           </ion-item>
         </ion-list>
 
         <ion-list>
           <ion-item color="tertiary">
             <ion-label position="floating">(Item: Tertiary) Floating</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item color="primary">
             <ion-label position="stacked">(Item: Primary) Stacked</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color" color="tertiary">
             <ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
+            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color" color="primary">
             <ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
+            <ion-input></ion-input>
           </ion-item>
         </ion-list>
       </ion-content>

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

@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="stacked">My Label</ion-label>
-          <ion-input aria-label="My Label"></ion-input>
+          <ion-input></ion-input>
         </ion-item>
       `,
         config
@@ -49,7 +49,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="floating">My Label</ion-label>
-          <ion-input aria-label="My Label"></ion-input>
+          <ion-input></ion-input>
         </ion-item>
       `,
         config

core/src/components/menu/menu.tsx

@@ -2,7 +2,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import { GESTURE_CONTROLLER } from '@utils/gesture';
-import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
 import { menuController } from '@utils/menu-controller';
@@ -322,6 +321,7 @@ export class Menu implements ComponentInterface, MenuI {
     }
   }
 
+  @Listen('keydown')
   onKeydown(ev: KeyboardEvent) {
     if (ev.key === 'Escape') {
       this.close();
@@ -781,14 +781,8 @@ export class Menu implements ComponentInterface, MenuI {
     const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
     const mode = getIonMode(this);
 
-    /**
-     * If the Close Watcher is enabled then
-     * the ionBackButton listener in the menu controller
-     * will handle closing the menu when Escape is pressed.
-     */
     return (
       <Host
-        onKeyDown={shoudUseCloseWatcher() ? null : this.onKeydown}
         role="navigation"
         aria-label={inheritedAttributes['aria-label'] || 'menu'}
         class={{

core/src/components/modal/modal.tsx

@@ -10,6 +10,7 @@ import { Style as StatusBarStyle, StatusBar } from '@utils/native/status-bar';
 import {
   GESTURE,
   BACKDROP,
+  activeAnimations,
   dismiss,
   eventMethod,
   prepareOverlay,
@@ -704,6 +705,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
       this.keyboardOpenCallback = undefined;
     }
 
+    const enteringAnimation = activeAnimations.get(this) || [];
+
     const dismissed = await dismiss<ModalDismissOptions>(
       this,
       data,
@@ -730,6 +733,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
       if (this.gesture) {
         this.gesture.destroy();
       }
+
+      enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;

core/src/components/modal/test/animations/modal.e2e.ts

@@ -1,45 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('modal: animations'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-modal is-open="true" trigger="open-modal"></ion-modal>
-      `,
-        config
-      );
-    });
-    test('card modal should clean up animations on dismiss', async ({ page }, testInfo) => {
-      testInfo.annotations.push({
-        type: 'issue',
-        description: 'https://github.com/ionic-team/ionic-framework/issues/28352',
-      });
-
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      const modal = page.locator('ion-modal');
-
-      const initialAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
-        return el.shadowRoot!.getAnimations();
-      });
-
-      // While the modal is open, it should have animations
-      expect(initialAnimations.length).toBeGreaterThan(0);
-
-      await modal.evaluate((el: HTMLIonModalElement) => {
-        el.dismiss();
-      });
-
-      await ionModalDidDismiss.next();
-
-      const currentAnimations = await modal.evaluate((el: HTMLIonModalElement) => {
-        return el.shadowRoot!.getAnimations();
-      });
-
-      // Once the modal has finished closing, there should be no animations
-      expect(currentAnimations.length).toBe(0);
-    });
-  });
-});

core/src/components/modal/test/sheet/index.html

@@ -85,7 +85,10 @@
         </ion-header>
 
         <ion-content class="ion-padding">
-          <input id="root-input" />
+          <ion-item>
+            <ion-label>Input outside modal</ion-label>
+            <ion-input id="root-input" legacy="true"></ion-input>
+          </ion-item>
 
           <ion-button id="sheet-modal" onclick="presentModal()">Present Sheet Modal</ion-button>
           <ion-button

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -52,7 +52,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await ionModalDidPresent.next();
 
-      const input = page.locator('#root-input').first();
+      const input = page.locator('#root-input input').first();
       await input.click();
       await expect(input).toBeFocused();
     });

core/src/components/modal/test/spec/index.html

@@ -60,7 +60,8 @@
 
         <ion-content>
           <ion-item>
-            <ion-toggle>Use Custom Animation</ion-toggle>
+            <ion-label>Use Custom Animation</ion-label>
+            <ion-toggle></ion-toggle>
           </ion-item>
 
           <ion-list id="list"></ion-list>

core/src/components/popover/popover.ios.scss

@@ -35,13 +35,6 @@
   height: 10px;
 
   overflow: hidden;
-  /*
-   * Required for the arrow to render above the backdrop.
-   * Otherwise, the arrow will appear slightly transparent.
-   * The value is set to 11 since it's the minimum value that
-   * will allow the arrow to render above the backdrop.
-   */
-  z-index: 11;
 }
 
 .popover-arrow::after {