Merge branch 'ROU-11112-toggle' into ROU-11112

v8.4.3

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - name: Install Dependencies
       run: npm ci

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

@@ -11,7 +11,7 @@ runs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm install
       working-directory: ./core

.github/workflows/actions/build-react-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue-router/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/publish-npm/action.yml

@@ -21,7 +21,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     # Provenance requires npm 9.5.0+
     - name: Install latest npm
       run: npm install -g npm@latest

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
 
     - uses: ./.github/workflows/actions/download-archive
       with:

.github/workflows/actions/test-core-lint/action.yml

@@ -5,7 +5,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

.github/workflows/actions/test-core-screenshot/action.yml

@@ -15,7 +15,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-core-spec/action.yml

@@ -8,7 +8,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - name: Install Dependencies
       run: npm ci
       working-directory: ./core

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

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

.github/workflows/actions/test-react-router-e2e/action.yml

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

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

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

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -9,7 +9,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18.x
+        node-version: 20.x
     - uses: actions/download-artifact@v4
       with:
         path: ./artifacts

.github/workflows/assign-issues.yml

@@ -11,7 +11,7 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@c5bca5027e680b9e8411b826d16947afd8c76b32 # v2.0.0
+        uses: pozil/auto-assign-issue@c015a6a3f410f12f58255c3d085fd774312f7a2f # v2.1.2
         with:
           assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
           numOfAssignee: 1

.github/workflows/build.yml

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

.github/workflows/stencil-nightly.yml

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

CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
+
+
+### Bug Fixes
+
+* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
+
+
+
+
+
+## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
+
+
+### Bug Fixes
+
+* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
+* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
+
+
+
+
+
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+
+### Bug Fixes
+
+* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
+* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
+* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
+* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
+* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 

core/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
+
+
+### Bug Fixes
+
+* **segment:** add logic to connect to segment-view in `componentDidLoad()` callback ([#30060](https://github.com/ionic-team/ionic-framework/issues/30060)) ([000f553](https://github.com/ionic-team/ionic-framework/commit/000f55303e459c583e642337fb1894f419f37d48)), closes [#30000](https://github.com/ionic-team/ionic-framework/issues/30000)
+* **select-modal:** match radio styles to iOS native ([#30119](https://github.com/ionic-team/ionic-framework/issues/30119)) ([3f8346e](https://github.com/ionic-team/ionic-framework/commit/3f8346e718ae3a6eb5008d739f10b6898b84ca9b))
+
+
+
+
+
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+
+### Bug Fixes
+
+* **header:** use aria attributes to hide small title when collapsed ([#30027](https://github.com/ionic-team/ionic-framework/issues/30027)) ([23763ab](https://github.com/ionic-team/ionic-framework/commit/23763abf797f9a4ba8262225760f718e9dcc4782)), closes [#29347](https://github.com/ionic-team/ionic-framework/issues/29347)
+* **menu:** hide from screen readers while animating ([#30036](https://github.com/ionic-team/ionic-framework/issues/30036)) ([845071c](https://github.com/ionic-team/ionic-framework/commit/845071c97a856d45eb5e0bb81d9c270bc38bb604))
+* **overlays:** announce info after opening based on platform ([#30025](https://github.com/ionic-team/ionic-framework/issues/30025)) ([f6188c4](https://github.com/ionic-team/ionic-framework/commit/f6188c47e9278fe69fd9d250c65156edbe5ef32e))
+* **overlays:** focus management with checkbox/radio ([#30026](https://github.com/ionic-team/ionic-framework/issues/30026)) ([8ee42bb](https://github.com/ionic-team/ionic-framework/commit/8ee42bbc1e0bf4731d20040c7853756722f1a4b2))
+* **toast:** swipe gesture works with custom container layout ([#29999](https://github.com/ionic-team/ionic-framework/issues/29999)) ([470decc](https://github.com/ionic-team/ionic-framework/commit/470decca7b6b89ef74095ef0bb7909b93640cd78)), closes [#29998](https://github.com/ionic-team/ionic-framework/issues/29998)
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 

core/api.txt

@@ -403,6 +403,7 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start" | undefined,undefine
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
+ion-checkbox,prop,required,boolean,false,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
 ion-checkbox,event,ionChange,CheckboxChangeEventDetail<any>,true
@@ -1346,6 +1347,7 @@ ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
 ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
 ion-radio-group,prop,name,string,this.inputId,false,false
+ion-radio-group,prop,required,boolean,false,false,false
 ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
 
@@ -1631,6 +1633,7 @@ ion-select,prop,multiple,boolean,false,false,false
 ion-select,prop,name,string,this.inputId,false,false
 ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,string | undefined,undefined,false,false
+ion-select,prop,required,boolean,false,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,shape,"round" | undefined,undefined,false,false
 ion-select,prop,toggleIcon,string | undefined,undefined,false,false
@@ -1944,6 +1947,7 @@ ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
+ion-toggle,prop,required,boolean,false,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true
@@ -2000,4 +2004,7 @@ ion-toolbar,css-prop,--padding-end,md
 ion-toolbar,css-prop,--padding-start,ios
 ion-toolbar,css-prop,--padding-start,md
 ion-toolbar,css-prop,--padding-top,ios
-ion-toolbar,css-prop,--padding-top,md
+ion-toolbar,css-prop,--padding-top,md
+ion-toolbar,part,background
+ion-toolbar,part,container
+ion-toolbar,part,content

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.4.0",
+  "version": "8.4.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.4.0",
+      "version": "8.4.3",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -19,16 +19,16 @@
         "@capacitor/haptics": "^6.0.0",
         "@capacitor/keyboard": "^6.0.0",
         "@capacitor/status-bar": "^6.0.0",
-        "@clack/prompts": "^0.7.0",
+        "@clack/prompts": "^0.9.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@playwright/test": "^1.46.1",
         "@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.10.0",
         "@stencil/react-output-target": "0.5.3",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "^0.8.9",
+        "@stencil/vue-output-target": "^0.9.0",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -319,18 +319,18 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -400,10 +400,13 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.5.tgz",
+      "integrity": "sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==",
       "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.26.5"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -641,14 +644,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz",
+      "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -661,45 +663,45 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
-      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.2.0.tgz",
+      "integrity": "sha512-B9IlJtDpUqhhYb+T8+cp2Db/3RETX36STgjeU2kQZBs/SLAcFiMama227o+msRjLeo3DO+7HJjWVA1+XlyyPEg==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@capacitor/haptics": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
-      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.2.tgz",
+      "integrity": "sha512-xcFdIH4iIIeW2+1lzmlYMVicqB9ytaiuZ9NE3a9laKFPvMGC7hdj6i6tHFezwPJ/96xkHOwXT2b0F8Mh9xtTWg==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
-      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.3.tgz",
+      "integrity": "sha512-V/mURxBI68HvClYjrGBlOriWkwYN7r+cWid/igJz/3scNc/V81DgQ9fpoLr4W0I5NY7YxOesjIJLuLO+LT18mQ==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
-      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.2.tgz",
+      "integrity": "sha512-AmRIX6QvFemItlY7/69ARkIAqitRQqJ2qwgZmD1KqgFb78pH+XFXm1guvS/a8CuOOm/IqZ4ddDbl20yxtBqzGA==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^6.0.0"
       }
     },
     "node_modules/@clack/core": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
-      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.1.tgz",
+      "integrity": "sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==",
       "dev": true,
       "dependencies": {
         "picocolors": "^1.0.0",
@@ -707,32 +709,16 @@
       }
     },
     "node_modules/@clack/prompts": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
-      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
-      "bundleDependencies": [
-        "is-unicode-supported"
-      ],
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz",
+      "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==",
       "dev": true,
       "dependencies": {
-        "@clack/core": "^0.3.3",
-        "is-unicode-supported": "*",
+        "@clack/core": "0.4.1",
         "picocolors": "^1.0.0",
         "sisteransi": "^1.0.5"
       }
     },
-    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
-      "version": "1.3.0",
-      "dev": true,
-      "inBundle": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -1678,9 +1664,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -1815,9 +1801,9 @@
       }
     },
     "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.10.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.10.2.tgz",
+      "integrity": "sha512-jPRa2NMAPtm/iMY+mUaWATbIhgY5zPJfUNQyF8nwC0rMrfXifPoRCf6BbH2S4Gy7SX0X4hlP+jAbVUjQNg/P+Q==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -1860,12 +1846,21 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.9",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
-      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.2.tgz",
+      "integrity": "sha512-AeBmfo8bQhtob4VKpYTNiCoqh50MeXUwRgYLyO/JxRgAAK9GSfenNrUxXDrK0DK65SWsx/GCOsRwWbfOveorOQ==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0",
+        "vue": "^3.4.38"
+      },
+      "peerDependenciesMeta": {
+        "@stencil/core": {
+          "optional": true
+        },
+        "vue": {
+          "optional": false
+        }
       }
     },
     "node_modules/@stylelint/postcss-css-in-js": {
@@ -2499,6 +2494,171 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.48",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/postcss": {
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
+      },
+      "peerDependencies": {
+        "vue": "3.5.13"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@zeit/schemas": {
       "version": "2.21.0",
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
@@ -3183,9 +3343,9 @@
       ]
     },
     "node_modules/chalk": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
       "dev": true,
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -3777,6 +3937,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -7584,6 +7751,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -7915,6 +8092,25 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -8236,9 +8432,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "dev": true
     },
     "node_modules/picomatch": {
@@ -9103,6 +9299,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -9683,15 +9889,6 @@
       "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
       "dev": true
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -10025,6 +10222,28 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vue": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -10505,15 +10724,15 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "dev": true
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "dev": true
     },
     "@babel/helper-validator-option": {
@@ -10567,10 +10786,13 @@
       }
     },
     "@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
-      "dev": true
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.5.tgz",
+      "integrity": "sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.26.5"
+      }
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
@@ -10739,14 +10961,13 @@
       }
     },
     "@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.5.tgz",
+      "integrity": "sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==",
       "dev": true,
       "requires": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.20",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       }
     },
     "@bcoe/v8-coverage": {
@@ -10756,39 +10977,39 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.1.2.tgz",
-      "integrity": "sha512-xFy1/4qLFLp5WCIzIhtwUuVNNoz36+V7/BzHmLqgVJcvotc4MMjswW/TshnPQaLLujEOaLkA4h8ZJ0uoK3ImGg==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.2.0.tgz",
+      "integrity": "sha512-B9IlJtDpUqhhYb+T8+cp2Db/3RETX36STgjeU2kQZBs/SLAcFiMama227o+msRjLeo3DO+7HJjWVA1+XlyyPEg==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
       }
     },
     "@capacitor/haptics": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.1.tgz",
-      "integrity": "sha512-Q8hedLwfwTSWEYc3eoATzkdKHBaIceYe5bd7FjxQCENNH0is5Ft0EjSRPz/xpTn39ebK0ooZBDBCwsyl6tjiTA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.2.tgz",
+      "integrity": "sha512-xcFdIH4iIIeW2+1lzmlYMVicqB9ytaiuZ9NE3a9laKFPvMGC7hdj6i6tHFezwPJ/96xkHOwXT2b0F8Mh9xtTWg==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.2.tgz",
-      "integrity": "sha512-fOfO3rQ0ZXuTHpK03INVTwmBnpqMiH8EHPpNaHjwjKwdrVRWBvtgIFhuyHNXh53rdcXw+uHB+1RIiNabnCrITw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.3.tgz",
+      "integrity": "sha512-V/mURxBI68HvClYjrGBlOriWkwYN7r+cWid/igJz/3scNc/V81DgQ9fpoLr4W0I5NY7YxOesjIJLuLO+LT18mQ==",
       "dev": true,
       "requires": {}
     },
     "@capacitor/status-bar": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.1.tgz",
-      "integrity": "sha512-Usd9hZZQVAqy+jJfL7jRcYI7dcsxN09Na1yttwdl+F1bk3Ztoukk7CGPDm5VgKUSs53ihQBOy1+sczCACxhNiw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.2.tgz",
+      "integrity": "sha512-AmRIX6QvFemItlY7/69ARkIAqitRQqJ2qwgZmD1KqgFb78pH+XFXm1guvS/a8CuOOm/IqZ4ddDbl20yxtBqzGA==",
       "dev": true,
       "requires": {}
     },
     "@clack/core": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
-      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.1.tgz",
+      "integrity": "sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==",
       "dev": true,
       "requires": {
         "picocolors": "^1.0.0",
@@ -10796,22 +11017,14 @@
       }
     },
     "@clack/prompts": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
-      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz",
+      "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==",
       "dev": true,
       "requires": {
-        "@clack/core": "^0.3.3",
-        "is-unicode-supported": "*",
+        "@clack/core": "0.4.1",
         "picocolors": "^1.0.0",
         "sisteransi": "^1.0.5"
-      },
-      "dependencies": {
-        "is-unicode-supported": {
-          "version": "1.3.0",
-          "bundled": true,
-          "dev": true
-        }
       }
     },
     "@eslint-community/eslint-utils": {
@@ -11483,9 +11696,9 @@
       "dev": true
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "dev": true
     },
     "@jridgewell/trace-mapping": {
@@ -11591,9 +11804,9 @@
       }
     },
     "@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.10.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.10.2.tgz",
+      "integrity": "sha512-jPRa2NMAPtm/iMY+mUaWATbIhgY5zPJfUNQyF8nwC0rMrfXifPoRCf6BbH2S4Gy7SX0X4hlP+jAbVUjQNg/P+Q==",
       "dev": true,
       "requires": {}
     },
@@ -11617,9 +11830,9 @@
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.9",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz",
-      "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==",
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.2.tgz",
+      "integrity": "sha512-AeBmfo8bQhtob4VKpYTNiCoqh50MeXUwRgYLyO/JxRgAAK9GSfenNrUxXDrK0DK65SWsx/GCOsRwWbfOveorOQ==",
       "dev": true,
       "requires": {}
     },
@@ -12063,6 +12276,149 @@
         "eslint-visitor-keys": "^3.4.1"
       }
     },
+    "@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+          "dev": true,
+          "peer": true
+        },
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.48",
+        "source-map-js": "^1.2.0"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+          "dev": true,
+          "peer": true
+        },
+        "postcss": {
+          "version": "8.4.49",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+          "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "nanoid": "^3.3.7",
+            "picocolors": "^1.1.1",
+            "source-map-js": "^1.2.1"
+          }
+        }
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "csstype": "^3.1.3"
+      }
+    },
+    "@vue/server-renderer": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true,
+      "peer": true
+    },
     "@zeit/schemas": {
       "version": "2.21.0",
       "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
@@ -12537,9 +12893,9 @@
       "dev": true
     },
     "chalk": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
       "dev": true
     },
     "chalk-template": {
@@ -12953,6 +13309,13 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "peer": true
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -15757,6 +16120,16 @@
         "yallist": "^4.0.0"
       }
     },
+    "magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -15991,6 +16364,13 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "nanoid": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "dev": true,
+      "peer": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -16229,9 +16609,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "dev": true
     },
     "picomatch": {
@@ -16850,6 +17230,13 @@
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "peer": true
+    },
     "source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -17305,12 +17692,6 @@
       "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
       "dev": true
     },
-    "to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true
-    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -17570,6 +17951,20 @@
         "unist-util-stringify-position": "^2.0.0"
       }
     },
+    "vue": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
     "walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.4.0",
+  "version": "8.4.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -41,16 +41,16 @@
     "@capacitor/haptics": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
     "@capacitor/status-bar": "^6.0.0",
-    "@clack/prompts": "^0.7.0",
+    "@clack/prompts": "^0.9.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.46.1",
     "@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.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.8.9",
+    "@stencil/vue-output-target": "^0.9.0",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/src/components.d.ts

@@ -643,6 +643,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+         */
+        "required": boolean;
         "setFocus": () => Promise<void>;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
@@ -2303,6 +2307,11 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        "setFocus": () => Promise<void>;
         /**
           * the value of the radio group.
          */
@@ -2807,6 +2816,10 @@ export namespace Components {
           * The text to display when the select is empty.
          */
         "placeholder"?: string;
+        /**
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+         */
+        "required": boolean;
         /**
           * The text to display instead of the selected option's value.
          */
@@ -3279,6 +3292,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+         */
+        "required": boolean;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */
@@ -5434,6 +5451,10 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
+        /**
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+         */
+        "required"?: boolean;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
@@ -7066,6 +7087,10 @@ declare namespace LocalJSX {
           * Emitted when the `value` property has changed. This is used to ensure that `ion-radio` can respond to any value property changes from the group.
          */
         "onIonValueChange"?: (event: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
         /**
           * the value of the radio group.
          */
@@ -7639,6 +7664,10 @@ declare namespace LocalJSX {
           * The text to display when the select is empty.
          */
         "placeholder"?: string;
+        /**
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+         */
+        "required"?: boolean;
         /**
           * The text to display instead of the selected option's value.
          */
@@ -8154,6 +8183,10 @@ declare namespace LocalJSX {
           * Emitted when the toggle has focus.
          */
         "onIonFocus"?: (event: IonToggleCustomEvent<void>) => void;
+        /**
+          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+         */
+        "required"?: boolean;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          */

core/src/components/checkbox/checkbox.tsx

@@ -98,6 +98,13 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment?: 'start' | 'center';
 
+  /**
+   * If true, screen readers will announce it as a required field. This property
+   * works only for accessibility purposes, it will not prevent the form from
+   * submitting if the value is invalid.
+   */
+  @Prop() required = false;
+
   /**
    * Emitted when the checked property has changed as a result of a user action such as a click.
    *
@@ -182,6 +189,7 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
       alignment,
+      required,
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
@@ -218,6 +226,7 @@ export class Checkbox implements ComponentInterface {
             onFocus={() => this.onFocus()}
             onBlur={() => this.onBlur()}
             ref={(focusEl) => (this.focusEl = focusEl)}
+            required={required}
             {...inheritedAttributes}
           />
           <div

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

@@ -54,3 +54,33 @@ describe('ion-checkbox: indeterminate', () => {
     expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
   });
 });
+
+describe('ion-checkbox: required', () => {
+  it('should have a required attribute in inner input when true', async () => {
+    const page = await newSpecPage({
+      components: [Checkbox],
+      html: `
+        <ion-checkbox required="true">Checkbox</ion-checkbox>
+      `,
+    });
+
+    const checkbox = page.body.querySelector('ion-checkbox')!;
+    const nativeInput = checkbox.shadowRoot?.querySelector('input[type=checkbox]')!;
+
+    expect(nativeInput.hasAttribute('required')).toBeTruthy();
+  });
+
+  it('should not have a required attribute in inner input when false', async () => {
+    const page = await newSpecPage({
+      components: [Checkbox],
+      html: `
+        <ion-checkbox required="false">Checkbox</ion-checkbox>
+      `,
+    });
+
+    const checkbox = page.body.querySelector('ion-checkbox')!;
+    const nativeInput = checkbox.shadowRoot?.querySelector('input[type=checkbox]')!;
+
+    expect(nativeInput.hasAttribute('required')).toBeFalsy();
+  });
+});

core/src/components/header/header.utils.ts

@@ -167,13 +167,34 @@ export const handleToolbarIntersection = (
 
 export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
   const headerEl = headerIndex.el;
+  const toolbars = headerIndex.toolbars;
+  const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
 
   if (active) {
     headerEl.classList.remove('header-collapse-condense-inactive');
-    headerEl.removeAttribute('aria-hidden');
+
+    ionTitles.forEach((ionTitle) => {
+      if (ionTitle) {
+        ionTitle.removeAttribute('aria-hidden');
+      }
+    });
   } else {
     headerEl.classList.add('header-collapse-condense-inactive');
-    headerEl.setAttribute('aria-hidden', 'true');
+
+    /**
+     * The small title should only be accessed by screen readers
+     * when the large title collapses into the small title due
+     * to scrolling.
+     *
+     * Originally, the header was given `aria-hidden="true"`
+     * but this caused issues with screen readers not being
+     * able to access any focusable elements within the header.
+     */
+    ionTitles.forEach((ionTitle) => {
+      if (ionTitle) {
+        ionTitle.setAttribute('aria-hidden', 'true');
+      }
+    });
   }
 };
 

core/src/components/header/test/condense/header.e2e.ts

@@ -3,13 +3,19 @@ import { configs, test } from '@utils/test/playwright';
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('header: condense'), () => {
-    test('should be hidden from screen readers when collapsed', async ({ page }) => {
+    test('should hide small title from screen readers when collapsed', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29347',
+      });
+
       await page.goto('/src/components/header/test/condense', config);
       const largeTitleHeader = page.locator('#largeTitleHeader');
       const smallTitleHeader = page.locator('#smallTitleHeader');
+      const smallTitle = smallTitleHeader.locator('ion-title');
       const content = page.locator('ion-content');
 
-      await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
+      await expect(smallTitle).toHaveAttribute('aria-hidden', 'true');
 
       await expect(largeTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-initial-diff`));
 
@@ -24,7 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
        * Playwright can't do .not.toHaveAttribute() because a value is expected,
        * and toHaveAttribute can't accept a value of type null.
        */
-      const ariaHidden = await smallTitleHeader.getAttribute('aria-hidden');
+      const ariaHidden = await smallTitle.getAttribute('aria-hidden');
       expect(ariaHidden).toBeNull();
 
       await content.evaluate(async (el: HTMLIonContentElement) => {
@@ -32,7 +38,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       });
       await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();
 
-      await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
+      await expect(smallTitle).toHaveAttribute('aria-hidden', 'true');
     });
   });
 });

core/src/components/menu/menu.tsx

@@ -8,6 +8,7 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
 import { menuController } from '@utils/menu-controller';
 import { BACKDROP, GESTURE, getPresentedOverlay } from '@utils/overlays';
+import { isPlatform } from '@utils/platform';
 import { hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
@@ -631,6 +632,23 @@ export class Menu implements ComponentInterface, MenuI {
   private beforeAnimation(shouldOpen: boolean, role?: string) {
     assert(!this.isAnimating, '_before() should not be called while animating');
 
+    /**
+     * When the menu is presented on an Android device, TalkBack's focus rings
+     * may appear in the wrong position due to the transition (specifically
+     * `transform` styles). This occurs because the focus rings are initially
+     * displayed at the starting position of the elements before the transition
+     * begins. This workaround ensures the focus rings do not appear in the
+     * incorrect location.
+     *
+     * If this solution is applied to iOS devices, then it leads to a bug where
+     * the overlays cannot be accessed by screen readers. This is due to
+     * VoiceOver not being able to update the accessibility tree when the
+     * `aria-hidden` is removed.
+     */
+    if (isPlatform('android')) {
+      this.el.setAttribute('aria-hidden', 'true');
+    }
+
     // this places the menu into the correct location before it animates in
     // this css class doesn't actually kick off any animations
     this.el.classList.add(SHOW_MENU);
@@ -687,6 +705,17 @@ export class Menu implements ComponentInterface, MenuI {
     }
 
     if (isOpen) {
+      /**
+       * When the menu is presented on an Android device, TalkBack's focus rings
+       * may appear in the wrong position due to the transition (specifically
+       * `transform` styles). The menu is hidden from screen readers during the
+       * transition to prevent this. Once the transition is complete, the menu
+       * is shown again.
+       */
+      if (isPlatform('android')) {
+        this.el.removeAttribute('aria-hidden');
+      }
+
       // emit open event
       this.ionDidOpen.emit();
 
@@ -703,6 +732,8 @@ export class Menu implements ComponentInterface, MenuI {
       // start focus trapping
       document.addEventListener('focus', this.handleFocus, true);
     } else {
+      this.el.removeAttribute('aria-hidden');
+
       // remove css classes and unhide content from screen readers
       this.el.classList.remove(SHOW_MENU);
 

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Listen, Prop, Watch, h } from '@stencil/core';
+import { Component, Element, Event, Host, Listen, Method, Prop, Watch, h } from '@stencil/core';
 import { renderHiddenInput } from '@utils/helpers';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -34,6 +34,11 @@ export class RadioGroup implements ComponentInterface {
    */
   @Prop() name: string = this.inputId;
 
+  /**
+   * If `true`, the user must fill in a value before submitting a form.
+   */
+  @Prop() required = false;
+
   /**
    * the value of the radio group.
    */
@@ -217,13 +222,20 @@ export class RadioGroup implements ComponentInterface {
     }
   }
 
+  /** @internal */
+  @Method()
+  async setFocus() {
+    const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
+    radioToFocus?.setFocus();
+  }
+
   render() {
-    const { label, labelId, el, name, value } = this;
+    const { label, labelId, el, name, value, required } = this;
     const mode = getIonMode(this);
 
     renderHiddenInput(true, el, name, value, false);
 
-    return <Host role="radiogroup" aria-labelledby={label ? labelId : null} onClick={this.onClick} class={mode}></Host>;
+    return <Host role="radiogroup" aria-labelledby={label ? labelId : null} onClick={this.onClick} class={mode} aria-required={`${required}`}></Host>;
   }
 }
 

core/src/components/segment/segment.tsx

@@ -188,6 +188,8 @@ export class Segment implements ComponentInterface {
   }
 
   async componentDidLoad() {
+    this.segmentViewEl = this.getSegmentView();
+
     this.setCheckedClasses();
 
     /**

core/src/components/segment/test/segment-events.e2e.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
 
 /**
  * This behavior does not vary across modes/directions.
@@ -105,8 +105,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
     });
 
-    // TODO FW-3021
-    test.describe.skip('when the pointer is released', () => {
+    test.describe('when the pointer is released', () => {
       test('should emit if the value has changed', async ({ page }) => {
         test.info().annotations.push({
           type: 'issue',
@@ -136,14 +135,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
         const ionChangeSpy = await page.spyOnEvent('ionChange');
 
+        const segment = page.locator('ion-segment');
         const firstButton = page.locator('ion-segment-button[value="1"]');
         const lastButton = page.locator('ion-segment-button[value="3"]');
 
-        await firstButton.hover();
-        await page.mouse.down();
+        /*
+         * `dragByX` should represent the total width of all segment buttons,
+         * excluding the first half of the first button and the second half
+         * of the last button. This calculation accounts for dragging from
+         * the center of the first button to the center of the last button.
+         */
+        const segmentWidth = await segment.boundingBox().then((box) => (box ? box.width : 0));
+        const firstButtonWidth = await firstButton.boundingBox().then((box) => (box ? box.width : 0));
+        const lastButtonWidth = await lastButton.boundingBox().then((box) => (box ? box.width : 0));
+        const dragByX = segmentWidth - firstButtonWidth / 2 - lastButtonWidth / 2;
 
-        await lastButton.hover();
-        await page.mouse.up();
+        await dragElementBy(firstButton, page, dragByX);
 
         expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '3' });
         expect(ionChangeSpy).toHaveReceivedEventTimes(1);

core/src/components/select-modal/select-modal.ios.scss

@@ -1 +1,24 @@
 @import "./select-modal";
+@import "../item/item.ios.vars";
+@import "../radio/radio.ios.vars";
+
+ion-item {
+  --inner-padding-end: 0;
+}
+
+/**
+ * The bottom border of the item should only be displayed
+ * under the text and not the radio icon.
+ */
+ion-radio::after {
+  @include position(null, null, 0, calc($radio-ios-icon-width + $item-ios-padding-start));
+  position: absolute;
+
+  width: calc(100% - $radio-ios-icon-width - $item-ios-padding-start); /* Adjust width based on the shift */
+
+  border-width: #{0px 0px $item-ios-border-bottom-width 0px};
+  border-style: #{$item-ios-border-bottom-style};
+  border-color: #{$item-ios-border-bottom-color};
+
+  content: "";
+}

core/src/components/select-modal/select-modal.tsx

@@ -81,6 +81,7 @@ export class SelectModal implements ComponentInterface {
       <ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
         {this.options.map((option) => (
           <ion-item
+            lines="none"
             class={{
               // TODO FW-4784
               'item-radio-checked': option.value === checked,

core/src/components/select/select.tsx

@@ -196,6 +196,13 @@ export class Select implements ComponentInterface {
    */
   @Prop({ mutable: true }) value?: any | null;
 
+  /**
+   * If true, screen readers will announce it as a required field. This property
+   * works only for accessibility purposes, it will not prevent the form from
+   * submitting if the value is invalid.
+   */
+  @Prop() required = false;
+
   /**
    * Emitted when the value has changed.
    *
@@ -974,7 +981,7 @@ export class Select implements ComponentInterface {
   }
 
   private renderListbox() {
-    const { disabled, inputId, isExpanded } = this;
+    const { disabled, inputId, isExpanded, required } = this;
 
     return (
       <button
@@ -983,6 +990,7 @@ export class Select implements ComponentInterface {
         aria-label={this.ariaLabel}
         aria-haspopup="dialog"
         aria-expanded={`${isExpanded}`}
+        aria-required={`${required}`}
         onFocus={this.onFocus}
         onBlur={this.onBlur}
         ref={(focusEl) => (this.focusEl = focusEl)}

core/src/components/select/test/select.spec.tsx

@@ -125,3 +125,35 @@ describe('select: slot interactivity', () => {
     expect(divSpy).toHaveBeenCalled();
   });
 });
+
+describe('ion-select: required', () => {
+  it('should have a aria-required attribute as true in inner button', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select required="true"></ion-select>
+      `,
+    });
+
+    const select = page.body.querySelector('ion-select')!;
+
+    const nativeButton = select.shadowRoot!.querySelector('button')!;
+
+    expect(nativeButton.getAttribute('aria-required')).toBe('true');
+  });
+
+  it('should not have a aria-required attribute as false in inner button', async () => {
+    const page = await newSpecPage({
+      components: [Select],
+      html: `
+        <ion-select required="false"></ion-select>
+      `,
+    });
+
+    const select = page.body.querySelector('ion-select')!;
+
+    const nativeButton = select.shadowRoot!.querySelector('button')!;
+
+    expect(nativeButton.getAttribute('aria-required')).toBe('false');
+  });
+});

core/src/components/toast/toast.scss

@@ -97,6 +97,8 @@
   background: var(--background);
 
   box-shadow: var(--box-shadow);
+
+  pointer-events: auto;
 }
 
 .toast-wrapper.toast-top {
@@ -115,7 +117,6 @@
   display: flex;
 
   align-items: center;
-  pointer-events: auto;
 
   height: inherit;
   min-height: inherit;

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

@@ -75,3 +75,33 @@ describe('ion-toggle: disabled', () => {
     expect(toggle.checked).toBe(false);
   });
 });
+
+describe('ion-toggle: required', () => {
+  it('should have a required attribute in inner input when true', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <ion-toggle required="true">Toggle</ion-toggle>
+      `,
+    });
+
+    const toggle = page.body.querySelector('ion-toggle')!;
+    const nativeInput = toggle.shadowRoot?.querySelector('input[role=switch]')!;
+
+    expect(nativeInput.hasAttribute('required')).toBeTruthy();
+  });
+
+  it('should not have a required attribute in inner input when false', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <ion-toggle required="false">Toggle</ion-toggle>
+      `,
+    });
+
+    const toggle = page.body.querySelector('ion-toggle')!;
+    const nativeInput = toggle.shadowRoot?.querySelector('input[role=switch]')!;
+
+    expect(nativeInput.hasAttribute('required')).toBeFalsy();
+  });
+});

core/src/components/toggle/toggle.tsx

@@ -108,6 +108,13 @@ export class Toggle implements ComponentInterface {
    */
   @Prop() alignment?: 'start' | 'center';
 
+  /**
+   * If true, screen readers will announce it as a required field. This property
+   * works only for accessibility purposes, it will not prevent the form from
+   * submitting if the value is invalid.
+   */
+  @Prop() required = false;
+
   /**
    * Emitted when the user switches the toggle on or off.
    *
@@ -290,7 +297,8 @@ export class Toggle implements ComponentInterface {
   }
 
   render() {
-    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
+    const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } =
+      this;
 
     const mode = getIonMode(this);
     const value = this.getValue();
@@ -327,6 +335,7 @@ export class Toggle implements ComponentInterface {
             onFocus={() => this.onFocus()}
             onBlur={() => this.onBlur()}
             ref={(focusEl) => (this.focusEl = focusEl)}
+            required={required}
             {...this.inheritedAttributes}
           />
           <div

core/src/components/toolbar/toolbar.tsx

@@ -13,6 +13,10 @@ import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
  * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
  * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
+ *
+ * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
+ * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
+ * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 @Component({
   tag: 'ion-toolbar',
@@ -97,11 +101,11 @@ export class Toolbar implements ComponentInterface {
           }),
         }}
       >
-        <div class="toolbar-background"></div>
-        <div class="toolbar-container">
+        <div class="toolbar-background" part="background"></div>
+        <div class="toolbar-container" part="container">
           <slot name="start"></slot>
           <slot name="secondary"></slot>
-          <div class="toolbar-content">
+          <div class="toolbar-content" part="content">
             <slot></slot>
           </div>
           <slot name="primary"></slot>

core/src/utils/config.ts

@@ -2,6 +2,7 @@ import type { SpinnerTypes } from '../components/spinner/spinner-configs';
 import type { TabButtonLayout } from '../components/tab-bar/tab-bar-interface';
 import type { AnimationBuilder, Mode } from '../interface';
 
+import type { LogLevel } from './logging';
 import type { PlatformConfig } from './platform';
 
 export interface IonicConfig {
@@ -220,6 +221,15 @@ export interface IonicConfig {
    */
   experimentalCloseWatcher?: boolean;
 
+  /**
+   * Configures the logging level for Ionic Framework:
+   *
+   * - `'OFF'`: No errors or warnings are logged.
+   * - `'ERROR'`: Logs only errors.
+   * - `'WARN'`: Logs errors and warnings.
+   */
+  logLevel?: LogLevel;
+
   // PRIVATE configs
   keyboardHeight?: number;
   inputShims?: boolean;

core/src/utils/focus-trap.ts

@@ -13,7 +13,7 @@ import { focusVisibleElement } from '@utils/helpers';
  * valid usage for the disabled property on ion-button.
  */
 export const focusableQueryString =
-  '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+  '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 
 /**
  * Focuses the first descendant in a context
@@ -78,7 +78,13 @@ const focusElementInContext = <T extends HTMLElement>(
   }
 
   if (elementToFocus) {
-    focusVisibleElement(elementToFocus);
+    const radioGroup = elementToFocus.closest('ion-radio-group');
+
+    if (radioGroup) {
+      radioGroup.setFocus();
+    } else {
+      focusVisibleElement(elementToFocus);
+    }
   } else {
     // Focus fallback element instead of letting focus escape
     fallbackElement.focus();

core/src/utils/logging/index.ts

@@ -1,3 +1,11 @@
+import { config } from '@global/config';
+
+export const enum LogLevel {
+  OFF = 'OFF',
+  ERROR = 'ERROR',
+  WARN = 'WARN',
+}
+
 /**
  * Logs a warning to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
@@ -5,18 +13,24 @@
  * @param message - The string message to be logged to the console.
  */
 export const printIonWarning = (message: string, ...params: any[]) => {
-  return console.warn(`[Ionic Warning]: ${message}`, ...params);
+  const logLevel = config.get('logLevel', LogLevel.WARN);
+  if ([LogLevel.WARN].includes(logLevel)) {
+    return console.warn(`[Ionic Warning]: ${message}`, ...params);
+  }
 };
 
-/*
+/**
  * Logs an error to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
  *
  * @param message - The string message to be logged to the console.
  * @param params - Additional arguments to supply to the console.error.
  */
-export const printIonError = (message: string, ...params: any) => {
-  return console.error(`[Ionic Error]: ${message}`, ...params);
+export const printIonError = (message: string, ...params: any[]) => {
+  const logLevel = config.get('logLevel', LogLevel.ERROR);
+  if ([LogLevel.ERROR, LogLevel.WARN].includes(logLevel)) {
+    return console.error(`[Ionic Error]: ${message}`, ...params);
+  }
 };
 
 /**

core/src/utils/logging/test/logging.spec.ts

@@ -0,0 +1,114 @@
+import { config } from '@global/config';
+import { LogLevel } from '../index';
+
+import { printIonError, printIonWarning } from '../index';
+
+describe('Logging', () => {
+  describe('#printIonWarning', () => {
+    let consoleWarnSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      consoleWarnSpy = jest.spyOn(console, 'warn');
+      // Suppress console.warn output from polluting the test output
+      consoleWarnSpy.mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      consoleWarnSpy.mockRestore();
+    });
+
+    describe('when the logLevel configuration is not set', () => {
+      it('logs a warning to the console', () => {
+        config.set('logLevel', undefined);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).toHaveBeenCalledWith('[Ionic Warning]: This is a warning message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'WARN'", () => {
+      it('logs a warning to the console', () => {
+        config.set('logLevel', LogLevel.WARN);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).toHaveBeenCalledWith('[Ionic Warning]: This is a warning message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'ERROR'", () => {
+      it('does not log a warning to the console', () => {
+        config.set('logLevel', LogLevel.ERROR);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'OFF'", () => {
+      it('does not log a warning to the console', () => {
+        config.set('logLevel', LogLevel.OFF);
+
+        printIonWarning('This is a warning message');
+
+        expect(consoleWarnSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('#printIonError', () => {
+    let consoleErrorSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      consoleErrorSpy = jest.spyOn(console, 'error');
+      // Suppress console.error output from polluting the test output
+      consoleErrorSpy.mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      consoleErrorSpy.mockRestore();
+    });
+
+    describe('when the logLevel configuration is not set', () => {
+      it('logs an error to the console', () => {
+        config.set('logLevel', undefined);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).toHaveBeenCalledWith('[Ionic Error]: This is an error message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'ERROR'", () => {
+      it('logs an error to the console', () => {
+        config.set('logLevel', LogLevel.ERROR);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).toHaveBeenCalledWith('[Ionic Error]: This is an error message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'WARN'", () => {
+      it('logs an error to the console', () => {
+        config.set('logLevel', LogLevel.WARN);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).toHaveBeenCalledWith('[Ionic Error]: This is an error message');
+      });
+    });
+
+    describe("when the logLevel configuration is set to 'OFF'", () => {
+      it('does not log an error to the console', () => {
+        config.set('logLevel', LogLevel.OFF);
+
+        printIonError('This is an error message');
+
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

core/src/utils/overlays.ts

@@ -32,6 +32,7 @@ import {
   removeEventListener,
 } from './helpers';
 import { printIonWarning } from './logging';
+import { isPlatform } from './platform';
 
 let lastOverlayIndex = 0;
 let lastId = 0;
@@ -970,21 +971,30 @@ export const createTriggerController = () => {
  * like TalkBack do not announce or interact with the content until the
  * animation is complete, avoiding confusion for users.
  *
- * If the overlay is being presented, it prevents focus rings from appearing
- * in incorrect positions due to the transition (specifically `transform`
- * styles), ensuring that when aria-hidden is removed, the focus rings are
- * correctly displayed in the final location of the elements.
+ * When the overlay is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). This occurs because the focus rings are initially
+ * displayed at the starting position of the elements before the transition
+ * begins. This workaround ensures the focus rings do not appear in the
+ * incorrect location.
+ *
+ * If this solution is applied to iOS devices, then it leads to a bug where
+ * the overlays cannot be accessed by screen readers. This is due to
+ * VoiceOver not being able to update the accessibility tree when the
+ * `aria-hidden` is removed.
  *
  * @param overlay - The overlay that is being animated.
  */
 const hideAnimatingOverlayFromScreenReaders = (overlay: HTMLIonOverlayElement) => {
   if (doc === undefined) return;
 
-  /**
-   * Once the animation is complete, this attribute will be removed.
-   * This is done at the end of the `present` method.
-   */
-  overlay.setAttribute('aria-hidden', 'true');
+  if (isPlatform('android')) {
+    /**
+     * Once the animation is complete, this attribute will be removed.
+     * This is done at the end of the `present` method.
+     */
+    overlay.setAttribute('aria-hidden', 'true');
+  }
 };
 
 /**

docs/angular/testing.md

@@ -6,11 +6,13 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
 
 The Angular test app supports syncing your locally built changes for validation.
 
-1. Build the `core` and `packages/angular` directories using `npm run build`.
-2. [Build the Angular test app](#test-app-build-structure).
-3. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
-4. Install dependencies using `npm install`.
-5. Sync your local changes using `npm run sync`.
+1. Build the `core` directory.
+2. Navigate to `packages/angular` and run `npm run sync`.
+3. Build `packages/angular` using `npm run build`.
+4. [Build the Angular test app](#test-app-build-structure).
+5. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
+6. Install dependencies using `npm install`.
+7. Sync your local changes using `npm run sync`.
 
 From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache).
 
@@ -86,6 +88,7 @@ As we add support for new versions of Angular, we will also need to update this
 2. Update the application by following the steps on https://update.angular.io/.
 3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, `angular.json`, etc).
 4. Copy the changed files to a new directory in `apps`.
+  - Do NOT copy the entire directory. The `test/base` directory contains shared files between all major versions. Only files that are different than previous major versions should be copied to the new directory in `apps`.
 5. Add a new entry to the matrix for `test-core-angular` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
 6. Commit these changes and push.
 

lerna.json

@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.4.0"
+  "version": "8.4.3"
 }

packages/angular-server/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 **Note:** Version bump only for package @ionic/angular-server

packages/angular-server/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.4.0",
+  "version": "8.4.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.4.0",
+      "version": "8.4.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.4.0"
+        "@ionic/core": "^8.4.3"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -1031,9 +1031,10 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.0.tgz",
-      "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
+      "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -7188,9 +7189,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.0.tgz",
-      "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.4.0",
+  "version": "8.4.3",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.4.0"
+    "@ionic/core": "^8.4.3"
   }
 }

packages/angular/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.4.3](https://github.com/ionic-team/ionic-framework/compare/v8.4.2...v8.4.3) (2025-01-29)
+
+
+### Bug Fixes
+
+* **vue:** update Stencil Vue output target ([#30159](https://github.com/ionic-team/ionic-framework/issues/30159)) ([eb725fc](https://github.com/ionic-team/ionic-framework/commit/eb725fce6eb15facd8a1c21be11a1b2d46336479))
+
+
+
+
+
+## [8.4.2](https://github.com/ionic-team/ionic-framework/compare/v8.4.1...v8.4.2) (2025-01-22)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.4.1](https://github.com/ionic-team/ionic-framework/compare/v8.4.0...v8.4.1) (2024-11-27)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 # [8.4.0](https://github.com/ionic-team/ionic-framework/compare/v8.3.4...v8.4.0) (2024-11-04)
 
 

packages/angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.4.0",
+  "version": "8.4.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.4.0",
+      "version": "8.4.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.4.0",
+        "@ionic/core": "^8.4.3",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1398,9 +1398,10 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.0.tgz",
-      "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
+      "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -9820,9 +9821,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.0.tgz",
-      "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==",
+      "version": "8.4.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.4.3.tgz",
+      "integrity": "sha512-U9HdZ32bre6OKA5akJVmQMxNB8Art3Nqdn3s7m2W83I5NhLg9Tehaf8ua8jxPZtxCa1nuN7tUbzHmMCkcdqDTw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.4.0",
+  "version": "8.4.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.4.0",
+    "@ionic/core": "^8.4.3",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

packages/angular/src/directives/proxies.ts

@@ -18,7 +18,7 @@ import { Components } from '@ionic/core';
   inputs: ['disabled', 'mode', 'readonly', 'toggleIcon', 'toggleIconSlot', 'value'],
 })
 export class IonAccordion {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -40,7 +40,7 @@ export declare interface IonAccordion extends Components.IonAccordion {}
   inputs: ['animated', 'disabled', 'expand', 'mode', 'multiple', 'readonly', 'value'],
 })
 export class IonAccordionGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -73,7 +73,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger'],
 })
 export class IonActionSheet {
-  protected el: HTMLElement;
+  protected el: HTMLIonActionSheetElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -136,7 +136,7 @@ Shorthand for ionActionSheetDidDismiss.
   inputs: ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger'],
 })
 export class IonAlert {
-  protected el: HTMLElement;
+  protected el: HTMLIonAlertElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -198,7 +198,7 @@ Shorthand for ionAlertDidDismiss.
   inputs: [],
 })
 export class IonApp {
-  protected el: HTMLElement;
+  protected el: HTMLIonAppElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -219,7 +219,7 @@ export declare interface IonApp extends Components.IonApp {}
   inputs: [],
 })
 export class IonAvatar {
-  protected el: HTMLElement;
+  protected el: HTMLIonAvatarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -241,7 +241,7 @@ export declare interface IonAvatar extends Components.IonAvatar {}
   inputs: ['stopPropagation', 'tappable', 'visible'],
 })
 export class IonBackdrop {
-  protected el: HTMLElement;
+  protected el: HTMLIonBackdropElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -269,7 +269,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
   inputs: ['color', 'mode'],
 })
 export class IonBadge {
-  protected el: HTMLElement;
+  protected el: HTMLIonBadgeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -291,7 +291,7 @@ export declare interface IonBadge extends Components.IonBadge {}
   inputs: ['active', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'separator', 'target'],
 })
 export class IonBreadcrumb {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -323,7 +323,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
   inputs: ['color', 'itemsAfterCollapse', 'itemsBeforeCollapse', 'maxItems', 'mode'],
 })
 export class IonBreadcrumbs {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -353,7 +353,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
   inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type'],
 })
 export class IonButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -385,7 +385,7 @@ export declare interface IonButton extends Components.IonButton {
   inputs: ['collapse'],
 })
 export class IonButtons {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -407,7 +407,7 @@ export declare interface IonButtons extends Components.IonButtons {}
   inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'],
 })
 export class IonCard {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -429,7 +429,7 @@ export declare interface IonCard extends Components.IonCard {}
   inputs: ['mode'],
 })
 export class IonCardContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -451,7 +451,7 @@ export declare interface IonCardContent extends Components.IonCardContent {}
   inputs: ['color', 'mode', 'translucent'],
 })
 export class IonCardHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -473,7 +473,7 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
   inputs: ['color', 'mode'],
 })
 export class IonCardSubtitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardSubtitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -495,7 +495,7 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
   inputs: ['color', 'mode'],
 })
 export class IonCardTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -507,17 +507,17 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value'],
 })
 export class IonCheckbox {
-  protected el: HTMLElement;
+  protected el: HTMLIonCheckboxElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -557,7 +557,7 @@ This event will not emit when programmatically setting the `checked` property.
   inputs: ['color', 'disabled', 'mode', 'outline'],
 })
 export class IonChip {
-  protected el: HTMLElement;
+  protected el: HTMLIonChipElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -579,7 +579,7 @@ export declare interface IonChip extends Components.IonChip {}
   inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'],
 })
 export class IonCol {
-  protected el: HTMLElement;
+  protected el: HTMLIonColElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -602,7 +602,7 @@ export declare interface IonCol extends Components.IonCol {}
   inputs: ['color', 'fixedSlotPlacement', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'],
 })
 export class IonContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -645,7 +645,7 @@ Set `scrollEvents` to `true` to enable.
   inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
 })
 export class IonDatetime {
-  protected el: HTMLElement;
+  protected el: HTMLIonDatetimeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -689,7 +689,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'datetime', 'disabled', 'mode'],
 })
 export class IonDatetimeButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonDatetimeButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -712,7 +712,7 @@ export declare interface IonDatetimeButton extends Components.IonDatetimeButton
   inputs: ['activated', 'edge', 'horizontal', 'vertical'],
 })
 export class IonFab {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -734,7 +734,7 @@ export declare interface IonFab extends Components.IonFab {}
   inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
 })
 export class IonFabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -766,7 +766,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
   inputs: ['activated', 'side'],
 })
 export class IonFabList {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -788,7 +788,7 @@ export declare interface IonFabList extends Components.IonFabList {}
   inputs: ['collapse', 'mode', 'translucent'],
 })
 export class IonFooter {
-  protected el: HTMLElement;
+  protected el: HTMLIonFooterElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -810,7 +810,7 @@ export declare interface IonFooter extends Components.IonFooter {}
   inputs: ['fixed'],
 })
 export class IonGrid {
-  protected el: HTMLElement;
+  protected el: HTMLIonGridElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -832,7 +832,7 @@ export declare interface IonGrid extends Components.IonGrid {}
   inputs: ['collapse', 'mode', 'translucent'],
 })
 export class IonHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -854,7 +854,7 @@ export declare interface IonHeader extends Components.IonHeader {}
   inputs: ['color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'sanitize', 'size', 'src'],
 })
 export class IonIcon {
-  protected el: HTMLElement;
+  protected el: HTMLIonIconElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -876,7 +876,7 @@ export declare interface IonIcon extends Components.IonIcon {}
   inputs: ['alt', 'src'],
 })
 export class IonImg {
-  protected el: HTMLElement;
+  protected el: HTMLIonImgElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -913,7 +913,7 @@ export declare interface IonImg extends Components.IonImg {
   inputs: ['disabled', 'position', 'threshold'],
 })
 export class IonInfiniteScroll {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -944,7 +944,7 @@ your async operation has completed.
   inputs: ['loadingSpinner', 'loadingText'],
 })
 export class IonInfiniteScrollContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -967,7 +967,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
   inputs: ['autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearInputIcon', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'spellcheck', 'step', 'type', 'value'],
 })
 export class IonInput {
-  protected el: HTMLElement;
+  protected el: HTMLIonInputElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1028,7 +1028,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'hideIcon', 'mode', 'showIcon'],
 })
 export class IonInputPasswordToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonInputPasswordToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1050,7 +1050,7 @@ export declare interface IonInputPasswordToggle extends Components.IonInputPassw
   inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'type'],
 })
 export class IonItem {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1072,7 +1072,7 @@ export declare interface IonItem extends Components.IonItem {}
   inputs: ['color', 'mode', 'sticky'],
 })
 export class IonItemDivider {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemDividerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1093,7 +1093,7 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
   inputs: [],
 })
 export class IonItemGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1115,7 +1115,7 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
   inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'],
 })
 export class IonItemOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1137,7 +1137,7 @@ export declare interface IonItemOption extends Components.IonItemOption {}
   inputs: ['side'],
 })
 export class IonItemOptions {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1166,7 +1166,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
   inputs: ['disabled'],
 })
 export class IonItemSliding {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemSlidingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1194,7 +1194,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
   inputs: ['color', 'mode', 'position'],
 })
 export class IonLabel {
-  protected el: HTMLElement;
+  protected el: HTMLIonLabelElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1217,7 +1217,7 @@ export declare interface IonLabel extends Components.IonLabel {}
   inputs: ['inset', 'lines', 'mode'],
 })
 export class IonList {
-  protected el: HTMLElement;
+  protected el: HTMLIonListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1239,7 +1239,7 @@ export declare interface IonList extends Components.IonList {}
   inputs: ['color', 'lines', 'mode'],
 })
 export class IonListHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonListHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1262,7 +1262,7 @@ export declare interface IonListHeader extends Components.IonListHeader {}
   inputs: ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'],
 })
 export class IonLoading {
-  protected el: HTMLElement;
+  protected el: HTMLIonLoadingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1325,7 +1325,7 @@ Shorthand for ionLoadingDidDismiss.
   inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'],
 })
 export class IonMenu {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1367,7 +1367,7 @@ export declare interface IonMenu extends Components.IonMenu {
   inputs: ['autoHide', 'color', 'disabled', 'menu', 'mode', 'type'],
 })
 export class IonMenuButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1389,7 +1389,7 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
   inputs: ['autoHide', 'menu'],
 })
 export class IonMenuToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1411,7 +1411,7 @@ export declare interface IonMenuToggle extends Components.IonMenuToggle {}
   inputs: ['component', 'componentProps', 'routerAnimation', 'routerDirection'],
 })
 export class IonNavLink {
-  protected el: HTMLElement;
+  protected el: HTMLIonNavLinkElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1433,7 +1433,7 @@ export declare interface IonNavLink extends Components.IonNavLink {}
   inputs: ['color', 'mode'],
 })
 export class IonNote {
-  protected el: HTMLElement;
+  protected el: HTMLIonNoteElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1455,7 +1455,7 @@ export declare interface IonNote extends Components.IonNote {}
   inputs: ['mode'],
 })
 export class IonPicker {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1478,7 +1478,7 @@ export declare interface IonPicker extends Components.IonPicker {}
   inputs: ['color', 'disabled', 'mode', 'value'],
 })
 export class IonPickerColumn {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1510,7 +1510,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'disabled', 'value'],
 })
 export class IonPickerColumnOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1533,7 +1533,7 @@ export declare interface IonPickerColumnOption extends Components.IonPickerColum
   inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
 })
 export class IonPickerLegacy {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerLegacyElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1595,7 +1595,7 @@ Shorthand for ionPickerDidDismiss.
   inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'],
 })
 export class IonProgressBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonProgressBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1617,7 +1617,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
   inputs: ['alignment', 'color', 'disabled', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
 })
 export class IonRadio {
-  protected el: HTMLElement;
+  protected el: HTMLIonRadioElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1639,17 +1639,17 @@ export declare interface IonRadio extends Components.IonRadio {
 
 
 @ProxyCmp({
-  inputs: ['allowEmptySelection', 'compareWith', 'name', 'value']
+  inputs: ['allowEmptySelection', 'compareWith', 'name', 'required', 'value']
 })
 @Component({
   selector: 'ion-radio-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['allowEmptySelection', 'compareWith', 'name', 'value'],
+  inputs: ['allowEmptySelection', 'compareWith', 'name', 'required', 'value'],
 })
 export class IonRadioGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonRadioGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1681,7 +1681,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
 })
 export class IonRange {
-  protected el: HTMLElement;
+  protected el: HTMLIonRangeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1743,7 +1743,7 @@ mouse drag, touch gesture, or keyboard interaction.
   inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
 })
 export class IonRefresher {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1784,7 +1784,7 @@ called when the async operation has completed.
   inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'],
 })
 export class IonRefresherContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1805,7 +1805,7 @@ export declare interface IonRefresherContent extends Components.IonRefresherCont
   inputs: [],
 })
 export class IonReorder {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1828,7 +1828,7 @@ export declare interface IonReorder extends Components.IonReorder {}
   inputs: ['disabled'],
 })
 export class IonReorderGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1861,7 +1861,7 @@ to be called in order to finalize the reorder action.
   inputs: ['type'],
 })
 export class IonRippleEffect {
-  protected el: HTMLElement;
+  protected el: HTMLIonRippleEffectElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1882,7 +1882,7 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
   inputs: [],
 })
 export class IonRow {
-  protected el: HTMLElement;
+  protected el: HTMLIonRowElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1905,7 +1905,7 @@ export declare interface IonRow extends Components.IonRow {}
   inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
 })
 export class IonSearchbar {
-  protected el: HTMLElement;
+  protected el: HTMLIonSearchbarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1965,7 +1965,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['color', 'disabled', 'mode', 'scrollable', 'selectOnFocus', 'swipeGesture', 'value'],
 })
 export class IonSegment {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1997,7 +1997,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['contentId', 'disabled', 'layout', 'mode', 'type', 'value'],
 })
 export class IonSegmentButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2018,7 +2018,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
   inputs: [],
 })
 export class IonSegmentContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2040,7 +2040,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
   inputs: ['disabled'],
 })
 export class IonSegmentView {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentViewElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2060,7 +2060,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'required', 'selectedText', 'shape', 'toggleIcon', 'value'],
   methods: ['open']
 })
 @Component({
@@ -2068,10 +2068,10 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'toggleIcon', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'required', 'selectedText', 'shape', 'toggleIcon', 'value'],
 })
 export class IonSelect {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2119,7 +2119,7 @@ This event will not emit when programmatically setting the `value` property.
   inputs: ['header', 'multiple', 'options'],
 })
 export class IonSelectModal {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectModalElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2141,7 +2141,7 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
   inputs: ['disabled', 'value'],
 })
 export class IonSelectOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2163,7 +2163,7 @@ export declare interface IonSelectOption extends Components.IonSelectOption {}
   inputs: ['animated'],
 })
 export class IonSkeletonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonSkeletonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2185,7 +2185,7 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
   inputs: ['color', 'duration', 'name', 'paused'],
 })
 export class IonSpinner {
-  protected el: HTMLElement;
+  protected el: HTMLIonSpinnerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2207,7 +2207,7 @@ export declare interface IonSpinner extends Components.IonSpinner {}
   inputs: ['contentId', 'disabled', 'when'],
 })
 export class IonSplitPane {
-  protected el: HTMLElement;
+  protected el: HTMLIonSplitPaneElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2236,7 +2236,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
   inputs: ['component', 'tab'],
 })
 export class IonTab {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2258,7 +2258,7 @@ export declare interface IonTab extends Components.IonTab {}
   inputs: ['color', 'mode', 'selectedTab', 'translucent'],
 })
 export class IonTabBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2280,7 +2280,7 @@ export declare interface IonTabBar extends Components.IonTabBar {}
   inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'],
 })
 export class IonTabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2302,7 +2302,7 @@ export declare interface IonTabButton extends Components.IonTabButton {}
   inputs: ['color', 'mode'],
 })
 export class IonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2325,7 +2325,7 @@ export declare interface IonText extends Components.IonText {}
   inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'value', 'wrap'],
 })
 export class IonTextarea {
-  protected el: HTMLElement;
+  protected el: HTMLIonTextareaElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2376,7 +2376,7 @@ the user clears the textarea by performing a keydown event.
   inputs: [],
 })
 export class IonThumbnail {
-  protected el: HTMLElement;
+  protected el: HTMLIonThumbnailElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2398,7 +2398,7 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
   inputs: ['color', 'size'],
 })
 export class IonTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2421,7 +2421,7 @@ export declare interface IonTitle extends Components.IonTitle {}
   inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger'],
 })
 export class IonToast {
-  protected el: HTMLElement;
+  protected el: HTMLIonToastElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2473,17 +2473,17 @@ Shorthand for ionToastDidDismiss.
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'value'],
 })
 export class IonToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2523,7 +2523,7 @@ This event will not emit when programmatically setting the `checked` property.
   inputs: ['color', 'mode'],
 })
 export class IonToolbar {
-  protected el: HTMLElement;
+  protected el: HTMLIonToolbarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -93,7 +93,7 @@ import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/
   standalone: true
 })
 export class IonAccordion {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -117,7 +117,7 @@ export declare interface IonAccordion extends Components.IonAccordion {}
   standalone: true
 })
 export class IonAccordionGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonAccordionGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -152,7 +152,7 @@ This event will not emit when programmatically setting the `value` property.
   standalone: true
 })
 export class IonActionSheet {
-  protected el: HTMLElement;
+  protected el: HTMLIonActionSheetElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -217,7 +217,7 @@ Shorthand for ionActionSheetDidDismiss.
   standalone: true
 })
 export class IonAlert {
-  protected el: HTMLElement;
+  protected el: HTMLIonAlertElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -281,7 +281,7 @@ Shorthand for ionAlertDidDismiss.
   standalone: true
 })
 export class IonApp {
-  protected el: HTMLElement;
+  protected el: HTMLIonAppElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -304,7 +304,7 @@ export declare interface IonApp extends Components.IonApp {}
   standalone: true
 })
 export class IonAvatar {
-  protected el: HTMLElement;
+  protected el: HTMLIonAvatarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -328,7 +328,7 @@ export declare interface IonAvatar extends Components.IonAvatar {}
   standalone: true
 })
 export class IonBackdrop {
-  protected el: HTMLElement;
+  protected el: HTMLIonBackdropElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -358,7 +358,7 @@ export declare interface IonBackdrop extends Components.IonBackdrop {
   standalone: true
 })
 export class IonBadge {
-  protected el: HTMLElement;
+  protected el: HTMLIonBadgeElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -382,7 +382,7 @@ export declare interface IonBadge extends Components.IonBadge {}
   standalone: true
 })
 export class IonBreadcrumb {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -416,7 +416,7 @@ export declare interface IonBreadcrumb extends Components.IonBreadcrumb {
   standalone: true
 })
 export class IonBreadcrumbs {
-  protected el: HTMLElement;
+  protected el: HTMLIonBreadcrumbsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -448,7 +448,7 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
   standalone: true
 })
 export class IonButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -482,7 +482,7 @@ export declare interface IonButton extends Components.IonButton {
   standalone: true
 })
 export class IonButtons {
-  protected el: HTMLElement;
+  protected el: HTMLIonButtonsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -506,7 +506,7 @@ export declare interface IonButtons extends Components.IonButtons {}
   standalone: true
 })
 export class IonCard {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -530,7 +530,7 @@ export declare interface IonCard extends Components.IonCard {}
   standalone: true
 })
 export class IonCardContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -554,7 +554,7 @@ export declare interface IonCardContent extends Components.IonCardContent {}
   standalone: true
 })
 export class IonCardHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -578,7 +578,7 @@ export declare interface IonCardHeader extends Components.IonCardHeader {}
   standalone: true
 })
 export class IonCardSubtitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardSubtitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -602,7 +602,7 @@ export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
   standalone: true
 })
 export class IonCardTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonCardTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -626,7 +626,7 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
   standalone: true
 })
 export class IonChip {
-  protected el: HTMLElement;
+  protected el: HTMLIonChipElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -650,7 +650,7 @@ export declare interface IonChip extends Components.IonChip {}
   standalone: true
 })
 export class IonCol {
-  protected el: HTMLElement;
+  protected el: HTMLIonColElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -675,7 +675,7 @@ export declare interface IonCol extends Components.IonCol {}
   standalone: true
 })
 export class IonContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -719,7 +719,7 @@ Set `scrollEvents` to `true` to enable.
   standalone: true
 })
 export class IonDatetimeButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonDatetimeButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -744,7 +744,7 @@ export declare interface IonDatetimeButton extends Components.IonDatetimeButton
   standalone: true
 })
 export class IonFab {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -768,7 +768,7 @@ export declare interface IonFab extends Components.IonFab {}
   standalone: true
 })
 export class IonFabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -802,7 +802,7 @@ export declare interface IonFabButton extends Components.IonFabButton {
   standalone: true
 })
 export class IonFabList {
-  protected el: HTMLElement;
+  protected el: HTMLIonFabListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -826,7 +826,7 @@ export declare interface IonFabList extends Components.IonFabList {}
   standalone: true
 })
 export class IonFooter {
-  protected el: HTMLElement;
+  protected el: HTMLIonFooterElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -850,7 +850,7 @@ export declare interface IonFooter extends Components.IonFooter {}
   standalone: true
 })
 export class IonGrid {
-  protected el: HTMLElement;
+  protected el: HTMLIonGridElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -874,7 +874,7 @@ export declare interface IonGrid extends Components.IonGrid {}
   standalone: true
 })
 export class IonHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -898,7 +898,7 @@ export declare interface IonHeader extends Components.IonHeader {}
   standalone: true
 })
 export class IonImg {
-  protected el: HTMLElement;
+  protected el: HTMLIonImgElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -937,7 +937,7 @@ export declare interface IonImg extends Components.IonImg {
   standalone: true
 })
 export class IonInfiniteScroll {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -970,7 +970,7 @@ your async operation has completed.
   standalone: true
 })
 export class IonInfiniteScrollContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonInfiniteScrollContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -994,7 +994,7 @@ export declare interface IonInfiniteScrollContent extends Components.IonInfinite
   standalone: true
 })
 export class IonInputPasswordToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonInputPasswordToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1018,7 +1018,7 @@ export declare interface IonInputPasswordToggle extends Components.IonInputPassw
   standalone: true
 })
 export class IonItem {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1042,7 +1042,7 @@ export declare interface IonItem extends Components.IonItem {}
   standalone: true
 })
 export class IonItemDivider {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemDividerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1065,7 +1065,7 @@ export declare interface IonItemDivider extends Components.IonItemDivider {}
   standalone: true
 })
 export class IonItemGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1089,7 +1089,7 @@ export declare interface IonItemGroup extends Components.IonItemGroup {}
   standalone: true
 })
 export class IonItemOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1113,7 +1113,7 @@ export declare interface IonItemOption extends Components.IonItemOption {}
   standalone: true
 })
 export class IonItemOptions {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemOptionsElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1144,7 +1144,7 @@ export declare interface IonItemOptions extends Components.IonItemOptions {
   standalone: true
 })
 export class IonItemSliding {
-  protected el: HTMLElement;
+  protected el: HTMLIonItemSlidingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1174,7 +1174,7 @@ export declare interface IonItemSliding extends Components.IonItemSliding {
   standalone: true
 })
 export class IonLabel {
-  protected el: HTMLElement;
+  protected el: HTMLIonLabelElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1199,7 +1199,7 @@ export declare interface IonLabel extends Components.IonLabel {}
   standalone: true
 })
 export class IonList {
-  protected el: HTMLElement;
+  protected el: HTMLIonListElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1223,7 +1223,7 @@ export declare interface IonList extends Components.IonList {}
   standalone: true
 })
 export class IonListHeader {
-  protected el: HTMLElement;
+  protected el: HTMLIonListHeaderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1248,7 +1248,7 @@ export declare interface IonListHeader extends Components.IonListHeader {}
   standalone: true
 })
 export class IonLoading {
-  protected el: HTMLElement;
+  protected el: HTMLIonLoadingElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1313,7 +1313,7 @@ Shorthand for ionLoadingDidDismiss.
   standalone: true
 })
 export class IonMenu {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1357,7 +1357,7 @@ export declare interface IonMenu extends Components.IonMenu {
   standalone: true
 })
 export class IonMenuButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1381,7 +1381,7 @@ export declare interface IonMenuButton extends Components.IonMenuButton {}
   standalone: true
 })
 export class IonMenuToggle {
-  protected el: HTMLElement;
+  protected el: HTMLIonMenuToggleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1405,7 +1405,7 @@ export declare interface IonMenuToggle extends Components.IonMenuToggle {}
   standalone: true
 })
 export class IonNavLink {
-  protected el: HTMLElement;
+  protected el: HTMLIonNavLinkElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1429,7 +1429,7 @@ export declare interface IonNavLink extends Components.IonNavLink {}
   standalone: true
 })
 export class IonNote {
-  protected el: HTMLElement;
+  protected el: HTMLIonNoteElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1453,7 +1453,7 @@ export declare interface IonNote extends Components.IonNote {}
   standalone: true
 })
 export class IonPicker {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1478,7 +1478,7 @@ export declare interface IonPicker extends Components.IonPicker {}
   standalone: true
 })
 export class IonPickerColumn {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1512,7 +1512,7 @@ This event will not emit when programmatically setting the `value` property.
   standalone: true
 })
 export class IonPickerColumnOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerColumnOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1537,7 +1537,7 @@ export declare interface IonPickerColumnOption extends Components.IonPickerColum
   standalone: true
 })
 export class IonPickerLegacy {
-  protected el: HTMLElement;
+  protected el: HTMLIonPickerLegacyElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1601,7 +1601,7 @@ Shorthand for ionPickerDidDismiss.
   standalone: true
 })
 export class IonProgressBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonProgressBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1625,7 +1625,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
   standalone: true
 })
 export class IonRadio {
-  protected el: HTMLElement;
+  protected el: HTMLIonRadioElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1660,7 +1660,7 @@ export declare interface IonRadio extends Components.IonRadio {
   standalone: true
 })
 export class IonRefresher {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1703,7 +1703,7 @@ called when the async operation has completed.
   standalone: true
 })
 export class IonRefresherContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonRefresherContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1726,7 +1726,7 @@ export declare interface IonRefresherContent extends Components.IonRefresherCont
   standalone: true
 })
 export class IonReorder {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1751,7 +1751,7 @@ export declare interface IonReorder extends Components.IonReorder {}
   standalone: true
 })
 export class IonReorderGroup {
-  protected el: HTMLElement;
+  protected el: HTMLIonReorderGroupElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1786,7 +1786,7 @@ to be called in order to finalize the reorder action.
   standalone: true
 })
 export class IonRippleEffect {
-  protected el: HTMLElement;
+  protected el: HTMLIonRippleEffectElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1809,7 +1809,7 @@ export declare interface IonRippleEffect extends Components.IonRippleEffect {}
   standalone: true
 })
 export class IonRow {
-  protected el: HTMLElement;
+  protected el: HTMLIonRowElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1833,7 +1833,7 @@ export declare interface IonRow extends Components.IonRow {}
   standalone: true
 })
 export class IonSegmentButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1856,7 +1856,7 @@ export declare interface IonSegmentButton extends Components.IonSegmentButton {}
   standalone: true
 })
 export class IonSegmentContent {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentContentElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1880,7 +1880,7 @@ export declare interface IonSegmentContent extends Components.IonSegmentContent
   standalone: true
 })
 export class IonSegmentView {
-  protected el: HTMLElement;
+  protected el: HTMLIonSegmentViewElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1912,7 +1912,7 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
   standalone: true
 })
 export class IonSelectModal {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectModalElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1936,7 +1936,7 @@ export declare interface IonSelectModal extends Components.IonSelectModal {}
   standalone: true
 })
 export class IonSelectOption {
-  protected el: HTMLElement;
+  protected el: HTMLIonSelectOptionElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1960,7 +1960,7 @@ export declare interface IonSelectOption extends Components.IonSelectOption {}
   standalone: true
 })
 export class IonSkeletonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonSkeletonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -1984,7 +1984,7 @@ export declare interface IonSkeletonText extends Components.IonSkeletonText {}
   standalone: true
 })
 export class IonSpinner {
-  protected el: HTMLElement;
+  protected el: HTMLIonSpinnerElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2008,7 +2008,7 @@ export declare interface IonSpinner extends Components.IonSpinner {}
   standalone: true
 })
 export class IonSplitPane {
-  protected el: HTMLElement;
+  protected el: HTMLIonSplitPaneElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2039,7 +2039,7 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
   standalone: true
 })
 export class IonTab {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2063,7 +2063,7 @@ export declare interface IonTab extends Components.IonTab {}
   standalone: true
 })
 export class IonTabBar {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabBarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2087,7 +2087,7 @@ export declare interface IonTabBar extends Components.IonTabBar {}
   standalone: true
 })
 export class IonTabButton {
-  protected el: HTMLElement;
+  protected el: HTMLIonTabButtonElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2111,7 +2111,7 @@ export declare interface IonTabButton extends Components.IonTabButton {}
   standalone: true
 })
 export class IonText {
-  protected el: HTMLElement;
+  protected el: HTMLIonTextElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2134,7 +2134,7 @@ export declare interface IonText extends Components.IonText {}
   standalone: true
 })
 export class IonThumbnail {
-  protected el: HTMLElement;
+  protected el: HTMLIonThumbnailElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2158,7 +2158,7 @@ export declare interface IonThumbnail extends Components.IonThumbnail {}
   standalone: true
 })
 export class IonTitle {
-  protected el: HTMLElement;
+  protected el: HTMLIonTitleElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2183,7 +2183,7 @@ export declare interface IonTitle extends Components.IonTitle {}
   standalone: true
 })
 export class IonToast {
-  protected el: HTMLElement;
+  protected el: HTMLIonToastElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -2247,7 +2247,7 @@ Shorthand for ionToastDidDismiss.
   standalone: true
 })
 export class IonToolbar {
-  protected el: HTMLElement;
+  protected el: HTMLIonToolbarElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;

packages/angular/test/apps/ng16/package.json

@@ -41,10 +41,10 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.0.0",
-    "@angular-eslint/builder": "^16.0.0",
-    "@angular-eslint/eslint-plugin": "^16.0.0",
-    "@angular-eslint/eslint-plugin-template": "^16.0.0",
-    "@angular-eslint/schematics": "^16.0.0",
+    "@angular-eslint/builder": "^16.3.1",
+    "@angular-eslint/eslint-plugin": "^16.3.1",
+    "@angular-eslint/eslint-plugin-template": "^16.3.1",
+    "@angular-eslint/schematics": "^16.3.1",
     "@angular-eslint/template-parser": "^16.0.0",
     "@angular/cli": "^16.0.0",
     "@angular/compiler-cli": "^16.0.0",
@@ -52,11 +52,11 @@
     "@nguniversal/builders": "^16.0.0",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "concurrently": "^6.0.0",
     "cypress": "^13.2.0",
-    "eslint": "^7.26.0",
+    "eslint": "^8.57.1",
     "ts-loader": "^6.2.2",
     "ts-node": "^8.3.0",
     "typescript": "~5.0.2",

packages/angular/test/apps/ng16/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   @Input() params: any = {};
 

packages/angular/test/apps/ng17/e2e/src/lazy/bind-component-inputs.spec.ts

@@ -1,8 +0,0 @@
-it("binding route data to inputs should work", () => {
-  cy.visit('/lazy/version-test/bind-route/test?query=test');
-
-  cy.get('#route-params').contains('test');
-  cy.get('#query-params').contains('test');
-  cy.get('#data').contains('data:bindToComponentInputs');
-  cy.get('#resolve').contains('resolve:bindToComponentInputs');
-});

packages/angular/test/apps/ng17/e2e/src/lazy/modal-nav-params.spec.ts

@@ -1,20 +0,0 @@
-describe('Modal Nav Params', () => {
-
-  beforeEach(() => {
-    cy.visit('/lazy/version-test/modal-nav-params');
-  });
-
-  it('should assign the rootParams when presented in a modal multiple times', () => {
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK');
-
-    cy.contains("Close").click();
-    cy.get('ion-modal').should('not.be.visible');
-
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK').should('exist');
-  });
-
-});

packages/angular/test/apps/ng17/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts

@@ -1,41 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'app-bind-route',
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>bindToComponentInputs</ion-title>
-    </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <div>
-        <h3>Bind Route</h3>
-        <p id="route-params">Route params: id: {{id}}</p>
-        <p id="query-params">Query params: query: {{query}}</p>
-        <p id="data">Data: title: {{title}}</p>
-        <p id="resolve">Resolve: name: {{name}}</p>
-      </div>
-  </ion-content>
-  `,
-  standalone: true,
-  imports: [IonicModule]
-})
-export class BindComponentInputsComponent implements OnInit {
-
-  @Input() id?: string; // path parameter
-  @Input() query?: string; // query parameter
-  @Input() title?: string; // data property
-  @Input() name?: string; // resolve property
-
-  ngOnInit(): void {
-    console.log('BindComponentInputsComponent.ngOnInit', {
-      id: this.id,
-      query: this.query,
-      title: this.title,
-      name: this.name
-    });
-  }
-
-}

packages/angular/test/apps/ng17/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   @Input() params: any;
 

packages/angular/test/apps/ng18/e2e/src/lazy/bind-component-inputs.spec.ts

@@ -1,8 +0,0 @@
-it("binding route data to inputs should work", () => {
-  cy.visit('/lazy/version-test/bind-route/test?query=test');
-
-  cy.get('#route-params').contains('test');
-  cy.get('#query-params').contains('test');
-  cy.get('#data').contains('data:bindToComponentInputs');
-  cy.get('#resolve').contains('resolve:bindToComponentInputs');
-});

packages/angular/test/apps/ng18/e2e/src/lazy/modal-nav-params.spec.ts

@@ -1,20 +0,0 @@
-describe('Modal Nav Params', () => {
-
-  beforeEach(() => {
-    cy.visit('/lazy/version-test/modal-nav-params');
-  });
-
-  it('should assign the rootParams when presented in a modal multiple times', () => {
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK');
-
-    cy.contains("Close").click();
-    cy.get('ion-modal').should('not.be.visible');
-
-    cy.contains('Open Modal').click();
-    cy.get('ion-modal').should('exist').should('be.visible');
-    cy.get('ion-modal').contains('OK').should('exist');
-  });
-
-});

packages/angular/test/apps/ng18/src/app/lazy/version-test/bind-component-inputs/bind-component-inputs.component.ts

@@ -1,41 +0,0 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { IonicModule } from '@ionic/angular';
-
-@Component({
-  selector: 'app-bind-route',
-  template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>bindToComponentInputs</ion-title>
-    </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <div>
-        <h3>Bind Route</h3>
-        <p id="route-params">Route params: id: {{id}}</p>
-        <p id="query-params">Query params: query: {{query}}</p>
-        <p id="data">Data: title: {{title}}</p>
-        <p id="resolve">Resolve: name: {{name}}</p>
-      </div>
-  </ion-content>
-  `,
-  standalone: true,
-  imports: [IonicModule]
-})
-export class BindComponentInputsComponent implements OnInit {
-
-  @Input() id?: string; // path parameter
-  @Input() query?: string; // query parameter
-  @Input() title?: string; // data property
-  @Input() name?: string; // resolve property
-
-  ngOnInit(): void {
-    console.log('BindComponentInputsComponent.ngOnInit', {
-      id: this.id,
-      query: this.query,
-      title: this.title,
-      name: this.name
-    });
-  }
-
-}

packages/angular/test/apps/ng18/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -1,10 +1,10 @@
 import { JsonPipe } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 import { IonicModule } from "@ionic/angular";
 
 /**
- * This is used to track if any occurences of
+ * This is used to track if any occurrences of
  * the ion-nav root component being attached to
  * the DOM result in the rootParams not being
  * assigned to the component instance.
@@ -21,7 +21,7 @@ let rootParamsException = false;
   standalone: true,
   imports: [IonicModule, JsonPipe]
 })
-export class NavRootComponent {
+export class NavRootComponent implements OnInit {
 
   params: any;
 

packages/angular/test/apps/ng19/angular.json

@@ -0,0 +1,156 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "test-app": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/test-app/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "buildOptimizer": true,
+            "assets": [
+              "src/favicon.ico",
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": ["src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "progress": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ]
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "buildTarget": "test-app:build"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "test-app:build:production"
+            },
+            "development": {
+              "buildTarget": "test-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "test-app:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/test-app/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@angular-devkit/build-angular:ssr-dev-server",
+          "options": {
+            "browserTarget": "test-app:build",
+            "serverTarget": "test-app:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "test-app:build:production",
+              "serverTarget": "test-app:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@angular-devkit/build-angular:prerender",
+          "options": {
+            "browserTarget": "test-app:build:production",
+            "serverTarget": "test-app:server:production",
+            "routes": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "cache": {
+      "enabled": false
+    }
+  }
+}

packages/angular/test/apps/ng19/e2e/src/lazy/angular-version.spec.ts

@@ -0,0 +1,5 @@
+it("should be on Angular 19", () => {
+  cy.visit('/lazy');
+
+  cy.get('ion-title').contains('Angular 19');
+});

packages/angular/test/apps/ng19/e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": ["cypress", "node"]
+  },
+  "include": [
+    "../cypress/**/*.ts",
+    "../cypress/support/**/*.ts"
+  ]
+}

packages/angular/test/apps/ng19/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "ionic-angular-test-app",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "sync:build": "sh scripts/build-ionic.sh",
+    "sync": "sh scripts/sync.sh",
+    "build": "ng build --configuration production --no-progress",
+    "lint": "ng lint",
+    "serve:ssr": "node dist/test-app/server/main.js",
+    "build:ssr": "ng build --prod && ng run test-app:server:production",
+    "dev:ssr": "ng run test-app:serve-ssr",
+    "prerender": "ng run test-app:prerender",
+    "cy.open": "cypress open",
+    "cy.run": "cypress run",
+    "test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
+    "test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
+  },
+  "dependencies": {
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/platform-server": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@angular/ssr": "^19.0.2",
+    "@ionic/angular": "^8.4.0",
+    "@ionic/angular-server": "^8.4.0",
+    "core-js": "^3.33.2",
+    "express": "^4.18.2",
+    "ionicons": "^7.2.0",
+    "rxjs": "^7.8.0",
+    "tslib": "^2.3.0",
+    "typescript-eslint-language-service": "^4.1.5",
+    "zone.js": "^0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular-eslint/builder": "^19.0.0",
+    "@angular-eslint/eslint-plugin": "^19.0.0",
+    "@angular-eslint/eslint-plugin-template": "^19.0.0",
+    "@angular-eslint/schematics": "^19.0.0",
+    "@angular-eslint/template-parser": "^19.0.0",
+    "@angular/build": "^19.0.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/language-service": "^19.0.0",
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.9.3",
+    "@types/ws": "8.5.3",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "concurrently": "^6.0.0",
+    "cypress": "^13.16.0",
+    "eslint": "^8.57.0",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "typescript": "^5.6.3",
+    "wait-on": "^8.0.1",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.2"
+  },
+  "engines": {
+    "node": ">= 18"
+  }
+}

packages/angular/test/apps/ng19/server.ts

@@ -0,0 +1,57 @@
+import 'zone.js/dist/zone-node';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { join } from 'path';
+
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app() {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/test-app/browser');
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // app.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run() {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+if (mainModule && mainModule.filename === __filename) {
+  run();
+}
+
+export * from './src/main.server';

packages/angular/test/apps/ng19/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { routes } from './app.routes';
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

packages/angular/test/apps/ng19/src/app/app.module.ts

@@ -0,0 +1,28 @@
+import { APP_ID, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouteReuseStrategy } from '@angular/router';
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+export function ionicConfigFactory(): any {
+  const isLazy = isBrowser && window.location.href.includes('lazy');
+  return isLazy ? { keyboardHeight: 12345 } : {};
+}
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    IonicModule.forRoot(ionicConfigFactory()),
+  ],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    { provide: APP_ID, useValue: 'serverApp' },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

packages/angular/test/apps/ng19/src/app/lazy/version-test/modal-nav-params/modal-nav-params.component.ts

@@ -0,0 +1,44 @@
+import { Component } from "@angular/core";
+import { IonicModule } from "@ionic/angular";  // Only import IonicModule
+
+import { NavRootComponent } from "./nav-root.component";  // Import the NavRootComponent
+
+@Component({
+  selector: 'app-modal-nav-params',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Nav Params</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-button id="open">Open Modal</ion-button>
+      <ion-modal #modal trigger="open">
+        <ng-template>
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="start">
+                <ion-button (click)="modal.dismiss()">Close</ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content>
+            <ion-nav [root]="root" [rootParams]="rootParams"></ion-nav>
+          </ion-content>
+        </ng-template>
+      </ion-modal>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonicModule]  // Only import IonicModule here, remove NavRootComponent
+})
+export class ModalNavParamsComponent {
+
+  root = NavRootComponent;  // Use the root component in the ion-nav
+  rootParams = {
+    params: {
+      id: 123
+    }
+  };
+
+}

packages/angular/test/apps/ng19/src/app/lazy/version-test/modal-nav-params/nav-root.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from "@angular/core";
+
+import { IonicModule } from "@ionic/angular";
+
+/**
+ * This is used to track if any occurrences of
+ * the ion-nav root component being attached to
+ * the DOM result in the rootParams not being
+ * assigned to the component instance.
+ *
+ * https://github.com/ionic-team/ionic-framework/issues/27146
+ */
+let rootParamsException = false;
+
+@Component({
+    selector: 'app-modal-content',
+    template: `
+    {{ hasException ? 'ERROR' : 'OK' }}
+  `,
+    imports: [IonicModule]
+})
+export class NavRootComponent implements OnInit {
+
+  params: any;
+
+  ngOnInit() {
+    if (this.params === undefined) {
+      rootParamsException = true;
+    }
+  }
+
+  get hasException() {
+    return rootParamsException;
+  }
+
+}

packages/angular/test/apps/ng19/src/app/lazy/version-test/version-test-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'modal-nav-params',
+        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
+      },
+      {
+        path: 'bind-route/:id',
+        data: {
+          title: 'data:bindToComponentInputs'
+        },
+        resolve: {
+          name: () => 'resolve:bindToComponentInputs'
+        },
+        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class VersionTestRoutingModule { }

packages/angular/test/apps/ng19/src/main.server.ts

@@ -0,0 +1,15 @@
+import { enableProdMode } from '@angular/core';
+
+import { environment } from './environments/environment';
+
+import { AppServerModule } from './app/app.server.module';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { renderModule } from '@angular/platform-server';
+
+// Add a default export
+export default AppServerModule;

packages/angular/test/apps/ng19/src/server.ts

@@ -0,0 +1,65 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import AppServerModule from './main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+
+const app = express();
+const commonEngine = new CommonEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: 'index.html'
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+
+  commonEngine
+    .render({
+      bootstrap: AppServerModule,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}

packages/angular/test/apps/ng19/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

packages/angular/test/apps/ng19/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "emitDecoratorMetadata": true,
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["ES2022", "dom"],
+    "plugins": [
+      {
+        "name": "typescript-eslint-language-service"
+      }
+    ],
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

packages/angular/test/apps/ng19/tsconfig.server.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app-server",
+    "target": "ES2016",
+    "module": "commonjs",
+    "types": ["node"]
+  },
+  "files": [
+    "src/main.server.ts",
+    "src/server.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "./src/app/app.server.module#AppServerModule"
+  }
+}

packages/angular/test/apps/ng19/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "module": "commonjs",
+    "types": ["jasmine", "node"]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

packages/angular/test/base/.eslintrc.json

@@ -20,6 +20,7 @@
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "@angular-eslint/prefer-standalone": "off",
         "@angular-eslint/component-selector": [
           "error",
           {

packages/angular/test/base/src/app/app-standalone.component.ts

@@ -7,5 +7,5 @@ import { RouterModule } from '@angular/router';
   standalone: true,
   imports: [RouterModule]
 })
-export class AppComponentStandalone {
+export class AppStandaloneComponent {
 }

packages/angular/test/base/src/app/app.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  standalone: false
 })
 export class AppComponent {
 }

packages/angular/test/base/src/app/lazy/accordion/accordion-modal/accordion-modal.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-accordion-modal',
   templateUrl: './accordion-modal.component.html',
+  standalone: false
 })
 export class AccordionModalComponent {
   modal!: HTMLIonModalElement;

packages/angular/test/base/src/app/lazy/accordion/accordion.component.ts

@@ -5,6 +5,7 @@ import { AccordionModalComponent } from './accordion-modal/accordion-modal.compo
 @Component({
   selector: 'app-accordion',
   templateUrl: './accordion.component.html',
+  standalone: false
 })
 export class AccordionComponent {
 

packages/angular/test/base/src/app/lazy/alert/alert.component.ts

@@ -4,6 +4,7 @@ import { AlertController } from '@ionic/angular';
 @Component({
   selector: 'app-alert',
   templateUrl: './alert.component.html',
+  standalone: false
 })
 export class AlertComponent {
 

packages/angular/test/base/src/app/lazy/app-lazy/app.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html'
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    standalone: false
 })
 export class AppComponent {
 }

packages/angular/test/base/src/app/lazy/form-controls/range/range.component.ts

@@ -3,7 +3,8 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-range',
-  templateUrl: './range.component.html'
+  templateUrl: './range.component.html',
+  standalone: false
 })
 export class RangeComponent {
 

packages/angular/test/base/src/app/lazy/form/form.component.ts

@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 
 @Component({
-  selector: 'app-form',
-  templateUrl: './form.component.html',
+    selector: 'app-form',
+    templateUrl: './form.component.html',
+    standalone: false
 })
 export class FormComponent {
 

packages/angular/test/base/src/app/lazy/home-page/home-page.component.ts

@@ -2,8 +2,9 @@ import { Component, VERSION } from '@angular/core';
 import { AnimationBuilder, AnimationController } from '@ionic/angular';
 
 @Component({
-  selector: 'app-home-page',
-  templateUrl: './home-page.component.html',
+    selector: 'app-home-page',
+    templateUrl: './home-page.component.html',
+    standalone: false
 })
 export class HomePageComponent {