5.3.3

chore(react): fixing issue with new history types (#22109 )
chore(dependencies): update angular-server package-lock
2026-03-13 10:22:08 +08:00 · 2020-09-17 18:13:02 -04:00 · 2020-09-17 18:06:36 -04:00 · 2020-09-17 15:41:08 -04:00 · 2020-09-14 11:44:37 -04:00 · 2020-09-11 16:38:00 -04:00
536 changed files with 77079 additions and 2502 deletions
--- a/.circleci/config.yml
+++ b/.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:
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.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. -->
--- a/.gitignore
+++ b/.gitignore
@@ -64,3 +64,4 @@ core/loader/
 core/www/
 .stencil/
 angular/build/
+core/components/
--- a/.scripts/common.js
+++ b/.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({
--- a/.scripts/release-dev.js
+++ b/.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);
--- a/.scripts/release.js
+++ b/.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,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,97 @@
+## [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)


--- a/CODE_OF_CONDUCT.md
+++ b/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.
--- a/README.md
+++ b/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

--- a/angular/.npmrc
+++ b/angular/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "5.2.1",
+  "version": "5.3.3",
  "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.2.1",
+    "@ionic/core": "5.3.3",
    "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": {
--- a/angular/scripts/rollup.config.js
+++ b/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',
--- a/angular/src/directives/navigation/stack-controller.ts
+++ b/angular/src/directives/navigation/stack-controller.ts
@@ -127,7 +127,7 @@ export class StackController {
     * Save any custom animation so that navigating
     * back will use this custom animation by default.
     */
-    if (animationBuilder !== undefined && leavingView) {
+    if (leavingView) {
      leavingView.animationBuilder = animationBuilder;
    }

@@ -190,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
        );
      });
    }
--- a/angular/src/index.ts
+++ b/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';
--- a/angular/test/test-app/.npmrc
+++ b/angular/test/test-app/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/angular/test/test-app/e2e/protractor-ci.conf.js
+++ b/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;
--- a/angular/test/test-app/e2e/protractor.conf.js
+++ b/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

--- a/angular/test/test-app/e2e/src/form.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/form.e2e-spec.ts
@@ -31,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
      });
    });

@@ -49,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
      });
    });

@@ -102,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
      });
    });
  });
--- a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
+++ b/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);
--- a/angular/test/test-app/e2e/src/utils.ts
+++ b/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);
--- a/angular/test/test-app/karma.conf.js
+++ b/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
  });
--- a/angular/test/test-app/package-lock.json
+++ b/angular/test/test-app/package-lock.json
--- a/angular/test/test-app/package.json
+++ b/angular/test/test-app/package.json
@@ -18,46 +18,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"
  }
 }
--- a/core/.npmrc
+++ b/core/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/core/CONTRIBUTING.md
+++ b/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
-```
-
--- a/core/api.txt
+++ b/core/api.txt
@@ -475,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
@@ -745,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
@@ -933,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
@@ -1051,6 +1053,7 @@ 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
@@ -1069,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
@@ -1226,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
@@ -1290,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
--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "5.2.1",
+  "version": "5.3.3",
  "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.14.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",
--- a/core/scripts/swiper.rollup.config.js
+++ b/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',
--- a/core/scripts/treeshaking.js
+++ b/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() {
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -5,8 +5,9 @@
 * It contains typing information for all components that exist in this project.
 */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController } from "./interface";
+import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, AutocompleteTypes, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavComponentWithProps, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController } from "./interface";
 import { IonicSafeString } from "./utils/sanitization";
+import { NavigationHookCallback } from "./components/route/route-interface";
 import { SelectCompareFn } from "./components/select/select-interface";
 export namespace Components {
    interface IonActionSheet {
@@ -868,6 +869,10 @@ export namespace Components {
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14.
+         */
+        "fireFocusEvents": boolean;
        /**
          * Returns the native `<input>` element used under the hood.
         */
@@ -921,7 +926,11 @@ export namespace Components {
         */
        "required": boolean;
        /**
-          * Sets focus on the specified `ion-input`. Use this method instead of the global `input.focus()`.
+          * Sets blur on the native `input` in `ion-input`. Use this method instead of the global `input.blur()`.
+         */
+        "setBlur": () => Promise<void>;
+        /**
+          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.
         */
        "setFocus": () => Promise<void>;
        /**
@@ -1412,7 +1421,7 @@ export namespace Components {
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
-        "insertPages": (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "insertPages": (insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
        /**
          * Pop a component off of the navigation stack. Navigates back from the current component.
          * @param opts The navigation options.
@@ -1462,7 +1471,7 @@ export namespace Components {
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
-        "setPages": (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
+        "setPages": (views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
        /**
          * Set the root for the current navigation stack to a component.
          * @param component The component to set as the root of the navigation stack.
@@ -1849,6 +1858,14 @@ export namespace Components {
        "type": 'bounded' | 'unbounded';
    }
    interface IonRoute {
+        /**
+          * A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
+         */
+        "beforeEnter"?: NavigationHookCallback;
+        /**
+          * A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
+         */
+        "beforeLeave"?: NavigationHookCallback;
        /**
          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
         */
@@ -1877,6 +1894,7 @@ export namespace Components {
          * Go back to previous page in the window.history.
         */
        "back": () => Promise<void>;
+        "canTransition": () => Promise<string | boolean>;
        "navChanged": (direction: RouterDirection) => Promise<boolean>;
        "printDebug": () => Promise<void>;
        /**
@@ -2124,7 +2142,7 @@ export namespace Components {
    }
    interface IonSelectOption {
        /**
-          * If `true`, the user cannot interact with the select option.
+          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
         */
        "disabled": boolean;
        /**
@@ -2421,6 +2439,10 @@ export namespace Components {
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14.
+         */
+        "fireFocusEvents": boolean;
        /**
          * Returns the native `<textarea>` element used under the hood.
         */
@@ -2462,7 +2484,11 @@ export namespace Components {
         */
        "rows"?: number;
        /**
-          * Sets focus on the specified `ion-textarea`. Use this method instead of the global `input.focus()`.
+          * Sets blur on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.blur()`.
+         */
+        "setBlur": () => Promise<void>;
+        /**
+          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
         */
        "setFocus": () => Promise<void>;
        /**
@@ -4180,6 +4206,10 @@ declare namespace LocalJSX {
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14.
+         */
+        "fireFocusEvents"?: boolean;
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
@@ -4215,7 +4245,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the input loses focus.
         */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the value has changed.
         */
@@ -4223,7 +4253,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the input has focus.
         */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when a keyboard input occurred.
         */
@@ -5095,6 +5125,14 @@ declare namespace LocalJSX {
        "type"?: 'bounded' | 'unbounded';
    }
    interface IonRoute {
+        /**
+          * A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
+         */
+        "beforeEnter"?: NavigationHookCallback;
+        /**
+          * A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
+         */
+        "beforeLeave"?: NavigationHookCallback;
        /**
          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
         */
@@ -5421,7 +5459,7 @@ declare namespace LocalJSX {
    }
    interface IonSelectOption {
        /**
-          * If `true`, the user cannot interact with the select option.
+          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
         */
        "disabled"?: boolean;
        /**
@@ -5708,6 +5746,10 @@ declare namespace LocalJSX {
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14.
+         */
+        "fireFocusEvents"?: boolean;
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
@@ -5731,7 +5773,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the input loses focus.
         */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the input value has changed.
         */
@@ -5739,7 +5781,7 @@ declare namespace LocalJSX {
        /**
          * Emitted when the input has focus.
         */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when a keyboard input occurred.
         */
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/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" 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>
    );
  }
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -280,16 +280,18 @@ 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';
+
+export default defineComponent({
+  components: { IonButton },
  methods: {
-    presentActionSheet() {
-      return this.$ionic.actionSheetController
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
        .create({
          header: 'Albums',
          cssClass: 'my-custom-class',
@@ -332,11 +334,11 @@ export default {
              },
            },
          ],
-        })
-        .then(a => a.present())
+        });
+      return actionSheet.present();
    },
  },
-}
+});
 </script>
 ```

--- a/core/src/components/action-sheet/test/basic/e2e.ts
+++ b/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');
--- a/core/src/components/action-sheet/usage/vue.md
+++ b/core/src/components/action-sheet/usage/vue.md
@@ -1,15 +1,17 @@
 ```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';
+
+export default defineComponent({
+  components: { IonButton },
  methods: {
-    presentActionSheet() {
-      return this.$ionic.actionSheetController
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
        .create({
          header: 'Albums',
          cssClass: 'my-custom-class',
@@ -52,10 +54,10 @@ export default {
              },
            },
          ],
-        })
-        .then(a => a.present())
+        });
+      return actionSheet.present();
    },
  },
-}
+});
 </script>
 ```
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -34,6 +34,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
  private gesture?: Gesture;

  presented = false;
+  lastFocus?: HTMLElement;

  @Element() el!: HTMLIonAlertElement;

@@ -167,7 +168,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
    }) as AlertInput);
  }

-  constructor() {
+  connectedCallback() {
    prepareOverlay(this.el);
  }

@@ -176,7 +177,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
    this.buttonsChanged();
  }

-  componentDidUnload() {
+  disconnectedCallback() {
    if (this.gesture) {
      this.gesture.destroy();
      this.gesture = undefined;
@@ -514,7 +515,9 @@ export class Alert implements ComponentInterface, OverlayInterface {

        <ion-backdrop tappable={this.backdropDismiss}/>

-        <div class="alert-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 +530,8 @@ export class Alert implements ComponentInterface, OverlayInterface {
          {this.renderAlertButtons()}

        </div>
+
+        <div tabindex="0"></div>
      </Host>
    );
  }
--- a/core/src/components/alert/readme.md
+++ b/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,11 @@ export default {
              },
            },
          ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
    },
  },
-}
+});
 </script>
 ```

--- a/core/src/components/alert/test/basic/e2e.ts
+++ b/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');
--- a/core/src/components/alert/usage/vue.md
+++ b/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,10 @@ export default {
              },
            },
          ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
    },
  },
-}
+});
 </script>
 ```
--- a/core/src/components/avatar/readme.md
+++ b/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>
 ```


--- a/core/src/components/avatar/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -40,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.
@@ -122,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,
@@ -134,7 +132,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
          'ion-activatable': true,
          'ion-focusable': true,
          'show-back-button': showBackButton
-        }}
+        })}
      >
        <button
          type={type}
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -295,6 +295,15 @@ 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>
 ```


--- a/core/src/components/back-button/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/backdrop/readme.md
+++ b/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>
 ```

--- a/core/src/components/backdrop/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/badge/badge.tsx
+++ b/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>
--- a/core/src/components/badge/readme.md
+++ b/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>
 ```


--- a/core/src/components/badge/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -46,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
@@ -96,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.
@@ -204,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,
@@ -219,7 +218,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
          'button-disabled': disabled,
          'ion-activatable': true,
          'ion-focusable': true,
-        }}
+        })}
      >
        <TagType
          {...attrs}
--- a/core/src/components/button/readme.md
+++ b/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>
 ```


--- a/core/src/components/button/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/buttons/readme.md
+++ b/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>
 ```


--- a/core/src/components/buttons/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/card-header/card-header.tsx
+++ b/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>
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/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>
--- a/core/src/components/card-title/card-title.tsx
+++ b/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>
--- a/core/src/components/card/card.ios.scss
+++ b/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};
-}
+}
--- a/core/src/components/card/card.ios.vars.scss
+++ b/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;
--- a/core/src/components/card/card.md.scss
+++ b/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);
--- a/core/src/components/card/card.md.vars.scss
+++ b/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;
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -122,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>
--- a/core/src/components/card/readme.md
+++ b/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,26 +228,39 @@ 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>
 ```


--- a/core/src/components/card/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/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}
--- a/core/src/components/checkbox/readme.md
+++ b/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>
 ```

--- a/core/src/components/checkbox/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.scss
@@ -64,7 +64,6 @@
 }

 :host(.chip-outline) {
-
  border-color: rgba(0, 0, 0, .32);

  background: transparent;
--- a/core/src/components/chip/chip.tsx
+++ b/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>}
--- a/core/src/components/chip/readme.md
+++ b/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>
 ```


--- a/core/src/components/chip/usage/vue.md
+++ b/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>
 ```
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -128,7 +128,6 @@
 }

 .transition-effect {
-
  display: none;
  position: absolute;

--- a/core/src/components/content/content.tsx
+++ b/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`,
--- a/core/src/components/content/readme.md
+++ b/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>
+
 ```


--- a/core/src/components/content/usage/vue.md
+++ b/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>
+
 ```

--- a/core/src/components/datetime/datetime-util.spec.ts
+++ b/core/src/components/datetime/datetime-util.spec.ts
@@ -220,6 +220,7 @@ describe('datetime-util', () => {
        "second": undefined,
        "tzOffset": 0,
        "year": 1000,
+        "ampm": "am"
      });
    });

@@ -234,6 +235,7 @@ describe('datetime-util', () => {
        "second": undefined,
        "tzOffset": 0,
        "year": undefined,
+        "ampm": "pm"
      });
    });

@@ -248,6 +250,7 @@ describe('datetime-util', () => {
        "second": 20,
        "tzOffset": 0,
        "year": 1994,
+        "ampm": "pm"
      });
    });

@@ -262,6 +265,7 @@ describe('datetime-util', () => {
        "second": undefined,
        "tzOffset": 0,
        "year": 2018,
+        "ampm": "am"
      });
    });

--- a/core/src/components/datetime/datetime-util.ts
+++ b/core/src/components/datetime/datetime-util.ts
@@ -238,6 +238,7 @@ export const parseDate = (val: string | undefined | null): DatetimeData | undefi
    second: parse[6],
    millisecond: parse[7],
    tzOffset,
+    ampm: parse[4] >= 12 ? 'pm' : 'am'
  };
 };

@@ -322,11 +323,33 @@ 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
+      // newData is from the datetime picker's selected values
+      // update the existing datetimeValue with the new values
+      if (newData.ampm !== undefined && newData.hour !== undefined) {
+        // If the date we came from exists, we need to change the meridiem value when
+        // going to and from 12
+        if (existingData.ampm !== undefined && existingData.hour !== undefined) {
+          // If the existing meridiem is am, we want to switch to pm if it is either
+          // A) coming from 0 (12 am)
+          // B) going to 12 (12 pm)
+          if (existingData.ampm === 'am' && (existingData.hour === 0 || newData.hour.value === 12)) {
+            newData.ampm.value = 'pm';
+          }

-      // do some magic for 12-hour values
-      if (newData.ampm && newData.hour) {
+          // If the existing meridiem is pm, we want to switch to am if it is either
+          // A) coming from 12 (12 pm)
+          // B) going to 12 (12 am)
+          if (existingData.ampm === 'pm' && (existingData.hour === 12 || newData.hour.value === 12)) {
+            newData.ampm.value = 'am';
+          }
+        }
+
+        // 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 +372,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 +575,7 @@ export interface DatetimeData {
  second?: number;
  millisecond?: number;
  tzOffset?: number;
+  ampm?: string;
 }

 export interface LocaleData {
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -282,6 +282,12 @@ export class Datetime implements ComponentInterface {
        value: colOptions[colSelectedIndex].value
      };

+      if (data.name !== 'ampm' && this.datetimeValue.ampm !== undefined) {
+        changeData['ampm'] = {
+          value: this.datetimeValue.ampm
+        }
+      }
+
      this.updateDatetimeValue(changeData);
      picker.columns = this.generateColumns();
    });
@@ -632,7 +638,6 @@ export class Datetime implements ComponentInterface {
    return (
      <Host
        onClick={this.onClick}
-        role="combobox"
        aria-disabled={disabled ? 'true' : null}
        aria-expanded={`${isExpanded}`}
        aria-haspopup="true"
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -748,14 +748,15 @@ export class DatetimeExample {
  </ion-item>
 </template>

-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonDatetime, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';

-  @Component()
-  export default class Example extends Vue {
-    customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
-
-    customDayShortNames = [
+export default defineComponent({
+  components: { IonDatetime, IonItem, IonLabel },
+  setup() {
+    const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+    const customDayShortNames = [
      's\u00f8n',
      'man',
      'tir',
@@ -764,8 +765,7 @@ export class DatetimeExample {
      'fre',
      'l\u00f8r'
    ];
-
-    customPickerOptions = {
+    const customPickerOptions = {
      buttons: [{
        text: 'Save',
        handler: () => console.log('Clicked Save!')
@@ -777,7 +777,14 @@ export class DatetimeExample {
        }
      }]
    }
+    
+    return {
+      customYearValues,
+      customDayShortNames,
+      customPickerOptions
+    }
  }
+});
 </script>
 ```

--- a/core/src/components/datetime/test/basic/e2e.ts
+++ b/core/src/components/datetime/test/basic/e2e.ts
@@ -1,5 +1,42 @@
 import { newE2EPage } from '@stencil/core/testing';

+const getActiveElementText = async (page) => {
+  const activeElement = await page.evaluateHandle(() => document.activeElement);
+  return await page.evaluate(el => el && el.textContent, activeElement);
+}
+
+test('datetime/picker: focus trap', async () => {
+  const page = await newE2EPage({ url: '/src/components/datetime/test/basic?ionic:_testing=true' });
+
+  await page.click('#datetime-part');
+  await page.waitForSelector('#datetime-part');
+
+  let datetime = await page.find('ion-datetime');
+
+  expect(datetime).not.toBe(null);
+  await datetime.waitForVisible();
+
+  // TODO fix
+  await page.waitFor(100);
+
+  await page.keyboard.press('Tab');
+
+  const activeElementText = await getActiveElementText(page);
+  expect(activeElementText).toEqual('Cancel');
+
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Tab');
+  await page.keyboard.up('Shift');
+
+  const activeElementTextTwo = await getActiveElementText(page);
+  expect(activeElementTextTwo).toEqual('1920');
+
+  await page.keyboard.press('Tab');
+
+  const activeElementTextThree = await getActiveElementText(page);
+  expect(activeElementTextThree).toEqual('Cancel');
+});
+
 test('datetime: basic', async () => {
  const page = await newE2EPage({
    url: '/src/components/datetime/test/basic?ionic:_testing=true'
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -132,6 +132,15 @@
          <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
        </ion-item>

+        <ion-item>
+          <ion-label>YYYY MMM DD hh:mm A</ion-label>
+          <ion-datetime
+            id="todaysDate"
+            display-format="YYYY MMM DD hh:mm A"
+            minute-values="00,05,10,15,20,25,30,35,40,45,50,55">
+          </ion-datetime>
+        </ion-item>
+
        <ion-item>
          <ion-label>Leap years, summer months</ion-label>
          <ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
@@ -197,6 +206,9 @@
    </style>

    <script>
+      var todaysDateDatetime = document.querySelector('#todaysDate');
+      todaysDateDatetime.value = '2020-09-02T17:15:03.488Z';
+
      var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
      var customYearValues = document.getElementById('customYearValues');
      customYearValues.yearValues = yearValuesArray;
--- a/core/src/components/datetime/usage/vue.md
+++ b/core/src/components/datetime/usage/vue.md
@@ -79,14 +79,15 @@
  </ion-item>
 </template>

-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonDatetime, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';

-  @Component()
-  export default class Example extends Vue {
-    customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
-
-    customDayShortNames = [
+export default defineComponent({
+  components: { IonDatetime, IonItem, IonLabel },
+  setup() {
+    const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+    const customDayShortNames = [
      's\u00f8n',
      'man',
      'tir',
@@ -95,8 +96,7 @@
      'fre',
      'l\u00f8r'
    ];
-
-    customPickerOptions = {
+    const customPickerOptions = {
      buttons: [{
        text: 'Save',
        handler: () => console.log('Clicked Save!')
@@ -108,6 +108,13 @@
        }
      }]
    }
+    
+    return {
+      customYearValues,
+      customDayShortNames,
+      customPickerOptions
+    }
  }
+});
 </script>
 ```
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -142,8 +142,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    return (
      <Host
        aria-disabled={disabled ? 'true' : null}
-        class={{
-          ...createColorClasses(color),
+        class={createColorClasses(color, {
          [mode]: true,
          'fab-button-in-list': inList,
          'fab-button-translucent-in-list': inList && translucent,
@@ -154,7 +153,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
          'ion-activatable': true,
          'ion-focusable': true,
          [`fab-button-${size}`]: size !== undefined,
-        }}
+        })}
      >

        <TagType
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -131,6 +131,15 @@ export class FabButtonExample {

  </ion-content>
 </template>
+
+<script>
+import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFab, IonFabButton }
+});
+</script>
 ```


--- a/core/src/components/fab-button/usage/vue.md
+++ b/core/src/components/fab-button/usage/vue.md
@@ -22,4 +22,13 @@

  </ion-content>
 </template>
+
+<script>
+import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFab, IonFabButton }
+});
+</script>
 ```
--- a/core/src/components/fab-list/readme.md
+++ b/core/src/components/fab-list/readme.md
@@ -215,6 +215,15 @@ export class FabListExample {

  </ion-fab>
 </template>
+
+<script>
+import { IonFab, IonFabButton, IonFabList } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonFab, IonFabButton, IonFabList }
+});
+</script>
 ```


--- a/core/src/components/fab-list/usage/vue.md
+++ b/core/src/components/fab-list/usage/vue.md
@@ -15,4 +15,13 @@

  </ion-fab>
 </template>
+
+<script>
+import { IonFab, IonFabButton, IonFabList } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonFab, IonFabButton, IonFabList }
+});
+</script>
 ```
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -416,6 +416,61 @@ export class FabExample {
    </ion-toolbar>
  </ion-footer>
 </template>
+
+<script>
+import { 
+  IonContent, 
+  IonFab, 
+  IonFabButton, 
+  IonFabList, 
+  IonFooter, 
+  IonHeader, 
+  IonIcon, 
+  IonTitle, 
+  IonToolbar 
+} from '@ionic/vue';
+import { 
+  add, 
+  arrowBackCircle,
+  arrowForwardCircle, 
+  logoFacebook, 
+  logoInstagram, 
+  logoTwitter, 
+  logoVimeo, 
+  person, 
+  settings, 
+  share
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonContent, 
+    IonFab, 
+    IonFabButton, 
+    IonFabList, 
+    IonFooter, 
+    IonHeader, 
+    IonIcon, 
+    IonTitle, 
+    IonToolbar
+  },
+  setup() {
+    return {
+      add, 
+      arrowBackCircle,
+      arrowForwardCircle, 
+      logoFacebook, 
+      logoInstagram, 
+      logoTwitter, 
+      logoVimeo, 
+      person, 
+      settings, 
+      share
+    }
+  }
+});
+</script>
 ```


--- a/core/src/components/fab/usage/vue.md
+++ b/core/src/components/fab/usage/vue.md
@@ -92,4 +92,59 @@
    </ion-toolbar>
  </ion-footer>
 </template>
+
+<script>
+import { 
+  IonContent, 
+  IonFab, 
+  IonFabButton, 
+  IonFabList, 
+  IonFooter, 
+  IonHeader, 
+  IonIcon, 
+  IonTitle, 
+  IonToolbar 
+} from '@ionic/vue';
+import { 
+  add, 
+  arrowBackCircle,
+  arrowForwardCircle, 
+  logoFacebook, 
+  logoInstagram, 
+  logoTwitter, 
+  logoVimeo, 
+  person, 
+  settings, 
+  share
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonContent, 
+    IonFab, 
+    IonFabButton, 
+    IonFabList, 
+    IonFooter, 
+    IonHeader, 
+    IonIcon, 
+    IonTitle, 
+    IonToolbar
+  },
+  setup() {
+    return {
+      add, 
+      arrowBackCircle,
+      arrowForwardCircle, 
+      logoFacebook, 
+      logoInstagram, 
+      logoTwitter, 
+      logoVimeo, 
+      person, 
+      settings, 
+      share
+    }
+  }
+});
+</script>
 ```
--- a/core/src/components/footer/readme.md
+++ b/core/src/components/footer/readme.md
@@ -106,6 +106,15 @@ export class FooterExample {
    </ion-toolbar>
  </ion-footer>
 </template>
+
+<script>
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFooter, IonTitle, IonToolbar }
+});
+</script>
 ```


--- a/core/src/components/footer/usage/vue.md
+++ b/core/src/components/footer/usage/vue.md
@@ -15,4 +15,13 @@
    </ion-toolbar>
  </ion-footer>
 </template>
+
+<script>
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFooter, IonTitle, IonToolbar }
+});
+</script>
 ```
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -714,6 +714,15 @@ export class GridExample {
    </ion-row>
  </ion-grid>
 </template>
+
+<script>
+import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCol, IonGrid, IonRow }
+});
+</script>
 ```


--- a/core/src/components/grid/usage/vue.md
+++ b/core/src/components/grid/usage/vue.md
@@ -178,4 +178,13 @@
    </ion-row>
  </ion-grid>
 </template>
+
+<script>
+import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCol, IonGrid, IonRow }
+});
+</script>
 ```
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -49,7 +49,7 @@ export class Header implements ComponentInterface {
    await this.checkCollapsibleHeader();
  }

-  componentDidUnload() {
+  disconnectedCallback() {
    this.destroyCollapsibleHeader();
  }

--- a/core/src/components/header/header.utils.ts
+++ b/core/src/components/header/header.utils.ts
@@ -150,7 +150,6 @@ export const scaleLargeTitles = (toolbars: ToolbarIndex[] = [], scale = 1, trans
    const titleDiv = toolbar.innerTitleEl;
    if (!ionTitle || ionTitle.size !== 'large') { return; }

-    titleDiv.style.transformOrigin = 'left center';
    titleDiv.style.transition = (transition) ? TRANSITION : '';
    titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
  });
--- a/core/src/components/header/readme.md
+++ b/core/src/components/header/readme.md
@@ -160,6 +160,29 @@ export class HeaderExample {
    </ion-header>
  </ion-content>
 </template>
+
+<script>
+import { 
+  IonBackButton, 
+  IonButtons, 
+  IonContent, 
+  IonHeader, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonBackButton, 
+    IonButtons, 
+    IonContent, 
+    IonHeader, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```


--- a/core/src/components/header/usage/vue.md
+++ b/core/src/components/header/usage/vue.md
@@ -28,4 +28,27 @@
    </ion-header>
  </ion-content>
 </template>
+
+<script>
+import { 
+  IonBackButton, 
+  IonButtons, 
+  IonContent, 
+  IonHeader, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonBackButton, 
+    IonButtons, 
+    IonContent, 
+    IonHeader, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
--- a/core/src/components/icon/usage/vue.md
+++ b/core/src/components/icon/usage/vue.md
@@ -1,16 +1,29 @@
 ```html
 <template>
  <!-- uses "star" icon for both modes -->
-  <ion-icon name="star"></ion-icon>
+  <ion-icon :icon="star"></ion-icon>

  <!-- explicitly set the icon for each mode -->
-  <ion-icon ios="home" md="star"></ion-icon>
+  <ion-icon :ios="home" :md="star"></ion-icon>

  <!-- use a custom svg icon -->
  <ion-icon src="/path/to/external/file.svg"></ion-icon>

  <!-- set the icon size -->
-  <ion-icon size="small" name="heart"></ion-icon>
-  <ion-icon size="large" name="heart"></ion-icon>
+  <ion-icon size="small" :icon="heart"></ion-icon>
+  <ion-icon size="large" :icon="heart"></ion-icon>
 </template>
+
+<script>
+import { IonIcon } from '@ionic/vue';
+import { heart, home, star } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonIcon },
+  setup() {
+    return { heart, home, star }
+  }
+});
+</script>
 ```
--- a/core/src/components/img/readme.md
+++ b/core/src/components/img/readme.md
@@ -103,6 +103,28 @@ export class ImgExample {
    </ion-item>
  </ion-list>
 </template>
+
+<script>
+import { IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonImg, IonItem, IonLabel, IonList, IonThumbnail },
+  setup() {
+    const items = [{
+      'text': 'Item 1',
+      'src': '/path/to/external/file.png'
+    }, {
+      'text': 'Item 2',
+      'src': '/path/to/external/file.png'
+    }, {
+      'text': 'Item 3',
+      'src': '/path/to/external/file.png'
+    }];
+    return { items }
+  }
+});
+</script>
 ```


--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Brandy Carney	f714c34699	5.3.3	2020-09-17 18:13:02 -04:00
Ely Lucas	5cdf68b674	chore(react): fixing issue with new history types (#22109 )	2020-09-17 18:06:36 -04:00
Brandy Carney	bd675e42c7	chore(dependencies): update angular-server package-lock	2020-09-17 15:41:08 -04:00
Brandy Carney	99f2532ee1	fix(input): only focus the first input / textarea when clicking on the parent item (#22049 ) fixes #22037 resolves #22032	2020-09-14 11:44:37 -04:00
Liam DeBeasi	c72c7ffa98	fix(textarea): do not generate duplicate IDs between ion-input and ion-textarea (#22074 ) resolves #21542	2020-09-11 16:38:00 -04:00
Brandy Carney	8b85fe0d9e	fix(datetime): do not reset to am when changing hour and pm is set (#21997 ) fixes #19175 fixes #19260 fixes #20026 references #16630	2020-09-11 13:55:07 -04:00
Liam DeBeasi	db2cac20fb	docs(vue): update component usage examples for vue 3 (#22050 )	2020-09-11 13:48:21 -04:00
Ely Lucas	74af3cb50b	fix(react): Keep a hold of previous routes when doing a redirect, closes #22053	2020-09-08 19:58:00 -06:00
Ely Lucas	ba23ab3d66	chore(react): fixing package file	2020-09-08 09:38:57 -06:00
Ely Lucas	4090250da7	chore(react): fixing lint errors	2020-09-08 09:36:44 -06:00
Ely Lucas	b11e06cec1	fix(react): redirect routes should unmount leaving component, fixes #22022 (#22029 )	2020-09-04 14:56:20 -06:00
Liam DeBeasi	ec7c023873	chore(): run build on infinite scroll docs (#22025 )	2020-09-03 14:48:01 -04:00
Ely Lucas	e02b33ac75	docs(infinite-scroll): removing verbiage on infinite scroll support in react (#22024 )	2020-09-03 09:24:28 -06:00
Liam DeBeasi	e82ac39af9	chore(): fix changelog typo	2020-08-27 18:32:28 -04:00
Brandy Carney	c458c83a7c	release-5.3.2	2020-08-27 17:57:49 -04:00
Brandy Carney	f52b3061e0	5.3.2	2020-08-27 17:32:21 -04:00
Brandy Carney	3f1fe13c29	chore(scripts): run npm i add package lock false	2020-08-27 17:26:56 -04:00
Brandy Carney	3ecd899d2b	chore: remove react package-locks (#21994 )	2020-08-27 17:04:12 -04:00
Liam DeBeasi	6878fb9eb9	fix(input): remain focused in the input after pressing the clear button (#21985 ) resolves #21549	2020-08-27 15:22:40 -04:00
Brandy Carney	22477fb9bf	fix(input): improve reliability of scroll assist when accessory bar is enabled (#21936 ) fixes #21912 Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>	2020-08-27 15:20:42 -04:00
Brandy Carney	e4964ff77b	fix(input): properly focus the input when clicking the item padding in WebKit (#21930 ) Related WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=214859 Issue Number: fixes #21509	2020-08-27 14:52:02 -04:00
Brandy Carney	bd4e931fbc	chore(tests): fix failing core e2e and angular test app (#21986 ) - version updates, add package-lock to the angular test-app - add protractor ci config - install headless chrome dependencies per https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-on-circleci	2020-08-27 14:14:05 -04:00
Liam DeBeasi	36e4bf7dd7	fix(react): export correct animation types (#21950 )	2020-08-24 14:36:59 -04:00
Liam DeBeasi	e32b9afaaa	docs(segment-button): add correct usage for checking segment button (#21966 ) resolves #21961	2020-08-24 09:48:06 -04:00
Brandy Carney	6dae5d1dfe	chore(dependencies): add missing package lock files to packages (#21951 ) - Add `package-lock.json` to `angular`, `angular-server`, `react`, `react-router` and the root - Ran `npm audit` on all, fixed vulnerabilities - Ran `npm outdated` on all, updated minor and patch versions - Ran `npm update` on all	2020-08-21 16:00:40 -04:00
Liam DeBeasi	00eac33053	fix(label): use translateY so input caret shows up due to webkit issue (#21949 ) resolves #21943	2020-08-21 13:59:19 -04:00
Brandy Carney	9f4b01e17f	fix(range): properly display stacked labels in an item with a range (#21944 ) fixes #21625	2020-08-21 13:57:13 -04:00
Liam DeBeasi	5c177d756f	fix(overlays): prevent focus from being stolen when presenting another overlay from within a modal (#21856 ) resolves #21840	2020-08-21 12:55:04 -04:00
Brandy Carney	06ab66edc7	chore(dependencies): update vulnerabilities and minor/patch outdated (#21948 ) Updates core dependencies with vulnerabilities Updates all outdated core minor / patch dependencies Fixes new lint errors due to updated stylelint (these errors were good)	2020-08-21 12:42:44 -04:00
Liam DeBeasi	971789dc89	docs(modal): add correct card style modal usage (#21888 )	2020-08-21 12:39:25 -04:00
Ely Lucas	434befea5f	fix(react): removed exporting of ionRenderToString to decrease bundle size, closes #21917 (#21928 )	2020-08-17 10:10:54 -06:00
Adam Bradley	753fd2f910	chore(colorClass): update createColorClasses() for ts4 (#21896 ) Change the createColorClasses() fn so the returned type and jsx class property work well with typescript 4	2020-08-10 09:18:41 -05:00
Adam Bradley	7fc13ffb2a	style(tabs): fix if statement (#21891 )	2020-08-06 12:20:31 -05:00
Adam Bradley	481d38df09	chore(deps): update stencil, bump deps, always build es5 (#21890 ) Ensure we're always creating es5 builds for prod builds. Stencil 2 will not enable es5 builds by default.	2020-08-06 11:33:00 -05:00
Adam Bradley	ae47d77710	chore(api): internal updates required for stencil 2 upgrade (#21889 ) Stencil 2 is removing deprecated APIs, and these are the remaining ones Ionic has been using.	2020-08-06 10:33:22 -05:00
Adam Bradley	03c2f16e46	chore(build): set stencil extras config (#21877 ) Stencil 2 will update the extras defaults to not include many of the polyfills and shims by default. Setting the configs here ensures they stay enabled so there isn't a breaking change for Ionic v5 users.	2020-08-04 13:08:00 -05:00
Ely Lucas	f58424f625	fix(react): setting active tab properly on mount, closes #21830 (#21833 ) * fix(react): setting active tab properly on mount, closes #21830 * removing commented code * merge with master	2020-07-29 12:15:34 -06:00
Ely Lucas	74468ab797	fix(reat): fix tab currentHref when changing tabs, closes #21834 (#21835 )	2020-07-29 10:48:45 -06:00
Liam DeBeasi	2eaab23f38	merge release-5.3.1 5.3.1	2020-07-27 10:24:15 -04:00
Liam DeBeasi	4476817825	5.3.1	2020-07-27 09:33:54 -04:00
Liam DeBeasi	97e32f3b0b	chore(): bump stencil to 1.17.1 (#21822 )	2020-07-27 09:24:31 -04:00
Ely Lucas	bfddb17065	fix(react): using autonomous web component for safari support, closes #21803 * fix(react): using autonomous web component for safari support, closes #21803 * taking out extends	2020-07-24 12:25:28 -06:00
Adam Bradley	3c9d6ea5f5	chore(deps): update to stencil 1.17.0, bump deps (#21811 )	2020-07-24 12:44:09 -05:00
Sebastián Ferreras	8e1178b98b	docs(loading): remove duplicated cssClass property in usage (#21784 )	2020-07-23 17:42:58 -04:00
Liam DeBeasi	470478d387	docs(route): add correct interface name (#21802 )	2020-07-23 13:28:46 -04:00
Liam DeBeasi	cc73a1063e	merge release-5.3.0 5.3.0	2020-07-23 12:18:57 -04:00
Liam DeBeasi	349e8cd5b0	5.3.0	2020-07-23 11:43:23 -04:00
Liam DeBeasi	bcbe8cbb8d	fix(overlay): do not try to trap focus on hidden inputs (#21799 )	2020-07-23 11:19:31 -04:00
Liam DeBeasi	03ca0c5968	docs(modal): add correct card-style modal usage for react (#21780 ) resolves #21773	2020-07-22 13:49:32 -04:00
Liam DeBeasi	fff4aec6cf	fix(overlays): trap focus inside overlay components except toast (#21716 ) fixes #21647	2020-07-22 12:09:31 -04:00
Liam DeBeasi	eb592b8917	fix(nav): insertPages method correctly inserts multiple pages with props (#21725 ) fixes #21724	2020-07-22 12:06:29 -04:00
Ely Lucas	a15cd01bc3	fix(react): fixes swipe to go back regression (#21791 )	2020-07-21 22:30:44 -06:00
Adam Bradley	4199762d3e	chore(): export ionicons jsx interface (#21788 )	2020-07-21 14:45:19 -04:00
Adam Bradley	79518468dd	fix(overlays): move prepareOverlay to connectedCallback For custom elements builds, overlays cannot use hasAttribute() in the constructor, so moving it to connectedCallback instead.	2020-07-21 13:07:54 -05:00
Ely Lucas	f4a08b7ed4	fix(react): fixng ion-router-outlet ref regresssion (#21786 )	2020-07-21 08:48:25 -06:00
Liam DeBeasi	dbe6853884	fix(title): allow overriding of large title transform origin (#21770 ) resolves #21761	2020-07-20 13:40:27 -04:00
Liam DeBeasi	096eef4a79	feat(card): expose global card css variable (#21756 ) resolves #21694	2020-07-20 12:46:58 -04:00
Ely Lucas	d4a5fbd955	fix(react): adding custom history to IonReactRouter, closes #20297 (#21775 )	2020-07-20 10:03:35 -06:00
Brandy Carney	591c133344	docs(readme): Ionic -> Ionic Framework	2020-07-20 11:55:59 -04:00
Christian Lüdemann	d297ecb87a	fix(virtual-scroll): properly calculate top offset when nested (#21581 )	2020-07-20 10:29:39 -04:00
Liam DeBeasi	a625c837a6	feat(input, textarea): expose native events for ionBlur and ionFocus (#21777 ) resolves #17363	2020-07-17 17:43:17 -04:00
Liam DeBeasi	77464ef21a	feat(router): add navigation hooks (#21709 )	2020-07-17 11:08:16 -04:00
Liam DeBeasi	fa93dffdb4	feat(input): accept datetime-local, month, and week type values (#21758 ) resolves #21757	2020-07-17 10:46:07 -04:00
Brandy Carney	6f200ac751	chore(release): update repository name (#21699 )	2020-07-14 17:01:08 -04:00
Simon Hänisch	7c2d0c981a	feat(select): add optional generic typings (#21514 ) resolves https://github.com/ionic-team/ionic-framework/issues/20220	2020-07-14 16:06:48 -04:00
Ely Lucas	1351b2eafc	fix(react): fix regression on IonTabsContext not working properly (#21751 )	2020-07-14 13:26:04 -06:00
Liam DeBeasi	88f1828bd8	fix(segment-button): allow min-width to be overridden (#21722 ) fixes #21105	2020-07-14 10:58:40 -04:00
Liam DeBeasi	020f3cc56c	fix(keyboard): keyboard events now consistently fire on android (#21741 ) fixes #21734	2020-07-14 10:43:58 -04:00
Liam DeBeasi	3cbf9e7c4c	fix(ios): improve scroll assist reliability on password inputs (#21703 ) fixes #21688	2020-07-10 09:41:43 -04:00
Liam DeBeasi	2664587749	fix(angular): per-page animations now work with swipe to go back (#21706 ) resolves #21692	2020-07-10 09:38:58 -04:00
Liam DeBeasi	f00ad8a835	fix(datetime): remove unneeded combox role (#21708 ) resolves https://github.com/ionic-team/ionic-framework/issues/21667	2020-07-10 09:37:39 -04:00
Ely Lucas	81ef3f1ecd	fix(react): fix regression with history.replace in new react router (#21698 )	2020-07-08 10:22:08 -06:00
Ely Lucas	c171ccbd37	feat(react): React Router Enhancements (#21693 )	2020-07-07 12:02:05 -05:00
Ely Lucas	a0735b97bf	fix(build): Fixes to dev build for react (#21684 ) * fix(react): removing lock files in react to get npm llink to work * fix(scripts) updating ionic/react dep in react-router * fix(scripts): linking ionic/react in router * removing log	2020-07-06 21:11:45 -05:00
Adam Bradley	b4423a816f	chore(deps): update stencil and rollup (#21680 )	2020-07-06 17:37:10 +02:00
Liam DeBeasi	ff23e4f267	merge release-5.2.3 5.2.3	2020-07-02 09:11:27 -04:00
Liam DeBeasi	97123cd6c3	5.2.3	2020-07-01 13:28:43 -04:00
Liam DeBeasi	1dcd9de50a	fix(input): clear button can now be tabbed to (#21633 ) fixes https://github.com/ionic-team/ionic/issues/21549	2020-07-01 10:13:12 -04:00
Adam Bradley	c458523b0d	chore(stencil): update to stencil 1.15.0 (#21653 )	2020-06-30 11:34:16 -05:00
Liam DeBeasi	a5e4669c4b	feat(segment-button, toast): add additional parts docs (#21532 )	2020-06-30 10:31:54 -05:00
Brandy Carney	9413aa0bac	docs(coc): add Contributor Covenant Code of Conduct (#21550 )	2020-06-29 11:35:29 -04:00
Adam Bradley	ce6e637787	chore(deps): bump deps (#21632 )	2020-06-29 10:21:06 -05:00
Adam Bradley	7a29e0e3c7	chore(ionicons): bump to ionicons 5.1.2, add package-lock.json (#21629 )	2020-06-26 09:42:05 -05:00
Liam DeBeasi	8c79e2c5b5	fix(select): change role to listbox (#21609 ) fixes https://github.com/ionic-team/ionic/issues/21601	2020-06-25 11:46:52 -04:00
Liam DeBeasi	26674f1dfa	fix(slides): enable keyboard integration (#21608 ) resolves #21554	2020-06-23 16:31:22 -04:00
Liam DeBeasi	88f23b1626	fix(textarea): add aria-labelledby to native textarea (#21606 ) resolves #21600	2020-06-23 16:29:41 -04:00
Chris	a5b3750ee2	fix(angular): expose createAnimation in addition to AnimationController (#21616 ) closes #21615	2020-06-23 16:23:22 -04:00
Liam DeBeasi	fbcd3f8c08	docs(select-option): clarify that disabled does not apply for action sheets (#21584 ) resolves https://github.com/ionic-team/ionic/issues/21578	2020-06-19 13:45:49 -04:00
Liam DeBeasi	04ce642369	merge release-5.2.2 5.2.2	2020-06-17 12:46:28 -04:00
Liam DeBeasi	84c421a4b0	5.2.2	2020-06-17 12:03:58 -04:00
Liam DeBeasi	1decc13cb8	docs(modal): clarify backdrop usage for card modals (#21556 )	2020-06-17 11:25:07 -04:00
Liam DeBeasi	17308f247f	fix(segment): ensure checked classes get set after not having a value (#21547 )	2020-06-16 11:22:17 -04:00
Liam DeBeasi	d8b377ffeb	fix(input): add aria-label to clear button (#21538 )	2020-06-15 13:36:11 -04:00
Liam DeBeasi	24cfdc308f	fix(ios): respect toolbar opacity when doing nav transition (#21512 )	2020-06-15 09:39:06 -04:00
Liam DeBeasi	bcccc217b8	fix(action-sheet, alert): resolve double click issue when running in iOS mode on chrome (#21506 )	2020-06-12 10:36:09 -04:00
Liam DeBeasi	e968bd029a	fix(angular): fix issue where navAnimation was being incorrectly overridden (#21508 )	2020-06-11 13:30:58 -04:00
Masahiko Sakakibara	7c8f621536	chore(template): add v5.0 option to issue templates (#21498 )	2020-06-11 11:21:18 -04:00
Liam DeBeasi	edceac0745	merge release-5.2.1 Release 5.2.1	2020-06-11 11:20:23 -04:00
Liam DeBeasi	2969f9f9f2	5.2.1	2020-06-11 10:43:55 -04:00
Liam DeBeasi	9223abc1f8	fix(angular): resolve issue when not using ngModel on components	2020-06-11 10:43:49 -04:00
Liam DeBeasi	b37c158eea	merge release-5.2.0 Release 5.2.0	2020-06-10 13:26:16 -04:00