5.3.5

fixes #18531

.circleci/config.yml

@@ -1,4 +1,4 @@
-version: 2
+version: 2.1
 
 aliases:
   - &restore-cache
@@ -31,10 +31,29 @@ aliases:
 
 defaults: &defaults
   docker:
-    - image: circleci/node:10-browsers
+    - image: circleci/node:latest-browsers
   working_directory: /tmp/workspace
+  environment:
+    NODE_ENV: development
 
 jobs:
+  puppeteer-dependencies:
+    <<: *defaults
+    steps:
+    - run:
+        name: Install headless Chrome dependencies
+        command: |
+          sudo apt-get install -yq \
+          gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
+          libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
+          libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
+          libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
+          fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
+    - run:
+        name: Install Puppeteer with Chromium
+        command: |
+          npm i puppeteer
+
   build:
     <<: *defaults
     steps:
@@ -311,13 +330,14 @@ jobs:
           command: npm install
           working_directory: /tmp/workspace/angular/test/test-app
       - run:
-          command: npm test
+          command: npm run test -- --protractor-config=e2e/protractor-ci.conf.js
           working_directory: /tmp/workspace/angular/test/test-app
 
 workflows:
   version: 2
   build:
     jobs:
+      - puppeteer-dependencies
       - build
       - build-core:
           requires: [build]
@@ -326,7 +346,7 @@ workflows:
       - test-core-lint:
           requires: [build-core]
       - test-core-e2e:
-          requires: [build-core]
+          requires: [puppeteer-dependencies, build-core]
       - test-core-spec:
           requires: [build-core]
       - test-core-treeshake:

.github/ISSUE_TEMPLATE/bug_report.md

@@ -19,7 +19,8 @@ assignees: ''
 **Ionic version:**
 <!-- (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) -->
 <!-- (For Ionic 2.x & 3.x issues, please use https://github.com/ionic-team/ionic-v3) -->
-[x] **4.x**
+[ ] **4.x**
+[x] **5.x**
 
 **Current behavior:**
 <!-- Describe how the bug manifests. -->

.github/ionic-issue-bot.yml

@@ -130,22 +130,6 @@ noReproduction:
   lock: true
   dryRun: false
 
-labelPullRequest:
-  labels:
-    - label: "package: angular"
-      branch: master
-      path: ^angular
-    - label: "package: core"
-      branch: master
-      path: ^core
-    - label: "package: react"
-      branch: master
-      path: ^react
-    - label: "package: vue"
-      branch: master
-      path: ^vue
-  dryRun: false
-
 wrongRepo:
   repos:
     - label: "ionitron: capacitor"

.github/labeler.yml

@@ -0,0 +1,21 @@
+# This is used with the label workflow which
+# will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# For more information, see:
+# https://github.com/actions/labeler
+
+'package: core':
+  - core/**/*
+
+'package: angular':
+  - angular/**/*
+  - packages/angular-*/**/*
+
+'package: react':
+  - packages/react/**/*
+  - packages/react-*/**/*
+
+'package: vue':
+  - packages/vue/**/*
+  - packages/vue-*/**/*

.github/workflows/label.yml

@@ -0,0 +1,19 @@
+# This workflow will triage pull requests and apply a label based on the
+# paths that are modified in the pull request.
+#
+# To use this workflow, you will need to set up a .github/labeler.yml
+# file with configuration.  For more information, see:
+# https://github.com/actions/labeler
+
+name: "Pull Request Labeler"
+on:
+- pull_request_target
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/labeler@main
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+        sync-labels: true

.gitignore

@@ -64,3 +64,4 @@ core/loader/
 core/www/
 .stencil/
 angular/build/
+core/components/

.scripts/common.js

@@ -209,6 +209,13 @@ function prepareDevPackage(tasks, package, version) {
         title: `${pkg.name}: npm link @ionic/core`,
         task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
       });
+
+      if (package === 'packages/react-router') {
+        projectTasks.push({
+          title: `${pkg.name}: npm link @ionic/react`,
+          task: () => execa('npm', ['link', '@ionic/react'], { cwd: projectRoot })
+        });
+      }
     }
 
     projectTasks.push({

.scripts/release-dev.js

@@ -78,6 +78,9 @@ async function setPackageVersionChanges(packages, version) {
     if (package !== 'core') {
       const pkg = common.readPkg(package);
       common.updateDependency(pkg, '@ionic/core', version);
+      if(package === 'packages/react-router') {
+        common.updateDependency(pkg, '@ionic/react', version);
+      }
       common.writePkg(package, pkg);
     }
     const projectRoot = common.projectPath(package);

.scripts/release.js

@@ -132,7 +132,7 @@ async function publishGithub(version, gitTag, changelog, npmTag) {
 
   await octokit.repos.createRelease({
     owner: 'ionic-team',
-    repo: 'ionic',
+    repo: 'ionic-framework',
     target_commitish: branch,
     tag_name: gitTag,
     name: version,

CHANGELOG.md

@@ -1,3 +1,179 @@
+## [5.3.5](https://github.com/ionic-team/ionic/compare/v5.3.4...v5.3.5) (2020-10-07)
+
+
+### Bug Fixes
+
+* **button:** allow any element type to use the "icon-only" slot ([#22168](https://github.com/ionic-team/ionic/issues/22168)) ([c454c84](https://github.com/ionic-team/ionic/commit/c454c84ef46322143467600334a0263d4e7df6cb))
+* **datetime:** do not set ampm when the column doesn't exist ([#22220](https://github.com/ionic-team/ionic/issues/22220)) ([18fb885](https://github.com/ionic-team/ionic/commit/18fb8855e0c45fe65843b33811812c51c74de90f)), closes [#22149](https://github.com/ionic-team/ionic/issues/22149)
+* **datetime:** remove the automatic switching from am to pm ([#22207](https://github.com/ionic-team/ionic/issues/22207)) ([f81d18c](https://github.com/ionic-team/ionic/commit/f81d18c6f9f1bce056afda1cac4cf6d6ace0a7ca)), closes [#18924](https://github.com/ionic-team/ionic/issues/18924) [#22171](https://github.com/ionic-team/ionic/issues/22171) [#22199](https://github.com/ionic-team/ionic/issues/22199)
+* **item:** properly align datetime and select with fixed or no labels ([#22221](https://github.com/ionic-team/ionic/issues/22221)) ([f42c688](https://github.com/ionic-team/ionic/commit/f42c688f4630e3dc5d10b947e7f2bee9d5967d8c)), closes [#18773](https://github.com/ionic-team/ionic/issues/18773) [#18761](https://github.com/ionic-team/ionic/issues/18761) [#18779](https://github.com/ionic-team/ionic/issues/18779)
+* **label:** keep color when focused on a floating or stacked label ([#18576](https://github.com/ionic-team/ionic/issues/18576)) ([992580a](https://github.com/ionic-team/ionic/commit/992580a3830321bdf9591681ebe38e823205389d)), closes [#18531](https://github.com/ionic-team/ionic/issues/18531)
+* **select:** do not close popover or set value when switching with arrow keys ([#22210](https://github.com/ionic-team/ionic/issues/22210)) ([1878c8e](https://github.com/ionic-team/ionic/commit/1878c8e7e01c02f06bdc5f1562af0d45531539cf)), closes [#22179](https://github.com/ionic-team/ionic/issues/22179)
+
+
+
+## [5.3.4](https://github.com/ionic-team/ionic/compare/v5.3.3...v5.3.4) (2020-09-25)
+
+
+### Bug Fixes
+
+* **alert:** follow accessibility guidelines outlined by wai-aria ([#22159](https://github.com/ionic-team/ionic/issues/22159)) ([e9b2cc8](https://github.com/ionic-team/ionic/commit/e9b2cc8453f5e1c45d44397df738f60ea5b32efd)), closes [#21744](https://github.com/ionic-team/ionic/issues/21744)
+* **overlays:** return focus to presenting element after dismissal ([#22167](https://github.com/ionic-team/ionic/issues/22167)) ([cc45ad8](https://github.com/ionic-team/ionic/commit/cc45ad815c002c5d890f2e105c546b4c3b3a58c0)), closes [#21768](https://github.com/ionic-team/ionic/issues/21768)
+* **picker-column:** add cancelable check to avoid intervention error in chrome ([#22140](https://github.com/ionic-team/ionic/issues/22140)) ([a24a041](https://github.com/ionic-team/ionic/commit/a24a041064fd9ce6ca161d3522083d50e585e9dd)), closes [#22137](https://github.com/ionic-team/ionic/issues/22137)
+* **radio:** follow accessibility guidelines outlined by wai-aria ([#22113](https://github.com/ionic-team/ionic/issues/22113)) ([ea0e049](https://github.com/ionic-team/ionic/commit/ea0e0499e24865faad3d11f50f7037645f6cdcc8)), closes [#21743](https://github.com/ionic-team/ionic/issues/21743)
+* **reorder:** allow click event propagation when reorder group is disabled ([#21947](https://github.com/ionic-team/ionic/issues/21947)) ([baafe08](https://github.com/ionic-team/ionic/commit/baafe08927b7b858170496605781e6fa682e0147)), closes [#21017](https://github.com/ionic-team/ionic/issues/21017)
+* **segment:** do not allow text selection on desktop ([#22158](https://github.com/ionic-team/ionic/issues/22158)) ([1526bdf](https://github.com/ionic-team/ionic/commit/1526bdfb492c1fa8d71f8a1af8cd97abd9e62642))
+
+
+### Performance Improvements
+
+* **segment:** improve scrolling performance on ios when using segment ([#22110](https://github.com/ionic-team/ionic/issues/22110)) ([68afc49](https://github.com/ionic-team/ionic/commit/68afc49e9ed27acffb0b765b7be6b03e8574850d)), closes [#22095](https://github.com/ionic-team/ionic/issues/22095)
+
+
+
+## [5.3.3](https://github.com/ionic-team/ionic/compare/v5.3.2...v5.3.3) (2020-09-17)
+
+
+### Bug Fixes
+
+* **datetime:** do not reset to am when changing hour and pm is set ([#21997](https://github.com/ionic-team/ionic/issues/21997)) ([8b85fe0](https://github.com/ionic-team/ionic/commit/8b85fe0d9eea39adfdcf790bf00d8ef91d5edbe7)), closes [#19175](https://github.com/ionic-team/ionic/issues/19175) [#19260](https://github.com/ionic-team/ionic/issues/19260) [#20026](https://github.com/ionic-team/ionic/issues/20026) [#16630](https://github.com/ionic-team/ionic/issues/16630)
+* **input:** only focus the first input / textarea when clicking on the parent item ([#22049](https://github.com/ionic-team/ionic/issues/22049)) ([99f2532](https://github.com/ionic-team/ionic/commit/99f2532ee174da79e2b6a462cfa124673edc1170)), closes [#22037](https://github.com/ionic-team/ionic/issues/22037) [#22032](https://github.com/ionic-team/ionic/issues/22032)
+* **react:** Keep a hold of previous routes when doing a redirect, closes [#22053](https://github.com/ionic-team/ionic/issues/22053) ([74af3cb](https://github.com/ionic-team/ionic/commit/74af3cb50b089a6bd60d515158e03b18b86455b8))
+* **react:** redirect routes should unmount leaving component, fixes [#22022](https://github.com/ionic-team/ionic/issues/22022) ([#22029](https://github.com/ionic-team/ionic/issues/22029)) ([b11e06c](https://github.com/ionic-team/ionic/commit/b11e06cec1d3c28bab9f29185fe2c3a2975b092f))
+* **textarea:** do not generate duplicate IDs between ion-input and ion-textarea ([#22074](https://github.com/ionic-team/ionic/issues/22074)) ([c72c7ff](https://github.com/ionic-team/ionic/commit/c72c7ffa983af8885dd93f9adfcb3f2af232d2d9)), closes [#21542](https://github.com/ionic-team/ionic/issues/21542)
+
+
+
+## [5.3.2](https://github.com/ionic-team/ionic/compare/v5.3.1...v5.3.2) (2020-08-27)
+
+
+### Bug Fixes
+
+* **input:** improve reliability of scroll assist when accessory bar is enabled ([#21936](https://github.com/ionic-team/ionic/issues/21936)) ([22477fb](https://github.com/ionic-team/ionic/commit/22477fb9bf7c0637aa5c8d0aab34c8ccc521b0b9)), closes [#21912](https://github.com/ionic-team/ionic/issues/21912)
+* **input:** properly focus the input when clicking the item padding in WebKit ([#21930](https://github.com/ionic-team/ionic/issues/21930)) ([e4964ff](https://github.com/ionic-team/ionic/commit/e4964ff77b317c92b201cf7c265787b55bdde4d4)), closes [#21509](https://github.com/ionic-team/ionic/issues/21509)
+* **input:** remain focused in the input after pressing the clear button ([#21985](https://github.com/ionic-team/ionic/issues/21985)) ([6878fb9](https://github.com/ionic-team/ionic/commit/6878fb9eb99c17908f5630019efaa762b5b006e0)), closes [#21549](https://github.com/ionic-team/ionic/issues/21549)
+* **label:** use translateY so input caret shows up due to webkit issue ([#21949](https://github.com/ionic-team/ionic/issues/21949)) ([00eac33](https://github.com/ionic-team/ionic/commit/00eac33053f49dbebf22ef95fddcb66570ed117a)), closes [#21943](https://github.com/ionic-team/ionic/issues/21943)
+* **overlays:** prevent focus from being stolen when presenting another overlay from within a modal ([#21856](https://github.com/ionic-team/ionic/issues/21856)) ([5c177d7](https://github.com/ionic-team/ionic/commit/5c177d756f7755e766d5b619d49825c4799aee47)), closes [#21840](https://github.com/ionic-team/ionic/issues/21840)
+* **range:** properly display stacked labels in an item with a range ([#21944](https://github.com/ionic-team/ionic/issues/21944)) ([9f4b01e](https://github.com/ionic-team/ionic/commit/9f4b01e17fd2f5e742d32bc9e080b6b394c43d37)), closes [#21625](https://github.com/ionic-team/ionic/issues/21625)
+* **react:** export correct animation types ([#21950](https://github.com/ionic-team/ionic/issues/21950)) ([36e4bf7](https://github.com/ionic-team/ionic/commit/36e4bf7dd76e396f910d28445566b5503cc84c8c))
+* **react:** removed exporting of ionRenderToString to decrease bundle size, closes [#21917](https://github.com/ionic-team/ionic/issues/21917) ([#21928](https://github.com/ionic-team/ionic/issues/21928)) ([434befe](https://github.com/ionic-team/ionic/commit/434befea5f31aa599ee5b1b7edf29238912c23d9))
+* **react:** setting active tab properly on mount, closes [#21830](https://github.com/ionic-team/ionic/issues/21830) ([#21833](https://github.com/ionic-team/ionic/issues/21833)) ([f58424f](https://github.com/ionic-team/ionic/commit/f58424f62596b9eb82bebb8e07c211e1725c025a))
+* **react:** fix tab currentHref when changing tabs, closes [#21834](https://github.com/ionic-team/ionic/issues/21834) ([#21835](https://github.com/ionic-team/ionic/issues/21835)) ([74468ab](https://github.com/ionic-team/ionic/commit/74468ab7972b174ba85bf239306c27080f253a4a))
+
+
+
+## [5.3.1](https://github.com/ionic-team/ionic/compare/v5.3.0...v5.3.1) (2020-07-27)
+
+
+### Bug Fixes
+
+* **react:** properly extend HTMLElement for tabs ([bfddb17](https://github.com/ionic-team/ionic/commit/bfddb170659224d0f826762744dfe44a85813d36)), closes [#21803](https://github.com/ionic-team/ionic/issues/21803)
+
+
+
+# [5.3.0 Phosphorus](https://github.com/ionic-team/ionic/compare/v5.2.3...v5.3.0) (2020-07-23)
+
+
+### Bug Fixes
+
+* **angular:** per-page animations now work with swipe to go back ([#21706](https://github.com/ionic-team/ionic/issues/21706)) ([2664587](https://github.com/ionic-team/ionic/commit/2664587749e45100a04f70796733de162b26cdf7)), closes [#21692](https://github.com/ionic-team/ionic/issues/21692)
+* **datetime:** remove unneeded combobox role ([#21708](https://github.com/ionic-team/ionic/issues/21708)) ([f00ad8a](https://github.com/ionic-team/ionic/commit/f00ad8a8357ccd7fe85631dad0c841f2d4c72487))
+* **input:** clear button can now be tabbed to ([#21633](https://github.com/ionic-team/ionic/issues/21633)) ([1dcd9de](https://github.com/ionic-team/ionic/commit/1dcd9de50ae16bfa102e98120a022de5b0287baa))
+* **ios:** improve scroll assist reliability on password inputs ([#21703](https://github.com/ionic-team/ionic/issues/21703)) ([3cbf9e7](https://github.com/ionic-team/ionic/commit/3cbf9e7c4c225d6b02237d8ea8f16fb924ba360e)), closes [#21688](https://github.com/ionic-team/ionic/issues/21688)
+* **keyboard:** keyboard events now consistently fire on android ([#21741](https://github.com/ionic-team/ionic/issues/21741)) ([020f3cc](https://github.com/ionic-team/ionic/commit/020f3cc56cb6dac23dd8766a3802422500b510e2)), closes [#21734](https://github.com/ionic-team/ionic/issues/21734)
+* **nav:** insertPages method correctly inserts multiple pages with props ([#21725](https://github.com/ionic-team/ionic/issues/21725)) ([eb592b8](https://github.com/ionic-team/ionic/commit/eb592b8917b8a7412d8c346f41b47d3b79002b95)), closes [#21724](https://github.com/ionic-team/ionic/issues/21724)
+* **overlays:** trap focus inside overlay components except toast ([#21716](https://github.com/ionic-team/ionic/issues/21716)) ([fff4aec](https://github.com/ionic-team/ionic/commit/fff4aec6cfbd48566594a05f4af57dd0578977a8)), closes [#21647](https://github.com/ionic-team/ionic/issues/21647)
+* **segment-button:** allow min-width to be overridden ([#21722](https://github.com/ionic-team/ionic/issues/21722)) ([88f1828](https://github.com/ionic-team/ionic/commit/88f1828bd8f6b9a1c1f3dcb220d93067bed7f404)), closes [#21105](https://github.com/ionic-team/ionic/issues/21105)
+* **title:** allow overriding of large title transform-origin ([#21770](https://github.com/ionic-team/ionic/issues/21770)) ([dbe6853](https://github.com/ionic-team/ionic/commit/dbe6853884bd76c3d8e229cd58e1571d9b3a7249)), closes [#21761](https://github.com/ionic-team/ionic/issues/21761)
+* **virtual-scroll:** properly calculate top offset when nested ([#21581](https://github.com/ionic-team/ionic/issues/21581)) ([d297ecb](https://github.com/ionic-team/ionic/commit/d297ecb87ad3e1c8f0988f0571a475081ce368f8))
+
+
+### Features
+
+* **card:** expose global card css variables ([#21756](https://github.com/ionic-team/ionic/issues/21756)) ([096eef4](https://github.com/ionic-team/ionic/commit/096eef4a79c2d05c37eb224466c6d7d512d2be20)), closes [#21694](https://github.com/ionic-team/ionic/issues/21694)
+* **input:** accept datetime-local, month, and week type values ([#21758](https://github.com/ionic-team/ionic/issues/21758)) ([fa93dff](https://github.com/ionic-team/ionic/commit/fa93dffdb4f350e8db8acc7f06b06761974eea8e)), closes [#21757](https://github.com/ionic-team/ionic/issues/21757)
+* **input, textarea:** expose native events for ionBlur and ionFocus ([#21777](https://github.com/ionic-team/ionic/issues/21777)) ([a625c83](https://github.com/ionic-team/ionic/commit/a625c837a60abc07ad71c696196a89f1a25a4c27)), closes [#17363](https://github.com/ionic-team/ionic/issues/17363)
+* **react:** add custom history to IonReactRouter ([#21775](https://github.com/ionic-team/ionic/issues/21775)) ([d4a5fbd](https://github.com/ionic-team/ionic/commit/d4a5fbd955e8ecccba8b77491943d81fdf5a5ef4)), closes [#20297](https://github.com/ionic-team/ionic/issues/20297)
+* **react:** add new react router ([#21693](https://github.com/ionic-team/ionic/issues/21693)) ([c171ccb](https://github.com/ionic-team/ionic/commit/c171ccbd37c1ee4b4934758a3a759170ff357cb2))
+* **router:** add navigation hooks ([#21709](https://github.com/ionic-team/ionic/issues/21709)) ([77464ef](https://github.com/ionic-team/ionic/commit/77464ef21aaaa5afa7a02e5417f3ec295b240601))
+* **segment-button, toast:** expose additional shadow parts ([#21532](https://github.com/ionic-team/ionic/issues/21532)) ([a5e4669](https://github.com/ionic-team/ionic/commit/a5e4669c4bcbcb2cdd605ed17c35e42438bd5596))
+* **select:** add optional generic typings ([#21514](https://github.com/ionic-team/ionic/issues/21514)) ([7c2d0c9](https://github.com/ionic-team/ionic/commit/7c2d0c981ab91930478c4b76220ce4ec4ed4e471))
+
+
+
+## [5.2.3](https://github.com/ionic-team/ionic/compare/v5.2.2...v5.2.3) (2020-07-01)
+
+
+### Bug Fixes
+
+* **angular:** expose createAnimation in addition to AnimationController ([#21616](https://github.com/ionic-team/ionic/issues/21616)) ([a5b3750](https://github.com/ionic-team/ionic/commit/a5b3750ee2a7c005f80f8453b03c67dd1a5622ca)), closes [#21615](https://github.com/ionic-team/ionic/issues/21615)
+* **select:** change role to listbox ([#21609](https://github.com/ionic-team/ionic/issues/21609)) ([8c79e2c](https://github.com/ionic-team/ionic/commit/8c79e2c5b58ad562967f2d559c6b548e57536936))
+* **slides:** enable keyboard integration ([#21608](https://github.com/ionic-team/ionic/issues/21608)) ([26674f1](https://github.com/ionic-team/ionic/commit/26674f1dfa8c9a28f5525f1b16070e8ec494c232)), closes [#21554](https://github.com/ionic-team/ionic/issues/21554)
+* **textarea:** add aria-labelledby to native textarea ([#21606](https://github.com/ionic-team/ionic/issues/21606)) ([88f23b1](https://github.com/ionic-team/ionic/commit/88f23b1626eb400336f2f52a3e0d34ac3c161e64)), closes [#21600](https://github.com/ionic-team/ionic/issues/21600)
+
+
+
+## [5.2.2](https://github.com/ionic-team/ionic/compare/v5.2.1...v5.2.2) (2020-06-17)
+
+
+### Bug Fixes
+
+* **action-sheet, alert:** resolve double click issue when running in iOS mode on chrome ([#21506](https://github.com/ionic-team/ionic/issues/21506)) ([bcccc21](https://github.com/ionic-team/ionic/commit/bcccc217b8833a284a1781e287db5e46043b3548)), closes [#21503](https://github.com/ionic-team/ionic/issues/21503)
+* **angular:** fix issue where navAnimation was being incorrectly overridden ([#21508](https://github.com/ionic-team/ionic/issues/21508)) ([e968bd0](https://github.com/ionic-team/ionic/commit/e968bd029a4fb37b4001d96a490c6091a948785a)), closes [#21495](https://github.com/ionic-team/ionic/issues/21495)
+* **input:** add aria-label to clear button ([#21538](https://github.com/ionic-team/ionic/issues/21538)) ([d8b377f](https://github.com/ionic-team/ionic/commit/d8b377ffeb88eaae23b33eadeae5c8e54e1bc77c)), closes [#21537](https://github.com/ionic-team/ionic/issues/21537)
+* **ios:** respect toolbar opacity when doing nav transition ([#21512](https://github.com/ionic-team/ionic/issues/21512)) ([24cfdc3](https://github.com/ionic-team/ionic/commit/24cfdc308f63b7a55969ac58806eafd67116b017))
+* **segment:** ensure checked classes get set after not having a value ([#21547](https://github.com/ionic-team/ionic/issues/21547)) ([17308f2](https://github.com/ionic-team/ionic/commit/17308f247f8750029ece39548c9f457e15326189)), closes [#21546](https://github.com/ionic-team/ionic/issues/21546)
+
+
+## [5.2.1](https://github.com/ionic-team/ionic/compare/v5.2.0...v5.2.1) (2020-06-11)
+
+
+### Bug Fixes
+
+* **angular:** resolve error when not using ngModel on components ([4083e32](https://github.com/ionic-team/ionic/commit/4083e32e103db71f6db86ed1ecd398fda407c28b))
+
+
+
+# [5.2.0 Silicon](https://github.com/ionic-team/ionic/compare/v5.1.1...v5.2.0) (2020-06-10)
+
+
+### Bug Fixes
+
+* **action-sheet, toast:** allow button handler to return `Promise<void>` ([#21259](https://github.com/ionic-team/ionic/issues/21259)) ([7703da2](https://github.com/ionic-team/ionic/commit/7703da28f8181b02390b97a7d4d02df99b2ad34c))
+* **angular:** patch FormControl methods to properly sync Ionic form classes ([#21429](https://github.com/ionic-team/ionic/issues/21429)) ([e95b481](https://github.com/ionic-team/ionic/commit/e95b481a53191582bca635f322ad07eadbd62d64))
+* **datetime:** ensure year-only values are not affected by timezone when parsing ([#21309](https://github.com/ionic-team/ionic/issues/21309)) ([3937101](https://github.com/ionic-team/ionic/commit/3937101e5c2b181a6b7926eb8386c22b0f887716))
+* **header:** large title transition now works on older versions of iOS ([#21339](https://github.com/ionic-team/ionic/issues/21339)) ([2dac12c](https://github.com/ionic-team/ionic/commit/2dac12c577e0c7a5310857389dbda2b2b3dfadd1))
+* **img:** use setTimeout fallback on older versions of chrome  ([#21358](https://github.com/ionic-team/ionic/issues/21358)) ([0bf9449](https://github.com/ionic-team/ionic/commit/0bf9449ee1f9b2498e35f61511cb3e018814c6ca))
+* **ios:** add haptic drag gesture for action sheet and alert components ([#21060](https://github.com/ionic-team/ionic/issues/21060)) ([33be1f0](https://github.com/ionic-team/ionic/commit/33be1f061ebbe27ee22e357c394f112af42ec360))
+* **item:** inherit align-items from parent item ([#19278](https://github.com/ionic-team/ionic/issues/19278)) ([882f8fe](https://github.com/ionic-team/ionic/commit/882f8fef07dfb6ebda17ca09046d1af281075098)), closes [#18703](https://github.com/ionic-team/ionic/issues/18703)
+* **item:** input-wrapper now inherits overflow ([#21282](https://github.com/ionic-team/ionic/issues/21282)) ([29d208d](https://github.com/ionic-team/ionic/commit/29d208de88f340e216e22badb6366bba4eda8bfb))
+* **menu-button:** screen readers now properly announce menu button ([#21324](https://github.com/ionic-team/ionic/issues/21324)) ([eaf4fb6](https://github.com/ionic-team/ionic/commit/eaf4fb6b2a6d68f5c3d8d49ef41b4885f096070d))
+* **modal:** card style modal no longer gets stuck when swiping quickly ([#21224](https://github.com/ionic-team/ionic/issues/21224)) ([448dfa0](https://github.com/ionic-team/ionic/commit/448dfa0a6955008ce4dc73354f5b8319ae1a1cc2))
+* **modal:** set card-style modal height using the --height css variable ([#21453](https://github.com/ionic-team/ionic/issues/21453)) ([a4f0bdb](https://github.com/ionic-team/ionic/commit/a4f0bdb4c3ceeeaf902d520e9aa72e04a6ec2302))
+* **reorder-group:** revert item to original position when passing false to complete ([#21396](https://github.com/ionic-team/ionic/issues/21396)) ([5f2001c](https://github.com/ionic-team/ionic/commit/5f2001c43c0846ec8973cbb8eb5662976ba7e31a)), closes [#19128](https://github.com/ionic-team/ionic/issues/19128)
+* **router:** use correct nav transition when going back ([#21301](https://github.com/ionic-team/ionic/issues/21301)) ([c8db0d5](https://github.com/ionic-team/ionic/commit/c8db0d5eeba6f10d1492e95e6df6b4d871d43400))
+* **scroll-assist:** improve scroll detection accuracy ([#21416](https://github.com/ionic-team/ionic/issues/21416)) ([137c49d](https://github.com/ionic-team/ionic/commit/137c49d70be45e1b0ee73d41fed6e9d69a2caa32))
+* **slides:** update Swiper dependency to resolve error when doing SSR ([#21350](https://github.com/ionic-team/ionic/issues/21350)) ([3290604](https://github.com/ionic-team/ionic/commit/32906048a491961ec7340ba2e085807ea8a9c118))
+* **textarea:** native textarea inherits max/min width and height ([#21333](https://github.com/ionic-team/ionic/issues/21333)) ([2377480](https://github.com/ionic-team/ionic/commit/237748049c7644ae8a7a74101ece5cfd7a160470))
+
+
+### Features
+
+* **alert:** add destructive role to alert buttons ([#21269](https://github.com/ionic-team/ionic/issues/21269)) ([e53f024](https://github.com/ionic-team/ionic/commit/e53f0241e2bf91461c55097fde271ae85ca644ea))
+* **alert:** add support for custom input attributes ([#21365](https://github.com/ionic-team/ionic/issues/21365)) ([1ed8169](https://github.com/ionic-team/ionic/commit/1ed81693f225b6801a0897ef1a8314999c122484))
+* **all:** add all autocomplete values to input and searchbar ([#21297](https://github.com/ionic-team/ionic/issues/21297)) ([4fd7c0c](https://github.com/ionic-team/ionic/commit/4fd7c0cc5a6c97100fa380e4ff1be0bb84c7006b))
+* **all:** add optional generic typings for overlay component methods ([#21393](https://github.com/ionic-team/ionic/issues/21393)) ([5bf83b8](https://github.com/ionic-team/ionic/commit/5bf83b80d7d2749719dd1a280ae8e205fbc4b2a9))
+* **all:** add shadow parts to missing components ([#21436](https://github.com/ionic-team/ionic/issues/21436)) ([17375d2](https://github.com/ionic-team/ionic/commit/17375d232500b47ef1cacd7c028c38990d307984))
+* **all:** add support for configuring animations on a per-page basis  ([#21433](https://github.com/ionic-team/ionic/issues/21433)) ([f34d375](https://github.com/ionic-team/ionic/commit/f34d3752e3462c9d81487fc86af5ec185cc3d1e3))
+* **angular:** expose activatedView ([#21302](https://github.com/ionic-team/ionic/issues/21302)) ([829a0d9](https://github.com/ionic-team/ionic/commit/829a0d9be5a20c5fc96b5c5f18fedc4eb5e5b9ec))
+* **angular:** expose getPlatforms and isPlatform ([#21308](https://github.com/ionic-team/ionic/issues/21308)) ([4af54a2](https://github.com/ionic-team/ionic/commit/4af54a2fea5d9cef843b1ebce849fb4a5c206f0b))
+* **angular:** add strongly typed Ionic lifecycle hooks ([#18044](https://github.com/ionic-team/ionic/issues/18044)) ([53fc8e3](https://github.com/ionic-team/ionic/commit/53fc8e37c89cea793d0e00246d52805166730108)), closes [#18043](https://github.com/ionic-team/ionic/issues/18043)
+* **fab-button:** add close icon font size css variable ([#19628](https://github.com/ionic-team/ionic/issues/19628)) ([df408f9](https://github.com/ionic-team/ionic/commit/df408f91f1aef903adaa5e635fef9bc7542e8739))
+* **fab-button:** add closeIcon property ([#19626](https://github.com/ionic-team/ionic/issues/19626)) ([698e526](https://github.com/ionic-team/ionic/commit/698e526b9f882e98efc4bf160999182c645b772c))
+* **select-option:** pass class from the option to the interface for individual styling  ([#21304](https://github.com/ionic-team/ionic/issues/21304)) ([5285824](https://github.com/ionic-team/ionic/commit/5285824da5258ea638420fc60c50e0a19952f89c))
+
+
+
 ## [5.1.1](https://github.com/ionic-team/ionic/compare/v5.1.0...v5.1.1) (2020-05-13)
 
 
@@ -198,9 +374,9 @@
 * **modal:** presenting multiple card-style modals now adds border radius properly ([#20476](https://github.com/ionic-team/ionic/issues/20476)) ([abf594a](https://github.com/ionic-team/ionic/commit/abf594aa611562a76e3baecfa38456d41a1410f3)), closes [#20475](https://github.com/ionic-team/ionic/issues/20475)
 * **modal:** prevent card style modal styles from being overridden ([#20470](https://github.com/ionic-team/ionic/issues/20470)) ([86ab77a](https://github.com/ionic-team/ionic/commit/86ab77a6e2cb124510c244110fc78a4bc0654cd1)), closes [#20469](https://github.com/ionic-team/ionic/issues/20469)
 * **react:** do a better job matching up route to sync ([#20446](https://github.com/ionic-team/ionic/issues/20446)) ([c0aadd6](https://github.com/ionic-team/ionic/commit/c0aadd60077e5ba379959d93006e3a9c1418263c)), closes [#20363](https://github.com/ionic-team/ionic/issues/20363)
-* **react:** do not remove pages when navigating between tabs ([#20431](https://github.com/ionic-team/ionic/issues/20431)) ([b6fbe98](https://github.com/ionic-team/ionic/commit/b6fbe98812fbab5ef9e0723802605c0711581dd2)), closes [#20398](https://github.com/ionic-team/ionic/issues/20398) 
+* **react:** do not remove pages when navigating between tabs ([#20431](https://github.com/ionic-team/ionic/issues/20431)) ([b6fbe98](https://github.com/ionic-team/ionic/commit/b6fbe98812fbab5ef9e0723802605c0711581dd2)), closes [#20398](https://github.com/ionic-team/ionic/issues/20398)
 * **react:** icons with MD set should work in browser ([#20463](https://github.com/ionic-team/ionic/issues/20463)) ([82670fe](https://github.com/ionic-team/ionic/commit/82670fe4d0592451cbc243b3008beb3f8f483c30))
-* **react:** update paths of tab buttons when href changes in ion buttons ([#20480](https://github.com/ionic-team/ionic/issues/20480)) ([45d03ba](https://github.com/ionic-team/ionic/commit/45d03baf981d0e10eb1fe689908532adef2ba31d)), closes [#20321](https://github.com/ionic-team/ionic/issues/20321) 
+* **react:** update paths of tab buttons when href changes in ion buttons ([#20480](https://github.com/ionic-team/ionic/issues/20480)) ([45d03ba](https://github.com/ionic-team/ionic/commit/45d03baf981d0e10eb1fe689908532adef2ba31d)), closes [#20321](https://github.com/ionic-team/ionic/issues/20321)
 * **searchbar:** properly align placeholder ([#20460](https://github.com/ionic-team/ionic/issues/20460)) ([4d6e15a](https://github.com/ionic-team/ionic/commit/4d6e15ab18fc894c3826b89362163256adc227f4)), closes [#20456](https://github.com/ionic-team/ionic/issues/20456)
 * **segment:** border radius applies to indicator on ios ([#20541](https://github.com/ionic-team/ionic/issues/20541)) ([9b5854d](https://github.com/ionic-team/ionic/commit/9b5854d79712356f8a3772442c0cc412db09d5e0)), closes [#20539](https://github.com/ionic-team/ionic/issues/20539)
 * **segment:** do not show ripple effect if disabled via config ([#20542](https://github.com/ionic-team/ionic/issues/20542)) ([7a461c5](https://github.com/ionic-team/ionic/commit/7a461c59c5d9a23de0bcdd53397f452d17251fd6)), closes [#20533](https://github.com/ionic-team/ionic/issues/20533)

CODE_OF_CONDUCT.md

@@ -1,11 +1,129 @@
-# Contributor Code of Conduct
 
-As contributors and maintainers of the Ionic project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
+# Contributor Covenant Code of Conduct
 
-Communication through any of Ionic's channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+## Our Pledge
 
-We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Ionic project to do the same.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
 
-If any member of the community violates this code of conduct, the maintainers of the Ionic project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
 
-If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [hi@ionicframework.com](mailto:hi@ionicframework.com).
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[contact@ionic.io](mailto:contact@ionic.io).
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

README.md

@@ -1,9 +1,9 @@
-# Ionic
+# Ionic Framework
 
-[Ionic](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
+[Ionic Framework](https://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
 build top quality native and progressive web apps with web technologies.
 
-Ionic is based on [Web Components](https://www.webcomponents.org/introduction) and comes with many significant performance, usability, and feature improvements over the past versions.
+Ionic Framework is based on [Web Components](https://www.webcomponents.org/introduction) and comes with many significant performance, usability, and feature improvements over the past versions.
 
 
 ### Packages
@@ -31,6 +31,8 @@ Thanks for your interest in contributing! Read up on our guidelines for
 and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.
 
+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+
 
 ### Examples
 
@@ -40,7 +42,7 @@ It is the perfect starting point for learning and building your own app.
 
 ### Future Goals
 
-As Ionic components migrate to the web component standard, a goal of ours is to have Ionic components easily work within all of the popular frameworks.
+As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.
 
 ### Earlier Versions
 

angular/.npmrc

@@ -1 +0,0 @@
-package-lock=false

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.1.1",
+  "version": "5.3.5",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "5.1.1",
+    "@ionic/core": "5.3.5",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
@@ -67,12 +67,12 @@
     "ng-packagr": "^9.1.5",
     "rollup": "~1.17.0",
     "rollup-plugin-node-resolve": "~5.2.0",
-    "rxjs": "^6.5.2",
-    "tsickle": "^0.34.0",
+    "rxjs": "^6.6.2",
+    "tsickle": "^0.39.1",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",
     "typescript": "3.4.5",
-    "zone.js": "^0.8.28"
+    "zone.js": "^0.11.1"
   },
   "schematics": "./schematics/collection.json",
   "ngPackage": {

angular/scripts/rollup.config.js

@@ -1,4 +1,4 @@
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';
 
 export default {
   input: 'build/es2015/core.js',

angular/src/directives/control-value-accessors/boolean-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor, setIonicClasses } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor, setIonicClasses } from './value-accessor';
 })
 export class BooleanValueAccessor extends ValueAccessor {
 
-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
   }
 
   writeValue(value: any) {

angular/src/directives/control-value-accessors/numeric-value-accesssor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class NumericValueAccessor extends ValueAccessor {
 
-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
   }
 
   @HostListener('ionChange', ['$event.target'])

angular/src/directives/control-value-accessors/radio-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class RadioValueAccessor extends ValueAccessor {
 
-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
   }
 
   @HostListener('ionSelect', ['$event.target'])

angular/src/directives/control-value-accessors/select-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class SelectValueAccessor extends ValueAccessor {
 
-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
   }
 
   @HostListener('ionChange', ['$event.target'])

angular/src/directives/control-value-accessors/text-value-accessor.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class TextValueAccessor extends ValueAccessor {
 
-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
   }
 
   @HostListener('ionChange', ['$event.target'])

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -1,15 +1,17 @@
-import { ElementRef, HostListener } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { AfterViewInit, ElementRef, HostListener, Injector, OnDestroy, Type } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
 
 import { raf } from '../../util/util';
 
-export class ValueAccessor implements ControlValueAccessor {
+export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy {
 
   private onChange: (value: any) => void = () => {/**/};
   private onTouched: () => void = () => {/**/};
   protected lastValue: any;
+  private statusChanges?: Subscription;
 
-  constructor(protected el: ElementRef) {}
+  constructor(protected injector: Injector, protected el: ElementRef) {}
 
   writeValue(value: any) {
     /**
@@ -52,6 +54,50 @@ export class ValueAccessor implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean) {
     this.el.nativeElement.disabled = isDisabled;
   }
+
+  ngOnDestroy() {
+    if (this.statusChanges) {
+      this.statusChanges.unsubscribe();
+    }
+  }
+
+  ngAfterViewInit() {
+    let ngControl;
+    try {
+      ngControl = this.injector.get<NgControl>(NgControl as Type<NgControl>);
+    } catch { /* No FormControl or ngModel binding */ }
+
+    if (!ngControl) { return; }
+
+    // Listen for changes in validity, disabled, or pending states
+    if (ngControl.statusChanges) {
+      this.statusChanges = ngControl.statusChanges.subscribe(() => setIonicClasses(this.el));
+    }
+
+    /**
+     * TODO Remove this in favor of https://github.com/angular/angular/issues/10887
+     * whenever it is implemented. Currently, Ionic's form status classes
+     * do not react to changes when developers manually call
+     * Angular form control methods such as markAsTouched.
+     * This results in Ionic's form status classes being out
+     * of sync with the ng form status classes.
+     * This patches the methods to manually sync
+     * the classes until this feature is implemented in Angular.
+     */
+    const formControl = ngControl.control;
+    if (formControl) {
+      const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
+      methodsToPatch.forEach(method => {
+       if (formControl[method]) {
+         const oldFn = formControl[method].bind(formControl);
+         formControl[method] = (...params) => {
+           oldFn(...params);
+           setIonicClasses(this.el);
+          };
+        }
+      });
+    }
+  }
 }
 
 export const setIonicClasses = (element: ElementRef) => {

angular/src/directives/navigation/ion-back-button.ts

@@ -1,4 +1,5 @@
 import { Directive, HostListener, Optional } from '@angular/core';
+import { AnimationBuilder } from '@ionic/core';
 
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
@@ -7,11 +8,12 @@ import { IonRouterOutlet } from './ion-router-outlet';
 
 @Directive({
   selector: 'ion-back-button',
-  inputs: ['defaultHref'],
+  inputs: ['defaultHref', 'routerAnimation'],
 })
 export class IonBackButtonDelegate {
 
   defaultHref: string | undefined | null;
+  routerAnimation?: AnimationBuilder;
 
   constructor(
     @Optional() private routerOutlet: IonRouterOutlet,
@@ -27,10 +29,11 @@ export class IonBackButtonDelegate {
     const defaultHref = this.defaultHref || this.config.get('backButtonDefaultHref');
 
     if (this.routerOutlet && this.routerOutlet.canGoBack()) {
+      this.navCtrl.setDirection('back', undefined, undefined, this.routerAnimation);
       this.routerOutlet.pop();
       ev.preventDefault();
     } else if (defaultHref != null) {
-      this.navCtrl.navigateBack(defaultHref);
+      this.navCtrl.navigateBack(defaultHref, { animation: this.routerAnimation });
       ev.preventDefault();
     }
   }

angular/src/directives/navigation/router-link-delegate.ts

@@ -1,20 +1,21 @@
 import { LocationStrategy } from '@angular/common';
 import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
-import { RouterDirection } from '@ionic/core';
+import { AnimationBuilder, RouterDirection } from '@ionic/core';
 import { Subscription } from 'rxjs';
 
 import { NavController } from '../../providers/nav-controller';
 
 @Directive({
   selector: '[routerLink]',
-  inputs: ['routerDirection']
+  inputs: ['routerDirection', 'routerAnimation']
 })
 export class RouterLinkDelegate {
 
   private subscription?: Subscription;
 
   routerDirection: RouterDirection = 'forward';
+  routerAnimation?: AnimationBuilder;
 
   constructor(
     private locationStrategy: LocationStrategy,
@@ -50,7 +51,7 @@ export class RouterLinkDelegate {
    */
   @HostListener('click', ['$event'])
   onClick(ev: UIEvent) {
-    this.navCtrl.setDirection(this.routerDirection);
+    this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
     ev.preventDefault();
   }
 }

angular/src/directives/navigation/stack-controller.ts

@@ -1,7 +1,7 @@
 import { Location } from '@angular/common';
 import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RouterDirection } from '@ionic/core';
+import { AnimationBuilder, RouterDirection } from '@ionic/core';
 
 import { bindLifecycleEvents } from '../../providers/angular-delegate';
 import { NavController } from '../../providers/nav-controller';
@@ -52,7 +52,8 @@ export class StackController {
   }
 
   setActive(enteringView: RouteView): Promise<StackEvent> {
-    let { direction, animation } = this.navCtrl.consumeTransition();
+    const consumeResult = this.navCtrl.consumeTransition();
+    let { direction, animation, animationBuilder } = consumeResult;
     const leavingView = this.activeView;
     const tabSwitch = isTabSwitch(enteringView, leavingView);
     if (tabSwitch) {
@@ -105,6 +106,31 @@ export class StackController {
       enteringView.ref.changeDetectorRef.detectChanges();
     }
 
+    /**
+     * If we are going back from a page that
+     * was presented using a custom animation
+     * we should default to using that
+     * unless the developer explicitly
+     * provided another animation.
+     */
+    const customAnimation = enteringView.animationBuilder;
+    if (
+      animationBuilder === undefined &&
+      direction === 'back' &&
+      !tabSwitch &&
+      customAnimation !== undefined
+    ) {
+      animationBuilder = customAnimation;
+    }
+
+    /**
+     * Save any custom animation so that navigating
+     * back will use this custom animation by default.
+     */
+    if (leavingView) {
+      leavingView.animationBuilder = animationBuilder;
+    }
+
     // Wait until previous transitions finish
     return this.zone.runOutsideAngular(() => {
       return this.wait(() => {
@@ -116,7 +142,7 @@ export class StackController {
         // In case the enteringView is the same as the leavingPage we need to reattach()
         enteringView.ref.changeDetectorRef.reattach();
 
-        return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false)
+        return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false, animationBuilder)
           .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location))
           .then(() => ({
             enteringView,
@@ -154,8 +180,8 @@ export class StackController {
           url = primaryOutlet.route._routerState.snapshot.url;
         }
       }
-
-      return this.navCtrl.navigateBack(url, view.savedExtras).then(() => true);
+      const { animationBuilder } = this.navCtrl.consumeTransition();
+      return this.navCtrl.navigateBack(url, { ...view.savedExtras, animation: animationBuilder }).then(() => true);
     });
   }
 
@@ -164,13 +190,16 @@ export class StackController {
     if (leavingView) {
       const views = this.getStack(leavingView.stackId);
       const enteringView = views[views.length - 2];
+      const customAnimation = enteringView.animationBuilder;
+
       return this.wait(() => {
         return this.transition(
           enteringView, // entering view
           leavingView, // leaving view
           'back',
           this.canGoBack(2),
-          true
+          true,
+          customAnimation
         );
       });
     }
@@ -225,7 +254,8 @@ export class StackController {
     leavingView: RouteView | undefined,
     direction: 'forward' | 'back' | undefined,
     showGoBack: boolean,
-    progressAnimation: boolean
+    progressAnimation: boolean,
+    animationBuilder?: AnimationBuilder
   ) {
     if (this.skipTransition) {
       this.skipTransition = false;
@@ -250,7 +280,8 @@ export class StackController {
           duration: direction === undefined ? 0 : undefined,
           direction,
           showGoBack,
-          progressAnimation
+          progressAnimation,
+          animationBuilder
         });
       }
     }

angular/src/directives/navigation/stack-utils.ts

@@ -1,6 +1,6 @@
 import { ComponentRef } from '@angular/core';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
-import { NavDirection, RouterDirection } from '@ionic/core';
+import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core';
 
 export const insertView = (views: RouteView[], view: RouteView, direction: RouterDirection) => {
   if (direction === 'root') {
@@ -96,4 +96,5 @@ export interface RouteView {
   savedData?: any;
   savedExtras?: NavigationExtras;
   unlistenEvents: () => void;
+  animationBuilder?: AnimationBuilder;
 }

angular/src/directives/proxies.ts

@@ -26,8 +26,8 @@ export class IonAvatar {
 }
 export declare interface IonBackButton extends Components.IonBackButton {
 }
-@ProxyCmp({ inputs: ["color", "defaultHref", "disabled", "icon", "mode", "text", "type"] })
-@Component({ selector: "ion-back-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "text", "type"] })
+@ProxyCmp({ inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] })
+@Component({ selector: "ion-back-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] })
 export class IonBackButton {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -61,8 +61,8 @@ export class IonBadge {
 }
 export declare interface IonButton extends Components.IonButton {
 }
-@ProxyCmp({ inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerDirection", "shape", "size", "strong", "target", "type"] })
-@Component({ selector: "ion-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerDirection", "shape", "size", "strong", "target", "type"] })
+@ProxyCmp({ inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] })
+@Component({ selector: "ion-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] })
 export class IonButton {
     ionFocus!: EventEmitter<CustomEvent>;
     ionBlur!: EventEmitter<CustomEvent>;
@@ -86,8 +86,8 @@ export class IonButtons {
 }
 export declare interface IonCard extends Components.IonCard {
 }
-@ProxyCmp({ inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "target", "type"] })
-@Component({ selector: "ion-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "target", "type"] })
+@ProxyCmp({ inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
+@Component({ selector: "ion-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
 export class IonCard {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -220,8 +220,8 @@ export class IonFab {
 }
 export declare interface IonFabButton extends Components.IonFabButton {
 }
-@ProxyCmp({ inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "show", "size", "target", "translucent", "type"] })
-@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "show", "size", "target", "translucent", "type"] })
+@ProxyCmp({ inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
+@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
 export class IonFabButton {
     ionFocus!: EventEmitter<CustomEvent>;
     ionBlur!: EventEmitter<CustomEvent>;
@@ -344,8 +344,8 @@ export class IonInput {
 }
 export declare interface IonItem extends Components.IonItem {
 }
-@ProxyCmp({ inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerDirection", "target", "type"] })
-@Component({ selector: "ion-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerDirection", "target", "type"] })
+@ProxyCmp({ inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
+@Component({ selector: "ion-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
 export class IonItem {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -462,8 +462,8 @@ export class IonMenu {
 }
 export declare interface IonMenuButton extends Components.IonMenuButton {
 }
-@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "type"] })
-@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["autoHide", "color", "disabled", "menu", "type"] })
+@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] })
+@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] })
 export class IonMenuButton {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -498,8 +498,8 @@ export class IonNav {
 }
 export declare interface IonNavLink extends Components.IonNavLink {
 }
-@ProxyCmp({ inputs: ["component", "componentProps", "routerDirection"] })
-@Component({ selector: "ion-nav-link", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["component", "componentProps", "routerDirection"] })
+@ProxyCmp({ inputs: ["component", "componentProps", "routerAnimation", "routerDirection"] })
+@Component({ selector: "ion-nav-link", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["component", "componentProps", "routerAnimation", "routerDirection"] })
 export class IonNavLink {
     protected el: HTMLElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

angular/src/index.ts

@@ -43,7 +43,7 @@ export * from './types/ionic-lifecycle-hooks';
 export { IonicModule } from './ionic-module';
 
 // UTILS
-export { IonicSafeString, getPlatforms, isPlatform } from '@ionic/core';
+export { IonicSafeString, getPlatforms, isPlatform, createAnimation } from '@ionic/core';
 
 // CORE TYPES
-export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core';
+export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation, NavComponentWithProps } from '@ionic/core';

angular/src/providers/nav-controller.ts

@@ -1,7 +1,7 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
 import { NavigationExtras, NavigationStart, Router, UrlSerializer, UrlTree } from '@angular/router';
-import { NavDirection, RouterDirection } from '@ionic/core';
+import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core';
 
 import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';
 
@@ -9,6 +9,7 @@ import { Platform } from './platform';
 
 export interface AnimationOptions {
   animated?: boolean;
+  animation?: AnimationBuilder;
   animationDirection?: 'forward' | 'back';
 }
 
@@ -22,6 +23,7 @@ export class NavController {
   private topOutlet?: IonRouterOutlet;
   private direction: 'forward' | 'back' | 'root' | 'auto' = DEFAULT_DIRECTION;
   private animated?: NavDirection = DEFAULT_ANIMATED;
+  private animationBuilder?: AnimationBuilder;
   private guessDirection: RouterDirection = 'forward';
   private guessAnimation?: NavDirection;
   private lastNavId = -1;
@@ -65,7 +67,7 @@ export class NavController {
    * ```
    */
   navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
-    this.setDirection('forward', options.animated, options.animationDirection);
+    this.setDirection('forward', options.animated, options.animationDirection, options.animation);
     return this.navigate(url, options);
   }
 
@@ -88,7 +90,7 @@ export class NavController {
    * ```
    */
   navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
-    this.setDirection('back', options.animated, options.animationDirection);
+    this.setDirection('back', options.animated, options.animationDirection, options.animation);
     return this.navigate(url, options);
   }
 
@@ -111,7 +113,7 @@ export class NavController {
    * ```
    */
   navigateRoot(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
-    this.setDirection('root', options.animated, options.animationDirection);
+    this.setDirection('root', options.animated, options.animationDirection, options.animation);
     return this.navigate(url, options);
   }
 
@@ -121,7 +123,7 @@ export class NavController {
    * by default.
    */
   back(options: AnimationOptions = { animated: true, animationDirection: 'back' }) {
-    this.setDirection('back', options.animated, options.animationDirection);
+    this.setDirection('back', options.animated, options.animationDirection, options.animation);
     return this.location.back();
   }
 
@@ -150,9 +152,10 @@ export class NavController {
    *
    * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateRoot()` instead of `setDirection()`.
    */
-  setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back') {
+  setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back', animationBuilder?: AnimationBuilder) {
     this.direction = direction;
     this.animated = getAnimation(direction, animated, animationDirection);
+    this.animationBuilder = animationBuilder;
   }
 
   /**
@@ -168,6 +171,7 @@ export class NavController {
   consumeTransition() {
     let direction: RouterDirection = 'root';
     let animation: NavDirection | undefined;
+    const animationBuilder = this.animationBuilder;
 
     if (this.direction === 'auto') {
       direction = this.guessDirection;
@@ -178,10 +182,12 @@ export class NavController {
     }
     this.direction = DEFAULT_DIRECTION;
     this.animated = DEFAULT_ANIMATED;
+    this.animationBuilder = undefined;
 
     return {
       direction,
-      animation
+      animation,
+      animationBuilder
     };
   }
 

angular/test/test-app/.npmrc

@@ -1 +0,0 @@
-package-lock=false

angular/test/test-app/e2e/protractor-ci.conf.js

@@ -0,0 +1,14 @@
+
+// Protractor CI configuration file, see link for more information
+// https://angular.io/guide/testing#configure-cli-for-ci-testing-in-chrome
+
+const config = require('./protractor.conf').config;
+
+config.capabilities = {
+  browserName: 'chrome',
+  chromeOptions: {
+    args: ['--headless', '--no-sandbox', '--window-size=1920,1080']
+  }
+};
+
+exports.config = config;

angular/test/test-app/e2e/protractor.conf.js

@@ -1,4 +1,4 @@
-  // @ts-check
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 

angular/test/test-app/e2e/src/form.e2e-spec.ts

@@ -1,5 +1,5 @@
 import { browser, element, by } from 'protractor';
-import { handleErrorMessages, setProperty, getText, waitTime } from './utils';
+import { handleErrorMessages, getProperty, setProperty, getText, waitTime } from './utils';
 
 describe('form', () => {
 
@@ -7,6 +7,20 @@ describe('form', () => {
     return handleErrorMessages();
   });
 
+  describe('status updates', () => {
+    beforeEach(async () => {
+      await browser.get('/form');
+      await waitTime(30);
+    });
+
+    it('should update Ionic form classes when calling form methods programatically', async () => {
+      await element(by.css('form #input-touched')).click();
+      await waitTime(100);
+      const classList = (await getProperty('#touched-input-test', 'classList')) as string[];
+      expect(classList.includes('ion-touched')).toEqual(true);
+    });
+  });
+
   describe('change', () => {
     beforeEach(async () => {
       await browser.get('/form');
@@ -17,13 +31,13 @@ describe('form', () => {
       await testStatus('INVALID');
       expect(await getText('#submit')).toEqual('false');
       await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': false,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: false,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
       });
     });
 
@@ -35,39 +49,39 @@ describe('form', () => {
       await setProperty('ion-range', 'value', 40);
       await testStatus('VALID');
       await testData({
-        'datetime': '2010-08-20',
-        'select': 'nes',
-        'toggle': false,
-        'input': 'Some value',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 40
+        datetime: '2010-08-20',
+        select: 'nes',
+        toggle: false,
+        input: 'Some value',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 40
       });
     });
 
     it('ion-toggle should change', async () => {
       await element(by.css('form ion-toggle')).click();
       await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': true,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: true,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
       });
     });
 
     it('ion-checkbox should change', async () => {
       await element(by.css('ion-checkbox')).click();
       await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': false,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': true,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: false,
+        input: '',
+        input2: 'Default Value',
+        checkbox: true,
+        range: 5
       });
     });
 
@@ -88,23 +102,23 @@ describe('form', () => {
     it('ion-toggle should change only after blur', async () => {
       await element(by.css('form ion-toggle')).click();
       await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': false,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: false,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
       });
       await element(by.css('ion-checkbox')).click();
       await testData({
-        'datetime': '2010-08-20',
-        'select': null,
-        'toggle': true,
-        'input': '',
-        'input2': 'Default Value',
-        'checkbox': false,
-        'range': 5
+        datetime: '2010-08-20',
+        select: null,
+        toggle: true,
+        input: '',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 5
       });
     });
   });

angular/test/test-app/e2e/src/tabs.e2e-spec.ts

@@ -149,7 +149,7 @@ describe('tabs', () => {
 
     it('should set root when clicking on an active tab to navigate to the root', async () => {
       const expectNestedTabUrlToContain = 'search=hello#fragment';
-      let tab = await getSelectedTab() as ElementFinder;
+      const tab = await getSelectedTab() as ElementFinder;
       const initialUrl = await browser.getCurrentUrl();
       await tab.$('#goto-nested-page1-with-query-params').click();
       await testTabTitle('Tab 1 - Page 2 (1)');
@@ -176,7 +176,7 @@ describe('tabs', () => {
     it('should preserve root url navigation extras when clicking on an active tab to navigate to the root', async () => {
       await browser.get(rootUrl);
 
-      let tab = await getSelectedTab() as ElementFinder;
+      const tab = await getSelectedTab() as ElementFinder;
       await tab.$('#goto-nested-page1-with-query-params').click();
       await testTabTitle('Tab 1 - Page 2 (1)');
       await testUrlContains(expectNestedTabUrlToContain);

angular/test/test-app/e2e/src/utils.ts

@@ -37,7 +37,7 @@ export interface LifeCycleCount {
 }
 
 export function handleErrorMessages() {
-  return browser.manage().logs().get('browser').then(function (browserLog) {
+  return browser.manage().logs().get('browser').then(browserLog => {
     for (let i = 0; i <= browserLog.length - 1; i++) {
       if (browserLog[i].level.name_ === 'SEVERE') {
         fail(browserLog[i].message);

angular/test/test-app/karma.conf.js

@@ -26,6 +26,12 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
     singleRun: false,
     restartOnFileChange: true
   });

angular/test/test-app/package.json

@@ -8,7 +8,8 @@
     "sync:build": "sh scripts/build-ionic.sh",
     "sync": "sh scripts/sync.sh",
     "build": "npm run sync && ng build --prod --no-progress",
-    "test": "ng e2e --prod",
+    "pretest": "webdriver-manager update --versions.chrome 85.0.4183.87",
+    "test": "ng e2e --prod --webdriver-update=false",
     "test.dev": "npm run sync && ng e2e",
     "lint": "ng lint",
     "postinstall": "npm run sync && ngcc",
@@ -18,46 +19,49 @@
     "prerender": "ng run test-app:prerender"
   },
   "dependencies": {
-    "@angular/animations": "^9.0.0-rc.2",
-    "@angular/common": "^9.0.0-rc.2",
-    "@angular/compiler": "^9.0.0-rc.2",
-    "@angular/core": "^9.0.0-rc.2",
-    "@angular/forms": "^9.0.0-rc.2",
-    "@angular/platform-browser": "^9.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.2",
-    "@angular/platform-server": "^9.0.0-rc.2",
-    "@angular/router": "^9.0.0-rc.2",
-    "@ionic/angular": "^4.7.0",
-    "@ionic/angular-server": "^0.0.2",
+    "@angular/animations": "^9.1.12",
+    "@angular/common": "^9.1.12",
+    "@angular/compiler": "^9.1.12",
+    "@angular/core": "^9.1.12",
+    "@angular/forms": "^9.1.12",
+    "@angular/platform-browser": "^9.1.12",
+    "@angular/platform-browser-dynamic": "^9.1.12",
+    "@angular/platform-server": "^9.1.12",
+    "@angular/router": "^9.1.12",
+    "@ionic/angular": "^5.3.1",
+    "@ionic/angular-server": "^5.3.1",
     "@nguniversal/express-engine": "9.0.0-next.9",
-    "core-js": "^2.6.2",
+    "angular-in-memory-web-api": "^0.11.0",
+    "core-js": "^2.6.11",
     "express": "^4.15.2",
-    "rxjs": "^6.5.3",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "jasmine-marbles": "^0.6.0",
+    "rxjs": "^6.5.5",
+    "tslib": "^1.13.0",
+    "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.0-rc.2",
-    "@angular/cli": "^9.0.0-rc.2",
-    "@angular/compiler-cli": "^9.0.0-rc.2",
-    "@angular/language-service": "^9.0.0-rc.2",
+    "@angular-devkit/build-angular": "^0.901.12",
+    "@angular/cli": "^9.1.12",
+    "@angular/compiler-cli": "^9.1.12",
+    "@angular/language-service": "^9.1.12",
     "@nguniversal/builders": "9.0.0-next.9",
-    "@types/express": "^4.17.0",
-    "@types/jasmine": "3.4.1",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.2",
-    "ts-loader": "^6.1.2",
-    "ts-node": "8.4.1",
-    "tslint": "~5.18.0",
-    "typescript": "~3.6.4",
-    "webpack-cli": "^3.3.9"
+    "@types/express": "^4.17.7",
+    "@types/jasmine": "^3.5.13",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "^12.12.54",
+    "codelyzer": "^5.2.2",
+    "jasmine-core": "^3.5.0",
+    "jasmine-spec-reporter": "^4.2.1",
+    "karma": "^4.4.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-jasmine": "^3.0.3",
+    "karma-jasmine-html-reporter": "^1.5.4",
+    "protractor": "^5.4.4",
+    "ts-loader": "^6.2.2",
+    "ts-node": "^8.3.0",
+    "tslint": "^6.1.3",
+    "typescript": "^3.8.3",
+    "webpack-cli": "^3.3.12"
   }
 }

angular/test/test-app/src/app/alert/alert.component.html

@@ -1,5 +1,8 @@
 <ion-header>
   <ion-toolbar>
+    <ion-buttons>
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>
       Alert test
     </ion-title>

angular/test/test-app/src/app/form/form.component.html

@@ -35,9 +35,11 @@
 
       <ion-item>
         <ion-label>Input (required)</ion-label>
-        <ion-input formControlName="input" class="required"></ion-input>
+        <ion-input formControlName="input" class="required" id="touched-input-test"></ion-input>
       </ion-item>
 
+      <ion-button id="input-touched" (click)="setTouched()">Set Input Touched</ion-button>
+
       <ion-item>
         <ion-label>Input</ion-label>
         <ion-input formControlName="input2"></ion-input>

angular/test/test-app/src/app/form/form.component.ts

@@ -25,6 +25,11 @@ export class FormComponent {
     });
   }
 
+  setTouched() {
+    const formControl = this.profileForm.get('input');
+    formControl.markAsTouched();
+  }
+
   onSubmit(_ev) {
     this.submitted = 'true';
   }

angular/test/test-app/src/app/home-page/home-page.component.html

@@ -7,7 +7,7 @@
   </ion-header>
   <ion-content>
     <ion-list>
-      <ion-item routerLink="/alerts">
+      <ion-item routerLink="/alerts" [routerAnimation]="routerAnimation">
         <ion-label>
           Alerts test
         </ion-label>

angular/test/test-app/src/app/home-page/home-page.component.ts

@@ -1,9 +1,25 @@
 import { Component } from '@angular/core';
+import { AnimationBuilder, AnimationController } from '@ionic/angular';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
 })
 export class HomePageComponent {
+  routerAnimation: AnimationBuilder = (_, opts) => {
+    const { direction, enteringEl, leavingEl } = opts;
+    const animation = this.animationCtrl.create().duration(500).easing('ease-out');
+    const enteringAnimation = this.animationCtrl.create().addElement(enteringEl).beforeRemoveClass(['ion-page-invisible']);
+    const leavingAnimation = this.animationCtrl.create().addElement(leavingEl).beforeRemoveClass(['ion-page-invisible']);
+    if (direction === 'back') {
+      enteringAnimation.fromTo('transform', 'translateX(-100%)', 'translateX(0%)');
+      leavingAnimation.fromTo('transform', 'translateX(0%)', 'translateX(100%)');
+    } else {
+      enteringAnimation.fromTo('transform', 'translateX(100%)', 'translateX(0%)');
+      leavingAnimation.fromTo('transform', 'translateX(0%)', 'translateX(-100%)');
+    }
+    return animation.addAnimation([enteringAnimation, leavingAnimation]);
+  };
 
+  constructor(private animationCtrl: AnimationController) {}
 }

core/.npmrc

@@ -1 +0,0 @@
-package-lock=false

core/CONTRIBUTING.md

@@ -1,121 +0,0 @@
-# Contribution guide
-
-## Contribute to Ionic Core
-
-Ionic Core is the fundation of Ionic v4. It's based in [Stencil](https://stenciljs.com) and consist in a set of web components a long of JS and CSS utils.
-
-
-### Installing dependencies
-
-Before you can build ionic, we assume the following list of software is already installed in your system
-
-- Git
-- Node 8 or higher
-- Npm 6.0 or higher
-
-
-### Fork repository
-
-In order to contributo to Ionic, you must have a github account so you can push code and create a new Pull Request (PR).
-
-Once you are all setup, following the Github's guide of how to fork a repository: https://guides.github.com/activities/forking/
-
-
-### Build Ionic Core
-
-```bash
-# Clone your Github repository:
-git clone https://github.com/<github username>/ionic.git
-
-# Go to the core directory:
-cd ionic/core
-
-# Install npm dependencies
-npm install
-
-# Run Ionic dev server
-npm start
-```
-
-### Development Workflow
-
-#### 1. Run Dev Server
-
-```bash
-# Move to the core folder
-cd core
-
-# Run dev server
-npm start
-```
-
-You should be able to navigate to `http://localhost:3333` which will look like a file browser.
-
-E2E tests are located inside the `src/components` folder, in the following way: `http://localhost:3333/src/components/{COMPONENT}/test/`
-
-
-**Path examples:**
-
-- ActionSheet basic test: http://localhost:3333/src/components/action-sheet/test/basic
-- Nav basic test: http://localhost:3333/src/components/nav/test/basic
-- Button basic test:
-http://localhost:3333/src/components/button/test/basic
-
-
-**IMPORTANT**
-
-Leave the dev server running in the background while you make changes. The dev server listen for changes and automatically recompile Ionic for you.
-
-
-
-#### 2. Open `core` folder in your IDE
-
-Components implementations live inside the `core/src/components` folder.
-
-You can find each ionic component inside their directory.
-
-
-#### 3. Run test suite
-
-Before commiting your changes make sure tests are passing:
-
-```
-npm run validate
-```
-
-#### 4. Create a branch and commit
-
-```bash
-# Create a git branch
-git checkout -b my-improvement
-
-# Add changes
-git add .
-
-# Create commit
-git commit -m "fix(component): message"
-```
-
-Create a PR:
-https://guides.github.com/activities/forking/
-
-
-### Summary
-
-```bash
-# Clone repo
-git clone git@github.com:ionic-team/ionic.git
-
-# Move to ionic/core folder
-cd ionic/core
-
-# Install npm dependencies
-npm i
-
-# Run dev server
-npm start
-
-# Run test suite
-npm run validate
-```
-

core/api.txt

@@ -85,6 +85,7 @@ ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
 ion-back-button,prop,disabled,boolean,false,false,true
 ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
+ion-back-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-back-button,css-prop,--background
@@ -119,6 +120,9 @@ ion-back-button,css-prop,--padding-start
 ion-back-button,css-prop,--padding-top
 ion-back-button,css-prop,--ripple-color
 ion-back-button,css-prop,--transition
+ion-back-button,part,icon
+ion-back-button,part,native
+ion-back-button,part,text
 
 ion-backdrop,shadow
 ion-backdrop,prop,stopPropagation,boolean,true,false,false
@@ -146,6 +150,7 @@ ion-button,prop,fill,"clear" | "default" | "outline" | "solid" | undefined,undef
 ion-button,prop,href,string | undefined,undefined,false,false
 ion-button,prop,mode,"ios" | "md",undefined,false,false
 ion-button,prop,rel,string | undefined,undefined,false,false
+ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-button,prop,shape,"round" | undefined,undefined,false,true
 ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true
@@ -177,6 +182,7 @@ ion-button,css-prop,--padding-start
 ion-button,css-prop,--padding-top
 ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
+ion-button,part,native
 
 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false
@@ -189,11 +195,13 @@ ion-card,prop,download,string | undefined,undefined,false,false
 ion-card,prop,href,string | undefined,undefined,false,false
 ion-card,prop,mode,"ios" | "md",undefined,false,false
 ion-card,prop,rel,string | undefined,undefined,false,false
+ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-card,css-prop,--background
 ion-card,css-prop,--color
+ion-card,part,native
 
 ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
@@ -288,7 +296,7 @@ ion-content,prop,scrollY,boolean,true,false,false
 ion-content,method,getScrollElement,getScrollElement() => Promise<HTMLElement>
 ion-content,method,scrollByPoint,scrollByPoint(x: number, y: number, duration: number) => Promise<void>
 ion-content,method,scrollToBottom,scrollToBottom(duration?: number) => Promise<void>
-ion-content,method,scrollToPoint,scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>
+ion-content,method,scrollToPoint,scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>
 ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
@@ -351,12 +359,14 @@ ion-fab,method,close,close() => Promise<void>
 
 ion-fab-button,shadow
 ion-fab-button,prop,activated,boolean,false,false,false
+ion-fab-button,prop,closeIcon,string,'close',false,false
 ion-fab-button,prop,color,string | undefined,undefined,false,false
 ion-fab-button,prop,disabled,boolean,false,false,false
 ion-fab-button,prop,download,string | undefined,undefined,false,false
 ion-fab-button,prop,href,string | undefined,undefined,false,false
 ion-fab-button,prop,mode,"ios" | "md",undefined,false,false
 ion-fab-button,prop,rel,string | undefined,undefined,false,false
+ion-fab-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-fab-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-fab-button,prop,show,boolean,false,false,false
 ion-fab-button,prop,size,"small" | undefined,undefined,false,false
@@ -377,6 +387,7 @@ ion-fab-button,css-prop,--border-radius
 ion-fab-button,css-prop,--border-style
 ion-fab-button,css-prop,--border-width
 ion-fab-button,css-prop,--box-shadow
+ion-fab-button,css-prop,--close-icon-font-size
 ion-fab-button,css-prop,--color
 ion-fab-button,css-prop,--color-activated
 ion-fab-button,css-prop,--color-focused
@@ -387,6 +398,8 @@ ion-fab-button,css-prop,--padding-start
 ion-fab-button,css-prop,--padding-top
 ion-fab-button,css-prop,--ripple-color
 ion-fab-button,css-prop,--transition
+ion-fab-button,part,close-icon
+ion-fab-button,part,native
 
 ion-fab-list,shadow
 ion-fab-list,prop,activated,boolean,false,false,false
@@ -462,13 +475,13 @@ ion-input,prop,required,boolean,false,false,false
 ion-input,prop,size,number | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
-ion-input,prop,type,"date" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url",'text',false,false
+ion-input,prop,type,"date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week",'text',false,false
 ion-input,prop,value,null | number | string | undefined,'',false,false
 ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
 ion-input,method,setFocus,setFocus() => Promise<void>
-ion-input,event,ionBlur,void,true
+ion-input,event,ionBlur,FocusEvent,true
 ion-input,event,ionChange,InputChangeEventDetail,true
-ion-input,event,ionFocus,void,true
+ion-input,event,ionFocus,FocusEvent,true
 ion-input,event,ionInput,KeyboardEvent,true
 ion-input,css-prop,--background
 ion-input,css-prop,--color
@@ -492,6 +505,7 @@ ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-item,prop,mode,"ios" | "md",undefined,false,false
 ion-item,prop,rel,string | undefined,undefined,false,false
+ion-item,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-item,prop,target,string | undefined,undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
@@ -531,6 +545,7 @@ ion-item,css-prop,--padding-top
 ion-item,css-prop,--ripple-color
 ion-item,css-prop,--transition
 ion-item,part,detail-icon
+ion-item,part,native
 
 ion-item-divider,shadow
 ion-item-divider,prop,color,string | undefined,undefined,false,false
@@ -561,6 +576,7 @@ ion-item-option,prop,target,string | undefined,undefined,false,false
 ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item-option,css-prop,--background
 ion-item-option,css-prop,--color
+ion-item-option,part,native
 
 ion-item-options,none
 ion-item-options,prop,side,"end" | "start",'end',false,false
@@ -572,7 +588,7 @@ ion-item-sliding,method,close,close() => Promise<void>
 ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
 ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
 ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise<number>
-ion-item-sliding,method,open,open(side: "start" | "end" | undefined) => Promise<void>
+ion-item-sliding,method,open,open(side: Side | undefined) => Promise<void>
 ion-item-sliding,event,ionDrag,any,true
 
 ion-label,scoped
@@ -662,6 +678,7 @@ ion-menu-button,prop,autoHide,boolean,true,false,false
 ion-menu-button,prop,color,string | undefined,undefined,false,false
 ion-menu-button,prop,disabled,boolean,false,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
+ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
 ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-menu-button,css-prop,--background
 ion-menu-button,css-prop,--background-focused
@@ -676,6 +693,8 @@ ion-menu-button,css-prop,--padding-bottom
 ion-menu-button,css-prop,--padding-end
 ion-menu-button,css-prop,--padding-start
 ion-menu-button,css-prop,--padding-top
+ion-menu-button,part,icon
+ion-menu-button,part,native
 
 ion-menu-toggle,shadow
 ion-menu-toggle,prop,autoHide,boolean,true,false,false
@@ -726,13 +745,13 @@ ion-nav,method,getActive,getActive() => Promise<ViewController | undefined>
 ion-nav,method,getByIndex,getByIndex(index: number) => Promise<ViewController | undefined>
 ion-nav,method,getPrevious,getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>
 ion-nav,method,insert,insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,insertPages,insertPages(insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
+ion-nav,method,insertPages,insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,pop,pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,popTo,popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,popToRoot,popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,push,push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,removeIndex,removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,method,setPages,setPages(views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
+ion-nav,method,setPages,setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,event,ionNavDidChange,void,false
 ion-nav,event,ionNavWillChange,void,false
@@ -740,6 +759,7 @@ ion-nav,event,ionNavWillChange,void,false
 ion-nav-link,none
 ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 
 ion-note,shadow
@@ -913,6 +933,8 @@ ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false
 ion-ripple-effect,method,addRipple,addRipple(x: number, y: number) => Promise<() => void>
 
 ion-route,none
+ion-route,prop,beforeEnter,(() => boolean | NavigationHookOptions | Promise<NavigationHookResult>) | undefined,undefined,false,false
+ion-route,prop,beforeLeave,(() => boolean | NavigationHookOptions | Promise<NavigationHookResult>) | undefined,undefined,false,false
 ion-route,prop,component,string,undefined,true,false
 ion-route,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-route,prop,url,string,'',false,false
@@ -927,7 +949,7 @@ ion-router,none
 ion-router,prop,root,string,'/',false,false
 ion-router,prop,useHash,boolean,true,false,false
 ion-router,method,back,back() => Promise<void>
-ion-router,method,push,push(url: string, direction?: RouterDirection) => Promise<boolean>
+ion-router,method,push,push(url: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>
 ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true
 
@@ -935,6 +957,7 @@ ion-router-link,shadow
 ion-router-link,prop,color,string | undefined,undefined,false,false
 ion-router-link,prop,href,string | undefined,undefined,false,false
 ion-router-link,prop,rel,string | undefined,undefined,false,false
+ion-router-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-router-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-router-link,prop,target,string | undefined,undefined,false,false
 ion-router-link,css-prop,--background
@@ -1029,6 +1052,9 @@ ion-segment-button,css-prop,--padding-end
 ion-segment-button,css-prop,--padding-start
 ion-segment-button,css-prop,--padding-top
 ion-segment-button,css-prop,--transition
+ion-segment-button,part,indicator
+ion-segment-button,part,indicator-background
+ion-segment-button,part,native
 
 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false
@@ -1046,7 +1072,7 @@ ion-select,prop,value,any,undefined,false,false
 ion-select,method,open,open(event?: UIEvent | undefined) => Promise<any>
 ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
-ion-select,event,ionChange,SelectChangeEventDetail,true
+ion-select,event,ionChange,SelectChangeEventDetail<any>,true
 ion-select,event,ionFocus,void,true
 ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
@@ -1166,6 +1192,7 @@ ion-tab-button,css-prop,--padding-end
 ion-tab-button,css-prop,--padding-start
 ion-tab-button,css-prop,--padding-top
 ion-tab-button,css-prop,--ripple-color
+ion-tab-button,part,native
 
 ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
@@ -1202,9 +1229,9 @@ ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
 ion-textarea,method,getInputElement,getInputElement() => Promise<HTMLTextAreaElement>
 ion-textarea,method,setFocus,setFocus() => Promise<void>
-ion-textarea,event,ionBlur,void,true
+ion-textarea,event,ionBlur,FocusEvent,true
 ion-textarea,event,ionChange,TextareaChangeEventDetail,true
-ion-textarea,event,ionFocus,void,true
+ion-textarea,event,ionFocus,FocusEvent,true
 ion-textarea,event,ionInput,KeyboardEvent,true
 ion-textarea,css-prop,--background
 ion-textarea,css-prop,--border-radius
@@ -1266,6 +1293,10 @@ ion-toast,css-prop,--min-width
 ion-toast,css-prop,--start
 ion-toast,css-prop,--white-space
 ion-toast,css-prop,--width
+ion-toast,part,button
+ion-toast,part,container
+ion-toast,part,header
+ion-toast,part,message
 
 ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.1.1",
+  "version": "5.3.5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -30,38 +30,38 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "^5.0.1",
+    "ionicons": "^5.1.2",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.13.0",
-    "@stencil/sass": "1.3.1",
-    "@types/jest": "24.9.1",
-    "@types/node": "12.12.3",
-    "@types/puppeteer": "1.19.1",
-    "@types/swiper": "5.3.1",
-    "aws-sdk": "^2.497.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-virtual": "^2.0.3",
+    "@stencil/core": "1.17.3",
+    "@stencil/sass": "1.3.2",
+    "@types/jest": "^26.0.10",
+    "@types/node": "^14.6.0",
+    "@types/puppeteer": "3.0.1",
+    "@types/swiper": "5.4.0",
+    "aws-sdk": "^2.738.0",
     "clean-css-cli": "^4.1.11",
-    "domino": "^2.1.3",
-    "fs-extra": "^8.0.1",
-    "jest": "24.9.0",
-    "jest-cli": "24.9.0",
-    "np": "^5.0.3",
+    "domino": "^2.1.6",
+    "fs-extra": "^9.0.1",
+    "jest": "^26.4.1",
+    "jest-cli": "^26.4.1",
+    "np": "^6.4.0",
     "pixelmatch": "4.0.2",
-    "puppeteer": "1.20.0",
-    "rollup": "1.32.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-virtual": "^1.0.1",
-    "sass": "^1.22.9",
-    "stylelint": "10.1.0",
-    "stylelint-order": "3.0.1",
+    "puppeteer": "^5.2.1",
+    "rollup": "^2.26.4",
+    "sass": "^1.26.10",
+    "stylelint": "^13.6.1",
+    "stylelint-order": "^4.1.0",
     "swiper": "5.4.1",
-    "tslint": "^5.10.0",
+    "tslint": "^6.1.3",
     "tslint-ionic-rules": "0.0.21",
-    "tslint-react": "^3.6.0"
+    "tslint-react": "^5.0.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && npm run build.vendor && stencil build --docs && npm run cdnloader",
+    "build": "npm run clean && npm run build.css && npm run build.vendor && stencil build --docs --es5 && npm run cdnloader",
     "build.vendor": "rollup --config ./scripts/swiper.rollup.config.js",
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",

core/scripts/swiper.rollup.config.js

@@ -1,4 +1,4 @@
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';
 
 export default {
   input: 'src/components/slides/swiper/swiper.js',

core/scripts/treeshaking.js

@@ -1,7 +1,7 @@
 
 const path = require('path');
 const { rollup } = require('rollup');
-const virtual = require('rollup-plugin-virtual');
+const virtual = require('@rollup/plugin-virtual');
 const fs = require('fs');
 
 function main() {

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

@@ -26,6 +26,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
 export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
+  lastFocus?: HTMLElement;
   animation?: any;
   private wrapperEl?: HTMLElement;
   private groupEl?: HTMLElement;
@@ -117,7 +118,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
   }
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 
@@ -197,7 +198,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;
@@ -250,7 +251,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         onIonBackdropTap={this.onBackdropTap}
       >
         <ion-backdrop tappable={this.backdropDismiss}/>
-        <div class="action-sheet-wrapper ion-wrapper" role="dialog"  ref={el => this.wrapperEl = el}>
+
+        <div tabindex="0"></div>
+
+        <div class="action-sheet-wrapper ion-overlay-wrapper" role="dialog" ref={el => this.wrapperEl = el}>
           <div class="action-sheet-container">
             <div class="action-sheet-group" ref={el => this.groupEl = el}>
               {this.header !== undefined &&
@@ -292,6 +296,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
             }
           </div>
         </div>
+
+        <div tabindex="0"></div>
       </Host>
     );
   }

core/src/components/action-sheet/readme.md

@@ -280,16 +280,19 @@ export class ActionSheetExample {
 
 ```html
 <template>
-  <IonVuePage :title="'Action Sheet'">
-    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, actionSheetController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentActionSheet() {
-      return this.$ionic.actionSheetController
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
         .create({
           header: 'Albums',
           cssClass: 'my-custom-class',
@@ -297,46 +300,117 @@ export default {
             {
               text: 'Delete',
               role: 'destructive',
-              icon: 'trash',
+              icon: trash,
               handler: () => {
                 console.log('Delete clicked')
               },
             },
             {
               text: 'Share',
-              icon: 'share',
+              icon: share,
               handler: () => {
                 console.log('Share clicked')
               },
             },
             {
               text: 'Play (open modal)',
-              icon: 'caret-forward-circle',
+              icon: caretForwardCircle,
               handler: () => {
                 console.log('Play clicked')
               },
             },
             {
               text: 'Favorite',
-              icon: 'heart',
+              icon: heart,
               handler: () => {
                 console.log('Favorite clicked')
               },
             },
             {
               text: 'Cancel',
-              icon: 'close',
+              icon: close,
               role: 'cancel',
               handler: () => {
                 console.log('Cancel clicked')
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return actionSheet.present();
     },
   },
-}
+});
+</script>
+```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
+  <ion-action-sheet
+    :is-open="isOpenRef"
+    header="Albums"
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-action-sheet>
+</template>
+
+<script>
+import { IonActionSheet, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonActionSheet, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        icon: trash,
+        handler: () => {
+          console.log('Delete clicked')
+        },
+      },
+      {
+        text: 'Share',
+        icon: share,
+        handler: () => {
+          console.log('Share clicked')
+        },
+      },
+      {
+        text: 'Play (open modal)',
+        icon: caretForwardCircle,
+        handler: () => {
+          console.log('Play clicked')
+        },
+      },
+      {
+        text: 'Favorite',
+        icon: heart,
+        handler: () => {
+          console.log('Favorite clicked')
+        },
+      },
+      {
+        text: 'Cancel',
+        icon: close,
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked')
+        },
+      },
+    ];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
 </script>
 ```
 

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

@@ -1,6 +1,40 @@
 import { testActionSheet, testActionSheetAlert, testActionSheetBackdrop } from '../test.utils';
+import { newE2EPage } from '@stencil/core/testing';
 
 const DIRECTORY = 'basic';
+const getActiveElementText = async (page) => {
+  const activeElement = await page.evaluateHandle(() => document.activeElement);
+  return await page.evaluate(el => el && el.textContent, activeElement);
+}
+
+test('action-sheet: focus trap', async () => {
+  const page = await newE2EPage({ url: '/src/components/action-sheet/test/basic?ionic:_testing=true' });
+
+  await page.click('#basic');
+  await page.waitForSelector('#basic');
+
+  let actionSheet = await page.find('ion-action-sheet');
+
+  expect(actionSheet).not.toBe(null);
+  await actionSheet.waitForVisible();
+
+  await page.keyboard.press('Tab');
+
+  const activeElementText = await getActiveElementText(page);
+  expect(activeElementText).toEqual('Delete');
+
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Tab');
+  await page.keyboard.up('Shift');
+
+  const activeElementTextTwo = await getActiveElementText(page);
+  expect(activeElementTextTwo).toEqual('Cancel');
+
+  await page.keyboard.press('Tab');
+
+  const activeElementTextThree = await getActiveElementText(page);
+  expect(activeElementTextThree).toEqual('Delete');
+});
 
 test('action-sheet: basic', async () => {
   await testActionSheet(DIRECTORY, '#basic');

core/src/components/action-sheet/usage/vue.md

@@ -1,15 +1,18 @@
 ```html
 <template>
-  <IonVuePage :title="'Action Sheet'">
-    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, actionSheetController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentActionSheet() {
-      return this.$ionic.actionSheetController
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
         .create({
           header: 'Albums',
           cssClass: 'my-custom-class',
@@ -17,45 +20,116 @@ export default {
             {
               text: 'Delete',
               role: 'destructive',
-              icon: 'trash',
+              icon: trash,
               handler: () => {
                 console.log('Delete clicked')
               },
             },
             {
               text: 'Share',
-              icon: 'share',
+              icon: share,
               handler: () => {
                 console.log('Share clicked')
               },
             },
             {
               text: 'Play (open modal)',
-              icon: 'caret-forward-circle',
+              icon: caretForwardCircle,
               handler: () => {
                 console.log('Play clicked')
               },
             },
             {
               text: 'Favorite',
-              icon: 'heart',
+              icon: heart,
               handler: () => {
                 console.log('Favorite clicked')
               },
             },
             {
               text: 'Cancel',
-              icon: 'close',
+              icon: close,
               role: 'cancel',
               handler: () => {
                 console.log('Cancel clicked')
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return actionSheet.present();
     },
   },
-}
+});
+</script>
+```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Action Sheet</ion-button>
+  <ion-action-sheet
+    :is-open="isOpenRef"
+    header="Albums"
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-action-sheet>
+</template>
+
+<script>
+import { IonActionSheet, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { caretForwardCircle, close, heart, trash, share } from 'ionicons/icons';
+
+export default defineComponent({
+  components: { IonActionSheet, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = [
+      {
+        text: 'Delete',
+        role: 'destructive',
+        icon: trash,
+        handler: () => {
+          console.log('Delete clicked')
+        },
+      },
+      {
+        text: 'Share',
+        icon: share,
+        handler: () => {
+          console.log('Share clicked')
+        },
+      },
+      {
+        text: 'Play (open modal)',
+        icon: caretForwardCircle,
+        handler: () => {
+          console.log('Play clicked')
+        },
+      },
+      {
+        text: 'Favorite',
+        icon: heart,
+        handler: () => {
+          console.log('Favorite clicked')
+        },
+      },
+      {
+        text: 'Cancel',
+        icon: close,
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked')
+        },
+      },
+    ];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
 </script>
 ```

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

@@ -36,6 +36,7 @@ export interface AlertInput {
   max?: string | number;
   cssClass?: string | string[];
   attributes?: AlertInputAttributes | AlertTextareaAttributes;
+  tabindex?: number;
 }
 
 export interface AlertTextareaAttributes extends JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> {}

core/src/components/alert/alert.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { AlertButton, AlertInput, AlertInputAttributes, AlertTextareaAttributes, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
@@ -34,6 +34,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private gesture?: Gesture;
 
   presented = false;
+  lastFocus?: HTMLElement;
 
   @Element() el!: HTMLIonAlertElement;
 
@@ -129,6 +130,59 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionAlertDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
+  @Listen('keydown', { target: 'document' })
+  onKeydown(ev: any) {
+    const inputTypes = new Set(this.processedInputs.map(i => i.type));
+
+    // The only inputs we want to navigate between using arrow keys are the radios
+    // ignore the keydown event if it is not on a radio button
+    if (
+      !inputTypes.has('radio')
+      || (ev.target && !this.el.contains(ev.target))
+      || ev.target.classList.contains('alert-button'))
+    {
+      return;
+    }
+
+    // Get all radios inside of the radio group and then
+    // filter out disabled radios since we need to skip those
+    const query = this.el.querySelectorAll('.alert-radio') as NodeListOf<HTMLButtonElement>;
+    const radios = Array.from(query).filter(radio => !radio.disabled);
+
+    // The focused radio is the one that shares the same id as
+    // the event target
+    const index = radios.findIndex(radio => radio.id === ev.target.id);
+
+    // We need to know what the next radio element should
+    // be in order to change the focus
+    let nextEl: HTMLButtonElement | undefined;
+
+    // If hitting arrow down or arrow right, move to the next radio
+    // If we're on the last radio, move to the first radio
+    if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+      nextEl = (index === radios.length - 1)
+        ? radios[0]
+        : radios[index + 1];
+    }
+
+    // If hitting arrow up or arrow left, move to the previous radio
+    // If we're on the first radio, move to the last radio
+    if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+      nextEl = (index === 0)
+        ? radios[radios.length - 1]
+        : radios[index - 1]
+    }
+
+    if (nextEl && radios.includes(nextEl)) {
+      const nextProcessed = this.processedInputs.find(input => input.id === nextEl?.id);
+
+      if (nextProcessed) {
+        this.rbClick(nextProcessed);
+        nextEl.focus();
+      }
+    }
+  }
+
   @Watch('buttons')
   buttonsChanged() {
     const buttons = this.buttons;
@@ -143,12 +197,21 @@ export class Alert implements ComponentInterface, OverlayInterface {
   inputsChanged() {
     const inputs = this.inputs;
 
+    // Get the first input that is not disabled and the checked one
+    // If an enabled checked input exists, set it to be the focusable input
+    // otherwise we default to focus the first input
+    // This will only be used when the input is type radio
+    const first = inputs.find(input => !input.disabled);
+    const checked = inputs.find(input => input.checked && !input.disabled);
+    const focusable = checked || first;
+
     // An alert can be created with several different inputs. Radios,
     // checkboxes and inputs are all accepted, but they cannot be mixed.
     const inputTypes = new Set(inputs.map(i => i.type));
     if (inputTypes.has('checkbox') && inputTypes.has('radio')) {
       console.warn(`Alert cannot mix input types: ${(Array.from(inputTypes.values()).join('/'))}. Please see alert docs for more info.`);
     }
+
     this.inputType = inputTypes.values().next().value;
     this.processedInputs = inputs.map((i, index) => ({
       type: i.type || 'text',
@@ -164,10 +227,11 @@ export class Alert implements ComponentInterface, OverlayInterface {
       max: i.max,
       cssClass: i.cssClass || '',
       attributes: i.attributes || {},
+      tabindex: (i.type === 'radio' && i !== focusable) ? -1 : 0
     }) as AlertInput);
   }
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 
@@ -176,7 +240,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     this.buttonsChanged();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;
@@ -240,6 +304,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private rbClick(selectedInput: AlertInput) {
     for (const input of this.processedInputs) {
       input.checked = input === selectedInput;
+      input.tabindex = input === selectedInput ? 0 : -1;
     }
     this.activeId = selectedInput.id;
     safeCall(selectedInput.handler, selectedInput);
@@ -332,7 +397,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             aria-checked={`${i.checked}`}
             id={i.id}
             disabled={i.disabled}
-            tabIndex={0}
+            tabIndex={i.tabindex}
             role="checkbox"
             class={{
               ...getClassMap(i.cssClass),
@@ -372,7 +437,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             aria-checked={`${i.checked}`}
             disabled={i.disabled}
             id={i.id}
-            tabIndex={0}
+            tabIndex={i.tabindex}
             class={{
               ...getClassMap(i.cssClass),
               'alert-radio-button': true,
@@ -410,7 +475,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
                   placeholder={i.placeholder}
                   value={i.value}
                   id={i.id}
-                  tabIndex={0}
+                  tabIndex={i.tabindex}
                   {...i.attributes as AlertTextareaAttributes}
                   disabled={i.attributes?.disabled ?? i.disabled}
                   class={inputClass(i)}
@@ -431,7 +496,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
                   max={i.max}
                   value={i.value}
                   id={i.id}
-                  tabIndex={0}
+                  tabIndex={i.tabindex}
                   {...i.attributes as AlertInputAttributes}
                   disabled={i.attributes?.disabled ?? i.disabled}
                   class={inputClass(i)}
@@ -514,7 +579,9 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
         <ion-backdrop tappable={this.backdropDismiss}/>
 
-        <div class="alert-wrapper ion-wrapper" ref={el => this.wrapperEl = el}>
+        <div tabindex="0"></div>
+
+        <div class="alert-wrapper ion-overlay-wrapper" ref={el => this.wrapperEl = el}>
 
           <div class="alert-head">
             {header && <h2 id={hdrId} class="alert-title">{header}</h2>}
@@ -527,6 +594,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
           {this.renderAlertButtons()}
 
         </div>
+
+        <div tabindex="0"></div>
       </Host>
     );
   }

core/src/components/alert/readme.md

@@ -1155,45 +1155,47 @@ export class AlertExample {
 
 ```html
 <template>
-  <IonVuePage :title="'Alert'">
-    <ion-button @click="presentAlert">Show Alert</ion-button>
-    <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
-    <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
-    <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
-    <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
-    <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentAlert">Show Alert</ion-button>
+  <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
+  <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
+  <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
+  <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
+  <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, alertController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentAlert() {
-      return this.$ionic.alertController
+    async presentAlert() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['OK'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertMultipleButtons() {
-      return this.$ionic.alertController
+    async presentAlertMultipleButtons() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['Cancel', 'Open Modal', 'Delete'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertConfirm() {
-      return this.$ionic.alertController
+    async presentAlertConfirm() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Confirm!',
@@ -1214,12 +1216,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertPrompt() {
-      return this.$ionic.alertController
+    async presentAlertPrompt() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Prompt!',
@@ -1288,12 +1290,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertRadio() {
-      return this.$ionic.alertController
+    async presentAlertRadio() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Radio',
@@ -1346,12 +1348,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertCheckbox() {
-      return this.$ionic.alertController
+    async presentAlertCheckbox() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Checkbox',
@@ -1409,11 +1411,45 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
   },
-}
+});
+</script>
+```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Alert</ion-button>
+  <ion-alert
+    :is-open="isOpenRef"
+    header="Alert"
+    sub-header="Subtitle"
+    message="This is an alert message."
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-alert>
+</template>
+
+<script>
+import { IonAlert, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonAlert, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = ['Ok'];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
 </script>
 ```
 

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

@@ -1,6 +1,40 @@
 import { testAlert } from '../test.utils';
+import { newE2EPage } from '@stencil/core/testing';
 
 const DIRECTORY = 'basic';
+const getActiveElementText = async (page) => {
+  const activeElement = await page.evaluateHandle(() => document.activeElement);
+  return await page.evaluate(el => el && el.textContent, activeElement);
+}
+
+test('alert: focus trap', async () => {
+  const page = await newE2EPage({ url: '/src/components/alert/test/basic?ionic:_testing=true' });
+
+  await page.click('#multipleButtons');
+  await page.waitForSelector('#multipleButtons');
+
+  let alert = await page.find('ion-alert');
+
+  expect(alert).not.toBe(null);
+  await alert.waitForVisible();
+
+  await page.keyboard.press('Tab');
+
+  const activeElementText = await getActiveElementText(page);
+  expect(activeElementText).toEqual('Open Modal');
+
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Tab');
+  await page.keyboard.up('Shift');
+
+  const activeElementTextTwo = await getActiveElementText(page);
+  expect(activeElementTextTwo).toEqual('Cancel');
+
+  await page.keyboard.press('Tab');
+
+  const activeElementTextThree = await getActiveElementText(page);
+  expect(activeElementTextThree).toEqual('Open Modal');
+});
 
 test(`alert: basic`, async () => {
   await testAlert(DIRECTORY, '#basic');

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

@@ -206,7 +206,6 @@
             type: 'radio',
             label: 'Radio 1',
             value: 'value1',
-            checked: true
           },
           {
             type: 'radio',
@@ -216,7 +215,8 @@
           {
             type: 'radio',
             label: 'Radio 3',
-            value: 'value3'
+            value: 'value3',
+            checked: true
           },
           {
             type: 'radio',
@@ -241,12 +241,12 @@
             role: 'cancel',
             cssClass: 'secondary',
             handler: () => {
-              console.log('Confirm Cancel')
+              console.log('Confirm Cancel');
             }
           }, {
             text: 'Ok',
-            handler: () => {
-              console.log('Confirm Ok')
+            handler: (ev) => {
+              console.log('Confirm Ok', ev);
             }
           }
         ]

core/src/components/alert/usage/vue.md

@@ -1,44 +1,46 @@
 ```html
 <template>
-  <IonVuePage :title="'Alert'">
-    <ion-button @click="presentAlert">Show Alert</ion-button>
-    <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
-    <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
-    <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
-    <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
-    <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentAlert">Show Alert</ion-button>
+  <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
+  <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
+  <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
+  <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
+  <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, alertController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentAlert() {
-      return this.$ionic.alertController
+    async presentAlert() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['OK'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertMultipleButtons() {
-      return this.$ionic.alertController
+    async presentAlertMultipleButtons() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['Cancel', 'Open Modal', 'Delete'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertConfirm() {
-      return this.$ionic.alertController
+    async presentAlertConfirm() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Confirm!',
@@ -59,12 +61,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertPrompt() {
-      return this.$ionic.alertController
+    async presentAlertPrompt() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Prompt!',
@@ -133,12 +135,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertRadio() {
-      return this.$ionic.alertController
+    async presentAlertRadio() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Radio',
@@ -191,12 +193,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertCheckbox() {
-      return this.$ionic.alertController
+    async presentAlertCheckbox() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Checkbox',
@@ -254,10 +256,44 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
   },
-}
+});
+</script>
+```
+
+Developers can also use this component directly in their template:
+
+```html
+<template>
+  <ion-button @click="setOpen(true)">Show Alert</ion-button>
+  <ion-alert
+    :is-open="isOpenRef"
+    header="Alert"
+    sub-header="Subtitle"
+    message="This is an alert message."
+    css-class="my-custom-class"
+    :buttons="buttons"
+    @onDidDismiss="setOpen(false)"
+  >
+  </ion-alert>
+</template>
+
+<script>
+import { IonAlert, IonButton } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  components: { IonAlert, IonButton },
+  setup() {
+    const isOpenRef = ref(false);
+    const setOpen = (state: boolean) => isOpenRef.value = state;
+    const buttons = ['Ok'];
+    
+    return { buttons, isOpenRef, setOpen }
+  }
+});
 </script>
 ```

core/src/components/avatar/readme.md

@@ -120,6 +120,15 @@ export class AvatarExample {
     <ion-label>Item Avatar</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonItem, IonLabel }
+});
+</script>
 ```
 
 

core/src/components/avatar/usage/vue.md

@@ -18,4 +18,13 @@
     <ion-label>Item Avatar</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonItem, IonLabel }
+});
+</script>
 ```

core/src/components/back-button/back-button.tsx

@@ -2,12 +2,16 @@ import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Color } from '../../interface';
+import { AnimationBuilder, Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML button element that wraps all child elements.
+ * @part icon - The back button icon (uses ion-icon).
+ * @part text - The back button text.
  */
 @Component({
   tag: 'ion-back-button',
@@ -36,7 +40,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   /**
    * If `true`, the user cannot interact with the button.
    */
-  @Prop({ reflectToAttr: true }) disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * The icon name to use for the back button.
@@ -53,6 +57,12 @@ export class BackButton implements ComponentInterface, ButtonInterface {
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
   componentWillLoad() {
     if (this.defaultHref === undefined) {
       this.defaultHref = config.get('backButtonDefaultHref');
@@ -99,9 +109,9 @@ export class BackButton implements ComponentInterface, ButtonInterface {
     ev.preventDefault();
 
     if (nav && await nav.canGoBack()) {
-      return nav.pop({ skipIfBusy: true });
+      return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
     }
-    return openURL(this.defaultHref, ev, 'back');
+    return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
   }
 
   render() {
@@ -112,10 +122,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
     return (
       <Host
         onClick={this.onClick}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
           [mode]: true,
-
           'button': true, // ion-buttons target .button
           'back-button-disabled': disabled,
           'back-button-has-icon-only': hasIconOnly,
@@ -124,12 +132,18 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'ion-activatable': true,
           'ion-focusable': true,
           'show-back-button': showBackButton
-        }}
+        })}
       >
-        <button type={type} disabled={disabled} class="button-native" aria-label={backButtonText || 'back'}>
+        <button
+          type={type}
+          disabled={disabled}
+          class="button-native"
+          part="native"
+          aria-label={backButtonText || 'back'}
+        >
           <span class="button-inner">
-            {backButtonIcon && <ion-icon icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
-            {backButtonText && <span aria-hidden="true" class="button-text">{backButtonText}</span>}
+            {backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
+            {backButtonText && <span part="text" aria-hidden="true" class="button-text">{backButtonText}</span>}
           </span>
           {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
         </button>

core/src/components/back-button/readme.md

@@ -295,21 +295,40 @@ export class BackButtonExample {
     </ion-toolbar>
   </ion-header>
 </template>
+
+<script>
+import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }
+});
+</script>
 ```
 
 
 
 ## Properties
 
-| Property      | Attribute      | Description                                                                                                                                                                                                                                                            | Type                              | Default     |
-| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
-| `color`       | `color`        | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`             | `undefined` |
-| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history.                                                                                                                                                                                                       | `string \| undefined`             | `undefined` |
-| `disabled`    | `disabled`     | If `true`, the user cannot interact with the button.                                                                                                                                                                                                                   | `boolean`                         | `false`     |
-| `icon`        | `icon`         | The icon name to use for the back button.                                                                                                                                                                                                                              | `null \| string \| undefined`     | `undefined` |
-| `mode`        | `mode`         | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                   | `undefined` |
-| `text`        | `text`         | The text to display in the back button.                                                                                                                                                                                                                                | `null \| string \| undefined`     | `undefined` |
-| `type`        | `type`         | The type of the button.                                                                                                                                                                                                                                                | `"button" \| "reset" \| "submit"` | `'button'`  |
+| Property          | Attribute      | Description                                                                                                                                                                                                                                                            | Type                                                    | Default     |
+| ----------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `color`           | `color`        | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                   | `undefined` |
+| `defaultHref`     | `default-href` | The url to navigate back to by default when there is no history.                                                                                                                                                                                                       | `string \| undefined`                                   | `undefined` |
+| `disabled`        | `disabled`     | If `true`, the user cannot interact with the button.                                                                                                                                                                                                                   | `boolean`                                               | `false`     |
+| `icon`            | `icon`         | The icon name to use for the back button.                                                                                                                                                                                                                              | `null \| string \| undefined`                           | `undefined` |
+| `mode`            | `mode`         | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                         | `undefined` |
+| `routerAnimation` | --             | When using a router, it specifies the transition animation when navigating to another page.                                                                                                                                                                            | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `text`            | `text`         | The text to display in the back button.                                                                                                                                                                                                                                | `null \| string \| undefined`                           | `undefined` |
+| `type`            | `type`         | The type of the button.                                                                                                                                                                                                                                                | `"button" \| "reset" \| "submit"`                       | `'button'`  |
+
+
+## Shadow Parts
+
+| Part       | Description                                                   |
+| ---------- | ------------------------------------------------------------- |
+| `"icon"`   | The back button icon (uses ion-icon).                         |
+| `"native"` | The native HTML button element that wraps all child elements. |
+| `"text"`   | The back button text.                                         |
 
 
 ## CSS Custom Properties

core/src/components/back-button/usage/vue.md

@@ -49,4 +49,13 @@
     </ion-toolbar>
   </ion-header>
 </template>
+
+<script>
+import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }
+});
+</script>
 ```

core/src/components/backdrop/readme.md

@@ -164,15 +164,20 @@ export class BackdropExample {
   </ion-backdrop>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonBackdrop } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    enableBackdropDismiss = false;
-    showBackdrop = false;
-    shouldPropagate = false;
+export default defineComponent({
+  components: { IonBackdrop },
+  setup() {
+    return {
+      enableBackdropDismiss: true,
+      showBackdrop: true,
+      shouldPropagate: true
+    }
   }
+});
 </script>
 ```
 

core/src/components/backdrop/usage/vue.md

@@ -20,14 +20,19 @@
   </ion-backdrop>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonBackdrop } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    enableBackdropDismiss = false;
-    showBackdrop = false;
-    shouldPropagate = false;
+export default defineComponent({
+  components: { IonBackdrop },
+  setup() {
+    return {
+      enableBackdropDismiss: true,
+      showBackdrop: true,
+      shouldPropagate: true
+    }
   }
+});
 </script>
 ```

core/src/components/badge/badge.tsx

@@ -27,10 +27,9 @@ export class Badge implements ComponentInterface {
     const mode = getIonMode(this);
     return (
       <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
           [mode]: true,
-        }}
+        })}
       >
         <slot></slot>
       </Host>

core/src/components/badge/readme.md

@@ -130,6 +130,15 @@ export class BadgeExample {
     <ion-badge slot="end">22</ion-badge>
   </ion-item>
 </template>
+
+<script>
+import { IonBadge, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBadge, IonItem, IonLabel }
+});
+</script>
 ```
 
 

core/src/components/badge/usage/vue.md

@@ -21,4 +21,13 @@
     <ion-badge slot="end">22</ion-badge>
   </ion-item>
 </template>
+
+<script>
+import { IonBadge, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBadge, IonItem, IonLabel }
+});
+</script>
 ```

core/src/components/button/button.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { Color, RouterDirection } from '../../interface';
+import { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { hasShadowDom } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@@ -13,6 +13,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
  * @slot icon-only - Should be used on an icon in a button that has no text.
  * @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
+ *
+ * @part native - The native HTML button or anchor element that wraps all child elements.
  */
 @Component({
   tag: 'ion-button',
@@ -44,20 +46,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   /**
    * If `true`, the user cannot interact with the button.
    */
-  @Prop({ reflectToAttr: true }) disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * Set to `"block"` for a full-width button or to `"full"` for a full-width button
    * without left and right borders.
    */
-  @Prop({ reflectToAttr: true }) expand?: 'full' | 'block';
+  @Prop({ reflect: true }) expand?: 'full' | 'block';
 
   /**
    * Set to `"clear"` for a transparent button, to `"outline"` for a transparent
    * button with a border, or to `"solid"`. The default style is `"solid"` except inside of
    * a toolbar, where the default is `"clear"`.
    */
-  @Prop({ reflectToAttr: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
+  @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
   /**
    * When using a router, it specifies the transition direction when navigating to
@@ -65,6 +67,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
    */
   @Prop() routerDirection: RouterDirection = 'forward';
 
+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
   /**
    * This attribute instructs browsers to download a URL instead of navigating to
    * it, so the user will be prompted to save it as a local file. If the attribute
@@ -88,12 +96,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   /**
    * The button shape.
    */
-  @Prop({ reflectToAttr: true }) shape?: 'round';
+  @Prop({ reflect: true }) shape?: 'round';
 
   /**
    * The button size.
    */
-  @Prop({ reflectToAttr: true }) size?: 'small' | 'default' | 'large';
+  @Prop({ reflect: true }) size?: 'small' | 'default' | 'large';
 
   /**
    * If `true`, activates a button with a heavier font weight.
@@ -129,7 +137,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   }
 
   private get hasIconOnly() {
-    return !!this.el.querySelector('ion-icon[slot="icon-only"]');
+    return !!this.el.querySelector('[slot="icon-only"]');
   }
 
   private get rippleType() {
@@ -146,7 +154,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   private handleClick = (ev: Event) => {
     if (this.type === 'button') {
-      openURL(this.href, ev, this.routerDirection);
+      openURL(this.href, ev, this.routerDirection, this.routerAnimation);
 
     } else if (hasShadowDom(this.el)) {
       // this button wants to specifically submit a form
@@ -196,8 +204,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
       <Host
         onClick={this.handleClick}
         aria-disabled={disabled ? 'true' : null}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
           [mode]: true,
           [buttonType]: true,
           [`${buttonType}-${expand}`]: expand !== undefined,
@@ -211,11 +218,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           'button-disabled': disabled,
           'ion-activatable': true,
           'ion-focusable': true,
-        }}
+        })}
       >
         <TagType
           {...attrs}
           class="button-native"
+          part="native"
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}

core/src/components/button/readme.md

@@ -274,6 +274,15 @@ export class ButtonExample {
   <ion-button>Default</ion-button>
   <ion-button size="small">Small</ion-button>
 </template>
+
+<script>
+import { IonButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton }
+});
+</script>
 ```
 
 
@@ -291,6 +300,7 @@ export class ButtonExample {
 | `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`                                       | `undefined` |
 | `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                                             | `undefined` |
 | `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`                                       | `undefined` |
+| `routerAnimation` | --                 | When using a router, it specifies the transition animation when navigating to another page using `href`.                                                                                                                                                                                  | `((baseEl: any, opts?: any) => Animation) \| undefined`     | `undefined` |
 | `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`                             | `'forward'` |
 | `shape`           | `shape`            | The button shape.                                                                                                                                                                                                                                                                         | `"round" \| undefined`                                      | `undefined` |
 | `size`            | `size`             | The button size.                                                                                                                                                                                                                                                                          | `"default" \| "large" \| "small" \| undefined`              | `undefined` |
@@ -317,6 +327,13 @@ export class ButtonExample {
 | `"start"`     | Content is placed to the left of the button text in LTR, and to the right in RTL. |
 
 
+## Shadow Parts
+
+| Part       | Description                                                             |
+| ---------- | ----------------------------------------------------------------------- |
+| `"native"` | The native HTML button or anchor element that wraps all child elements. |
+
+
 ## CSS Custom Properties
 
 | Name                             | Description                                                                                               |

core/src/components/button/test/icon/index.html

@@ -17,6 +17,14 @@
     <ion-header>
       <ion-toolbar>
         <ion-title>Button - Icon</ion-title>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="heart"></ion-icon>
+          </ion-button>
+          <ion-button class="avatar-button">
+            <img slot="icon-only" src="/src/components/avatar/test/avatar.svg">
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
@@ -26,8 +34,6 @@
           <ion-icon name="home" slot="start"></ion-icon>
           Left Icon
         </ion-button>
-      </p>
-      <p>
         <ion-button href="#">
           <ion-icon name="home" slot="start"></ion-icon>
           Left Icon
@@ -38,8 +44,6 @@
           <ion-icon name="star" slot="end"></ion-icon>
           Right Icon
         </ion-button>
-      </p>
-      <p>
         <ion-button href="#">
           <ion-icon name="star" slot="end"></ion-icon>
           Right Icon
@@ -49,8 +53,6 @@
         <ion-button>
           <ion-icon name="flag" slot="icon-only"></ion-icon>
         </ion-button>
-      </p>
-      <p>
         <ion-button href="#">
           <ion-icon name="flag" slot="icon-only"></ion-icon>
         </ion-button>
@@ -60,8 +62,6 @@
           <ion-icon name="help-circle" slot="start"></ion-icon>
           Left, Large
         </ion-button>
-      </p>
-      <p>
         <ion-button size="large" href="#">
           <ion-icon name="help-circle" slot="start"></ion-icon>
           Left, Large
@@ -72,8 +72,6 @@
           <ion-icon name="settings" slot="end"></ion-icon>
           Right, Large
         </ion-button>
-      </p>
-      <p>
         <ion-button size="large" href="#">
           <ion-icon name="settings" slot="end"></ion-icon>
           Right, Large
@@ -83,8 +81,6 @@
         <ion-button size="large">
           <ion-icon name="heart" slot="icon-only"></ion-icon>
         </ion-button>
-      </p>
-      <p>
         <ion-button size="large" href="#">
           <ion-icon name="heart" slot="icon-only"></ion-icon>
         </ion-button>
@@ -94,8 +90,6 @@
           <ion-icon name="checkmark" slot="start"></ion-icon>
           Left, Small
         </ion-button>
-      </p>
-      <p>
         <ion-button size="small" href="#">
           <ion-icon name="checkmark" slot="start"></ion-icon>
           Left, Small
@@ -106,8 +100,6 @@
           <ion-icon name="arrow-forward" slot="end"></ion-icon>
           Right, Small
         </ion-button>
-      </p>
-      <p>
         <ion-button size="small" href="#">
           <ion-icon name="arrow-forward" slot="end"></ion-icon>
           Right, Small
@@ -117,8 +109,6 @@
         <ion-button size="small">
           <ion-icon name="search" slot="icon-only"></ion-icon>
         </ion-button>
-      </p>
-      <p>
         <ion-button size="small" href="#">
           <ion-icon name="search" slot="icon-only"></ion-icon>
         </ion-button>
@@ -128,4 +118,15 @@
   </ion-app>
 </body>
 
+<style>
+  .avatar-button img {
+    border-radius: 50%;
+  }
+
+  .ios .avatar-button img {
+    width: 26px;
+    height: 26px;
+  }
+</style>
+
 </html>

core/src/components/button/usage/vue.md

@@ -49,4 +49,13 @@
   <ion-button>Default</ion-button>
   <ion-button size="small">Small</ion-button>
 </template>
+
+<script>
+import { IonButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton }
+});
+</script>
 ```

core/src/components/buttons/readme.md

@@ -260,10 +260,10 @@ export class ButtonsExample {
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -295,6 +295,22 @@ export class ButtonsExample {
     <ion-title>Collapsible Buttons</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
+import { personCircle, search } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
+  setup() {
+    const clickedStar = () => {
+      console.log('Star clicked!');
+    }
+    return { personCircle, search, clickedStar };
+  }
+});
+</script>
 ```
 
 

core/src/components/buttons/usage/vue.md

@@ -10,10 +10,10 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -45,4 +45,20 @@
     <ion-title>Collapsible Buttons</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
+import { personCircle, search } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
+  setup() {
+    const clickedStar = () => {
+      console.log('Star clicked!');
+    }
+    return { personCircle, search, clickedStar };
+  }
+});
+</script>
 ```

core/src/components/card-header/card-header.tsx

@@ -34,12 +34,11 @@ export class CardHeader implements ComponentInterface {
     const mode = getIonMode(this);
     return (
       <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
           'card-header-translucent': this.translucent,
           'ion-inherit-color': true,
           [mode]: true
-        }}
+        })}
       >
         <slot></slot>
       </Host>

core/src/components/card-subtitle/card-subtitle.tsx

@@ -29,11 +29,10 @@ export class CardSubtitle implements ComponentInterface {
       <Host
         role="heading"
         aria-level="3"
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
           'ion-inherit-color': true,
           [mode]: true
-        }}
+        })}
       >
         <slot></slot>
       </Host>

core/src/components/card-title/card-title.tsx

@@ -29,11 +29,10 @@ export class CardTitle implements ComponentInterface {
       <Host
         role="heading"
         aria-level="2"
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
           'ion-inherit-color': true,
           [mode]: true
-        }}
+        })}
       >
         <slot></slot>
       </Host>

core/src/components/card/card.ios.scss

@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$item-ios-background};
-  --color: #{$card-ios-text-color};
+  --background: #{$card-ios-background};
+  --color: #{$card-ios-color};
 
   @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
   @include border-radius($card-ios-border-radius);
@@ -22,4 +22,4 @@
 
 :host(.ion-activated) {
   transform: #{$card-ios-transform-activated};
-}
+}

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

@@ -15,9 +15,6 @@ $card-ios-margin-bottom:               $card-ios-margin-top !default;
 /// @prop - Margin start of the card
 $card-ios-margin-start:                16px !default;
 
-/// @prop - Background color of the card
-$card-ios-background-color:            $item-ios-background !default;
-
 /// @prop - Box shadow color of the card
 $card-ios-box-shadow-color:            rgba(0, 0, 0, .12) !default;
 
@@ -30,11 +27,8 @@ $card-ios-border-radius:               8px !default;
 /// @prop - Font size of the card
 $card-ios-font-size:                   14px !default;
 
-/// @prop - Color of the card text
-$card-ios-text-color:                  $text-color-step-400 !default;
-
 /// @prop - Transition timing function of the card
 $card-ios-transition-timing-function:  cubic-bezier(0.12, 0.72, 0.29, 1) !default;
 
 /// @prop - Transform of the card on activate
-$card-ios-transform-activated:         scale3d(.97, .97, 1) !default;
+$card-ios-transform-activated:         scale3d(.97, .97, 1) !default;

core/src/components/card/card.md.scss

@@ -5,8 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$item-md-background};
-  --color: #{$card-md-text-color};
+  --background: #{$card-md-background};
+  --color: #{$card-md-color};
 
   @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
   @include border-radius($card-md-border-radius);

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

@@ -15,9 +15,6 @@ $card-md-margin-bottom:               10px !default;
 /// @prop - Margin start of the card
 $card-md-margin-start:                10px !default;
 
-/// @prop - Background color of the card
-$card-md-background-color:            $item-md-background !default;
-
 /// @prop - Box shadow of the card
 $card-md-box-shadow:                  0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 
@@ -29,6 +26,3 @@ $card-md-font-size:                   14px !default;
 
 /// @prop - Line height of the card
 $card-md-line-height:                 1.5 !default;
-
-/// @prop - Color of the card text
-$card-md-text-color:                  $text-color-step-450 !default;

core/src/components/card/card.tsx

@@ -1,12 +1,14 @@
 import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { Color, Mode, RouterDirection } from '../../interface';
+import { AnimationBuilder, Color, Mode, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML button, anchor, or div element that wraps all child elements.
  */
 @Component({
   tag: 'ion-card',
@@ -66,6 +68,12 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
    */
   @Prop() routerDirection: RouterDirection = 'forward';
 
+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
   /**
    * Specifies where to display the linked URL.
    * Only applies when an `href` is provided.
@@ -85,7 +93,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
         <slot></slot>
       ];
     }
-    const { href, routerDirection } = this;
+    const { href, routerAnimation, routerDirection } = this;
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
     const attrs = (TagType === 'button')
       ? { type: this.type }
@@ -100,8 +108,9 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
       <TagType
         {...attrs}
         class="card-native"
+        part="native"
         disabled={this.disabled}
-        onClick={(ev: Event) => openURL(href, ev, routerDirection)}
+        onClick={(ev: Event) => openURL(href, ev, routerDirection, routerAnimation)}
       >
         <slot></slot>
         {clickable && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
@@ -113,13 +122,11 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
     const mode = getIonMode(this);
     return (
       <Host
-        class={{
+        class={createColorClasses(this.color, {
           [mode]: true,
-
-          ...createColorClasses(this.color),
           'card-disabled': this.disabled,
           'ion-activatable': this.isClickable()
-        }}
+        })}
       >
         {this.renderCard(mode)}
       </Host>

core/src/components/card/readme.md

@@ -215,7 +215,7 @@ export class CardExample {
 
   <ion-card>
     <ion-item>
-      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-icon :icon="pin" slot="start"></ion-icon>
       <ion-label>ion-item in a card, icon left, button right</ion-label>
       <ion-button fill="outline" slot="end">View</ion-button>
     </ion-item>
@@ -228,44 +228,65 @@ export class CardExample {
 
   <ion-card>
     <ion-item href="#" class="ion-activated">
-      <ion-icon name="wifi" slot="start"></ion-icon>
+      <ion-icon :icon="wifi" slot="start"></ion-icon>
       <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
-      <ion-icon name="wine" slot="start"></ion-icon>
+      <ion-icon :icon="wine" slot="start"></ion-icon>
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
     <ion-item class="ion-activated">
-      <ion-icon name="warning" slot="start"></ion-icon>
+      <ion-icon :icon="warning" slot="start"></ion-icon>
       <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-icon name="walk" slot="start"></ion-icon>
+      <ion-icon :icon="walk" slot="start"></ion-icon>
       <ion-label>Card Button Item 2</ion-label>
     </ion-item>
   </ion-card>
 </template>
+
+<script>
+import { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
+import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
+  setup() {
+    return { warning };
+  }
+});
+</script>
 ```
 
 
 
 ## Properties
 
-| Property          | Attribute          | Description                                                                                                                                                                                                                                                                               | Type                              | Default     |
-| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
-| `button`          | `button`           | If `true`, a button tag will be rendered and the card will be tappable.                                                                                                                                                                                                                   | `boolean`                         | `false`     |
-| `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).                    | `string \| undefined`             | `undefined` |
-| `disabled`        | `disabled`         | If `true`, the user cannot interact with the card.                                                                                                                                                                                                                                        | `boolean`                         | `false`     |
-| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`             | `undefined` |
-| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`             | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                   | `undefined` |
-| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`             | `undefined` |
-| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`   | `'forward'` |
-| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`             | `undefined` |
-| `type`            | `type`             | The type of the button. Only used when an `onclick` or `button` property is present.                                                                                                                                                                                                      | `"button" \| "reset" \| "submit"` | `'button'`  |
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                                               | Type                                                    | Default     |
+| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `button`          | `button`           | If `true`, a button tag will be rendered and the card will be tappable.                                                                                                                                                                                                                   | `boolean`                                               | `false`     |
+| `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).                    | `string \| undefined`                                   | `undefined` |
+| `disabled`        | `disabled`         | If `true`, the user cannot interact with the card.                                                                                                                                                                                                                                        | `boolean`                                               | `false`     |
+| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`                                   | `undefined` |
+| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`                                   | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                                         | `undefined` |
+| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`                                   | `undefined` |
+| `routerAnimation` | --                 | When using a router, it specifies the transition animation when navigating to another page using `href`.                                                                                                                                                                                  | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`                         | `'forward'` |
+| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`                                   | `undefined` |
+| `type`            | `type`             | The type of the button. Only used when an `onclick` or `button` property is present.                                                                                                                                                                                                      | `"button" \| "reset" \| "submit"`                       | `'button'`  |
+
+
+## Shadow Parts
+
+| Part       | Description                                                                   |
+| ---------- | ----------------------------------------------------------------------------- |
+| `"native"` | The native HTML button, anchor, or div element that wraps all child elements. |
 
 
 ## CSS Custom Properties

core/src/components/card/usage/vue.md

@@ -14,7 +14,7 @@
 
   <ion-card>
     <ion-item>
-      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-icon :icon="pin" slot="start"></ion-icon>
       <ion-label>ion-item in a card, icon left, button right</ion-label>
       <ion-button fill="outline" slot="end">View</ion-button>
     </ion-item>
@@ -27,24 +27,37 @@
 
   <ion-card>
     <ion-item href="#" class="ion-activated">
-      <ion-icon name="wifi" slot="start"></ion-icon>
+      <ion-icon :icon="wifi" slot="start"></ion-icon>
       <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
-      <ion-icon name="wine" slot="start"></ion-icon>
+      <ion-icon :icon="wine" slot="start"></ion-icon>
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
     <ion-item class="ion-activated">
-      <ion-icon name="warning" slot="start"></ion-icon>
+      <ion-icon :icon="warning" slot="start"></ion-icon>
       <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-icon name="walk" slot="start"></ion-icon>
+      <ion-icon :icon="walk" slot="start"></ion-icon>
       <ion-label>Card Button Item 2</ion-label>
     </ion-item>
   </ion-card>
 </template>
+
+<script>
+import { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
+import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
+  setup() {
+    return { warning };
+  }
+});
+</script>
 ```

core/src/components/checkbox/checkbox.tsx

@@ -155,15 +155,14 @@ export class Checkbox implements ComponentInterface {
         aria-disabled={disabled ? 'true' : null}
         aria-checked={`${checked}`}
         aria-labelledby={labelId}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),
           'checkbox-checked': checked,
           'checkbox-disabled': disabled,
           'checkbox-indeterminate': indeterminate,
           'interactive': true
-        }}
+        })}
       >
         <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
           {path}

core/src/components/checkbox/readme.md

@@ -235,17 +235,22 @@ export class CheckboxExample {
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    form = [
+export default defineComponent({
+  components: { IonCheckbox, IonItem, IonLabel, IonList },
+  setup() {
+    const form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },
       { val: 'Mushroom', isChecked: false }
     ];
+    
+    return { form };
   }
+});
 </script>
 ```
 

core/src/components/checkbox/usage/vue.md

@@ -29,16 +29,21 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    form = [
+export default defineComponent({
+  components: { IonCheckbox, IonItem, IonLabel, IonList },
+  setup() {
+    const form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },
       { val: 'Mushroom', isChecked: false }
     ];
+    
+    return { form };
   }
+});
 </script>
 ```

core/src/components/chip/chip.scss

@@ -64,7 +64,6 @@
 }
 
 :host(.chip-outline) {
-
   border-color: rgba(0, 0, 0, .32);
 
   background: transparent;

core/src/components/chip/chip.tsx

@@ -33,12 +33,11 @@ export class Chip implements ComponentInterface {
 
     return (
       <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
           [mode]: true,
           'chip-outline': this.outline,
           'ion-activatable': true,
-        }}
+        })}
       >
         <slot></slot>
         {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}

core/src/components/chip/readme.md

@@ -192,24 +192,24 @@ export class ChipExample {
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin"></ion-icon>
+    <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-icon :icon="heart" color="dark"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
     <ion-label>Button Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-icon :icon="pin" color="primary"></ion-icon>
     <ion-label>Icon Chip</ion-label>
-    <ion-icon name="close"></ion-icon>
+    <ion-icon :icon="close"></ion-icon>
   </ion-chip>
 
   <ion-chip>
@@ -217,9 +217,23 @@ export class ChipExample {
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
     </ion-avatar>
     <ion-label>Avatar Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/vue';
+import { close, closeCircle, heart, pin } from 'ionicons/icons';
+
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonIcon, IonLabel },
+  setup() {
+    return { close, closeCircle, heart, pin }
+  }
+});
+</script>
 ```
 
 

core/src/components/chip/usage/vue.md

@@ -13,24 +13,24 @@
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin"></ion-icon>
+    <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-icon :icon="heart" color="dark"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
     <ion-label>Button Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-icon :icon="pin" color="primary"></ion-icon>
     <ion-label>Icon Chip</ion-label>
-    <ion-icon name="close"></ion-icon>
+    <ion-icon :icon="close"></ion-icon>
   </ion-chip>
 
   <ion-chip>
@@ -38,7 +38,21 @@
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
     </ion-avatar>
     <ion-label>Avatar Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/vue';
+import { close, closeCircle, heart, pin } from 'ionicons/icons';
+
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonIcon, IonLabel },
+  setup() {
+    return { close, closeCircle, heart, pin }
+  }
+});
+</script>
 ```

core/src/components/content/content.scss

@@ -128,7 +128,6 @@
 }
 
 .transition-effect {
-
   display: none;
   position: absolute;
 

core/src/components/content/content.tsx

@@ -313,12 +313,11 @@ export class Content implements ComponentInterface {
 
     return (
       <Host
-        class={{
-          ...createColorClasses(this.color),
+        class={createColorClasses(this.color, {
           [mode]: true,
           'content-sizing': hostContext('ion-popover', this.el),
           'overscroll': forceOverscroll,
-        }}
+        })}
         style={{
           '--offset-top': `${this.cTop}px`,
           '--offset-bottom': `${this.cBottom}px`,

core/src/components/content/readme.md

@@ -123,7 +123,7 @@ export class ContentExample {
 ```html
 <template>
   <ion-content
-    :scrollEvents="true"
+    :scroll-events="true"
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
@@ -134,6 +134,16 @@ export class ContentExample {
       </div>
   </ion-content>
 </template>
+
+<script>
+import { IonContent } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent }
+});
+</script>
+
 ```
 
 
@@ -196,7 +206,7 @@ Type: `Promise<void>`
 
 
 
-### `scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>`
+### `scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>`
 
 Scroll to a specified X/Y location in the component.
 

core/src/components/content/usage/vue.md

@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-content
-    :scrollEvents="true"
+    :scroll-events="true"
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
@@ -12,5 +12,15 @@
       </div>
   </ion-content>
 </template>
+
+<script>
+import { IonContent } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent }
+});
+</script>
+
 ```
 

core/src/components/datetime/datetime-util.spec.ts

@@ -220,6 +220,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": 1000,
+        "ampm": undefined
       });
     });
 
@@ -234,6 +235,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": undefined,
+        "ampm": undefined
       });
     });
 
@@ -248,6 +250,7 @@ describe('datetime-util', () => {
         "second": 20,
         "tzOffset": 0,
         "year": 1994,
+        "ampm": undefined
       });
     });
 
@@ -262,6 +265,7 @@ describe('datetime-util', () => {
         "second": undefined,
         "tzOffset": 0,
         "year": 2018,
+        "ampm": undefined
       });
     });
 

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

@@ -3,10 +3,16 @@
  * Defaults to the current date if
  * no date given
  */
-export const getDateValue = (date: DatetimeData, format: string): number => {
+export const getDateValue = (date: DatetimeData, format: string): number | string => {
   const getValue = getValueFromFormat(date, format);
 
-  if (getValue !== undefined) { return getValue; }
+  if (getValue !== undefined) {
+    if (format === FORMAT_A || format === FORMAT_a) {
+      date.ampm = getValue;
+    }
+
+    return getValue;
+  }
 
   const defaultDate = parseDate(new Date().toISOString());
   return getValueFromFormat((defaultDate as DatetimeData), format);
@@ -322,11 +328,15 @@ export const updateDate = (existingData: DatetimeData, newData: any, displayTime
       }
 
     } else if ((newData.year || newData.hour || newData.month || newData.day || newData.minute || newData.second)) {
-      // newData is from of a datetime picker's selected values
-      // update the existing DatetimeData data with the new values
-
-      // do some magic for 12-hour values
-      if (newData.ampm && newData.hour) {
+      // newData is from the datetime picker's selected values
+      // update the existing datetimeValue with the new values
+      if (newData.ampm !== undefined && newData.hour !== undefined) {
+        // change the value of the hour based on whether or not it is am or pm
+        // if the meridiem is pm and equal to 12, it remains 12
+        // otherwise we add 12 to the hour value
+        // if the meridiem is am and equal to 12, we change it to 0
+        // otherwise we use its current hour value
+        // for example: 8 pm becomes 20, 12 am becomes 0, 4 am becomes 4
         newData.hour.value = (newData.ampm.value === 'pm')
           ? (newData.hour.value === 12 ? 12 : newData.hour.value + 12)
           : (newData.hour.value === 12 ? 0 : newData.hour.value);
@@ -349,7 +359,8 @@ export const updateDate = (existingData: DatetimeData, newData: any, displayTime
             ? (existingData.hour! < 12 ? existingData.hour! + 12 : existingData.hour!)
             : (existingData.hour! >= 12 ? existingData.hour! - 12 : existingData.hour))
       };
-      (existingData as any)['hour'] = newData['hour'].value;
+      existingData['hour'] = newData['hour'].value;
+      existingData['ampm'] = newData['ampm'].value;
       return true;
     }
 
@@ -551,6 +562,7 @@ export interface DatetimeData {
   second?: number;
   millisecond?: number;
   tzOffset?: number;
+  ampm?: string;
 }
 
 export interface LocaleData {