5.4.3

Release 5.4.2

.circleci/config.yml

@@ -59,7 +59,7 @@ jobs:
     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
@@ -75,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:
@@ -94,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
@@ -117,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
@@ -134,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
@@ -149,7 +149,6 @@ jobs:
           root: /tmp/workspace
           paths:
             - "*"
-
   build-react-router:
     <<: *defaults
     steps:
@@ -157,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
@@ -179,6 +178,58 @@ jobs:
           paths:
             - "*"
 
+  build-vue:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install --legacy-peer-deps
+          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 --legacy-peer-deps
+          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:
@@ -282,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:
@@ -320,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:
@@ -327,7 +420,7 @@ 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 run test -- --protractor-config=e2e/protractor-ci.conf.js
@@ -378,6 +471,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/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

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

.github/labeler.yml

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

.github/workflows/label.yml

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

.gitignore

@@ -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,13 +209,13 @@ 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'], { cwd: projectRoot })
+          task: () => execa('npm', ['link', '@ionic/react', '--legacy-peer-deps'], { cwd: projectRoot })
         });
       }
     }

.scripts/release.js

@@ -63,9 +63,8 @@ async function main() {
 function checkProductionRelease() {
   const corePath = common.projectPath('core');
   const hasEsm = fs.existsSync(path.join(corePath, 'dist', 'esm'));
-  const hasEsmEs5 = fs.existsSync(path.join(corePath, 'dist', 'esm-es5'));
   const hasCjs = fs.existsSync(path.join(corePath, 'dist', 'cjs'));
-  if (!hasEsm || !hasEsmEs5 || !hasCjs) {
+  if (!hasEsm || !hasCjs) {
     throw new Error('core build is not a production build');
   }
 }

CHANGELOG.md

@@ -1,3 +1,139 @@
+## [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)
 
 

README.md

@@ -12,7 +12,7 @@ Ionic Framework is based on [Web Components](https://www.webcomponents.org/intro
 | ------- | ------- | ------- |:-----:|
 | **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).

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.3.4",
+  "version": "5.4.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "5.3.4",
+    "@ionic/core": "5.4.3",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

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/test/test-app/package.json

@@ -8,7 +8,8 @@
     "sync:build": "sh scripts/build-ionic.sh",
     "sync": "sh scripts/sync.sh",
     "build": "npm run sync && ng build --prod --no-progress",
-    "test": "ng e2e --prod",
+    "pretest": "webdriver-manager update --versions.chrome 85.0.4183.87",
+    "test": "ng e2e --prod --webdriver-update=false",
     "test.dev": "npm run sync && ng e2e",
     "lint": "ng lint",
     "postinstall": "npm run sync && ngcc",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.3.4",
+  "version": "5.4.3",
   "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",
@@ -36,8 +36,9 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/core": "1.17.3",
+    "@stencil/core": "2.1.2",
     "@stencil/sass": "1.3.2",
+    "@stencil/vue-output-target": "0.1.8",
     "@types/jest": "^26.0.10",
     "@types/node": "^14.6.0",
     "@types/puppeteer": "3.0.1",
@@ -58,10 +59,11 @@
     "swiper": "5.4.1",
     "tslint": "^6.1.3",
     "tslint-ionic-rules": "0.0.21",
-    "tslint-react": "^5.0.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 --es5 && 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",
@@ -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

@@ -858,7 +858,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;
         /**
@@ -1730,7 +1730,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;
         /**
@@ -1991,7 +1991,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;
         /**
@@ -2430,7 +2430,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;
         /**
@@ -4197,7 +4197,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;
         /**
@@ -4442,6 +4442,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.
          */
@@ -4988,7 +4992,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;
         /**
@@ -5261,7 +5265,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;
         /**
@@ -5737,7 +5741,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;
         /**

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

@@ -139,8 +139,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (
       !inputTypes.has('radio')
       || (ev.target && !this.el.contains(ev.target))
-      || ev.target.classList.contains('alert-button'))
-    {
+      || ev.target.classList.contains('alert-button')) {
       return;
     }
 
@@ -170,7 +169,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
       nextEl = (index === 0)
         ? radios[radios.length - 1]
-        : radios[index - 1]
+        : radios[index - 1];
     }
 
     if (nextEl && radios.includes(nextEl)) {

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

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/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/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/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/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/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/button/button.tsx

@@ -137,7 +137,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   }
 
   private get hasIconOnly() {
-    return !!this.el.querySelector('ion-icon[slot="icon-only"]');
+    return !!this.el.querySelector('[slot="icon-only"]');
   }
 
   private get rippleType() {

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

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/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/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/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/test/button/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/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/card/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/checkbox/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/checkbox/test/indeterminate/index.html

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

core/src/components/checkbox/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/chip/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/chip/test/standalone/index.html

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

core/src/components/chip/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/content/content.scss

@@ -83,7 +83,24 @@
 .scroll-y,
 .scroll-x {
   -webkit-overflow-scrolling: touch;
-  will-change: scroll-position;
+
+  /**
+   * This adds `.inner-scroll` as part of the
+   * stacking context in WebKit. Without it,
+   * children of ion-content are treated as
+   * siblings rather than descendants. This
+   * can result in the children being put
+   * into their own layers, degrading
+   * scrolling performance.
+   *
+   * An optimization called "layer backing
+   * sharing" usually kicks in to prevent
+   * this, but having translate3d defeats
+   * this optimization.
+   *
+   * See: https://bugs.webkit.org/show_bug.cgi?id=216701
+   */
+  will-change: scroll-position, transform;
 }
 
 .scroll-y {

core/src/components/content/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/content/test/fixed/index.html

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

core/src/components/content/test/fullscreen/index.html

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

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

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

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

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

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

@@ -3,10 +3,16 @@
  * Defaults to the current date if
  * no date given
  */
-export const getDateValue = (date: DatetimeData, format: string): number => {
+export const getDateValue = (date: DatetimeData, format: string): number | string => {
   const getValue = getValueFromFormat(date, format);
 
-  if (getValue !== undefined) { return getValue; }
+  if (getValue !== undefined) {
+    if (format === FORMAT_A || format === FORMAT_a) {
+      date.ampm = getValue;
+    }
+
+    return getValue;
+  }
 
   const defaultDate = parseDate(new Date().toISOString());
   return getValueFromFormat((defaultDate as DatetimeData), format);
@@ -238,7 +244,6 @@ export const parseDate = (val: string | undefined | null): DatetimeData | undefi
     second: parse[6],
     millisecond: parse[7],
     tzOffset,
-    ampm: parse[4] >= 12 ? 'pm' : 'am'
   };
 };
 
@@ -326,24 +331,6 @@ export const updateDate = (existingData: DatetimeData, newData: any, displayTime
       // newData is from the datetime picker's selected values
       // update the existing datetimeValue with the new values
       if (newData.ampm !== undefined && newData.hour !== undefined) {
-        // If the date we came from exists, we need to change the meridiem value when
-        // going to and from 12
-        if (existingData.ampm !== undefined && existingData.hour !== undefined) {
-          // If the existing meridiem is am, we want to switch to pm if it is either
-          // A) coming from 0 (12 am)
-          // B) going to 12 (12 pm)
-          if (existingData.ampm === 'am' && (existingData.hour === 0 || newData.hour.value === 12)) {
-            newData.ampm.value = 'pm';
-          }
-
-          // If the existing meridiem is pm, we want to switch to am if it is either
-          // A) coming from 12 (12 pm)
-          // B) going to 12 (12 am)
-          if (existingData.ampm === 'pm' && (existingData.hour === 12 || newData.hour.value === 12)) {
-            newData.ampm.value = 'am';
-          }
-        }
-
         // change the value of the hour based on whether or not it is am or pm
         // if the meridiem is pm and equal to 12, it remains 12
         // otherwise we add 12 to the hour value

core/src/components/datetime/datetime.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { getIonMode } from '../../global/ionic-global';
 import { DatetimeChangeEventDetail, DatetimeOptions, PickerColumn, PickerColumnOption, PickerOptions, StyleEventDetail } from '../../interface';
-import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
+import { addEventListener, clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { pickerController } from '../../utils/overlays';
 import { hostContext } from '../../utils/theme';
 
@@ -271,7 +271,7 @@ export class Datetime implements ComponentInterface {
       this.isExpanded = false;
       this.setFocus();
     });
-    picker.addEventListener('ionPickerColChange', async (event: any) => {
+    addEventListener(picker, 'ionPickerColChange', async (event: any) => {
       const data = event.detail;
 
       const colSelectedIndex = data.selectedIndex;
@@ -285,7 +285,7 @@ export class Datetime implements ComponentInterface {
       if (data.name !== 'ampm' && this.datetimeValue.ampm !== undefined) {
         changeData['ampm'] = {
           value: this.datetimeValue.ampm
-        }
+        };
       }
 
       this.updateDatetimeValue(changeData);

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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html lang="en" dir="ltr">
 
 <head>
   <meta charset="UTF-8">
@@ -113,8 +113,8 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>HH:mm</ion-label>
-          <ion-datetime display-format="HH:mm"></ion-datetime>
+          <ion-label>HH:mm A</ion-label>
+          <ion-datetime display-format="HH:mm A"></ion-datetime>
         </ion-item>
 
         <ion-item>
@@ -127,6 +127,11 @@
           <ion-datetime display-format="h:mm a" value="01:47"></ion-datetime>
         </ion-item>
 
+        <ion-item>
+          <ion-label>h:mm A</ion-label>
+          <ion-datetime display-format="h:mm A" value="14:23"></ion-datetime>
+        </ion-item>
+
         <ion-item>
           <ion-label>hh:mm A (15 min steps)</ion-label>
           <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>

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

@@ -30,6 +30,38 @@ describe('Datetime', () => {
       expect(monthvalue).toEqual(date.getMonth() + 1);
       expect(yearValue).toEqual(date.getFullYear());
     });
+
+    it('it should return the date value for a given time', () => {
+      const dateTimeData: DatetimeData = {
+        hour: 2,
+        minute: 23,
+        tzOffset: 0
+      };
+
+      const hourValue = getDateValue(dateTimeData, 'hh');
+      const minuteValue = getDateValue(dateTimeData, 'mm');
+      const ampmValue = getDateValue(dateTimeData, 'A');
+
+      expect(hourValue).toEqual(2);
+      expect(minuteValue).toEqual(23);
+      expect(ampmValue).toEqual("am");
+    });
+
+    it('it should return the date value for a given time after 12', () => {
+      const dateTimeData: DatetimeData = {
+        hour: 16,
+        minute: 47,
+        tzOffset: 0
+      };
+
+      const hourValue = getDateValue(dateTimeData, 'hh');
+      const minuteValue = getDateValue(dateTimeData, 'mm');
+      const ampmValue = getDateValue(dateTimeData, 'a');
+
+      expect(hourValue).toEqual(4);
+      expect(minuteValue).toEqual(47);
+      expect(ampmValue).toEqual("pm");
+    });
   });
 
   describe('getDateTime()', () => {

core/src/components/datetime/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/fab-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/fab/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/fab/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/fab/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/fab/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/footer/test/basic/index.html

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

core/src/components/footer/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/grid/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/grid/test/offsets/index.html

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

core/src/components/grid/test/padding/index.html

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

core/src/components/grid/test/sizes/index.html

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

core/src/components/grid/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/header/test/basic/index.html

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

core/src/components/header/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/icon/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/icon/test/dir/index.html

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

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

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

core/src/components/icon/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/img/test/basic/index.html

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