5.5.2

resolves #22644

.circleci/config.yml

@@ -1,4 +1,4 @@
-version: 2
+version: 2.1
 
 aliases:
   - &restore-cache
@@ -31,16 +31,35 @@ 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:
       - checkout
       - restore_cache: *restore-cache
-      - run: npm install
+      - run: npm install --legacy-peer-deps
       - save_cache: *save-cache
       - persist_to_workspace:
           root: /tmp/workspace
@@ -56,7 +75,7 @@ jobs:
       - restore_cache: *restore-cache-core
       - restore_cache: *restore-cache-core-stencil
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/core
       - save_cache: *save-cache-core
       - run:
@@ -75,7 +94,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/angular
       - run:
           command: sudo npm link
@@ -98,7 +117,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/packages/angular-server
       - run:
           command: npm run build.prod
@@ -115,7 +134,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/packages/react
       - run:
           command: sudo npm link
@@ -130,7 +149,6 @@ jobs:
           root: /tmp/workspace
           paths:
             - "*"
-
   build-react-router:
     <<: *defaults
     steps:
@@ -138,7 +156,7 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           working_directory: /tmp/workspace/packages/react-router
       - run:
           command: sudo npm link
@@ -160,6 +178,58 @@ jobs:
           paths:
             - "*"
 
+  build-vue:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/vue
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
+  build-vue-router:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link @ionic/vue
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/vue-router
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -263,6 +333,26 @@ jobs:
           command: npm run lint
           working_directory: /tmp/workspace/packages/react-router
 
+  test-vue-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/vue
+
+  test-vue-router-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/vue-router
+
   test-react-spec:
     <<: *defaults
     steps:
@@ -301,6 +391,28 @@ jobs:
           command: npm run test.spec
           working_directory: /tmp/workspace/packages/react-router
 
+  test-vue-router-spec:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link @ionic/vue
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: npm run test.spec
+          working_directory: /tmp/workspace/packages/vue-router
+
   test-angular-e2e:
     <<: *defaults
     steps:
@@ -308,16 +420,17 @@ jobs:
       - attach_workspace:
           at: /tmp/workspace
       - run:
-          command: npm install
+          command: npm install --legacy-peer-deps
           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,11 +439,14 @@ 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:
-          requires: [build-core]
+      # Adam requested we skip this test for now
+      # since it is failing on ES5 code which
+      # will be removed in Ionic Framework v6
+      #- test-core-treeshake:
+      #    requires: [build-core]
       - test-core-screenshot:
           requires: [build-core]
           filters:
@@ -358,6 +474,16 @@ workflows:
           requires: [build-react]
       - test-react-router-spec:
           requires: [build-react-router]
+      - build-vue:
+          requires: [build-core]
+      - build-vue-router:
+          requires: [build-core, build-vue]
+      - test-vue-lint:
+          requires: [build-vue]
+      - test-vue-router-lint:
+          requires: [build-vue-router]
+      - test-vue-router-spec:
+          requires: [build-vue-router]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:

.github/COMPONENT-GUIDE.md

@@ -9,6 +9,8 @@
   * [Ripple Effect](#ripple-effect)
   * [Example Components](#example-components)
   * [References](#references)
+- [Accessibility](#accessibility)
+  * [Checkbox](#checkbox)
 - [Rendering Anchor or Button](#rendering-anchor-or-button)
   * [Example Components](#example-components-1)
   * [Component Structure](#component-structure-1)
@@ -362,6 +364,131 @@ ion-ripple-effect {
 - [iOS Buttons](https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/)
 
 
+## Accessibility
+
+### Checkbox
+
+#### Example Components
+
+- [ion-checkbox](https://github.com/ionic-team/ionic/tree/master/core/src/components/checkbox)
+- [ion-toggle](https://github.com/ionic-team/ionic/tree/master/core/src/components/toggle)
+
+#### VoiceOver
+
+In order for VoiceOver to work properly with a checkbox component there must be a native `input` with `type="checkbox"`, and `aria-checked` and `role="checkbox"` **must** be on the host element. The `aria-hidden` attribute needs to be added if the checkbox is disabled, preventing iOS users from selecting it:
+
+```tsx
+render() {
+  const { checked, disabled } = this;
+
+  return (
+    <Host
+      aria-checked={`${checked}`}
+      aria-hidden={disabled ? 'true' : null}
+      role="checkbox"
+    >
+      <input
+        type="checkbox"
+      />
+      ...
+    </Host>
+  );
+}
+```
+
+#### NVDA
+
+It is required to have `aria-checked` on the native input for checked to read properly and `disabled` to prevent tabbing to the input:
+
+```tsx
+render() {
+  const { checked, disabled } = this;
+
+  return (
+    <Host
+      aria-checked={`${checked}`}
+      aria-hidden={disabled ? 'true' : null}
+      role="checkbox"
+    >
+      <input
+        type="checkbox"
+        aria-checked={`${checked}`}
+        disabled={disabled}
+      />
+      ...
+    </Host>
+  );
+}
+```
+
+#### Labels
+
+A helper function has been created to get the proper `aria-label` for the checkbox. This can be imported as `getAriaLabel` like the following:
+
+```tsx
+const { label, labelId, labelText } = getAriaLabel(el, inputId);
+```
+
+where `el` and `inputId` are the following:
+
+```tsx
+private inputId = `ion-cb-${checkboxIds++}`;
+
+@Element() el!: HTMLElement;
+```
+
+This can then be added to the `Host` like the following:
+
+```tsx
+<Host
+  aria-labelledby={label ? labelId : null}
+  aria-checked={`${checked}`}
+  aria-hidden={disabled ? 'true' : null}
+  role="checkbox"
+>
+```
+
+In addition to that, the checkbox should have a label added:
+
+```tsx
+<Host
+  aria-labelledby={label ? labelId : null}
+  aria-checked={`${checked}`}
+  aria-hidden={disabled ? 'true' : null}
+  role="checkbox"
+>
+  <label htmlFor={inputId}>
+    {labelText}
+  </label>
+  <input
+    type="checkbox"
+    aria-checked={`${checked}`}
+    disabled={disabled}
+    id={inputId}
+  />
+```
+
+#### Hidden Input
+
+A helper function to render a hidden input has been added, it can be added in the `render`:
+
+```tsx
+renderHiddenInput(true, el, name, (checked ? value : ''), disabled);
+```
+
+> This is required for the checkbox to work with forms.
+
+#### Known Issues
+
+When using VoiceOver on macOS, Chrome will announce the following when you are focused on a checkbox:
+
+```
+currently on a checkbox inside of a checkbox
+```
+
+This is a compromise we have to make in order for it to work with the other screen readers & Safari.
+
+
 ## Rendering Anchor or Button
 
 Certain components can render an `<a>` or a `<button>` depending on the presence of an `href` attribute.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -10,7 +10,7 @@ assignees: ''
 
 <!-- Please make sure you are posting an issue pertaining to the Ionic Framework. If you are having an issue with the Ionic Appflow services (Ionic View, Ionic Deploy, etc.) please consult the Ionic Appflow support portal (https://ionic.zendesk.com/hc/en-us) -->
 
-<!-- Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/ -->
+<!-- Please do not submit support requests or "How to" questions here. Instead, please use the Ionic Forum: https://forum.ionicframework.com/ -->
 
 <!-- ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION. -->
 

.github/ISSUE_TEMPLATE/support_question.md

@@ -8,4 +8,4 @@ assignees: ''
 
 # Support Question
 
-Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
+Please do not submit support requests or "How to" questions here. Instead, please use the Ionic Forum: https://forum.ionicframework.com/

.github/ionic-issue-bot.yml

@@ -27,7 +27,10 @@ comment:
         is added to issues that need a code reproduction.
 
 
-        Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
+        Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
+
+
+        If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
 
 
         For a guide on how to create a good reproduction, see our [Contributing Guide](https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction).
@@ -130,22 +133,6 @@ noReproduction:
   lock: true
   dryRun: false
 
-labelPullRequest:
-  labels:
-    - label: "package: angular"
-      branch: master
-      path: ^angular
-    - label: "package: core"
-      branch: master
-      path: ^core
-    - label: "package: react"
-      branch: master
-      path: ^react
-    - label: "package: vue"
-      branch: master
-      path: ^vue
-  dryRun: false
-
 wrongRepo:
   repos:
     - label: "ionitron: capacitor"

.github/labeler.yml

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

.github/workflows/label.yml

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

.gitignore

@@ -58,6 +58,7 @@ prerender-static.html
 # stencil
 angular/css/
 packages/react/css/
+packages/vue/css/
 core/css/
 core/hydrate/
 core/loader/

.scripts/common.js

@@ -14,7 +14,9 @@ const packages = [
   'angular',
   'packages/react',
   'packages/react-router',
-  'packages/angular-server'
+  'packages/angular-server',
+  'packages/vue',
+  'packages/vue-router'
 ];
 
 function readPkg(project) {
@@ -131,7 +133,7 @@ function preparePackage(tasks, package, version, install) {
         title: `${pkg.name}: install npm dependencies`,
         task: async () => {
           await fs.remove(path.join(projectRoot, 'node_modules'));
-          await execa('npm', ['i'], { cwd: projectRoot });
+          await execa('npm', ['i', '--legacy-peer-deps'], { cwd: projectRoot });
         }
       });
     }
@@ -141,13 +143,13 @@ function preparePackage(tasks, package, version, install) {
     if (package !== 'core') {
       projectTasks.push({
         title: `${pkg.name}: npm link @ionic/core`,
-        task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
+        task: () => execa('npm', ['link', '@ionic/core', '--legacy-peer-deps'], { cwd: projectRoot })
       });
 
       if (package === 'packages/react-router') {
         projectTasks.push({
           title: `${pkg.name}: npm link @ionic/react`,
-          task: () => execa('npm', ['link', '@ionic/react'], { cwd: projectRoot })
+          task: () => execa('npm', ['link', '@ionic/react', '--legacy-peer-deps'], { cwd: projectRoot })
         });
       }
     }
@@ -207,8 +209,15 @@ function prepareDevPackage(tasks, package, version) {
     if (package !== 'core') {
       projectTasks.push({
         title: `${pkg.name}: npm link @ionic/core`,
-        task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
+        task: () => execa('npm', ['link', '@ionic/core', '--legacy-peer-deps'], { cwd: projectRoot })
       });
+
+      if (package === 'packages/react-router') {
+        projectTasks.push({
+          title: `${pkg.name}: npm link @ionic/react`,
+          task: () => execa('npm', ['link', '@ionic/react', '--legacy-peer-deps'], { cwd: projectRoot })
+        });
+      }
     }
 
     projectTasks.push({

.scripts/release-dev.js

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

.scripts/release.js

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

CHANGELOG.md

@@ -1,3 +1,323 @@
+## [5.5.2](https://github.com/ionic-team/ionic/compare/v5.5.1...v5.5.2) (2020-12-09)
+
+
+### Bug Fixes
+
+* **android:** setting hardwareBackButton: false in config now disables default webview behavior ([#22555](https://github.com/ionic-team/ionic/issues/22555)) ([dc9faa6](https://github.com/ionic-team/ionic/commit/dc9faa6a0fbebb64c83c107c79cfd486cc0c096a)), closes [#18237](https://github.com/ionic-team/ionic/issues/18237)
+* **button:** allow aria-label to be inherited on inner button ([#22632](https://github.com/ionic-team/ionic/issues/22632)) ([818e387](https://github.com/ionic-team/ionic/commit/818e387fe81ac7026fb374d8865116dadd433c87)), closes [#22629](https://github.com/ionic-team/ionic/issues/22629)
+* **react:** hardware back button now navigates correctly ([36939e1](https://github.com/ionic-team/ionic/commit/36939e10ae0b8ac9a9275ee06d8e0d345de7c64f))
+* **react:** setting a ref now allows other props to be passed in ([31f45cd](https://github.com/ionic-team/ionic/commit/31f45cdcc953b08749d9db08321fa5ec6cbe2532)), closes [#22609](https://github.com/ionic-team/ionic/issues/22609)
+* **refresher:** clean up old css if calling refresh method before native refresher is setup ([#22640](https://github.com/ionic-team/ionic/issues/22640)) ([8d5ed47](https://github.com/ionic-team/ionic/commit/8d5ed47a282f92a60a2c4126a673cc2a5733067e)), closes [#22636](https://github.com/ionic-team/ionic/issues/22636)
+* **refresher:** refresher correctly detects native refresher when shown asynchronously ([#22623](https://github.com/ionic-team/ionic/issues/22623)) ([5ed73cd](https://github.com/ionic-team/ionic/commit/5ed73cdf4d63eeee25ef28d9676fcaa4f8e07b47)), closes [#22616](https://github.com/ionic-team/ionic/issues/22616)
+* **vue:** adding non tab button elements inside ion-tab-bar no longer causes errors ([#22643](https://github.com/ionic-team/ionic/issues/22643)) ([61cf0c5](https://github.com/ionic-team/ionic/commit/61cf0c534e45ce09410be6bfb50bdc27b657d1bc)), closes [#22642](https://github.com/ionic-team/ionic/issues/22642)
+* **vue:** correctly handle navigation failures ([#22621](https://github.com/ionic-team/ionic/issues/22621)) ([216f51b](https://github.com/ionic-team/ionic/commit/216f51b12a8c4ae7b410f47ce3d350ea513b68a1)), closes [#22591](https://github.com/ionic-team/ionic/issues/22591)
+* **vue:** correctly remove old view when replacing route ([#22566](https://github.com/ionic-team/ionic/issues/22566)) ([4f4f31b](https://github.com/ionic-team/ionic/commit/4f4f31b65e48294c3130ff24ae00b1a2aa1f9d31)), closes [#22492](https://github.com/ionic-team/ionic/issues/22492)
+* **vue:** pass in correct route to props function ([#22605](https://github.com/ionic-team/ionic/issues/22605)) ([01afdc4](https://github.com/ionic-team/ionic/commit/01afdc42e5b1598d4d15cb51761bbb3eb5d13893)), closes [#22602](https://github.com/ionic-team/ionic/issues/22602)
+* **vue:** query strings are now correctly handled when navigating back ([#22615](https://github.com/ionic-team/ionic/issues/22615)) ([a94e2a8](https://github.com/ionic-team/ionic/commit/a94e2a87fb759e7b7daed2d0304c1199dbc7afd1)), closes [#22517](https://github.com/ionic-team/ionic/issues/22517)
+* **vue:** swipe back gesture is properly disabled when swipeBackEnabled config is false ([#22568](https://github.com/ionic-team/ionic/issues/22568)) ([9d04c12](https://github.com/ionic-team/ionic/commit/9d04c127e817676983940b034a4c7efc92fdfbc6)), closes [#22567](https://github.com/ionic-team/ionic/issues/22567)
+
+### For Ionic Vue Developers
+
+Vue Router 4 has been released! Be sure to update from the release candidate to the latest stable version of Vue Router.
+
+For more information on the changes in Vue Router 4, see https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0.
+
+```
+npm install vue-router@4
+```
+
+
+
+
+## [5.5.1](https://github.com/ionic-team/ionic/compare/v5.5.0...v5.5.1) (2020-11-25)
+
+
+### Bug Fixes
+
+* **checkbox:** click handler now fires properly  ([#22573](https://github.com/ionic-team/ionic/issues/22573)) ([0786835](https://github.com/ionic-team/ionic/commit/07868354aaf88deebf7472a5bf0f34d7c823de17)), closes [#22557](https://github.com/ionic-team/ionic/issues/22557)
+* **radio:** properly announce radios on screen readers and resolve axe errors ([#22507](https://github.com/ionic-team/ionic/issues/22507)) ([afcc46e](https://github.com/ionic-team/ionic/commit/afcc46e1cc4d7f6e9d1a50f8b367da4b1d0c3143))
+* **react:** eliminate use of deprecated `findDOMNode`, resolves [#20972](https://github.com/ionic-team/ionic/issues/20972) ([5275332](https://github.com/ionic-team/ionic/commit/5275332e43694f3ee8738a1726c0d202b16c3052))
+* **router:** navigation guards now fire when navigating to a page with params ([#22521](https://github.com/ionic-team/ionic/issues/22521)) ([1956f98](https://github.com/ionic-team/ionic/commit/1956f9896883dc4687488e5418e50ce0f6cbe6c9)), closes [#22516](https://github.com/ionic-team/ionic/issues/22516)
+* **select:** fix a11y issues with axe and screen readers ([#22494](https://github.com/ionic-team/ionic/issues/22494)) ([04b874e](https://github.com/ionic-team/ionic/commit/04b874e32a65588ca79eda9399ab7e9d86a3cb77)), closes [#21552](https://github.com/ionic-team/ionic/issues/21552) [#21548](https://github.com/ionic-team/ionic/issues/21548)
+* **select:** improvements for announcing placeholder and value on screenreaders ([#22556](https://github.com/ionic-team/ionic/issues/22556)) ([ea52db6](https://github.com/ionic-team/ionic/commit/ea52db66f05a185fed6b2e849734a7ffa1c6c6ea))
+* **vue:** onBeforeRouteLeave and onBeforeRouteUpdate hooks now fire properly ([#22542](https://github.com/ionic-team/ionic/issues/22542)) ([8002114](https://github.com/ionic-team/ionic/commit/8002114e720361e60d7a7fe2d15ab88b49a72e1b)), closes [#22540](https://github.com/ionic-team/ionic/issues/22540)
+* **vue:** tabs now correctly fire lifecycle events ([#22479](https://github.com/ionic-team/ionic/issues/22479)) ([cdc2fb6](https://github.com/ionic-team/ionic/commit/cdc2fb652fe5aa149eaa751a77fb506ac1f64195)), closes [#22466](https://github.com/ionic-team/ionic/issues/22466)
+* **vue:** unit testing a routerLink-capable component no longer warns of missing router dependency ([#22532](https://github.com/ionic-team/ionic/issues/22532)) ([4e23aad](https://github.com/ionic-team/ionic/commit/4e23aad3d911188e4a2706545463a81332c00ce9)), closes [#22506](https://github.com/ionic-team/ionic/issues/22506)
+
+### For Ionic Vue Developers
+
+When updating to Ionic Vue v5.5.1 make sure you are on the latest version of `vue-router@next` to take advantage of the bug fixes in this release:
+
+```
+npm install vue-router@next
+```
+
+
+
+# [5.5.0 Chlorine](https://github.com/ionic-team/ionic/compare/v5.4.4...v5.5.0) (2020-11-18)
+
+
+### Bug Fixes
+
+* **backdrop:** nvda no longer incorrectly announces backdrop ([#22481](https://github.com/ionic-team/ionic/issues/22481)) ([2d878fc](https://github.com/ionic-team/ionic/commit/2d878fc4f6c7a710dbfb722e188e3e402e1672f9)), closes [#22102](https://github.com/ionic-team/ionic/issues/22102)
+* **checkbox:** use a native input to fix a11y issues with axe and screen readers ([#22402](https://github.com/ionic-team/ionic/issues/22402)) ([7214a84](https://github.com/ionic-team/ionic/commit/7214a8401b709e1353155304cf6e9f97b2b4d294)), closes [#21644](https://github.com/ionic-team/ionic/issues/21644) [#20517](https://github.com/ionic-team/ionic/issues/20517) [#17796](https://github.com/ionic-team/ionic/issues/17796)
+* **input:** title attribute is now automatically inherited ([#22493](https://github.com/ionic-team/ionic/issues/22493)) ([abad12f](https://github.com/ionic-team/ionic/commit/abad12fbdb1378066282fe8e9b7761747951b685)), closes [#22055](https://github.com/ionic-team/ionic/issues/22055)
+* **refresher:** ios native refresher now works in side menu ([#22449](https://github.com/ionic-team/ionic/issues/22449)) ([a4a6453](https://github.com/ionic-team/ionic/commit/a4a64530ff083b83187b293dfdacb0fa45ad9f51))
+* **refresher:** md native refresher now works in side menu ([#22446](https://github.com/ionic-team/ionic/issues/22446)) ([6b817f2](https://github.com/ionic-team/ionic/commit/6b817f26b08d01d8367d16308db775b6192e7628)), closes [#20832](https://github.com/ionic-team/ionic/issues/20832)
+* **toggle:** use a native input to fix a11y issues with axe and screen readers ([#22477](https://github.com/ionic-team/ionic/issues/22477)) ([813611a](https://github.com/ionic-team/ionic/commit/813611a61b664c9827760ccaa889d0e2fcae7d94)), closes [#22011](https://github.com/ionic-team/ionic/issues/22011) [#21552](https://github.com/ionic-team/ionic/issues/21552)
+* **vue:** correctly pass route props to components ([#22476](https://github.com/ionic-team/ionic/issues/22476)) ([0956f8b](https://github.com/ionic-team/ionic/commit/0956f8bc5588836996c8c74f98166c347414a312)), closes [#22472](https://github.com/ionic-team/ionic/issues/22472)
+* **vue:** tab bar now works with slot="top" ([#22461](https://github.com/ionic-team/ionic/issues/22461)) ([e17c822](https://github.com/ionic-team/ionic/commit/e17c822bfbc2a876226738b77a4c95c02e0b5953)), closes [#22456](https://github.com/ionic-team/ionic/issues/22456)
+
+
+### Features
+
+* **chip:** add disabled property ([#20658](https://github.com/ionic-team/ionic/issues/20658)) ([0a0cbd8](https://github.com/ionic-team/ionic/commit/0a0cbd8f2a505ad2b3d8afb60cb1e940ced52e0d)), closes [#19510](https://github.com/ionic-team/ionic/issues/19510)
+* **segment:** add swipeGesture property to allow for disabling of the swipe gesture ([#22087](https://github.com/ionic-team/ionic/issues/22087)) ([65bc995](https://github.com/ionic-team/ionic/commit/65bc99577c44cce653dafd9937c4d8f9c45fff61)), closes [#22048](https://github.com/ionic-team/ionic/issues/22048)
+* **vue:** composition api lifecycle methods ([#22241](https://github.com/ionic-team/ionic/issues/22241)) ([f5b0299](https://github.com/ionic-team/ionic/commit/f5b0299729c2c639e432612e62fb7eaa189ca969))
+* **vue:** vetur support ([#22403](https://github.com/ionic-team/ionic/issues/22403)) ([e76f79d](https://github.com/ionic-team/ionic/commit/e76f79d0548c97edd193808f5e0a19889cffae5b))
+* **vue:** web-types support ([#22428](https://github.com/ionic-team/ionic/issues/22428)) ([639314a](https://github.com/ionic-team/ionic/commit/639314ab218b65a9a2de6040417b0e1b363e47ef)), closes [#19522](https://github.com/ionic-team/ionic/issues/19522)
+
+
+### Performance Improvements
+
+* **ios:** move content to stacking context while preserving position: fixed behavior ([#22489](https://github.com/ionic-team/ionic/issues/22489)) ([d77a9d5](https://github.com/ionic-team/ionic/commit/d77a9d57ec02c69df43ec2a286eea674a85cae36)), closes [#22473](https://github.com/ionic-team/ionic/issues/22473)
+
+
+
+## [5.4.4](https://github.com/ionic-team/ionic/compare/v5.4.3...v5.4.4) (2020-11-12)
+
+
+### Bug Fixes
+
+* **build:** add missing es5 output ([228d349](https://github.com/ionic-team/ionic/commit/228d349c6e29b62cbfee5d5502883682cfa5032f))
+
+
+
+## [5.4.3](https://github.com/ionic-team/ionic/compare/v5.4.2...v5.4.3) (2020-11-06)
+
+
+### Bug Fixes
+
+* **all** add missing vendor prefixes to css ([0989ea5](https://github.com/ionic-team/ionic/commit/0989ea5ac897f528e8fce5434861ca080b9b4a56))
+
+
+
+## [5.4.2](https://github.com/ionic-team/ionic/compare/v5.4.1...v5.4.2) (2020-11-05)
+
+
+### Bug Fixes
+
+* **alert:** correctly position alert when keyboard is open ([#22425](https://github.com/ionic-team/ionic/issues/22425)) ([9752cd6](https://github.com/ionic-team/ionic/commit/9752cd6371bc4a720e45871161e389e4a9ad8e8f))
+* **ios:** contenteditable elements are now selectable on iOS ([#22404](https://github.com/ionic-team/ionic/issues/22404)) ([023fb18](https://github.com/ionic-team/ionic/commit/023fb1841259a61b361066ca369aeffd488efa3f)), closes [#18368](https://github.com/ionic-team/ionic/issues/18368)
+* **item:** only add click event listener to items with inputs ([#22352](https://github.com/ionic-team/ionic/issues/22352)) ([9659ad6](https://github.com/ionic-team/ionic/commit/9659ad63349d5123ca2bd2548a43e37d5ee817e7)), closes [#22011](https://github.com/ionic-team/ionic/issues/22011)
+* **range:** gesture is now properly re-created on connectedCallback ([#22407](https://github.com/ionic-team/ionic/issues/22407)) ([2fea36f](https://github.com/ionic-team/ionic/commit/2fea36fc98f772443a6560a9491f2f0e574366d1)), closes [#22335](https://github.com/ionic-team/ionic/issues/22335)
+* **refresher:** work properly in modal by waiting for content to be ready ([#22390](https://github.com/ionic-team/ionic/issues/22390)) ([91d0414](https://github.com/ionic-team/ionic/commit/91d041485cb3565fa81fea24c1811e48108f277a)), closes [#22256](https://github.com/ionic-team/ionic/issues/22256)
+* **segment-button:** color property is now reactive if previously undefined ([#22405](https://github.com/ionic-team/ionic/issues/22405)) ([04161c9](https://github.com/ionic-team/ionic/commit/04161c9512ed8e965c93698d7f5501a21485052f)), closes [#20831](https://github.com/ionic-team/ionic/issues/20831)
+* **vue:** correctly switch tabs after going back ([#22309](https://github.com/ionic-team/ionic/issues/22309)) ([daf6a92](https://github.com/ionic-team/ionic/commit/daf6a92127d36c20f3445f83bd7bd3e739bb1b27)), closes [#22307](https://github.com/ionic-team/ionic/issues/22307)
+* **vue:** ensure view is updated correctly when replacing a route outside of a nav guard ([#22429](https://github.com/ionic-team/ionic/issues/22429)) ([5a4d0c0](https://github.com/ionic-team/ionic/commit/5a4d0c0217ce93f98364bdd4d8d163679f82a6b3)), closes [#22412](https://github.com/ionic-team/ionic/issues/22412)
+
+
+### Performance Improvements
+
+* **ios:** move content to stacking context to improve scrolling performance on iOS devices ([#22180](https://github.com/ionic-team/ionic/issues/22180)) ([9f44966](https://github.com/ionic-team/ionic/commit/9f44966d8572a27d8296b38ae4f3e689c76c2e44))
+
+
+
+## [5.4.1](https://github.com/ionic-team/ionic/compare/v5.4.0...v5.4.1) (2020-10-22)
+
+
+### Bug Fixes
+
+* **select:** properly align label with select in item in MD mode ([#22330](https://github.com/ionic-team/ionic/issues/22330)) ([1a2e532](https://github.com/ionic-team/ionic/commit/1a2e5322fb7ac0dd6bd3d0705b8e32f9d3649bfc)), closes [#19887](https://github.com/ionic-team/ionic/issues/19887)
+* **vue:** going back with query params now goes to correct view ([#22350](https://github.com/ionic-team/ionic/issues/22350)) ([561a4ac](https://github.com/ionic-team/ionic/commit/561a4ac535432873860c3d0a4ac60481929d9089)), closes [#22324](https://github.com/ionic-team/ionic/issues/22324)
+* **vue:** improve compatibility with route guards ([#22371](https://github.com/ionic-team/ionic/issues/22371)) ([31f9bc8](https://github.com/ionic-team/ionic/commit/31f9bc81d6d0fa81f9abe20172bb606651a2d75d)), closes [#22344](https://github.com/ionic-team/ionic/issues/22344)
+* **vue:** improve handling of parameterized urls ([#22360](https://github.com/ionic-team/ionic/issues/22360)) ([6fad0fe](https://github.com/ionic-team/ionic/commit/6fad0fe42814cde1126e6df264b99c069849c87a)), closes [#22359](https://github.com/ionic-team/ionic/issues/22359)
+* **vue:** lifecycle events are now fired in component context ([#22348](https://github.com/ionic-team/ionic/issues/22348)) ([bcef804](https://github.com/ionic-team/ionic/commit/bcef804deac4dea27def475460aff4cdf0d7d2fc)), closes [#22338](https://github.com/ionic-team/ionic/issues/22338)
+
+
+
+# [5.4.0 Sulfur](https://github.com/ionic-team/ionic/compare/v5.3.0...v5.4.0) (2020-10-15)
+
+> This is the first stable release of Ionic Vue.
+
+Enjoy the Vue! :tada:
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+# [5.4.0-rc.3](https://github.com/ionic-team/ionic/compare/v5.4.0-rc.2...v5.4.0-rc.3) (2020-10-14)
+
+> This version is dedicated to our upcoming Ionic Vue release.
+
+### Bug Fixes
+
+* **vue:** ion-page component is now properly shown with HMR ([#22319](https://github.com/ionic-team/ionic/issues/22319)) ([c5ab562](https://github.com/ionic-team/ionic/commit/c5ab562eaa098717407e6b3e8139abd2112246a2))
+
+### Upgrade Steps
+
+```
+npm install @ionic/vue@5.4.0-rc.3 @ionic/vue-router@5.4.0-rc.3 --save-exact
+```
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+# [5.4.0-rc.2](https://github.com/ionic-team/ionic/compare/v5.4.0-rc.1...v5.4.0-rc.2) (2020-10-13)
+
+> This version is dedicated to our upcoming Ionic Vue release.
+
+### Bug Fixes
+
+* **vue:** do not hide page content when using ion-page in non-routing contexts  ([#22302](https://github.com/ionic-team/ionic/issues/22302)) ([fff82d0](https://github.com/ionic-team/ionic/commit/fff82d0bdcd850e7c70947b39d554e88c4cdfd1e)), closes [#22300](https://github.com/ionic-team/ionic/issues/22300)
+* **vue:** going back from tabs page to a non-tabs page now selects correct page ([#22275](https://github.com/ionic-team/ionic/issues/22275)) ([b06ae16](https://github.com/ionic-team/ionic/commit/b06ae165912cbab811fe4a3c35b4e2b3fe0b425b)), closes [#22258](https://github.com/ionic-team/ionic/issues/22258)
+* **vue:** improve swipe to go back reliability ([#22288](https://github.com/ionic-team/ionic/issues/22288)) ([c74fd41](https://github.com/ionic-team/ionic/commit/c74fd4147b57e6b11c22dffdf6355568a763f30a)), closes [#22237](https://github.com/ionic-team/ionic/issues/22237)
+* **vue:** modal, popover, and nav are now created within application context ([#22282](https://github.com/ionic-team/ionic/issues/22282)) ([6026c65](https://github.com/ionic-team/ionic/commit/6026c65b1ae80af0f8604e7a3bcb220153267955)), closes [#22079](https://github.com/ionic-team/ionic/issues/22079)
+* **vue:** pages now render in correct outlet when using multiple nested outlets ([#22301](https://github.com/ionic-team/ionic/issues/22301)) ([52f655c](https://github.com/ionic-team/ionic/commit/52f655c9d40988cac36f88c88f24195b3f64c431)), closes [#22286](https://github.com/ionic-team/ionic/issues/22286)
+
+### Upgrade Steps
+
+```
+npm install @ionic/vue@5.4.0-rc.2 @ionic/vue-router@5.4.0-rc.2 --save-exact
+```
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+# [5.4.0-rc.1](https://github.com/ionic-team/ionic/compare/v5.3.5...v5.4.0-rc.1) (2020-10-08)
+
+> This version is dedicated to our upcoming Ionic Vue release.
+
+### Bug Fixes
+
+* **vue:** correctly handle query params ([#22253](https://github.com/ionic-team/ionic/issues/22253)) ([6849dd3](https://github.com/ionic-team/ionic/commit/6849dd3483fb90aac1ff19834390a652c59a74de)), closes [#22229](https://github.com/ionic-team/ionic/issues/22229)
+* **vue:** correctly show ion-back-button when going back ([#22260](https://github.com/ionic-team/ionic/issues/22260)) ([39d2530](https://github.com/ionic-team/ionic/commit/39d2530427b1cd86975fc95ab2c8da9f4b0b27b3)), closes [#22217](https://github.com/ionic-team/ionic/issues/22217)
+* **vue:** hide layout shift on ion-page components ([#22254](https://github.com/ionic-team/ionic/issues/22254)) ([2bad1bb](https://github.com/ionic-team/ionic/commit/2bad1bb82e0fa3fe9e3db54403565d210f636120)), closes [#22052](https://github.com/ionic-team/ionic/issues/22052)
+* **vue:** ion-tab-bar no longer throws undefined error when re-creating tabs ([#22261](https://github.com/ionic-team/ionic/issues/22261)) ([d746561](https://github.com/ionic-team/ionic/commit/d746561ea29e61db2cfb55d2765b5548fd8b5a78)), closes [#22255](https://github.com/ionic-team/ionic/issues/22255)
+
+### Upgrade Steps
+
+```
+npm install @ionic/vue@5.4.0-rc.1 @ionic/vue-router@5.4.0-rc.1 --save-exact
+```
+
+### New to Ionic Vue?
+
+Check out our [Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) to get up and running. Then be sure to check out our [Building Your First App Guide](https://ionicframework.com/docs/vue/your-first-app) to learn how build a cross platform Ionic Vue application from start to finish!
+
+
+
+## [5.3.5](https://github.com/ionic-team/ionic/compare/v5.3.4...v5.3.5) (2020-10-07)
+
+
+### Bug Fixes
+
+* **button:** allow any element type to use the "icon-only" slot ([#22168](https://github.com/ionic-team/ionic/issues/22168)) ([c454c84](https://github.com/ionic-team/ionic/commit/c454c84ef46322143467600334a0263d4e7df6cb))
+* **datetime:** do not set ampm when the column doesn't exist ([#22220](https://github.com/ionic-team/ionic/issues/22220)) ([18fb885](https://github.com/ionic-team/ionic/commit/18fb8855e0c45fe65843b33811812c51c74de90f)), closes [#22149](https://github.com/ionic-team/ionic/issues/22149)
+* **datetime:** remove the automatic switching from am to pm ([#22207](https://github.com/ionic-team/ionic/issues/22207)) ([f81d18c](https://github.com/ionic-team/ionic/commit/f81d18c6f9f1bce056afda1cac4cf6d6ace0a7ca)), closes [#18924](https://github.com/ionic-team/ionic/issues/18924) [#22171](https://github.com/ionic-team/ionic/issues/22171) [#22199](https://github.com/ionic-team/ionic/issues/22199)
+* **item:** properly align datetime and select with fixed or no labels ([#22221](https://github.com/ionic-team/ionic/issues/22221)) ([f42c688](https://github.com/ionic-team/ionic/commit/f42c688f4630e3dc5d10b947e7f2bee9d5967d8c)), closes [#18773](https://github.com/ionic-team/ionic/issues/18773) [#18761](https://github.com/ionic-team/ionic/issues/18761) [#18779](https://github.com/ionic-team/ionic/issues/18779)
+* **label:** keep color when focused on a floating or stacked label ([#18576](https://github.com/ionic-team/ionic/issues/18576)) ([992580a](https://github.com/ionic-team/ionic/commit/992580a3830321bdf9591681ebe38e823205389d)), closes [#18531](https://github.com/ionic-team/ionic/issues/18531)
+* **select:** do not close popover or set value when switching with arrow keys ([#22210](https://github.com/ionic-team/ionic/issues/22210)) ([1878c8e](https://github.com/ionic-team/ionic/commit/1878c8e7e01c02f06bdc5f1562af0d45531539cf)), closes [#22179](https://github.com/ionic-team/ionic/issues/22179)
+
+
+
+## [5.3.4](https://github.com/ionic-team/ionic/compare/v5.3.3...v5.3.4) (2020-09-25)
+
+
+### Bug Fixes
+
+* **alert:** follow accessibility guidelines outlined by wai-aria ([#22159](https://github.com/ionic-team/ionic/issues/22159)) ([e9b2cc8](https://github.com/ionic-team/ionic/commit/e9b2cc8453f5e1c45d44397df738f60ea5b32efd)), closes [#21744](https://github.com/ionic-team/ionic/issues/21744)
+* **overlays:** return focus to presenting element after dismissal ([#22167](https://github.com/ionic-team/ionic/issues/22167)) ([cc45ad8](https://github.com/ionic-team/ionic/commit/cc45ad815c002c5d890f2e105c546b4c3b3a58c0)), closes [#21768](https://github.com/ionic-team/ionic/issues/21768)
+* **picker-column:** add cancelable check to avoid intervention error in chrome ([#22140](https://github.com/ionic-team/ionic/issues/22140)) ([a24a041](https://github.com/ionic-team/ionic/commit/a24a041064fd9ce6ca161d3522083d50e585e9dd)), closes [#22137](https://github.com/ionic-team/ionic/issues/22137)
+* **radio:** follow accessibility guidelines outlined by wai-aria ([#22113](https://github.com/ionic-team/ionic/issues/22113)) ([ea0e049](https://github.com/ionic-team/ionic/commit/ea0e0499e24865faad3d11f50f7037645f6cdcc8)), closes [#21743](https://github.com/ionic-team/ionic/issues/21743)
+* **reorder:** allow click event propagation when reorder group is disabled ([#21947](https://github.com/ionic-team/ionic/issues/21947)) ([baafe08](https://github.com/ionic-team/ionic/commit/baafe08927b7b858170496605781e6fa682e0147)), closes [#21017](https://github.com/ionic-team/ionic/issues/21017)
+* **segment:** do not allow text selection on desktop ([#22158](https://github.com/ionic-team/ionic/issues/22158)) ([1526bdf](https://github.com/ionic-team/ionic/commit/1526bdfb492c1fa8d71f8a1af8cd97abd9e62642))
+
+
+### Performance Improvements
+
+* **segment:** improve scrolling performance on ios when using segment ([#22110](https://github.com/ionic-team/ionic/issues/22110)) ([68afc49](https://github.com/ionic-team/ionic/commit/68afc49e9ed27acffb0b765b7be6b03e8574850d)), closes [#22095](https://github.com/ionic-team/ionic/issues/22095)
+
+
+
+## [5.3.3](https://github.com/ionic-team/ionic/compare/v5.3.2...v5.3.3) (2020-09-17)
+
+
+### Bug Fixes
+
+* **datetime:** do not reset to am when changing hour and pm is set ([#21997](https://github.com/ionic-team/ionic/issues/21997)) ([8b85fe0](https://github.com/ionic-team/ionic/commit/8b85fe0d9eea39adfdcf790bf00d8ef91d5edbe7)), closes [#19175](https://github.com/ionic-team/ionic/issues/19175) [#19260](https://github.com/ionic-team/ionic/issues/19260) [#20026](https://github.com/ionic-team/ionic/issues/20026) [#16630](https://github.com/ionic-team/ionic/issues/16630)
+* **input:** only focus the first input / textarea when clicking on the parent item ([#22049](https://github.com/ionic-team/ionic/issues/22049)) ([99f2532](https://github.com/ionic-team/ionic/commit/99f2532ee174da79e2b6a462cfa124673edc1170)), closes [#22037](https://github.com/ionic-team/ionic/issues/22037) [#22032](https://github.com/ionic-team/ionic/issues/22032)
+* **react:** Keep a hold of previous routes when doing a redirect, closes [#22053](https://github.com/ionic-team/ionic/issues/22053) ([74af3cb](https://github.com/ionic-team/ionic/commit/74af3cb50b089a6bd60d515158e03b18b86455b8))
+* **react:** redirect routes should unmount leaving component, fixes [#22022](https://github.com/ionic-team/ionic/issues/22022) ([#22029](https://github.com/ionic-team/ionic/issues/22029)) ([b11e06c](https://github.com/ionic-team/ionic/commit/b11e06cec1d3c28bab9f29185fe2c3a2975b092f))
+* **textarea:** do not generate duplicate IDs between ion-input and ion-textarea ([#22074](https://github.com/ionic-team/ionic/issues/22074)) ([c72c7ff](https://github.com/ionic-team/ionic/commit/c72c7ffa983af8885dd93f9adfcb3f2af232d2d9)), closes [#21542](https://github.com/ionic-team/ionic/issues/21542)
+
+
+
+## [5.3.2](https://github.com/ionic-team/ionic/compare/v5.3.1...v5.3.2) (2020-08-27)
+
+
+### Bug Fixes
+
+* **input:** improve reliability of scroll assist when accessory bar is enabled ([#21936](https://github.com/ionic-team/ionic/issues/21936)) ([22477fb](https://github.com/ionic-team/ionic/commit/22477fb9bf7c0637aa5c8d0aab34c8ccc521b0b9)), closes [#21912](https://github.com/ionic-team/ionic/issues/21912)
+* **input:** properly focus the input when clicking the item padding in WebKit ([#21930](https://github.com/ionic-team/ionic/issues/21930)) ([e4964ff](https://github.com/ionic-team/ionic/commit/e4964ff77b317c92b201cf7c265787b55bdde4d4)), closes [#21509](https://github.com/ionic-team/ionic/issues/21509)
+* **input:** remain focused in the input after pressing the clear button ([#21985](https://github.com/ionic-team/ionic/issues/21985)) ([6878fb9](https://github.com/ionic-team/ionic/commit/6878fb9eb99c17908f5630019efaa762b5b006e0)), closes [#21549](https://github.com/ionic-team/ionic/issues/21549)
+* **label:** use translateY so input caret shows up due to webkit issue ([#21949](https://github.com/ionic-team/ionic/issues/21949)) ([00eac33](https://github.com/ionic-team/ionic/commit/00eac33053f49dbebf22ef95fddcb66570ed117a)), closes [#21943](https://github.com/ionic-team/ionic/issues/21943)
+* **overlays:** prevent focus from being stolen when presenting another overlay from within a modal ([#21856](https://github.com/ionic-team/ionic/issues/21856)) ([5c177d7](https://github.com/ionic-team/ionic/commit/5c177d756f7755e766d5b619d49825c4799aee47)), closes [#21840](https://github.com/ionic-team/ionic/issues/21840)
+* **range:** properly display stacked labels in an item with a range ([#21944](https://github.com/ionic-team/ionic/issues/21944)) ([9f4b01e](https://github.com/ionic-team/ionic/commit/9f4b01e17fd2f5e742d32bc9e080b6b394c43d37)), closes [#21625](https://github.com/ionic-team/ionic/issues/21625)
+* **react:** export correct animation types ([#21950](https://github.com/ionic-team/ionic/issues/21950)) ([36e4bf7](https://github.com/ionic-team/ionic/commit/36e4bf7dd76e396f910d28445566b5503cc84c8c))
+* **react:** removed exporting of ionRenderToString to decrease bundle size, closes [#21917](https://github.com/ionic-team/ionic/issues/21917) ([#21928](https://github.com/ionic-team/ionic/issues/21928)) ([434befe](https://github.com/ionic-team/ionic/commit/434befea5f31aa599ee5b1b7edf29238912c23d9))
+* **react:** setting active tab properly on mount, closes [#21830](https://github.com/ionic-team/ionic/issues/21830) ([#21833](https://github.com/ionic-team/ionic/issues/21833)) ([f58424f](https://github.com/ionic-team/ionic/commit/f58424f62596b9eb82bebb8e07c211e1725c025a))
+* **react:** fix tab currentHref when changing tabs, closes [#21834](https://github.com/ionic-team/ionic/issues/21834) ([#21835](https://github.com/ionic-team/ionic/issues/21835)) ([74468ab](https://github.com/ionic-team/ionic/commit/74468ab7972b174ba85bf239306c27080f253a4a))
+
+
+
+## [5.3.1](https://github.com/ionic-team/ionic/compare/v5.3.0...v5.3.1) (2020-07-27)
+
+
+### Bug Fixes
+
+* **react:** properly extend HTMLElement for tabs ([bfddb17](https://github.com/ionic-team/ionic/commit/bfddb170659224d0f826762744dfe44a85813d36)), closes [#21803](https://github.com/ionic-team/ionic/issues/21803)
+
+
+
+# [5.3.0 Phosphorus](https://github.com/ionic-team/ionic/compare/v5.2.3...v5.3.0) (2020-07-23)
+
+
+### Bug Fixes
+
+* **angular:** per-page animations now work with swipe to go back ([#21706](https://github.com/ionic-team/ionic/issues/21706)) ([2664587](https://github.com/ionic-team/ionic/commit/2664587749e45100a04f70796733de162b26cdf7)), closes [#21692](https://github.com/ionic-team/ionic/issues/21692)
+* **datetime:** remove unneeded combobox role ([#21708](https://github.com/ionic-team/ionic/issues/21708)) ([f00ad8a](https://github.com/ionic-team/ionic/commit/f00ad8a8357ccd7fe85631dad0c841f2d4c72487))
+* **input:** clear button can now be tabbed to ([#21633](https://github.com/ionic-team/ionic/issues/21633)) ([1dcd9de](https://github.com/ionic-team/ionic/commit/1dcd9de50ae16bfa102e98120a022de5b0287baa))
+* **ios:** improve scroll assist reliability on password inputs ([#21703](https://github.com/ionic-team/ionic/issues/21703)) ([3cbf9e7](https://github.com/ionic-team/ionic/commit/3cbf9e7c4c225d6b02237d8ea8f16fb924ba360e)), closes [#21688](https://github.com/ionic-team/ionic/issues/21688)
+* **keyboard:** keyboard events now consistently fire on android ([#21741](https://github.com/ionic-team/ionic/issues/21741)) ([020f3cc](https://github.com/ionic-team/ionic/commit/020f3cc56cb6dac23dd8766a3802422500b510e2)), closes [#21734](https://github.com/ionic-team/ionic/issues/21734)
+* **nav:** insertPages method correctly inserts multiple pages with props ([#21725](https://github.com/ionic-team/ionic/issues/21725)) ([eb592b8](https://github.com/ionic-team/ionic/commit/eb592b8917b8a7412d8c346f41b47d3b79002b95)), closes [#21724](https://github.com/ionic-team/ionic/issues/21724)
+* **overlays:** trap focus inside overlay components except toast ([#21716](https://github.com/ionic-team/ionic/issues/21716)) ([fff4aec](https://github.com/ionic-team/ionic/commit/fff4aec6cfbd48566594a05f4af57dd0578977a8)), closes [#21647](https://github.com/ionic-team/ionic/issues/21647)
+* **segment-button:** allow min-width to be overridden ([#21722](https://github.com/ionic-team/ionic/issues/21722)) ([88f1828](https://github.com/ionic-team/ionic/commit/88f1828bd8f6b9a1c1f3dcb220d93067bed7f404)), closes [#21105](https://github.com/ionic-team/ionic/issues/21105)
+* **title:** allow overriding of large title transform-origin ([#21770](https://github.com/ionic-team/ionic/issues/21770)) ([dbe6853](https://github.com/ionic-team/ionic/commit/dbe6853884bd76c3d8e229cd58e1571d9b3a7249)), closes [#21761](https://github.com/ionic-team/ionic/issues/21761)
+* **virtual-scroll:** properly calculate top offset when nested ([#21581](https://github.com/ionic-team/ionic/issues/21581)) ([d297ecb](https://github.com/ionic-team/ionic/commit/d297ecb87ad3e1c8f0988f0571a475081ce368f8))
+
+
+### Features
+
+* **card:** expose global card css variables ([#21756](https://github.com/ionic-team/ionic/issues/21756)) ([096eef4](https://github.com/ionic-team/ionic/commit/096eef4a79c2d05c37eb224466c6d7d512d2be20)), closes [#21694](https://github.com/ionic-team/ionic/issues/21694)
+* **input:** accept datetime-local, month, and week type values ([#21758](https://github.com/ionic-team/ionic/issues/21758)) ([fa93dff](https://github.com/ionic-team/ionic/commit/fa93dffdb4f350e8db8acc7f06b06761974eea8e)), closes [#21757](https://github.com/ionic-team/ionic/issues/21757)
+* **input, textarea:** expose native events for ionBlur and ionFocus ([#21777](https://github.com/ionic-team/ionic/issues/21777)) ([a625c83](https://github.com/ionic-team/ionic/commit/a625c837a60abc07ad71c696196a89f1a25a4c27)), closes [#17363](https://github.com/ionic-team/ionic/issues/17363)
+* **react:** add custom history to IonReactRouter ([#21775](https://github.com/ionic-team/ionic/issues/21775)) ([d4a5fbd](https://github.com/ionic-team/ionic/commit/d4a5fbd955e8ecccba8b77491943d81fdf5a5ef4)), closes [#20297](https://github.com/ionic-team/ionic/issues/20297)
+* **react:** add new react router ([#21693](https://github.com/ionic-team/ionic/issues/21693)) ([c171ccb](https://github.com/ionic-team/ionic/commit/c171ccbd37c1ee4b4934758a3a759170ff357cb2))
+* **router:** add navigation hooks ([#21709](https://github.com/ionic-team/ionic/issues/21709)) ([77464ef](https://github.com/ionic-team/ionic/commit/77464ef21aaaa5afa7a02e5417f3ec295b240601))
+* **segment-button, toast:** expose additional shadow parts ([#21532](https://github.com/ionic-team/ionic/issues/21532)) ([a5e4669](https://github.com/ionic-team/ionic/commit/a5e4669c4bcbcb2cdd605ed17c35e42438bd5596))
+* **select:** add optional generic typings ([#21514](https://github.com/ionic-team/ionic/issues/21514)) ([7c2d0c9](https://github.com/ionic-team/ionic/commit/7c2d0c981ab91930478c4b76220ce4ec4ed4e471))
+
+
+
 ## [5.2.3](https://github.com/ionic-team/ionic/compare/v5.2.2...v5.2.3) (2020-07-01)
 
 
@@ -271,9 +591,9 @@
 * **modal:** presenting multiple card-style modals now adds border radius properly ([#20476](https://github.com/ionic-team/ionic/issues/20476)) ([abf594a](https://github.com/ionic-team/ionic/commit/abf594aa611562a76e3baecfa38456d41a1410f3)), closes [#20475](https://github.com/ionic-team/ionic/issues/20475)
 * **modal:** prevent card style modal styles from being overridden ([#20470](https://github.com/ionic-team/ionic/issues/20470)) ([86ab77a](https://github.com/ionic-team/ionic/commit/86ab77a6e2cb124510c244110fc78a4bc0654cd1)), closes [#20469](https://github.com/ionic-team/ionic/issues/20469)
 * **react:** do a better job matching up route to sync ([#20446](https://github.com/ionic-team/ionic/issues/20446)) ([c0aadd6](https://github.com/ionic-team/ionic/commit/c0aadd60077e5ba379959d93006e3a9c1418263c)), closes [#20363](https://github.com/ionic-team/ionic/issues/20363)
-* **react:** do not remove pages when navigating between tabs ([#20431](https://github.com/ionic-team/ionic/issues/20431)) ([b6fbe98](https://github.com/ionic-team/ionic/commit/b6fbe98812fbab5ef9e0723802605c0711581dd2)), closes [#20398](https://github.com/ionic-team/ionic/issues/20398) 
+* **react:** do not remove pages when navigating between tabs ([#20431](https://github.com/ionic-team/ionic/issues/20431)) ([b6fbe98](https://github.com/ionic-team/ionic/commit/b6fbe98812fbab5ef9e0723802605c0711581dd2)), closes [#20398](https://github.com/ionic-team/ionic/issues/20398)
 * **react:** icons with MD set should work in browser ([#20463](https://github.com/ionic-team/ionic/issues/20463)) ([82670fe](https://github.com/ionic-team/ionic/commit/82670fe4d0592451cbc243b3008beb3f8f483c30))
-* **react:** update paths of tab buttons when href changes in ion buttons ([#20480](https://github.com/ionic-team/ionic/issues/20480)) ([45d03ba](https://github.com/ionic-team/ionic/commit/45d03baf981d0e10eb1fe689908532adef2ba31d)), closes [#20321](https://github.com/ionic-team/ionic/issues/20321) 
+* **react:** update paths of tab buttons when href changes in ion buttons ([#20480](https://github.com/ionic-team/ionic/issues/20480)) ([45d03ba](https://github.com/ionic-team/ionic/commit/45d03baf981d0e10eb1fe689908532adef2ba31d)), closes [#20321](https://github.com/ionic-team/ionic/issues/20321)
 * **searchbar:** properly align placeholder ([#20460](https://github.com/ionic-team/ionic/issues/20460)) ([4d6e15a](https://github.com/ionic-team/ionic/commit/4d6e15ab18fc894c3826b89362163256adc227f4)), closes [#20456](https://github.com/ionic-team/ionic/issues/20456)
 * **segment:** border radius applies to indicator on ios ([#20541](https://github.com/ionic-team/ionic/issues/20541)) ([9b5854d](https://github.com/ionic-team/ionic/commit/9b5854d79712356f8a3772442c0cc412db09d5e0)), closes [#20539](https://github.com/ionic-team/ionic/issues/20539)
 * **segment:** do not show ripple effect if disabled via config ([#20542](https://github.com/ionic-team/ionic/issues/20542)) ([7a461c5](https://github.com/ionic-team/ionic/commit/7a461c59c5d9a23de0bcdd53397f452d17251fd6)), closes [#20533](https://github.com/ionic-team/ionic/issues/20533)

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
@@ -12,7 +12,7 @@ Ionic is based on [Web Components](https://www.webcomponents.org/introduction) a
 | ------- | ------- | ------- |:-----:|
 | **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [![version](https://img.shields.io/npm/v/@ionic/core/latest.svg)](https://www.npmjs.com/package/@ionic/core) | [`README.md`](core/README.md)
 | **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | [`README.md`](angular/README.md)
-| **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](vue/README.md)
+| **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](packages/vue/README.md)
 | **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](packages/react/README.md)
 
 Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v3`](https://github.com/ionic-team/ionic-v3) repo. See [Earlier Versions](#earlier-versions).
@@ -42,7 +42,7 @@ It is the perfect starting point for learning and building your own app.
 
 ### Future Goals
 
-As Ionic components migrate to the web component standard, a goal of ours is to have Ionic components easily work within all of the popular frameworks.
+As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.
 
 ### Earlier Versions
 

angular/README.md

@@ -7,7 +7,6 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 * [Ionic Core Components](https://www.npmjs.com/package/@ionic/core)
 * [Ionic Documentation](https://ionicframework.com/docs/)
-* [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.2.3",
+  "version": "5.5.2",
   "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.3",
+    "@ionic/core": "5.5.2",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
@@ -67,12 +67,12 @@
     "ng-packagr": "^9.1.5",
     "rollup": "~1.17.0",
     "rollup-plugin-node-resolve": "~5.2.0",
-    "rxjs": "^6.5.2",
-    "tsickle": "^0.34.0",
+    "rxjs": "^6.6.2",
+    "tsickle": "^0.39.1",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",
     "typescript": "3.4.5",
-    "zone.js": "^0.8.28"
+    "zone.js": "^0.11.1"
   },
   "schematics": "./schematics/collection.json",
   "ngPackage": {

angular/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
         );
       });
     }

angular/src/directives/proxies-list.txt

@@ -1,5 +1,5 @@
 
-import * as d from './proxies';
+import type * as d from './proxies';
 
 export const DIRECTIVES = [
   d.IonApp,

angular/src/index.ts

@@ -46,4 +46,4 @@ export { IonicModule } from './ionic-module';
 export { IonicSafeString, getPlatforms, isPlatform, createAnimation } from '@ionic/core';
 
 // CORE TYPES
-export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core';
+export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation, NavComponentWithProps } from '@ionic/core';

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

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

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

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

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

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

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

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

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

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

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

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

angular/test/test-app/package.json

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

core/README.md

@@ -47,7 +47,6 @@ The `@ionic/core` package can by used in simple HTML, or by vanilla JavaScript w
 ## Related
 
 * [Ionic Documentation](https://ionicframework.com/docs/)
-* [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/)
 * [Ionic Forum](https://forum.ionicframework.com/)
 * [Ionicons](http://ionicons.com/)
 * [Stencil](https://stenciljs.com/)

core/api.txt

@@ -248,6 +248,7 @@ ion-checkbox,part,mark
 
 ion-chip,shadow
 ion-chip,prop,color,string | undefined,undefined,false,false
+ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,css-prop,--background
@@ -475,13 +476,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 +746,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 +934,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
@@ -1012,6 +1015,7 @@ ion-segment,prop,color,string | undefined,undefined,false,false
 ion-segment,prop,disabled,boolean,false,false,false
 ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
+ion-segment,prop,swipeGesture,boolean,true,false,false
 ion-segment,prop,value,null | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,css-prop,--background
@@ -1051,6 +1055,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 +1074,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 +1231,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 +1295,10 @@ ion-toast,css-prop,--min-width
 ion-toast,css-prop,--start
 ion-toast,css-prop,--white-space
 ion-toast,css-prop,--width
+ion-toast,part,button
+ion-toast,part,container
+ion-toast,part,header
+ion-toast,part,message
 
 ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.2.3",
+  "version": "5.5.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -15,11 +15,11 @@
     "progressive web app",
     "pwa"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "jsnext:main": "dist/esm/index.mjs",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
   "collection:main": "dist/collection/index.js",
   "collection": "dist/collection/collection-manifest.json",
   "types": "dist/types/interface.d.ts",
@@ -34,34 +34,36 @@
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/core": "1.14.0",
+    "@stencil/core": "2.1.2",
     "@stencil/sass": "1.3.2",
-    "@types/jest": "26.0.3",
-    "@types/node": "14.0.14",
-    "@types/puppeteer": "3.0.0",
-    "@types/swiper": "5.3.1",
-    "aws-sdk": "^2.705.0",
+    "@stencil/vue-output-target": "0.2.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",
+    "domino": "^2.1.6",
     "fs-extra": "^9.0.1",
-    "jest": "26.1.0",
-    "jest-cli": "26.1.0",
-    "np": "^5.0.3",
+    "jest": "^26.4.1",
+    "jest-cli": "^26.4.1",
+    "np": "^6.4.0",
     "pixelmatch": "4.0.2",
-    "puppeteer": "1.20.0",
-    "rollup": "^2.18.1",
-    "sass": "^1.26.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",
+    "typescript": "^4.0.5"
   },
   "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 --docs-json dist/docs.json && 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",
@@ -73,7 +75,7 @@
     "css.sass": "sass src/css:./css",
     "lint": "npm run lint.ts && npm run lint.sass",
     "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix",
-    "lint.sass": "stylelint 'src/**/*.scss'",
+    "lint.sass": "stylelint \"src/**/*.scss\"",
     "lint.sass.fix": "npm run lint.sass -- --fix",
     "lint.ts": "tslint --project .",
     "lint.ts.fix": "tslint --project . --fix",
@@ -87,7 +89,7 @@
     "test.screenshot": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/dev.js",
     "test.screenshot.ci": "stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci",
     "test.watch": "jest --watch --no-cache",
-    "test.treeshake": "node scripts/treeshaking.js dist/index.mjs",
+    "test.treeshake": "node scripts/treeshaking.js dist/index.js",
     "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake"
   },
   "author": "Ionic Team",

core/scripts/treeshaking.js

@@ -1,89 +1,94 @@
-
 const path = require('path');
 const { rollup } = require('rollup');
 const virtual = require('@rollup/plugin-virtual');
 const fs = require('fs');
 
-function main() {
-  const input = process.argv[2] || get_input();
-  check(input).then(result => {
-    const relative = path.relative(process.cwd(), input);
+async function main() {
+  const input = process.argv[2] || getInput();
+  const result = await check(input);
+  const relative = path.relative(process.cwd(), input);
 
-    if (result.shaken) {
-      console.error(`Success! ${relative} is fully tree-shakeable`);
-    } else {
-      error(`Failed to tree-shake ${relative}`);
-    }
-  });
+  if (result.shaken) {
+    console.error(`Success! ${relative} is fully tree-shakeable`);
+  } else {
+    error(`Failed to tree-shake ${relative}`);
+  }
 }
 
-
 function error(msg) {
-	console.error(msg);
-	process.exit(1);
+  console.error(msg);
+  process.exit(1);
 }
 
-function get_input() {
-	if (!fs.existsSync('package.json')) {
-		error(`Could not find package.json`);
-	}
+function getInput() {
+  if (!fs.existsSync('package.json')) {
+    error(`Could not find package.json`);
+  }
 
-	const pkg = JSON.parse(fs.readFileSync('package.json'), 'utf-8');
+  const pkg = JSON.parse(fs.readFileSync('package.json'), 'utf-8');
 
-	const unresolved = pkg.module || pkg.main || 'index';
-	const resolved = resolve(unresolved);
+  const unresolved = pkg.module || pkg.main || 'index';
+  const resolved = resolve(unresolved);
 
-	if (!resolved) {
-		error(`Could not resolve entry point`);
-	}
+  if (!resolved) {
+    error(`Could not resolve entry point`);
+  }
 
-	return resolved;
+  return resolved;
 }
 
 function resolve(file) {
-	if (is_directory(file)) {
-		return if_exists(`${file}/index.mjs`) || if_exists(`${file}/index.js`);
-	}
+  if (isDirectory(file)) {
+    return ifExists(`${file}/index.js`) || ifExists(`${file}/index.cjs.js`);
+  }
 
-	return if_exists(file) || if_exists(`${file}.mjs`) || if_exists(`${file}.js`);
+  return ifExists(file) || ifExists(`${file}.js`) || ifExists(`${file}.cjs.js`);
 }
 
-function is_directory(file) {
-	try {
-		const stats = fs.statSync(file);
-		return stats.isDirectory();
-	} catch (err) {
-		return false;
-	}
+function isDirectory(file) {
+  try {
+    const stats = fs.statSync(file);
+    return stats.isDirectory();
+  } catch (err) {
+    return false;
+  }
 }
 
-function if_exists(file) {
-	return fs.existsSync(file) ? file : null;
+function ifExists(file) {
+  return fs.existsSync(file) ? file : null;
 }
 
-const check = input => {
-	const resolved = path.resolve(input);
+async function check(input) {
+  const resolved = path.resolve(input);
 
-	return rollup({
-		input: '__agadoo__',
-		plugins: [
-			virtual({
-				__agadoo__: `import ${JSON.stringify(resolved)}`,
-				'tslib': '',
-			})
-		],
-		onwarn: (warning, handle) => {
-			if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
-		}
-	}).then(bundle => bundle.generate({
-		format: 'es'
-	})).then(o => {
-		const output = o.output;
-		console.log(output);
-		return {
-			shaken: output.length === 1 && output[0].code.trim() === ''
-		};
-	});
-};
+  const bundle = await rollup({
+    input: '__agadoo__',
+    plugins: [
+      virtual({
+        __agadoo__: `import ${JSON.stringify(resolved)}`,
+        tslib: `
+          const noop = () => {};  
+          export const __awaiter = noop;
+          export const __extends = noop;
+          export const __generator = noop;
+          export const __spreadArrays = noop;
+        `,
+      }),
+    ],
+    onwarn: (warning, handle) => {
+      if (warning.code !== 'EMPTY_BUNDLE') handle(warning);
+    },
+  });
+
+  const o = await bundle.generate({
+    format: 'es',
+  });
+
+  const output = o.output;
+  console.log(output);
+  return {
+    shaken: output.length === 1 && output[0].code.trim() === '',
+  };
+}
 
 main();

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 {
@@ -393,7 +394,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
         "value": string;
     }
@@ -402,6 +403,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the chip.
+         */
+        "disabled": boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -857,7 +862,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -868,6 +873,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 +930,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 +1425,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 +1475,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.
@@ -1694,6 +1707,8 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        "setButtonTabindex": (value: number) => Promise<void>;
+        "setFocus": (ev: any) => Promise<void>;
         /**
           * the value of the radio.
          */
@@ -1719,7 +1734,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
+          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -1849,6 +1864,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 +1900,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>;
         /**
@@ -1971,7 +1995,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -2040,6 +2064,10 @@ export namespace Components {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable": boolean;
+        /**
+          * If `true`, users will be able to swipe between segment buttons to activate them.
+         */
+        "swipeGesture": boolean;
         /**
           * the value of the segment.
          */
@@ -2410,7 +2438,7 @@ export namespace Components {
          */
         "cols"?: number;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce": number;
         /**
@@ -2421,6 +2449,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 +2494,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>;
         /**
@@ -3673,7 +3709,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emitted when the toggle loses focus.
+          * Emitted when the checkbox loses focus.
          */
         "onIonBlur"?: (event: CustomEvent<void>) => void;
         /**
@@ -3681,7 +3717,7 @@ declare namespace LocalJSX {
          */
         "onIonChange"?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
         /**
-          * Emitted when the toggle has focus.
+          * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: CustomEvent<void>) => void;
         /**
@@ -3689,7 +3725,7 @@ declare namespace LocalJSX {
          */
         "onIonStyle"?: (event: CustomEvent<StyleEventDetail>) => void;
         /**
-          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
+          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
         "value"?: string;
     }
@@ -3698,6 +3734,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the chip.
+         */
+        "disabled"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -4169,7 +4209,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**
@@ -4180,6 +4220,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 +4259,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 +4267,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.
          */
@@ -4410,6 +4454,10 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Emitted when the color changes.
+         */
+        "onIonColor"?: (event: CustomEvent<StyleEventDetail>) => void;
         /**
           * Emitted when the styles change.
          */
@@ -4956,7 +5004,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
+          * How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**
@@ -5095,6 +5143,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.
          */
@@ -5221,7 +5277,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**
@@ -5322,6 +5378,10 @@ declare namespace LocalJSX {
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          */
         "scrollable"?: boolean;
+        /**
+          * If `true`, users will be able to swipe between segment buttons to activate them.
+         */
+        "swipeGesture"?: boolean;
         /**
           * the value of the segment.
          */
@@ -5697,7 +5757,7 @@ declare namespace LocalJSX {
          */
         "cols"?: number;
         /**
-          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
+          * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
          */
         "debounce"?: number;
         /**
@@ -5708,6 +5768,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 +5795,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 +5803,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.
          */

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>
     );
   }

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

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

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

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

core/src/components/action-sheet/test/basic/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/action-sheet/test/spec/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/action-sheet/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/action-sheet/test/translucent/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

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

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

core/src/components/alert/alert.scss

@@ -27,7 +27,7 @@
   @include position(0, 0, 0, 0);
 
   display: flex;
-  position: fixed;
+  position: absolute;
 
   align-items: center;
   justify-content: center;

core/src/components/alert/alert.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { AlertButton, AlertInput, AlertInputAttributes, AlertTextareaAttributes, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
@@ -34,6 +34,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private gesture?: Gesture;
 
   presented = false;
+  lastFocus?: HTMLElement;
 
   @Element() el!: HTMLIonAlertElement;
 
@@ -129,6 +130,58 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionAlertDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
+  @Listen('keydown', { target: 'document' })
+  onKeydown(ev: any) {
+    const inputTypes = new Set(this.processedInputs.map(i => i.type));
+
+    // The only inputs we want to navigate between using arrow keys are the radios
+    // ignore the keydown event if it is not on a radio button
+    if (
+      !inputTypes.has('radio')
+      || (ev.target && !this.el.contains(ev.target))
+      || ev.target.classList.contains('alert-button')) {
+      return;
+    }
+
+    // Get all radios inside of the radio group and then
+    // filter out disabled radios since we need to skip those
+    const query = this.el.querySelectorAll('.alert-radio') as NodeListOf<HTMLButtonElement>;
+    const radios = Array.from(query).filter(radio => !radio.disabled);
+
+    // The focused radio is the one that shares the same id as
+    // the event target
+    const index = radios.findIndex(radio => radio.id === ev.target.id);
+
+    // We need to know what the next radio element should
+    // be in order to change the focus
+    let nextEl: HTMLButtonElement | undefined;
+
+    // If hitting arrow down or arrow right, move to the next radio
+    // If we're on the last radio, move to the first radio
+    if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
+      nextEl = (index === radios.length - 1)
+        ? radios[0]
+        : radios[index + 1];
+    }
+
+    // If hitting arrow up or arrow left, move to the previous radio
+    // If we're on the first radio, move to the last radio
+    if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
+      nextEl = (index === 0)
+        ? radios[radios.length - 1]
+        : radios[index - 1];
+    }
+
+    if (nextEl && radios.includes(nextEl)) {
+      const nextProcessed = this.processedInputs.find(input => input.id === nextEl?.id);
+
+      if (nextProcessed) {
+        this.rbClick(nextProcessed);
+        nextEl.focus();
+      }
+    }
+  }
+
   @Watch('buttons')
   buttonsChanged() {
     const buttons = this.buttons;
@@ -143,12 +196,21 @@ export class Alert implements ComponentInterface, OverlayInterface {
   inputsChanged() {
     const inputs = this.inputs;
 
+    // Get the first input that is not disabled and the checked one
+    // If an enabled checked input exists, set it to be the focusable input
+    // otherwise we default to focus the first input
+    // This will only be used when the input is type radio
+    const first = inputs.find(input => !input.disabled);
+    const checked = inputs.find(input => input.checked && !input.disabled);
+    const focusable = checked || first;
+
     // An alert can be created with several different inputs. Radios,
     // checkboxes and inputs are all accepted, but they cannot be mixed.
     const inputTypes = new Set(inputs.map(i => i.type));
     if (inputTypes.has('checkbox') && inputTypes.has('radio')) {
       console.warn(`Alert cannot mix input types: ${(Array.from(inputTypes.values()).join('/'))}. Please see alert docs for more info.`);
     }
+
     this.inputType = inputTypes.values().next().value;
     this.processedInputs = inputs.map((i, index) => ({
       type: i.type || 'text',
@@ -164,10 +226,11 @@ export class Alert implements ComponentInterface, OverlayInterface {
       max: i.max,
       cssClass: i.cssClass || '',
       attributes: i.attributes || {},
+      tabindex: (i.type === 'radio' && i !== focusable) ? -1 : 0
     }) as AlertInput);
   }
 
-  constructor() {
+  connectedCallback() {
     prepareOverlay(this.el);
   }
 
@@ -176,7 +239,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     this.buttonsChanged();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;
@@ -240,6 +303,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private rbClick(selectedInput: AlertInput) {
     for (const input of this.processedInputs) {
       input.checked = input === selectedInput;
+      input.tabindex = input === selectedInput ? 0 : -1;
     }
     this.activeId = selectedInput.id;
     safeCall(selectedInput.handler, selectedInput);
@@ -309,22 +373,24 @@ export class Alert implements ComponentInterface, OverlayInterface {
     return values;
   }
 
-  private renderAlertInputs(labelledBy: string | undefined) {
+  private renderAlertInputs() {
     switch (this.inputType) {
-      case 'checkbox': return this.renderCheckbox(labelledBy);
-      case 'radio': return this.renderRadio(labelledBy);
-      default: return this.renderInput(labelledBy);
+      case 'checkbox': return this.renderCheckbox();
+      case 'radio': return this.renderRadio();
+      default: return this.renderInput();
     }
   }
 
-  private renderCheckbox(labelledby: string | undefined) {
+  private renderCheckbox() {
     const inputs = this.processedInputs;
     const mode = getIonMode(this);
+
     if (inputs.length === 0) {
       return null;
     }
+
     return (
-      <div class="alert-checkbox-group" aria-labelledby={labelledby}>
+      <div class="alert-checkbox-group">
         { inputs.map(i => (
           <button
             type="button"
@@ -332,7 +398,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             aria-checked={`${i.checked}`}
             id={i.id}
             disabled={i.disabled}
-            tabIndex={0}
+            tabIndex={i.tabindex}
             role="checkbox"
             class={{
               ...getClassMap(i.cssClass),
@@ -358,13 +424,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
     );
   }
 
-  private renderRadio(labelledby: string | undefined) {
+  private renderRadio() {
     const inputs = this.processedInputs;
+
     if (inputs.length === 0) {
       return null;
     }
+
     return (
-      <div class="alert-radio-group" role="radiogroup" aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
+      <div class="alert-radio-group" role="radiogroup" aria-activedescendant={this.activeId}>
         { inputs.map(i => (
           <button
             type="button"
@@ -372,7 +440,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             aria-checked={`${i.checked}`}
             disabled={i.disabled}
             id={i.id}
-            tabIndex={0}
+            tabIndex={i.tabindex}
             class={{
               ...getClassMap(i.cssClass),
               'alert-radio-button': true,
@@ -395,13 +463,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
     );
   }
 
-  private renderInput(labelledby: string | undefined) {
+  private renderInput() {
     const inputs = this.processedInputs;
     if (inputs.length === 0) {
       return null;
     }
     return (
-      <div class="alert-input-group" aria-labelledby={labelledby}>
+      <div class="alert-input-group">
         { inputs.map(i => {
           if (i.type === 'textarea') {
             return (
@@ -410,7 +478,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
                   placeholder={i.placeholder}
                   value={i.value}
                   id={i.id}
-                  tabIndex={0}
+                  tabIndex={i.tabindex}
                   {...i.attributes as AlertTextareaAttributes}
                   disabled={i.attributes?.disabled ?? i.disabled}
                   class={inputClass(i)}
@@ -431,7 +499,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
                   max={i.max}
                   value={i.value}
                   id={i.id}
-                  tabIndex={0}
+                  tabIndex={i.tabindex}
                   {...i.attributes as AlertInputAttributes}
                   disabled={i.attributes?.disabled ?? i.disabled}
                   class={inputClass(i)}
@@ -488,13 +556,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
     const subHdrId = `alert-${overlayIndex}-sub-hdr`;
     const msgId = `alert-${overlayIndex}-msg`;
 
-    let labelledById: string | undefined;
-    if (header !== undefined) {
-      labelledById = hdrId;
-    } else if (subHeader !== undefined) {
-      labelledById = subHdrId;
-    }
-
     return (
       <Host
         role="dialog"
@@ -514,7 +575,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>}
@@ -523,10 +586,12 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
           <div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(this.message)}></div>
 
-          {this.renderAlertInputs(labelledById)}
+          {this.renderAlertInputs()}
           {this.renderAlertButtons()}
 
         </div>
+
+        <div tabindex="0"></div>
       </Host>
     );
   }

core/src/components/alert/readme.md

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

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

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

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -206,7 +206,6 @@
             type: 'radio',
             label: 'Radio 1',
             value: 'value1',
-            checked: true
           },
           {
             type: 'radio',
@@ -216,7 +215,8 @@
           {
             type: 'radio',
             label: 'Radio 3',
-            value: 'value3'
+            value: 'value3',
+            checked: true
           },
           {
             type: 'radio',
@@ -241,12 +241,12 @@
             role: 'cancel',
             cssClass: 'secondary',
             handler: () => {
-              console.log('Confirm Cancel')
+              console.log('Confirm Cancel');
             }
           }, {
             text: 'Ok',
-            handler: () => {
-              console.log('Confirm Ok')
+            handler: (ev) => {
+              console.log('Confirm Ok', ev);
             }
           }
         ]

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

core/src/components/app/app.scss

@@ -3,6 +3,16 @@ html.plt-mobile ion-app {
   user-select: none;
 }
 
+/**
+ * This works around a WebKit issue
+ * where user-select: none was causing
+ * contenteditable to not be selectable,
+ * even though inputs and textareas are selectable.
+ */
+html.plt-mobile ion-app [contenteditable] {
+  user-select: text;
+}
+
 ion-app.force-statusbar-padding {
   --ion-safe-area-top: 20px;
 }

core/src/components/app/app.tsx

@@ -13,7 +13,7 @@ export class App implements ComponentInterface {
 
   componentDidLoad() {
     if (Build.isBrowser) {
-      rIC(() => {
+      rIC(async () => {
         const isHybrid = isPlatform(window, 'hybrid');
         if (!config.getBoolean('_testing')) {
           import('../../utils/tap-click').then(module => module.startTapClick(config));
@@ -24,8 +24,11 @@ export class App implements ComponentInterface {
         if (config.getBoolean('inputShims', needInputShims())) {
           import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
         }
+        const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
         if (config.getBoolean('hardwareBackButton', isHybrid)) {
-          import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
+          hardwareBackButtonModule.startHardwareBackButton();
+        } else {
+          hardwareBackButtonModule.blockHardwareBackButton();
         }
         if (typeof (window as any) !== 'undefined') {
           import('../../utils/keyboard/keyboard').then(module => module.startKeyboardAssist(window));

core/src/components/app/test/safe-area/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr" class="safe-area">
+<html lang="en" dir="ltr" class="safe-area">
 
 <head>
   <meta charset="UTF-8">

core/src/components/avatar/readme.md

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

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/avatar/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

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

@@ -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}

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>
 ```
 
 

core/src/components/back-button/test/basic/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/back-button/test/host-element/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/back-button/test/navigation/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/back-button/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/back-button/test/toolbar/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

core/src/components/backdrop/backdrop.tsx

@@ -67,6 +67,7 @@ export class Backdrop implements ComponentInterface {
     return (
       <Host
         tabindex="-1"
+        aria-hidden="true"
         class={{
           [mode]: true,
           'backdrop-hide': !this.visible,

core/src/components/backdrop/readme.md

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

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

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

core/src/components/badge/badge.tsx

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

core/src/components/badge/readme.md

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

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

core/src/components/badge/test/standalone/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

core/src/components/button/button.tsx

@@ -3,7 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
 import { getIonMode } from '../../global/ionic-global';
 import { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
-import { hasShadowDom } from '../../utils/helpers';
+import { hasShadowDom, inheritAttributes } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
@@ -28,6 +28,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   private inItem = false;
   private inListHeader = false;
   private inToolbar = false;
+  private inheritedAttributes: { [k: string]: any } = {};
 
   @Element() el!: HTMLElement;
 
@@ -46,20 +47,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 +97,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.
@@ -134,10 +135,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     this.inToolbar = !!this.el.closest('ion-buttons');
     this.inListHeader = !!this.el.closest('ion-list-header');
     this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
+    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
   }
 
   private get hasIconOnly() {
-    return !!this.el.querySelector('ion-icon[slot="icon-only"]');
+    return !!this.el.querySelector('[slot="icon-only"]');
   }
 
   private get rippleType() {
@@ -184,7 +186,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
   render() {
     const mode = getIonMode(this);
-    const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong } = this;
+    const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes } = this;
     const finalSize = size === undefined && this.inItem ? 'small' : size;
     const TagType = href === undefined ? 'button' : 'a' as any;
     const attrs = (TagType === 'button')
@@ -204,8 +206,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 +220,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           'button-disabled': disabled,
           'ion-activatable': true,
           'ion-focusable': true,
-        }}
+        })}
       >
         <TagType
           {...attrs}
@@ -228,6 +229,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          {...inheritedAttributes}
         >
           <span class="button-inner">
             <slot name="icon-only"></slot>

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>
 ```
 
 

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -50,6 +50,7 @@
   <ion-button class="wide">wide</ion-button>
   <ion-button class="large">large</ion-button>
   <ion-button class="round">rounded</ion-button>
+  <ion-button aria-label="this is my custom label">custom aria-label</ion-button>
 
   <!-- Custom Colors -->
   <ion-button class="custom">custom</ion-button>

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

core/src/components/buttons/readme.md

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

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

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

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

core/src/components/card-header/test/basic/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">

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

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

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

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

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

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