merge release-4.11.13

4.11.13
2026-03-13 10:22:08 +08:00 · 2020-10-01 15:09:21 -04:00 · 2020-10-01 14:07:06 -04:00 · 2020-10-01 13:58:20 -04:00 · 2020-09-29 17:15:11 -04:00 · 2020-09-29 16:45:51 -04:00
317 changed files with 15084 additions and 2933 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -181,16 +181,6 @@ jobs:
          command: npm run lint
          working_directory: /tmp/workspace/core

-  test-core-e2e:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: /tmp/workspace
-      - run:
-          command: npm run test.e2e --ci
-          working_directory: /tmp/workspace/core
-
  test-core-spec:
    <<: *defaults
    steps:
@@ -328,8 +318,6 @@ workflows:
          requires: [build-core]
      - test-core-lint:
          requires: [build-core]
-      - test-core-e2e:
-          requires: [build-core]
      - test-core-spec:
          requires: [build-core]
      - test-core-treeshake:
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -2,30 +2,6 @@

 Thanks for your interest in contributing to the Ionic Framework! :tada:

- [Contributing Etiquette](#contributing-etiquette)
- [Creating an Issue](#creating-an-issue)
- [Creating a Pull Request](#creating-a-pull-request)
-  * [Setup](#setup)
-  * [Core](#core)
-    + [Modifying Components](#modifying-components)
-    + [Preview Changes](#preview-changes)
-    + [Lint Changes](#lint-changes)
-    + [Modifying Documentation](#modifying-documentation)
-    + [Modifying Tests](#modifying-tests)
-      - [Screenshot Tests](#screenshot-tests)
-    + [Building Changes](#building-changes)
-  * [Submit Pull Request](#submit-pull-request)
- [Commit Message Guidelines](#commit-message-guidelines)
-  * [Commit Message Format](#commit-message-format)
-  * [Revert](#revert)
-  * [Type](#type)
-  * [Scope](#scope)
-  * [Subject](#subject)
-  * [Body](#body)
-  * [Footer](#footer)
-  * [Examples](#examples)
- [License](#license)
-

 ## Contributing Etiquette

@@ -140,32 +116,13 @@ Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic
 3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.


-## Commit Message Guidelines
+## Commit Message Format

-We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). Our format closely resembles Angular's [commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).

-### Commit Message Format
-
-We follow the [Conventional Commits specification](https://www.conventionalcommits.org/). A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
-
-```
-<type>(<scope>): <subject>
-<BLANK LINE>
-<body>
-<BLANK LINE>
-<footer>
-```
-
-The **header** is mandatory and the **scope** of the header is optional.
-
-### Revert
-
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
-
-### Type
-
-If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
+`type(scope): subject`

+#### Type
 Must be one of the following:

 * **feat**: A new feature
@@ -177,12 +134,10 @@ Must be one of the following:
 * **test**: Adding missing tests
 * **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation

-### Scope
-
-The scope can be anything specifying place of the commit change. Usually it will refer to a component but it can also refer to a utility. For example `action-sheet`, `button`, `css`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation. As a general rule, if you're modifying a component use the name of the folder.
-
-### Subject
+#### Scope
+The scope can be anything specifying place of the commit change. For example `action-sheet`, `button`, `menu`, `nav`, etc. If you make multiple commits for the same component, please keep the naming of this component consistent. For example, if you make a change to navigation and the first commit is `fix(nav)`, you should continue to use `nav` for any more commits related to navigation.

+#### Subject
 The subject contains succinct description of the change:

 * use the imperative, present tense: "change" not "changed" nor "changes"
@@ -192,66 +147,6 @@ The subject contains succinct description of the change:
 * describe what the commit does, not what issue it relates to or fixes
 * **be brief, yet descriptive** - we should have a good understanding of what the commit does by reading the subject

-### Body
-
-Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
-The body should include the motivation for the change and contrast this with previous behavior.
-
-### Footer
-
-The footer should contain any information about **Breaking Changes** and is also the place to
-reference GitHub issues that this commit **Closes**.
-
-**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
-
-### Examples
-
-Does not appear in the generated changelog:
-
-```
-docs(changelog): update steps to update
-```
-
-Appears under "Features" header, toast subheader:
-
-```
-feat(toast): add 'buttons' property
-```
-
-Appears under "Bug Fixes" header, skeleton-text subheader, with a link to issue #28:
-
-```
-fix(skeleton-text): use proper color when animated
-
-closes #28
-```
-
-Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
-
-```
-perf(css): remove all css utility attributes
-
-BREAKING CHANGE: The CSS utility attributes have been removed. Use CSS classes instead.
-```
-
-Appears under "Breaking Changes" with the breaking change explanation:
-
-```
-refactor(animations): update to new animation system
-
-BREAKING CHANGE:
-
-Removes the old animation system to use the new Ionic animations.
-```
-
-The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
-
-```
-revert: feat(skeleton-text): add animated property
-
-This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
-```
-

 ## License

--- a/.github/PROCESS.md
+++ b/.github/PROCESS.md
@@ -240,8 +240,6 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
    - For major or minor releases, ensure that the version number has an associated title (for example: `4.5.0 Boron`)
    - Commit these changes with the version number as the message, e.g. `git commit -m "4.5.0"`

-1. *(Optional)* Run `npm run release -- --dry-run` to run the release without publishing and verify the version.
-
 1. Run `npm run release`

 1. Click **Merge pull request**. Use the dropdown to select this option if necessary.
--- a/.github/weekly-digest.yml
+++ b/.github/weekly-digest.yml
@@ -1,7 +0,0 @@
-# Configuration for weekly-digest - https://github.com/apps/weekly-digest
-publishDay: wed
-canPublishIssues: true
-canPublishPullRequests: true
-canPublishContributors: true
-canPublishStargazers: true
-canPublishCommits: true
--- a/.scripts/common.js
+++ b/.scripts/common.js
@@ -35,13 +35,13 @@ function projectPath(project) {
  return path.join(rootDir, project);
 }

-async function askTag() {
+async function askNpmTag(version) {
  const prompts = [
    {
      type: 'list',
-      name: 'tag',
+      name: 'npmTag',
      message: 'Select npm tag or specify a new tag',
-      choices: ['latest', 'next']
+      choices: ['latest', 'next', 'v4-lts']
        .concat([
          new inquirer.Separator(),
          {
@@ -54,13 +54,13 @@ async function askTag() {
      type: 'confirm',
      name: 'confirm',
      message: answers => {
-        return `Will publish to ${tc.cyan(answers.tag)}. Continue?`;
+        return `Will publish ${tc.cyan(version)} to ${tc.cyan(answers.npmTag)}. Continue?`;
      }
    }
  ];

-  const { tag, confirm } = await inquirer.prompt(prompts);
-  return { tag, confirm };
+  const { npmTag, confirm } = await inquirer.prompt(prompts);
+  return { npmTag, confirm };
 }

 function checkGit(tasks) {
@@ -156,10 +156,11 @@ function preparePackage(tasks, package, version, install) {
        title: `${pkg.name}: lint`,
        task: () => execa('npm', ['run', 'lint'], { cwd: projectRoot })
      });
-      projectTasks.push({
-        title: `${pkg.name}: test`,
-        task: async () => await execa('npm', ['test'], { cwd: projectRoot })
-      });
+      // Disable tests for publish, these pass locally
+      // projectTasks.push({
+      //   title: `${pkg.name}: test`,
+      //   task: async () => await execa('npm', ['test'], { cwd: projectRoot })
+      // });
    }

    projectTasks.push({
@@ -332,7 +333,7 @@ function copyCDNLoader(tasks, version) {
 module.exports = {
  checkTestDist,
  checkGit,
-  askTag,
+  askNpmTag,
  isValidVersion,
  isVersionGreater,
  copyCDNLoader,
--- a/.scripts/prepare.js
+++ b/.scripts/prepare.js
@@ -17,13 +17,9 @@ async function main() {
      throw new Error('env.GH_TOKEN is undefined');
    }

-    const { version, confirm } = await askVersion();
+    const version = await askVersion();
    const install = process.argv.indexOf('--no-install') < 0;

-    if (!confirm) {
-      return;
-    }
-
    // compile and verify packages
    await preparePackages(common.packages, version, install);

@@ -89,8 +85,8 @@ async function askVersion() {
    }
  ];

-  const { version, confirm } = await inquirer.prompt(prompts);
-  return { version, confirm };
+  const {version} = await inquirer.prompt(prompts);
+  return version;
 }


--- a/.scripts/release.js
+++ b/.scripts/release.js
@@ -28,7 +28,7 @@ async function main() {
    // repo must be clean
    common.checkGit(tasks);

-    const { tag, confirm } = await common.askTag();
+    const { npmTag, confirm } = await common.askNpmTag(version);

    if (!confirm) {
      return;
@@ -36,10 +36,10 @@ async function main() {

    if(!dryRun) {
      // publish each package in NPM
-      common.publishPackages(tasks, common.packages, version, tag);
+      common.publishPackages(tasks, common.packages, version, npmTag);

      // push tag to git remote
-      publishGit(tasks, version, changelog);
+      publishGit(tasks, version, changelog, npmTag);
    }

    const listr = new Listr(tasks);
@@ -48,10 +48,10 @@ async function main() {
    // Dry run doesn't publish to npm or git
    if (dryRun) {
      console.log(`
-        \n${tc.yellow('Did not publish. Remove the "--dry-run" flag to publish:')}\n${tc.green(version)} to ${tc.cyan(tag)}\n
+        \n${tc.yellow('Did not publish. Remove the "--dry-run" flag to publish:')}\n${tc.green(version)} to ${tc.cyan(npmTag)}\n
      `);
    } else {
-      console.log(`\nionic ${version} published to ${tag}!! 🎉\n`);
+      console.log(`\nionic ${version} published to ${npmTag}!! 🎉\n`);
    }

  } catch (err) {
@@ -122,16 +122,10 @@ async function publishGithub(version, tag, changelog) {
    token: process.env.GH_TOKEN
  });

-  let branch = await execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']);
-
-  if (!branch) {
-    branch = 'master';
-  }
-
  await octokit.repos.createRelease({
    owner: 'ionic-team',
    repo: 'ionic',
-    target_commitish: branch,
+    target_commitish: 'master',
    tag_name: tag,
    name: version,
    body: changelog,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,98 @@
+## [4.11.13](https://github.com/ionic-team/ionic/compare/v4.11.12...v4.11.13) (2020-10-01)
+
+
+### Bug Fixes
+
+* **datetime:** do not set ampm when the column doesn't exist ([#22224](https://github.com/ionic-team/ionic/issues/22224)) ([210db5b](https://github.com/ionic-team/ionic/commit/210db5b265c04dcdc847f173503c5c096fdb3374))
+
+
+
+## [4.11.12](https://github.com/ionic-team/ionic/compare/v4.11.11...v4.11.12) (2020-09-29)
+
+
+### Bug Fixes
+
+* **datetime:** remove the automatic switching from am to pm and vice versa ([#22208](https://github.com/ionic-team/ionic/issues/22208)) ([0d56c51](https://github.com/ionic-team/ionic/commit/0d56c5166497de38df9be432f8c7577b4b6c0e94)), closes [#18924](https://github.com/ionic-team/ionic/issues/18924)
+
+
+
+## [4.11.11](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.11) (2020-09-11)
+
+
+### Bug Fixes
+
+* **datetime:** do not reset to am when changing the hour and pm is set ([#22016](https://github.com/ionic-team/ionic/issues/22016)) ([1dac5a4](https://github.com/ionic-team/ionic/commit/1dac5a46f5e5adad9638e4e4e901bae1058c7287)), 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)
+
+
+## [4.11.10](https://github.com/ionic-team/ionic/compare/v4.11.9...v4.11.10) (2020-01-24)
+
+
+### Bug Fixes
+
+* **input:** revert previous type change ([db1fd1d](https://github.com/ionic-team/ionic/commit/db1fd1d72a8a0ade824ad2309d1adb2953731f37))
+
+
+
+## [4.11.9](https://github.com/ionic-team/ionic/compare/v4.11.8...v4.11.9) (2020-01-23)
+
+
+### Bug Fixes
+
+* **core:** updating type of input value to accept numbers, fixes [#20173](https://github.com/ionic-team/ionic/issues/20173) ([#20267](https://github.com/ionic-team/ionic/issues/20267)) ([7080205](https://github.com/ionic-team/ionic/commit/708020551f9c51ca3b32d7b49bf4572db3dda12e))
+* **react:** adding missing overlay component events, fixes [#19923](https://github.com/ionic-team/ionic/issues/19923) ([#20266](https://github.com/ionic-team/ionic/issues/20266)) ([ec6a8dd](https://github.com/ionic-team/ionic/commit/ec6a8dd86f3854edba367f79a6ebac7d60eed839))
+* **react:** Don't render overlay children if isOpen is false, fixes [#20225](https://github.com/ionic-team/ionic/issues/20225) ([#20226](https://github.com/ionic-team/ionic/issues/20226)) ([aff9612](https://github.com/ionic-team/ionic/commit/aff9612d1197dca48eab6eff9d749032c380cf82))
+* **react:** re attach props on update, fixes 20192 ([#20228](https://github.com/ionic-team/ionic/issues/20228)) ([9e35ebe](https://github.com/ionic-team/ionic/commit/9e35ebed4a1590ef2521f5f8c393bdd9dea32a04))
+* **react:** remove leaving view when routerdirection is back, fixes [#20124](https://github.com/ionic-team/ionic/issues/20124) ([#20268](https://github.com/ionic-team/ionic/issues/20268)) ([63d4e87](https://github.com/ionic-team/ionic/commit/63d4e877fb18c90d70c4cbd5f66ffccb8ee6489c))
+* **react:** support routes without a path for notfound routes, fixes [#20259](https://github.com/ionic-team/ionic/issues/20259) ([#20261](https://github.com/ionic-team/ionic/issues/20261)) ([2f8c13b](https://github.com/ionic-team/ionic/commit/2f8c13b6960f9bcfb941c36fa6e1742b96f80ba9))
+* **react:** update icon types to be a string as well, fixes [#20229](https://github.com/ionic-team/ionic/issues/20229) ([#20230](https://github.com/ionic-team/ionic/issues/20230)) ([1411d8a](https://github.com/ionic-team/ionic/commit/1411d8a173bfefd7db5241218fd5641b7e9da823))
+
+
+
+## [4.11.8](https://github.com/ionic-team/ionic/compare/v4.11.7...v4.11.8) (2020-01-13)
+
+
+### Bug Fixes
+
+* **react:** add missing react memory router ([8a5aba2](https://github.com/ionic-team/ionic/commit/8a5aba206865ce2af7f8bb85f4e7cd8dec37831d))
+* **react:** fixing type of icon in ToastOptions, ActionSheetOptions, fixes [#20100](https://github.com/ionic-team/ionic/issues/20100) ([857bab6](https://github.com/ionic-team/ionic/commit/857bab66419a851c6d189cd1456cd67c1c2d934c))
+* **react:** supporting ios and md props on icons ([#20170](https://github.com/ionic-team/ionic/issues/20170)) ([676cc19](https://github.com/ionic-team/ionic/commit/676cc19b89cd6374346aaac9cc3292872c7148fa))
+
+
+
+## [4.11.7](https://github.com/ionic-team/ionic/compare/v4.11.6...v4.11.7) (2019-12-12)
+
+
+### Bug Fixes
+
+* **react:** fire lifecycle events on initial render, fixes [#20071](https://github.com/ionic-team/ionic/issues/20071) ([9ea75eb](https://github.com/ionic-team/ionic/commit/9ea75ebec7b1367fc0e319fe61c1f42516357e10))
+
+
+
+## [4.11.6](https://github.com/ionic-team/ionic/compare/v4.11.5...v4.11.6) (2019-12-11)
+
+
+### Bug Fixes
+
+* **react:** don't show back button when not appropriate ([684293d](https://github.com/ionic-team/ionic/commit/684293ddbf1ad4edce590d56f7ff66fcd6c817a5))
+* **react:** first render performance improvements ([1c7d1e5](https://github.com/ionic-team/ionic/commit/1c7d1e5cf1ad7e53ebbee2566e8fa89f567f7fb5))
+* **react:** fix refs for controllers, overlays, ionpage, and ionrouteroutlet, fixes [#19924](https://github.com/ionic-team/ionic/issues/19924) ([#20012](https://github.com/ionic-team/ionic/issues/20012)) ([eef55bb](https://github.com/ionic-team/ionic/commit/eef55bb0072a9e54b1fd7d1c8c69e7fd43b2a5c5))
+* **react:** support for 'root' router direction, fixes [#19982](https://github.com/ionic-team/ionic/issues/19982) ([#20052](https://github.com/ionic-team/ionic/issues/20052)) ([e116712](https://github.com/ionic-team/ionic/commit/e1167122758b23221935e897bcd65839b75c59aa))
+* **react:** support navigating to same page and route updates in IonRouterOutlet, fixes [#19891](https://github.com/ionic-team/ionic/issues/19891), [#19892](https://github.com/ionic-team/ionic/issues/19892), [#19986](https://github.com/ionic-team/ionic/issues/19986) ([f9bf8db](https://github.com/ionic-team/ionic/commit/f9bf8dbe6f952ee53b6b213a4c0d043d25f49b93))
+
+### Upgrade Note
+
+If you run into a "Property 'translate' is missing in type" error building after updating to 4.11.6, update your React Typings library to the latest:
+
+npm i @types/react@latest @types/react-dom@latest
+
+## [4.11.5](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.5) (2019-11-14)
+
+
+### Bug Fixes
+
+* **react:** improved lifecycle hooks to deal with stale closures, fixes [#19873](https://github.com/ionic-team/ionic/issues/19873) ([#19874](https://github.com/ionic-team/ionic/issues/19874)) ([5ff786a](https://github.com/ionic-team/ionic/commit/5ff786a23d5aa32281bbf5daaa7f8156de39caca))
+
+
 ## [4.11.4](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.4) (2019-11-07)


@@ -44,109 +139,6 @@



-# [5.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v4.11.1...v5.0.0-beta.0) (2019-10-15)
-
-
-### Bug Fixes
-
-* **animations:** ensure all elements are cleaned up when calling .destroy() ([#19654](https://github.com/ionic-team/ionic/issues/19654)) ([2f88237](https://github.com/ionic-team/ionic/commit/2f882373bf08ce6ff7ec2ffb36b73e94c20881ca))
-* **content:** set overscroll only on iOS ([#19470](https://github.com/ionic-team/ionic/issues/19470)) ([63c2008](https://github.com/ionic-team/ionic/commit/63c2008a86de19847677fda7b9fedce73ed7669f)), closes [#19465](https://github.com/ionic-team/ionic/issues/19465)
-* **css:** update responsive display media queries ([#18601](https://github.com/ionic-team/ionic/issues/18601)) ([5d6e077](https://github.com/ionic-team/ionic/commit/5d6e077067c269d1589e7432e5074af6fc64b2fb)), closes [#18600](https://github.com/ionic-team/ionic/issues/18600)
-* **grid:** remove padding on children columns when grid has ion-no-padding ([#19592](https://github.com/ionic-team/ionic/issues/19592)) ([17119f5](https://github.com/ionic-team/ionic/commit/17119f59cf525b90b966e99117137512dbd397b4)), closes [#17459](https://github.com/ionic-team/ionic/issues/17459)
-* **searchbar:** update alignment of chips and other elements in toolbar ([#19596](https://github.com/ionic-team/ionic/issues/19596)) ([637f26b](https://github.com/ionic-team/ionic/commit/637f26b3642a266b6ef3b9d3d71b7327a5d3cc37)), closes [#19495](https://github.com/ionic-team/ionic/issues/19495) [#19502](https://github.com/ionic-team/ionic/issues/19502)
-* **toast:** inherit height in container to center align content ([#19409](https://github.com/ionic-team/ionic/issues/19409)) ([250718a](https://github.com/ionic-team/ionic/commit/250718a40f159fbd99f96d54c11e9a6aea080f04))
-
-
-### Features
-
-* **components:** cascade mode from parent to child components ([#19369](https://github.com/ionic-team/ionic/issues/19369)) ([3dd5f05](https://github.com/ionic-team/ionic/commit/3dd5f057604dcae7b017accdd37f4f3518a1f113)), closes [#18285](https://github.com/ionic-team/ionic/issues/18285)
-* **menu:** default to overlay for ios menu ([#19063](https://github.com/ionic-team/ionic/issues/19063)) ([dbf6a44](https://github.com/ionic-team/ionic/commit/dbf6a448ff3539fda2f182e00fa21435fcd60493)), closes [#18662](https://github.com/ionic-team/ionic/issues/18662)
-* **overlays:** add global backdrop opacity variable for animations ([#19533](https://github.com/ionic-team/ionic/issues/19533)) ([bd22926](https://github.com/ionic-team/ionic/commit/bd22926c4995b2d953a08aac7125241929f78f9e)), closes [#16446](https://github.com/ionic-team/ionic/issues/16446)
-
-
-### Performance Improvements
-
-* **animations:** do not create setTimeout if infinite iterations ([#19632](https://github.com/ionic-team/ionic/issues/19632)) ([0d699fb](https://github.com/ionic-team/ionic/commit/0d699fb2e40b1481d8a63457dce3c58fa45976a3)), closes [#19627](https://github.com/ionic-team/ionic/issues/19627)
-* **animations:** wrap loops in requestAnimationFrame call ([#19630](https://github.com/ionic-team/ionic/issues/19630)) ([589e67e](https://github.com/ionic-team/ionic/commit/589e67e4af3c2c5e42984f82cbd83d0246029535)), closes [#19629](https://github.com/ionic-team/ionic/issues/19629)
-
-
-### Breaking Changes
-
-> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the console.
-
-* **all:** mode is now cascaded from parent to child component. If this is not desired set a different mode on the child component. ([#19369](https://github.com/ionic-team/ionic/issues/19369)) ([55462d7](https://github.com/ionic-team/ionic/commit/55462d7a0935f57b6855f9bd1bf788bfcf532bc3))
-* **anchor:** remove `ion-anchor`, use `ion-router-link` instead. ([#18935](https://github.com/ionic-team/ionic/issues/18935)) ([e7cd197](https://github.com/ionic-team/ionic/commit/e7cd197af79cdf87f04bc769e0367c7e93c0aa0b))
-* **card:** convert card to shadow. ([#19395](https://github.com/ionic-team/ionic/issues/19395)) ([08bb60d](https://github.com/ionic-team/ionic/commit/08bb60dcbba3140bb2da64bb74217af8a36a266d))
-* **css:** responsive display media queries in the display CSS file have been updated. Instead of using the maximum value of that breakpoint (for `.ion-hide-{breakpoint}-down` classes) the maximum of the media query will be the minimum of that breakpoint. ([#18601](https://github.com/ionic-team/ionic/issues/18601)) ([40a8bff](https://github.com/ionic-team/ionic/commit/40a8bffcd54882300906243781abc12776c61ca6))
-* **css:** remove all CSS utility attributes. Use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities ([#18956](https://github.com/ionic-team/ionic/issues/18956)) ([04862df](https://github.com/ionic-team/ionic/commit/04862df7e1029a4e6c188536cb573ddfd57e9c85))
-
-  BEFORE:
-
-  ```html
-  <ion-header text-center></ion-header>
-  <ion-content padding></ion-content>
-  <ion-label text-wrap></ion-label>
-  <ion-item wrap></ion-item>
-  ```
-
-  AFTER:
-
-  ```html
-  <ion-header class="ion-text-center"></ion-header>
-  <ion-content class="ion-padding"></ion-content>
-  <ion-label class="ion-text-wrap"></ion-label>
-  <ion-item class="ion-wrap"></ion-item>
-  ```
-* **events:** remove the Events service. ([#19600](https://github.com/ionic-team/ionic/issues/19600)) ([8d4a721](https://github.com/ionic-team/ionic/commit/8d4a721c6675c13d1f84c455bb222af60be34312))
-  - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
-  - Use "Redux" for advanced state management: https://ngrx.io
-* **header/footer:** remove `no-border` attribute from header/footer, use `ion-no-border` class instead. ([#18954](https://github.com/ionic-team/ionic/issues/18954)) ([d9f6119](https://github.com/ionic-team/ionic/commit/d9f61197ffc62af10243a6719cc08200fd57ff8b))
-* **menu:** iOS menu now defaults to overlay, set `type` to `"reveal"` to get the old behavior. ([#19063](https://github.com/ionic-team/ionic/issues/19063)) ([ccb54a1](https://github.com/ionic-team/ionic/commit/ccb54a1255ca2a303c27e5a0cf68f4e3fb86a2fb))
-* **menu-controller:** remove `swipeEnable()`, use `swipeGesture()` instead. ([#19526](https://github.com/ionic-team/ionic/issues/19526)) ([30bd8fd](https://github.com/ionic-team/ionic/commit/30bd8fd739974926f0eaadddc33c50b546be4887))
-* **nav:** remove `ion-nav-pop`, `ion-nav-push` and `ion-nav-set-root`. Use `ion-nav-link` with `routerDirection` instead. ([#19240](https://github.com/ionic-team/ionic/issues/19240)) ([e334d73](https://github.com/ionic-team/ionic/commit/e334d73e544efddf7335c4ce9a5382f8a34d013e))
-* **searchbar:** remove boolean values from `showCancelButton`, use string values: `"always"`, `"focus"`, `"never"`. ([#18953](https://github.com/ionic-team/ionic/issues/18953)) ([508e186](https://github.com/ionic-team/ionic/commit/508e1868ad672ded49ddababd7a506ff1721534d))
-
-  BEFORE:
-
-  ```html
-  <ion-searchbar show-cancel-button>
-  <ion-searchbar show-cancel-button="true">
-  <ion-searchbar show-cancel-button="false">
-  ```
-
-  AFTER:
-
-  ```html
-  <ion-searchbar show-cancel-button="focus">
-  <ion-searchbar show-cancel-button="focus">
-  <ion-searchbar show-cancel-button="never">
-  ```
-* **scss:** remove `scss` files from `dist/`, use CSS variables to theme instead. ([#19292](https://github.com/ionic-team/ionic/issues/19292)) ([6450aff](https://github.com/ionic-team/ionic/commit/6450aff080c561c60c140000b89ff340edeeaeca))
-* **skeleton-text:** remove `width` property. Use CSS instead. ([#18936](https://github.com/ionic-team/ionic/issues/18936)) ([7c3db79](https://github.com/ionic-team/ionic/commit/7c3db79c23dac599aa8131753b33b1ed3487d776))
-* **split-pane:** remove `main` attribute. Use `contentId` instead. ([#19511](https://github.com/ionic-team/ionic/issues/19511)) ([02d7841](https://github.com/ionic-team/ionic/commit/02d784140ce0fc75718781454e8dd8a2f621ee0d))
-
-  BEFORE:
-
-  ```html
-  <ion-split-pane>
-    ...
-    <div main>...</div>
-  </ion-split-pane>
-  ```
-
-  AFTER:
-
-  ```html
-  <ion-split-pane content-id="main-content">
-    ...
-    <div id="main-content">...</div>
-  </ion-split-pane>
-  ```
-* **theming:** ionic default colors have been updated. ([#19279](https://github.com/ionic-team/ionic/issues/19279)) ([7f4cf08](https://github.com/ionic-team/ionic/commit/7f4cf08d996f90ae90064a351f8e373ce7a16799))
-* **toast:** remove `showCloseButton` and `closeButtonText`, add a button using the `buttons` property with `role: 'cancel'` instead. ([#18957](https://github.com/ionic-team/ionic/issues/18957)) ([ad7f112](https://github.com/ionic-team/ionic/commit/ad7f112e1eb04e41e697936454e63977d1bde34b))
-
-
-
 ## [4.11.1](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.1) (2019-10-14)


--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "5.0.0-beta.0",
+  "version": "4.11.13",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -49,7 +49,7 @@
    "css/"
  ],
  "dependencies": {
-    "@ionic/core": "5.0.0-beta.0",
+    "@ionic/core": "4.11.13",
    "tslib": "^1.9.3"
  },
  "peerDependencies": {
--- a/angular/src/directives/css-utils-deprecations.ts
+++ b/angular/src/directives/css-utils-deprecations.ts
@@ -0,0 +1,134 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[align-self-start], [align-self-end], [align-self-center], [align-self-stretch], [align-self-baseline], [align-self-auto], [wrap-reverse], [justify-content-start], [justify-content-center], [justify-content-end], [justify-content-around], [justify-content-between], [justify-content-evenly], [align-items-start], [align-items-center], [align-items-end], [align-items-stretch], [align-items-baseline], [float-left], [float-right], [float-start], [float-end], [float-sm-left], [float-sm-right], [float-sm-start], [float-sm-end], [float-md-left], [float-md-right], [float-md-start], [float-md-end], [float-lg-left], [float-lg-right], [float-lg-start], [float-lg-end], [float-xl-left], [float-xl-right], [float-xl-start], [float-xl-end], [text-center], [text-justify], [text-start], [text-end], [text-left], [text-right], [text-nowrap], [text-wrap], [text-sm-center], [text-sm-justify], [text-sm-start], [text-sm-end], [text-sm-left], [text-sm-right], [text-sm-nowrap], [text-sm-wrap], [text-md-center], [text-md-justify], [text-md-start], [text-md-end], [text-md-left], [text-md-right], [text-md-nowrap], [text-md-wrap], [text-lg-center], [text-lg-justify], [text-lg-start], [text-lg-end], [text-lg-left], [text-lg-right], [text-lg-nowrap], [text-lg-wrap], [text-xl-center], [text-xl-justify], [text-xl-start], [text-xl-end], [text-xl-left], [text-xl-right], [text-xl-nowrap], [text-xl-wrap], [text-uppercase], [text-lowercase], [text-capitalize], [text-sm-uppercase], [text-sm-lowercase], [text-sm-capitalize], [text-md-uppercase], [text-md-lowercase], [text-md-capitalize], [text-lg-uppercase], [text-lg-lowercase], [text-lg-capitalize], [text-xl-uppercase], [text-xl-lowercase], [text-xl-capitalize], [no-padding], [padding], [padding-top], [padding-bottom], [padding-start], [padding-end], [padding-vertical], [padding-horizontal], [no-margin], [margin], [margin-top], [margin-bottom], [margin-start], [margin-end], [margin-vertical], [margin-horizontal]',
+})
+export class CssUtilsDeprecations {
+  constructor(ref: ElementRef) {
+    const el = (ref.nativeElement as HTMLElement);
+    const attributes = Array.from(el.attributes)
+      .map(a => a.name)
+      .filter(n => DEPRECATED_ATTRIBUTES.includes(n));
+
+    if (attributes.length > 0) {
+      console.warn(`[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
+Replace:
+'<${el.tagName.toLowerCase()} ${attributes.map(n => `${n}`).join(' ')}>'
+
+With:
+'<${el.tagName.toLowerCase()} class="${attributes.map(n => `ion-${n}`).join(' ')}">'
+      `);
+    }
+  }
+}
+const DEPRECATED_ATTRIBUTES = [
+  'align-self-start',
+  'align-self-end',
+  'align-self-center',
+  'align-self-stretch',
+  'align-self-baseline',
+  'align-self-auto',
+  'wrap-reverse',
+  'justify-content-start',
+  'justify-content-center',
+  'justify-content-end',
+  'justify-content-around',
+  'justify-content-between',
+  'justify-content-evenly',
+  'align-items-start',
+  'align-items-center',
+  'align-items-end',
+  'align-items-stretch',
+  'align-items-baseline',
+  'float-left',
+  'float-right',
+  'float-start',
+  'float-end',
+  'float-sm-left',
+  'float-sm-right',
+  'float-sm-start',
+  'float-sm-end',
+  'float-md-left',
+  'float-md-right',
+  'float-md-start',
+  'float-md-end',
+  'float-lg-left',
+  'float-lg-right',
+  'float-lg-start',
+  'float-lg-end',
+  'float-xl-left',
+  'float-xl-right',
+  'float-xl-start',
+  'float-xl-end',
+  'text-center',
+  'text-justify',
+  'text-start',
+  'text-end',
+  'text-left',
+  'text-right',
+  'text-nowrap',
+  'text-wrap',
+  'text-sm-center',
+  'text-sm-justify',
+  'text-sm-start',
+  'text-sm-end',
+  'text-sm-left',
+  'text-sm-right',
+  'text-sm-nowrap',
+  'text-sm-wrap',
+  'text-md-center',
+  'text-md-justify',
+  'text-md-start',
+  'text-md-end',
+  'text-md-left',
+  'text-md-right',
+  'text-md-nowrap',
+  'text-md-wrap',
+  'text-lg-center',
+  'text-lg-justify',
+  'text-lg-start',
+  'text-lg-end',
+  'text-lg-left',
+  'text-lg-right',
+  'text-lg-nowrap',
+  'text-lg-wrap',
+  'text-xl-center',
+  'text-xl-justify',
+  'text-xl-start',
+  'text-xl-end',
+  'text-xl-left',
+  'text-xl-right',
+  'text-xl-nowrap',
+  'text-xl-wrap',
+  'text-uppercase',
+  'text-lowercase',
+  'text-capitalize',
+  'text-sm-uppercase',
+  'text-sm-lowercase',
+  'text-sm-capitalize',
+  'text-md-uppercase',
+  'text-md-lowercase',
+  'text-md-capitalize',
+  'text-lg-uppercase',
+  'text-lg-lowercase',
+  'text-lg-capitalize',
+  'text-xl-uppercase',
+  'text-xl-lowercase',
+  'text-xl-capitalize',
+  'no-padding',
+  'padding',
+  'padding-top',
+  'padding-bottom',
+  'padding-start',
+  'padding-end',
+  'padding-vertical',
+  'padding-horizontal',
+  'no-margin',
+  'margin',
+  'margin-top',
+  'margin-bottom',
+  'margin-start',
+  'margin-end',
+  'margin-vertical',
+  'margin-horizontal'
+];
--- a/angular/src/directives/navigation/nav-params.ts
+++ b/angular/src/directives/navigation/nav-params.ts
@@ -38,7 +38,7 @@ export class NavParams {
   *
   * @param param Which param you want to look up
   */
-  get<T = any>(param: string): T {
+  get(param: string): any {
    return this.data[param];
  }
 }
--- a/angular/src/directives/proxies-list.txt
+++ b/angular/src/directives/proxies-list.txt
@@ -44,6 +44,9 @@ d.IonApp,
  d.IonMenuToggle,
  d.IonNav,
  d.IonNavLink,
+  d.IonNavPop,
+  d.IonNavPush,
+  d.IonNavSetRoot,
  d.IonNote,
  d.IonProgressBar,
  d.IonRadio,
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -517,6 +517,38 @@ export class IonNavLink {
 }
 proxyInputs(IonNavLink, ['component', 'componentProps', 'routerDirection']);

+export declare interface IonNavPop extends Components.IonNavPop {}
+@Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
+export class IonNavPop {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+export declare interface IonNavPush extends Components.IonNavPush {}
+@Component({ selector: 'ion-nav-push', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
+export class IonNavPush {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+proxyInputs(IonNavPush, ['component', 'componentProps']);
+
+export declare interface IonNavSetRoot extends Components.IonNavSetRoot {}
+@Component({ selector: 'ion-nav-set-root', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
+export class IonNavSetRoot {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+proxyInputs(IonNavSetRoot, ['component', 'componentProps']);
+
 export declare interface IonNote extends Components.IonNote {}
@Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonNote {
@@ -729,7 +761,7 @@ export class IonSelectOption {
 proxyInputs(IonSelectOption, ['disabled', 'selected', 'value']);

 export declare interface IonSkeletonText extends Components.IonSkeletonText {}
-@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated'] })
+@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'width'] })
 export class IonSkeletonText {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -737,7 +769,7 @@ export class IonSkeletonText {
    this.el = r.nativeElement;
  }
 }
-proxyInputs(IonSkeletonText, ['animated']);
+proxyInputs(IonSkeletonText, ['animated', 'width']);

 export declare interface IonSlide extends Components.IonSlide {}
@Component({ selector: 'ion-slide', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -14,12 +14,14 @@ export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
 export { VirtualItem } from './directives/virtual-scroll/virtual-item';
 export { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 export { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
+export { CssUtilsDeprecations } from './directives/css-utils-deprecations';
 export * from './directives/proxies';

 // PROVIDERS
 export { AngularDelegate } from './providers/angular-delegate';
 export { ActionSheetController } from './providers/action-sheet-controller';
 export { AlertController } from './providers/alert-controller';
+export { Events } from './providers/events';
 export { LoadingController } from './providers/loading-controller';
 export { MenuController } from './providers/menu-controller';
 export { PickerController } from './providers/picker-controller';
@@ -30,8 +32,6 @@ export { ToastController } from './providers/toast-controller';
 export { NavController } from './providers/nav-controller';
 export { DomController } from './providers/dom-controller';
 export { Config } from './providers/config';
-export { AnimationController } from './providers/animation-controller';
-export { GestureController } from './providers/gesture-controller';

 // ROUTER STRATEGY
 export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy';
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -8,12 +8,13 @@ import { NumericValueAccessor } from './directives/control-value-accessors/numer
 import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
 import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
 import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
+import { CssUtilsDeprecations } from './directives/css-utils-deprecations';
 import { IonBackButtonDelegate } from './directives/navigation/ion-back-button';
 import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 import { IonTabs } from './directives/navigation/ion-tabs';
 import { NavDelegate } from './directives/navigation/nav-delegate';
 import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
-import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
+import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
 import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
 import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -67,6 +68,9 @@ const DECLARATIONS = [
  IonMenuToggle,
  IonNav,
  IonNavLink,
+  IonNavPop,
+  IonNavPush,
+  IonNavSetRoot,
  IonNote,
  IonProgressBar,
  IonRadio,
@@ -116,7 +120,10 @@ const DECLARATIONS = [
  VirtualFooter,
  VirtualHeader,
  VirtualItem,
-  IonVirtualScroll
+  IonVirtualScroll,
+
+  // Deprecations
+  CssUtilsDeprecations
 ];

@NgModule({
--- a/angular/src/providers/animation-controller.ts
+++ b/angular/src/providers/animation-controller.ts
@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Animation, createAnimation, getTimeGivenProgression } from '@ionic/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class AnimationController {
-  /**
-   * Create a new animation
-   */
-  create(animationId?: string): Animation {
-    return createAnimation(animationId);
-  }
-
-  /**
-   * EXPERIMENTAL
-   *
-   * Given a progression and a cubic bezier function,
-   * this utility returns the time value(s) at which the
-   * cubic bezier reaches the given time progression.
-   *
-   * If the cubic bezier never reaches the progression
-   * the result will be an empty array.
-   *
-   * This is most useful for switching between easing curves
-   * when doing a gesture animation (i.e. going from linear easing
-   * during a drag, to another easing when `progressEnd` is called)
-   */
-  easingTime(p0: number[], p1: number[], p2: number[], p3: number[], progression: number): number[] {
-    return getTimeGivenProgression(p0, p1, p2, p3, progression);
-  }
-}
--- a/angular/src/providers/config.ts
+++ b/angular/src/providers/config.ts
@@ -33,7 +33,7 @@ export class Config {
  }

  set(key: keyof IonicConfig, value?: any) {
-    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in the next major release.`);
+    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in Ionic Framework 6.0. Please see https://ionicframework.com/docs/angular/config for alternatives.`);
    const c = getConfig();
    if (c) {
      c.set(key, value);
--- a/angular/src/providers/events.ts
+++ b/angular/src/providers/events.ts
@@ -0,0 +1,81 @@
+import { Injectable } from '@angular/core';
+
+export type EventHandler = (...args: any[]) => any;
+@Injectable({
+  providedIn: 'root',
+})
+export class Events {
+  private c = new Map<string, EventHandler[]>();
+
+  constructor() {
+    console.warn(`[DEPRECATION][Events]: The Events provider is deprecated and it will be removed in the next major release.
+  - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
+  - Use "Redux" for advanced state management: https://ngrx.io`);
+  }
+  /**
+   * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
+   *
+   * @param topic the topic to subscribe to
+   * @param handler the event handler
+   */
+  subscribe(topic: string, ...handlers: EventHandler[]) {
+    let topics = this.c.get(topic);
+    if (!topics) {
+      this.c.set(topic, topics = []);
+    }
+    topics.push(...handlers);
+  }
+
+  /**
+   * Unsubscribe from the given topic. Your handler will no longer receive events published to this topic.
+   *
+   * @param topic the topic to unsubscribe from
+   * @param handler the event handler
+   *
+   * @return true if a handler was removed
+   */
+  unsubscribe(topic: string, handler?: EventHandler): boolean {
+    if (!handler) {
+      return this.c.delete(topic);
+    }
+
+    const topics = this.c.get(topic);
+    if (!topics) {
+      return false;
+    }
+
+    // We need to find and remove a specific handler
+    const index = topics.indexOf(handler);
+
+    if (index < 0) {
+      // Wasn't found, wasn't removed
+      return false;
+    }
+    topics.splice(index, 1);
+    if (topics.length === 0) {
+      this.c.delete(topic);
+    }
+    return true;
+  }
+
+  /**
+   * Publish an event to the given topic.
+   *
+   * @param topic the topic to publish to
+   * @param eventData the data to send as the event
+   */
+  publish(topic: string, ...args: any[]): any[] | null {
+    const topics = this.c.get(topic);
+    if (!topics) {
+      return null;
+    }
+    return topics.map(handler => {
+      try {
+        return handler(...args);
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    });
+  }
+}
--- a/angular/src/providers/gesture-controller.ts
+++ b/angular/src/providers/gesture-controller.ts
@@ -1,21 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Gesture, GestureConfig, PressRecognizerOptions, createGesture, createPressRecognizer } from '@ionic/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class GestureController {
-  /**
-   * Create a new gesture
-   */
-  create(opts: GestureConfig): Gesture {
-    return createGesture(opts);
-  }
-
-  /**
-   * Create a new Press recognizer gesture
-   */
-  pressRecognizer(opts: PressRecognizerOptions): Gesture {
-    return createPressRecognizer(opts);
-  }
-}
--- a/angular/src/providers/menu-controller.ts
+++ b/angular/src/providers/menu-controller.ts
@@ -48,6 +48,18 @@ export class MenuController {
    return menuController.enable(shouldEnable, menuId);
  }

+  /**
+   * Used to enable or disable the ability to swipe open the menu.
+   * @param shouldEnable  True if it should be swipe-able, false if not.
+   * @param [menuId]  Optionally get the menu by its id, or side.
+   * @return Returns the instance of the menu, which is useful for chaining.
+   * @deprecated Use swipeGesture() instead.
+   */
+  swipeEnable(shouldEnable: boolean, menuId?: string) {
+    console.warn('[DEPRECATED][ion-menu-controller] swipeEnable() is deprecated. Use MenuController.swipeGesture() instead');
+    return this.swipeGesture(shouldEnable, menuId);
+  }
+
  /**
   * Used to enable or disable the ability to swipe open the menu.
   * @param shouldEnable  True if it should be swipe-able, false if not.
--- a/angular/test/test-app/src/app/providers/providers.component.ts
+++ b/angular/test/test-app/src/app/providers/providers.component.ts
@@ -1,7 +1,7 @@
 import { Component, NgZone } from '@angular/core';
 import {
  Platform, ModalController, AlertController, ActionSheetController,
-  PopoverController, ToastController, PickerController, MenuController,
+  PopoverController, ToastController, Events, PickerController, MenuController,
  LoadingController, NavController, DomController, Config
 } from '@ionic/angular';

@@ -13,6 +13,7 @@ export class ProvidersComponent {

  isLoaded = false;
  isReady = false;
+  isEvent = false;
  isResumed = false;
  isPaused = false;
  isResized = false;
@@ -24,6 +25,7 @@ export class ProvidersComponent {
  constructor(
    actionSheetCtrl: ActionSheetController,
    alertCtrl: AlertController,
+    events: Events,
    loadingCtrl: LoadingController,
    menuCtrl: MenuController,
    pickerCtrl: PickerController,
@@ -38,7 +40,7 @@ export class ProvidersComponent {
  ) {
    // test all providers load
    if (
-      actionSheetCtrl && alertCtrl && loadingCtrl && menuCtrl && pickerCtrl &&
+      actionSheetCtrl && alertCtrl && events && loadingCtrl && menuCtrl && pickerCtrl &&
      modalCtrl && platform && popoverCtrl && toastCtrl && navCtrl && domCtrl && config
      ) {
        this.isLoaded = true;
@@ -67,6 +69,13 @@ export class ProvidersComponent {
    this.isDesktop = platform.is('desktop');
    this.isMobile = platform.is('mobile');

+    // test events
+    events.subscribe('topic', () => {
+      this.isEvent = true;
+      NgZone.assertInAngularZone();
+    });
+    events.publish('topic');
+
    // test config
    this.isTesting = config.getBoolean('_testing');
    config.set('keyboardHeight', 12345);
--- a/core/.npmrc
+++ b/core/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/core/.stylelintrc.yml
+++ b/core/.stylelintrc.yml
@@ -254,7 +254,7 @@ rules:
      - visibility
      - z-index

-  property-blacklist:
+  property-disallowed-list:
    - background-position
    - right
    - left
--- a/core/api.txt
+++ b/core/api.txt
@@ -4,10 +4,10 @@ ion-action-sheet,prop,animated,boolean,true,false,false
 ion-action-sheet,prop,backdropDismiss,boolean,true,false,false
 ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false
 ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-action-sheet,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-action-sheet,prop,header,string | undefined,undefined,false,false
 ion-action-sheet,prop,keyboardClose,boolean,true,false,false
-ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-action-sheet,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
 ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
 ion-action-sheet,prop,translucent,boolean,false,false,false
@@ -19,7 +19,6 @@ ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetDidPresent,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
-ion-action-sheet,css-prop,--backdrop-opacity
 ion-action-sheet,css-prop,--background
 ion-action-sheet,css-prop,--background-activated
 ion-action-sheet,css-prop,--background-selected
@@ -41,11 +40,11 @@ ion-alert,prop,animated,boolean,true,false,false
 ion-alert,prop,backdropDismiss,boolean,true,false,false
 ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
 ion-alert,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-alert,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-alert,prop,header,string | undefined,undefined,false,false
 ion-alert,prop,inputs,AlertInput[],[],false,false
 ion-alert,prop,keyboardClose,boolean,true,false,false
-ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-alert,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-alert,prop,message,string | undefined,undefined,false,false
 ion-alert,prop,mode,"ios" | "md",undefined,false,false
 ion-alert,prop,subHeader,string | undefined,undefined,false,false
@@ -58,7 +57,6 @@ ion-alert,event,ionAlertDidDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertDidPresent,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail<any>,true
 ion-alert,event,ionAlertWillPresent,void,true
-ion-alert,css-prop,--backdrop-opacity
 ion-alert,css-prop,--background
 ion-alert,css-prop,--height
 ion-alert,css-prop,--max-height
@@ -72,6 +70,14 @@ ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTML
 ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>

+ion-anchor,shadow
+ion-anchor,prop,color,string | undefined,undefined,false,false
+ion-anchor,prop,href,string | undefined,undefined,false,false
+ion-anchor,prop,rel,string | undefined,undefined,false,false
+ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
+ion-anchor,css-prop,--background
+ion-anchor,css-prop,--color
+
 ion-app,none

 ion-avatar,shadow
@@ -174,7 +180,7 @@ ion-button,css-prop,--transition
 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false

-ion-card,shadow
+ion-card,scoped
 ion-card,prop,button,boolean,false,false,false
 ion-card,prop,color,string | undefined,undefined,false,false
 ion-card,prop,disabled,boolean,false,false,false
@@ -575,9 +581,9 @@ ion-loading,prop,animated,boolean,true,false,false
 ion-loading,prop,backdropDismiss,boolean,false,false,false
 ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-loading,prop,duration,number,0,false,false
-ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-loading,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-loading,prop,keyboardClose,boolean,true,false,false
-ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-loading,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-loading,prop,message,string | undefined,undefined,false,false
 ion-loading,prop,mode,"ios" | "md",undefined,false,false
 ion-loading,prop,showBackdrop,boolean,true,false,false
@@ -591,7 +597,6 @@ ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingDidPresent,void,true
 ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail<any>,true
 ion-loading,event,ionLoadingWillPresent,void,true
-ion-loading,css-prop,--backdrop-opacity
 ion-loading,css-prop,--background
 ion-loading,css-prop,--height
 ion-loading,css-prop,--max-height
@@ -660,7 +665,7 @@ ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
 ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise<boolean>
 ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise<boolean>
 ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>
+ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => Promise<void>
 ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
 ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise<boolean>

@@ -674,9 +679,9 @@ ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,component,Function | HTMLElement | null | string,undefined,true,false
 ion-modal,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-modal,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-modal,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-modal,prop,keyboardClose,boolean,true,false,false
-ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-modal,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
@@ -687,7 +692,6 @@ ion-modal,event,ionModalDidDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalDidPresent,void,true
 ion-modal,event,ionModalWillDismiss,OverlayEventDetail<any>,true
 ion-modal,event,ionModalWillPresent,void,true
-ion-modal,css-prop,--backdrop-opacity
 ion-modal,css-prop,--background
 ion-modal,css-prop,--border-color
 ion-modal,css-prop,--border-radius
@@ -707,7 +711,7 @@ ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | und

 ion-nav,shadow
 ion-nav,prop,animated,boolean,true,false,false
-ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-nav,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false,false
 ion-nav,prop,swipeGesture,boolean | undefined,undefined,false,false
@@ -732,6 +736,16 @@ ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | str
 ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false

+ion-nav-pop,none
+
+ion-nav-push,none
+ion-nav-push,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
+ion-nav-push,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+
+ion-nav-set-root,none
+ion-nav-set-root,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
+ion-nav-set-root,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+
 ion-note,shadow
 ion-note,prop,color,string | undefined,undefined,false,false
 ion-note,prop,mode,"ios" | "md",undefined,false,false
@@ -744,9 +758,9 @@ ion-picker,prop,buttons,PickerButton[],[],false,false
 ion-picker,prop,columns,PickerColumn[],[],false,false
 ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-picker,prop,duration,number,0,false,false
-ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-picker,prop,keyboardClose,boolean,true,false,false
-ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-picker,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
 ion-picker,prop,showBackdrop,boolean,true,false,false
 ion-picker,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
@@ -758,7 +772,6 @@ ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerDidPresent,void,true
 ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerWillPresent,void,true
-ion-picker,css-prop,--backdrop-opacity
 ion-picker,css-prop,--background
 ion-picker,css-prop,--background-rgb
 ion-picker,css-prop,--border-color
@@ -783,10 +796,10 @@ ion-popover,prop,backdropDismiss,boolean,true,false,false
 ion-popover,prop,component,Function | HTMLElement | null | string,undefined,true,false
 ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-popover,prop,cssClass,string | string[] | undefined,undefined,false,false
-ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-popover,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-popover,prop,event,any,undefined,false,false
 ion-popover,prop,keyboardClose,boolean,true,false,false
-ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-popover,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-popover,prop,mode,"ios" | "md",undefined,false,false
 ion-popover,prop,showBackdrop,boolean,true,false,false
 ion-popover,prop,translucent,boolean,false,false,false
@@ -798,7 +811,6 @@ ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail<any>,true
 ion-popover,event,ionPopoverDidPresent,void,true
 ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail<any>,true
 ion-popover,event,ionPopoverWillPresent,void,true
-ion-popover,css-prop,--backdrop-opacity
 ion-popover,css-prop,--background
 ion-popover,css-prop,--box-shadow
 ion-popover,css-prop,--height
@@ -933,7 +945,7 @@ ion-router-link,css-prop,--color

 ion-router-outlet,shadow
 ion-router-outlet,prop,animated,boolean,true,false,false
-ion-router-outlet,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false

 ion-row,shadow
@@ -942,7 +954,7 @@ ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
-ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'md-arrow-back') as string,false,false
+ion-searchbar,prop,cancelButtonIcon,string,'md-arrow-back',false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
 ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,color,string | undefined,undefined,false,false
@@ -952,7 +964,7 @@ ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search"
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
 ion-searchbar,prop,searchIcon,string,'search',false,false
-ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
+ion-searchbar,prop,showCancelButton,boolean | string,'never',false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
@@ -965,7 +977,6 @@ ion-searchbar,event,ionClear,void,true
 ion-searchbar,event,ionFocus,void,true
 ion-searchbar,event,ionInput,KeyboardEvent,true
 ion-searchbar,css-prop,--background
-ion-searchbar,css-prop,--box-shadow
 ion-searchbar,css-prop,--cancel-button-color
 ion-searchbar,css-prop,--clear-button-color
 ion-searchbar,css-prop,--color
@@ -1038,8 +1049,6 @@ ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start
 ion-select,css-prop,--padding-top
-ion-select,css-prop,--placeholder-color
-ion-select,css-prop,--placeholder-opacity

 ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
@@ -1048,6 +1057,7 @@ ion-select-option,prop,value,any,undefined,false,false

 ion-skeleton-text,shadow
 ion-skeleton-text,prop,animated,boolean,false,false,false
+ion-skeleton-text,prop,width,string | undefined,undefined,false,false
 ion-skeleton-text,css-prop,--background
 ion-skeleton-text,css-prop,--background-rgb
 ion-skeleton-text,css-prop,--border-radius
@@ -1093,10 +1103,6 @@ ion-slides,event,ionSlideTransitionStart,void,true
 ion-slides,event,ionSlideWillChange,void,true
 ion-slides,css-prop,--bullet-background
 ion-slides,css-prop,--bullet-background-active
-ion-slides,css-prop,--progress-bar-background
-ion-slides,css-prop,--progress-bar-background-active
-ion-slides,css-prop,--scroll-bar-background
-ion-slides,css-prop,--scroll-bar-background-active

 ion-spinner,shadow
 ion-spinner,prop,color,string | undefined,undefined,false,false
@@ -1105,15 +1111,12 @@ ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" |
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,css-prop,--color

-ion-split-pane,shadow
+ion-split-pane,none
 ion-split-pane,prop,contentId,string | undefined,undefined,false,false
 ion-split-pane,prop,disabled,boolean,false,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
 ion-split-pane,css-prop,--border
-ion-split-pane,css-prop,--side-max-width
-ion-split-pane,css-prop,--side-min-width
-ion-split-pane,css-prop,--side-width

 ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
@@ -1210,16 +1213,18 @@ ion-title,css-prop,--color
 ion-toast,shadow
 ion-toast,prop,animated,boolean,true,false,false
 ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
+ion-toast,prop,closeButtonText,string | undefined,undefined,false,false
 ion-toast,prop,color,string | undefined,undefined,false,false
 ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-toast,prop,duration,number,0,false,false
-ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-toast,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-toast,prop,header,string | undefined,undefined,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false
-ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
+ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-toast,prop,message,string | undefined,undefined,false,false
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
+ion-toast,prop,showCloseButton,boolean,false,false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
 ion-toast,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "5.0.0-beta.0",
+  "version": "4.11.13",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -34,27 +34,27 @@
    "tslib": "^1.10.0"
  },
  "devDependencies": {
-    "@stencil/core": "1.7.5",
+    "@stencil/core": "1.6.1",
    "@stencil/sass": "1.0.1",
-    "@types/jest": "24.0.21",
-    "@types/node": "12.12.3",
+    "@types/jest": "^26.0.10",
+    "@types/node": "12.7.1",
    "@types/puppeteer": "1.19.1",
    "@types/swiper": "4.4.4",
-    "aws-sdk": "^2.497.0",
+    "aws-sdk": "^2.743.0",
    "clean-css-cli": "^4.1.11",
    "domino": "^2.1.3",
    "fs-extra": "^8.0.1",
-    "jest": "24.9.0",
-    "jest-cli": "24.9.0",
-    "np": "^5.0.3",
+    "jest": "^26.4.2",
+    "jest-cli": "^26.4.2",
+    "np": "^6.5.0",
    "pixelmatch": "4.0.2",
    "puppeteer": "1.20.0",
    "rollup": "1.19.4",
    "rollup-plugin-node-resolve": "5.2.0",
    "rollup-plugin-virtual": "^1.0.1",
    "sass": "^1.22.9",
-    "stylelint": "10.1.0",
-    "stylelint-order": "3.0.1",
+    "stylelint": "^13.7.0",
+    "stylelint-order": "^4.1.0",
    "swiper": "4.5.1",
    "tslint": "^5.10.0",
    "tslint-ionic-rules": "0.0.21",
@@ -66,6 +66,7 @@
    "build.css": "npm run css.sass && npm run css.minify",
    "build.debug": "npm run clean && stencil build --debug",
    "build.docs.json": "stencil build --docs-json dist/docs.json",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
    "clean": "node scripts/clean.js",
    "cdnloader": "node scripts/copy-cdn-loader.js",
    "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
@@ -80,9 +81,9 @@
    "prerender.e2e": "node scripts/testing/prerender.js",
    "start": "npm run build.css && stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e --max-workers=2",
-    "test.spec": "stencil test --spec --max-workers=2",
+    "test.spec": "stencil test --spec",
    "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
-    "test.e2e": "stencil test --e2e --max-workers=2",
+    "test.e2e": "stencil test --e2e",
    "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",
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1,4 +1,3 @@
-/* eslint-disable */
 /* tslint:disable */
 /**
 * This is an autogenerated file created by the Stencil compiler.
@@ -26,11 +25,13 @@ import {
  HeaderFn,
  HeaderHeightFn,
  InputChangeEventDetail,
+  IonicAnimation,
  ItemHeightFn,
  ItemRenderFn,
  ItemReorderEventDetail,
  LoadingOptions,
  MenuChangeEventDetail,
+  MenuI,
  ModalOptions,
  NavComponent,
  NavOptions,
@@ -252,6 +253,24 @@ export namespace Components {
    */
    'getTop': () => Promise<HTMLIonAlertElement | undefined>;
  }
+  interface IonAnchor {
+    /**
+    * 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;
+    /**
+    * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
+    */
+    'href': string | undefined;
+    /**
+    * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+    */
+    'rel': string | undefined;
+    /**
+    * When using a router, it specifies the transition direction when navigating to another page using `href`.
+    */
+    'routerDirection': RouterDirection;
+  }
  interface IonApp {}
  interface IonAvatar {}
  interface IonBackButton {
@@ -1415,7 +1434,7 @@ export namespace Components {
    * @param name The name of the animation to register.
    * @param animation The animation function to register.
    */
-    'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
+    'registerAnimation': (name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => Promise<void>;
    /**
    * Enable or disable the ability to swipe open the menu.
    * @param enable If `true`, the menu swipe gesture should be enabled.
@@ -1643,6 +1662,27 @@ export namespace Components {
    */
    'routerDirection': RouterDirection;
  }
+  interface IonNavPop {}
+  interface IonNavPush {
+    /**
+    * Component to navigate to
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props
+    */
+    'componentProps'?: ComponentProps;
+  }
+  interface IonNavSetRoot {
+    /**
+    * Component you want to make root for the navigation stack
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props
+    */
+    'componentProps'?: ComponentProps;
+  }
  interface IonNote {
    /**
    * 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).
@@ -2187,7 +2227,7 @@ export namespace Components {
    /**
    * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
    */
-    'showCancelButton': 'never' | 'focus' | 'always';
+    'showCancelButton': boolean | string;
    /**
    * If `true`, enable spellcheck on the input.
    */
@@ -2341,6 +2381,10 @@ export namespace Components {
    * If `true`, the skeleton text will animate.
    */
    'animated': boolean;
+    /**
+    * @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.
+    */
+    'width'?: string;
  }
  interface IonSlide {}
  interface IonSlides {
@@ -2456,7 +2500,7 @@ export namespace Components {
  }
  interface IonSplitPane {
    /**
-    * The content `id` of the split-pane's main content.
+    * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
    */
    'contentId'?: string;
    /**
@@ -2676,6 +2720,10 @@ export namespace Components {
    */
    'buttons'?: (ToastButton | string)[];
    /**
+    * @deprecated Use `buttons` instead. Text to display in the close button.
+    */
+    'closeButtonText'?: string;
+    /**
    * 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;
@@ -2735,6 +2783,10 @@ export namespace Components {
    */
    'present': () => Promise<void>;
    /**
+    * @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
+    */
+    'showCloseButton': boolean;
+    /**
    * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    */
    'translucent': boolean;
@@ -2889,6 +2941,12 @@ declare global {
    new (): HTMLIonAlertControllerElement;
  };

+  interface HTMLIonAnchorElement extends Components.IonAnchor, HTMLStencilElement {}
+  var HTMLIonAnchorElement: {
+    prototype: HTMLIonAnchorElement;
+    new (): HTMLIonAnchorElement;
+  };
+
  interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {}
  var HTMLIonAppElement: {
    prototype: HTMLIonAppElement;
@@ -3165,6 +3223,24 @@ declare global {
    new (): HTMLIonNavLinkElement;
  };

+  interface HTMLIonNavPopElement extends Components.IonNavPop, HTMLStencilElement {}
+  var HTMLIonNavPopElement: {
+    prototype: HTMLIonNavPopElement;
+    new (): HTMLIonNavPopElement;
+  };
+
+  interface HTMLIonNavPushElement extends Components.IonNavPush, HTMLStencilElement {}
+  var HTMLIonNavPushElement: {
+    prototype: HTMLIonNavPushElement;
+    new (): HTMLIonNavPushElement;
+  };
+
+  interface HTMLIonNavSetRootElement extends Components.IonNavSetRoot, HTMLStencilElement {}
+  var HTMLIonNavSetRootElement: {
+    prototype: HTMLIonNavSetRootElement;
+    new (): HTMLIonNavSetRootElement;
+  };
+
  interface HTMLIonNoteElement extends Components.IonNote, HTMLStencilElement {}
  var HTMLIonNoteElement: {
    prototype: HTMLIonNoteElement;
@@ -3439,6 +3515,7 @@ declare global {
    'ion-action-sheet-controller': HTMLIonActionSheetControllerElement;
    'ion-alert': HTMLIonAlertElement;
    'ion-alert-controller': HTMLIonAlertControllerElement;
+    'ion-anchor': HTMLIonAnchorElement;
    'ion-app': HTMLIonAppElement;
    'ion-avatar': HTMLIonAvatarElement;
    'ion-back-button': HTMLIonBackButtonElement;
@@ -3485,6 +3562,9 @@ declare global {
    'ion-modal-controller': HTMLIonModalControllerElement;
    'ion-nav': HTMLIonNavElement;
    'ion-nav-link': HTMLIonNavLinkElement;
+    'ion-nav-pop': HTMLIonNavPopElement;
+    'ion-nav-push': HTMLIonNavPushElement;
+    'ion-nav-set-root': HTMLIonNavSetRootElement;
    'ion-note': HTMLIonNoteElement;
    'ion-picker': HTMLIonPickerElement;
    'ion-picker-column': HTMLIonPickerColumnElement;
@@ -3668,6 +3748,24 @@ declare namespace LocalJSX {
    'translucent'?: boolean;
  }
  interface IonAlertController {}
+  interface IonAnchor {
+    /**
+    * 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;
+    /**
+    * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
+    */
+    'href'?: string | undefined;
+    /**
+    * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+    */
+    'rel'?: string | undefined;
+    /**
+    * When using a router, it specifies the transition direction when navigating to another page using `href`.
+    */
+    'routerDirection'?: RouterDirection;
+  }
  interface IonApp {}
  interface IonAvatar {}
  interface IonBackButton {
@@ -4894,6 +4992,27 @@ declare namespace LocalJSX {
    */
    'routerDirection'?: RouterDirection;
  }
+  interface IonNavPop {}
+  interface IonNavPush {
+    /**
+    * Component to navigate to
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props
+    */
+    'componentProps'?: ComponentProps;
+  }
+  interface IonNavSetRoot {
+    /**
+    * Component you want to make root for the navigation stack
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props
+    */
+    'componentProps'?: ComponentProps;
+  }
  interface IonNote {
    /**
    * 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).
@@ -5428,7 +5547,7 @@ declare namespace LocalJSX {
    /**
    * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
    */
-    'showCancelButton'?: 'never' | 'focus' | 'always';
+    'showCancelButton'?: boolean | string;
    /**
    * If `true`, enable spellcheck on the input.
    */
@@ -5601,6 +5720,10 @@ declare namespace LocalJSX {
    * If `true`, the skeleton text will animate.
    */
    'animated'?: boolean;
+    /**
+    * @deprecated Use CSS instead. The width of the skeleton text. If supplied, it will override the CSS style.
+    */
+    'width'?: string;
  }
  interface IonSlide {}
  interface IonSlides {
@@ -5705,7 +5828,7 @@ declare namespace LocalJSX {
  }
  interface IonSplitPane {
    /**
-    * The content `id` of the split-pane's main content.
+    * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
    */
    'contentId'?: string;
    /**
@@ -5922,6 +6045,10 @@ declare namespace LocalJSX {
    */
    'buttons'?: (ToastButton | string)[];
    /**
+    * @deprecated Use `buttons` instead. Text to display in the close button.
+    */
+    'closeButtonText'?: string;
+    /**
    * 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;
@@ -5978,6 +6105,10 @@ declare namespace LocalJSX {
    */
    'position'?: 'top' | 'bottom' | 'middle';
    /**
+    * @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
+    */
+    'showCloseButton'?: boolean;
+    /**
    * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    */
    'translucent'?: boolean;
@@ -6091,6 +6222,7 @@ declare namespace LocalJSX {
    'ion-action-sheet-controller': IonActionSheetController;
    'ion-alert': IonAlert;
    'ion-alert-controller': IonAlertController;
+    'ion-anchor': IonAnchor;
    'ion-app': IonApp;
    'ion-avatar': IonAvatar;
    'ion-back-button': IonBackButton;
@@ -6137,6 +6269,9 @@ declare namespace LocalJSX {
    'ion-modal-controller': IonModalController;
    'ion-nav': IonNav;
    'ion-nav-link': IonNavLink;
+    'ion-nav-pop': IonNavPop;
+    'ion-nav-push': IonNavPush;
+    'ion-nav-set-root': IonNavSetRoot;
    'ion-note': IonNote;
    'ion-picker': IonPicker;
    'ion-picker-column': IonPickerColumn;
@@ -6195,6 +6330,7 @@ declare module "@stencil/core" {
      'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes<HTMLIonActionSheetControllerElement>;
      'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
      'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes<HTMLIonAlertControllerElement>;
+      'ion-anchor': LocalJSX.IonAnchor & JSXBase.HTMLAttributes<HTMLIonAnchorElement>;
      'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
      'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
      'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
@@ -6241,6 +6377,9 @@ declare module "@stencil/core" {
      'ion-modal-controller': LocalJSX.IonModalController & JSXBase.HTMLAttributes<HTMLIonModalControllerElement>;
      'ion-nav': LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
      'ion-nav-link': LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
+      'ion-nav-pop': LocalJSX.IonNavPop & JSXBase.HTMLAttributes<HTMLIonNavPopElement>;
+      'ion-nav-push': LocalJSX.IonNavPush & JSXBase.HTMLAttributes<HTMLIonNavPushElement>;
+      'ion-nav-set-root': LocalJSX.IonNavSetRoot & JSXBase.HTMLAttributes<HTMLIonNavSetRootElement>;
      'ion-note': LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
      'ion-picker': LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
      'ion-picker-column': LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -8,7 +8,6 @@
  --background: #{$action-sheet-ios-background-color};
  --background-selected: #{$action-sheet-ios-button-background-selected};
  --background-activated: #{$action-sheet-ios-button-background-activated};
-  --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);

  text-align: $action-sheet-ios-text-align;
 }
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -8,7 +8,6 @@
  --background: #{$action-sheet-md-background-color};
  --background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
  --background-activated: var(--background);
-  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }

 .action-sheet-title {
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -18,8 +18,6 @@
   * @prop --min-height: Minimum height of the action sheet
   * @prop --height: height of the action sheet
   * @prop --max-height: Maximum height of the action sheet
-   *
-   * @prop --backdrop-opacity: Opacity of the backdrop
   */
  --color: initial;
  --min-width: auto;
--- a/core/src/components/action-sheet/animations/ios.enter.ts
+++ b/core/src/components/action-sheet/animations/ios.enter.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * iOS Action Sheet Enter Animation
 */
-export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
+export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 0.4);

  wrapperAnimation
    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
--- a/core/src/components/action-sheet/animations/ios.leave.ts
+++ b/core/src/components/action-sheet/animations/ios.leave.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * iOS Action Sheet Leave Animation
 */
-export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
+export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    .fromTo('opacity', 0.4, 0);

  wrapperAnimation
    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
--- a/core/src/components/action-sheet/animations/md.enter.ts
+++ b/core/src/components/action-sheet/animations/md.enter.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * MD Action Sheet Enter Animation
 */
-export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
+export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 0.32);

  wrapperAnimation
    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
--- a/core/src/components/action-sheet/animations/md.leave.ts
+++ b/core/src/components/action-sheet/animations/md.leave.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * MD Action Sheet Leave Animation
 */
-export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
+export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    .fromTo('opacity', 0.32, 0);

  wrapperAnimation
    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -249,19 +249,19 @@ export default {

 ## Properties

-| Property          | Attribute          | Description                                                                                                                                                                                                                 | Type                                                    | Default     |
-| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
-| `animated`        | `animated`         | If `true`, the action sheet will animate.                                                                                                                                                                                   | `boolean`                                               | `true`      |
-| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked.                                                                                                                                                 | `boolean`                                               | `true`      |
-| `buttons`         | --                 | An array of buttons for the action sheet.                                                                                                                                                                                   | `(string \| ActionSheetButton)[]`                       | `[]`        |
-| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                            | `string \| string[] \| undefined`                       | `undefined` |
-| `enterAnimation`  | --                 | Animation to use when the action sheet is presented.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
-| `header`          | `header`           | Title for the action sheet.                                                                                                                                                                                                 | `string \| undefined`                                   | `undefined` |
-| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                      | `boolean`                                               | `true`      |
-| `leaveAnimation`  | --                 | Animation to use when the action sheet is dismissed.                                                                                                                                                                        | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                           | `"ios" \| "md"`                                         | `undefined` |
-| `subHeader`       | `sub-header`       | Subtitle for the action sheet.                                                                                                                                                                                              | `string \| undefined`                                   | `undefined` |
-| `translucent`     | `translucent`      | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean`                                               | `false`     |
+| Property          | Attribute          | Description                                                                                                                                                                                                                 | Type                                                                                   | Default     |
+| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
+| `animated`        | `animated`         | If `true`, the action sheet will animate.                                                                                                                                                                                   | `boolean`                                                                              | `true`      |
+| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked.                                                                                                                                                 | `boolean`                                                                              | `true`      |
+| `buttons`         | --                 | An array of buttons for the action sheet.                                                                                                                                                                                   | `(string \| ActionSheetButton)[]`                                                      | `[]`        |
+| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                            | `string \| string[] \| undefined`                                                      | `undefined` |
+| `enterAnimation`  | --                 | Animation to use when the action sheet is presented.                                                                                                                                                                        | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `header`          | `header`           | Title for the action sheet.                                                                                                                                                                                                 | `string \| undefined`                                                                  | `undefined` |
+| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                      | `boolean`                                                                              | `true`      |
+| `leaveAnimation`  | --                 | Animation to use when the action sheet is dismissed.                                                                                                                                                                        | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                           | `"ios" \| "md"`                                                                        | `undefined` |
+| `subHeader`       | `sub-header`       | Subtitle for the action sheet.                                                                                                                                                                                              | `string \| undefined`                                                                  | `undefined` |
+| `translucent`     | `translucent`      | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean`                                                                              | `false`     |


 ## Events
@@ -321,7 +321,6 @@ Type: `Promise<void>`

 | Name                     | Description                                        |
 | ------------------------ | -------------------------------------------------- |
-| `--backdrop-opacity`     | Opacity of the backdrop                            |
 | `--background`           | Background of the action sheet group               |
 | `--background-activated` | Background of the action sheet button when pressed |
 | `--background-selected`  | Background of the selected action sheet button     |
--- a/core/src/components/action-sheet/test/basic/e2e.ts
+++ b/core/src/components/action-sheet/test/basic/e2e.ts
@@ -34,10 +34,6 @@ test('action-sheet: basic, scroll without cancel', async () => {
  await testActionSheet(DIRECTORY, '#scrollWithoutCancel');
 });

-test('action-sheet: basic, custom backdrop', async () => {
-  await testActionSheet(DIRECTORY, '#customBackdrop');
-});
-
 /**
 * RTL Tests
 */
@@ -73,7 +69,3 @@ test('action-sheet:rtl: basic, scrollable options', async () => {
 test('action-sheet:rtl: basic, scroll without cancel', async () => {
  await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
 });
-
-test('action-sheet:rtl: basic, custom backdrop', async () => {
-  await testActionSheet(DIRECTORY, '#customBackdrop', true);
-});
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -28,7 +28,6 @@
      <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
      <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
      <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
-      <ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">Custom Backdrop Opacity</ion-button>
    </ion-content>

  </ion-app>
@@ -50,10 +49,6 @@
      --height: 325px;
    }

-    .custom-backdrop {
-      --ion-backdrop-opacity: 1;
-    }
-
  </style>
  <script>
    window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
@@ -151,12 +146,10 @@
      await actionSheetElement.present();
    }

-    async function presentWithCssClass(classList) {
-      const addClass = classList ? classList : "my-color-class my-custom-class";
-
+    async function presentWithCssClass() {
      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
        header: "Custom Css Class",
-        cssClass: addClass,
+        cssClass: "my-color-class my-custom-class",
        buttons: [
          {
            text: 'Add to Favorites',
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -20,7 +20,7 @@ export interface AlertOptions {
 }

 export interface AlertInput {
-  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
+  type?: TextFieldTypes | 'checkbox' | 'radio';
  name?: string;
  placeholder?: string;
  value?: any;
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -7,7 +7,6 @@
 :host {
  --background: #{$alert-ios-background-color};
  --max-width: #{$alert-ios-max-width};
-  --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);

  font-size: $alert-ios-font-size;
 }
--- a/core/src/components/alert/alert.md.scss
+++ b/core/src/components/alert/alert.md.scss
@@ -7,7 +7,6 @@
 :host {
  --background: #{$alert-md-background-color};
  --max-width: #{$alert-md-max-width};
-  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);

  font-size: $alert-md-font-size;
 }
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -14,8 +14,6 @@
   * @prop --min-height: Minimum height of the alert
   * @prop --height: Height of the alert
   * @prop --max-height: Maximum height of the alert
-   *
-   * @prop --backdrop-opacity: Opacity of the backdrop
   */
  --min-width: #{$alert-min-width};
  --width: auto;
@@ -197,8 +195,3 @@
 .alert-checkbox-inner {
  box-sizing: border-box;
 }
-
-textarea.alert-input {
-  min-height: $alert-input-min-height;
-  resize: none;
-}
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -373,46 +373,25 @@ export class Alert implements ComponentInterface, OverlayInterface {
    }
    return (
      <div class="alert-input-group" aria-labelledby={labelledby}>
-        { inputs.map(i => {
-          if (i.type === 'textarea') {
-            return (
-              <div class="alert-input-wrapper">
-                <textarea
-                  placeholder={i.placeholder}
-                  value={i.value}
-                  onInput={e => i.value = (e.target as any).value}
-                  id={i.id}
-                  disabled={i.disabled}
-                  tabIndex={0}
-                  class={{
-                    'alert-input': true,
-                    'alert-input-disabled': i.disabled || false
-                  }}
-                />
-              </div>
-            );
-          } else {
-            return (
-              <div class="alert-input-wrapper">
-                <input
-                  placeholder={i.placeholder}
-                  value={i.value}
-                  type={i.type}
-                  min={i.min}
-                  max={i.max}
-                  onInput={e => i.value = (e.target as any).value}
-                  id={i.id}
-                  disabled={i.disabled}
-                  tabIndex={0}
-                  class={{
-                    'alert-input': true,
-                    'alert-input-disabled': i.disabled || false
-                  }}
-                />
-              </div>
-            );
-          }
-        })}
+        { inputs.map(i => (
+          <div class="alert-input-wrapper">
+            <input
+              placeholder={i.placeholder}
+              value={i.value}
+              type={i.type}
+              min={i.min}
+              max={i.max}
+              onInput={e => i.value = (e.target as any).value}
+              id={i.id}
+              disabled={i.disabled}
+              tabIndex={0}
+              class={{
+                'alert-input': true,
+                'alert-input-disabled': i.disabled || false
+              }}
+            />
+          </div>
+        ))}
      </div>
    );
  }
--- a/core/src/components/alert/alert.vars.scss
+++ b/core/src/components/alert/alert.vars.scss
@@ -14,6 +14,3 @@ $alert-button-line-height:        20px !default;

 /// @prop - Font size of the alert button
 $alert-button-font-size:          14px !default;
-
-/// @prop - Minimum height of a textarea in the alert
-$alert-input-min-height:          37px !default;
--- a/core/src/components/alert/animations/ios.enter.ts
+++ b/core/src/components/alert/animations/ios.enter.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * iOS Alert Enter Animation
 */
-export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
+export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 0.3);

  wrapperAnimation
    .addElement(baseEl.querySelector('.alert-wrapper')!)
--- a/core/src/components/alert/animations/ios.leave.ts
+++ b/core/src/components/alert/animations/ios.leave.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * iOS Alert Leave Animation
 */
-export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
+export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    .fromTo('opacity', 0.3, 0);

  wrapperAnimation
    .addElement(baseEl.querySelector('.alert-wrapper')!)
--- a/core/src/components/alert/animations/md.enter.ts
+++ b/core/src/components/alert/animations/md.enter.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * Md Alert Enter Animation
 */
-export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
+export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 0.32);

  wrapperAnimation
    .addElement(baseEl.querySelector('.alert-wrapper')!)
--- a/core/src/components/alert/animations/md.leave.ts
+++ b/core/src/components/alert/animations/md.leave.ts
@@ -1,17 +1,17 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

 /**
 * Md Alert Leave Animation
 */
-export const mdLeaveAnimation = (baseEl: HTMLElement): Animation => {
+export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
  const baseAnimation = createAnimation();
  const backdropAnimation = createAnimation();
  const wrapperAnimation = createAnimation();

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    .fromTo('opacity', 0.32, 0);

  wrapperAnimation
    .addElement(baseEl.querySelector('.alert-wrapper')!)
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -17,7 +17,7 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a `

 ### Inputs

-Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.


 <!-- Auto Generated Below -->
@@ -102,13 +102,6 @@ export class AlertExample {
          value: 'hello',
          placeholder: 'Placeholder 2'
        },
-        // multiline input.
-        {
-          name: 'paragraph',
-          id: 'paragraph',
-          type: 'textarea',
-          placeholder: 'Placeholder 3'
-        },
        {
          name: 'name3',
          value: 'http://ionicframework.com',
@@ -353,13 +346,6 @@ function presentAlertPrompt() {
      value: 'hello',
      placeholder: 'Placeholder 2'
    },
-    // multiline input.
-    {
-      name: 'paragraph',
-      id: 'paragraph',
-      type: 'textarea',
-      placeholder: 'Placeholder 3'
-    },
    {
      name: 'name3',
      value: 'http://ionicframework.com',
@@ -1039,21 +1025,21 @@ export default {

 ## Properties

-| Property          | Attribute          | Description                                                                                                                                                                                                                                                                                                                        | Type                                                    | Default     |
-| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
-| `animated`        | `animated`         | If `true`, the alert will animate.                                                                                                                                                                                                                                                                                                 | `boolean`                                               | `true`      |
-| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked.                                                                                                                                                                                                                                                               | `boolean`                                               | `true`      |
-| `buttons`         | --                 | Array of buttons to be added to the alert.                                                                                                                                                                                                                                                                                         | `(string \| AlertButton)[]`                             | `[]`        |
-| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                                                                                                                                   | `string \| string[] \| undefined`                       | `undefined` |
-| `enterAnimation`  | --                 | Animation to use when the alert is presented.                                                                                                                                                                                                                                                                                      | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
-| `header`          | `header`           | The main title in the heading of the alert.                                                                                                                                                                                                                                                                                        | `string \| undefined`                                   | `undefined` |
-| `inputs`          | --                 | Array of input to show in the alert.                                                                                                                                                                                                                                                                                               | `AlertInput[]`                                          | `[]`        |
-| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                                                                                                                             | `boolean`                                               | `true`      |
-| `leaveAnimation`  | --                 | Animation to use when the alert is dismissed.                                                                                                                                                                                                                                                                                      | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
-| `message`         | `message`          | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined`                                   | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                  | `"ios" \| "md"`                                         | `undefined` |
-| `subHeader`       | `sub-header`       | The subtitle in the heading of the alert. Displayed under the title.                                                                                                                                                                                                                                                               | `string \| undefined`                                   | `undefined` |
-| `translucent`     | `translucent`      | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).                                                                                                               | `boolean`                                               | `false`     |
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                                                                                        | Type                                                                                   | Default     |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
+| `animated`        | `animated`         | If `true`, the alert will animate.                                                                                                                                                                                                                                                                                                 | `boolean`                                                                              | `true`      |
+| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked.                                                                                                                                                                                                                                                               | `boolean`                                                                              | `true`      |
+| `buttons`         | --                 | Array of buttons to be added to the alert.                                                                                                                                                                                                                                                                                         | `(string \| AlertButton)[]`                                                            | `[]`        |
+| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                                                                                                                                                                                                                   | `string \| string[] \| undefined`                                                      | `undefined` |
+| `enterAnimation`  | --                 | Animation to use when the alert is presented.                                                                                                                                                                                                                                                                                      | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `header`          | `header`           | The main title in the heading of the alert.                                                                                                                                                                                                                                                                                        | `string \| undefined`                                                                  | `undefined` |
+| `inputs`          | --                 | Array of input to show in the alert.                                                                                                                                                                                                                                                                                               | `AlertInput[]`                                                                         | `[]`        |
+| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                                                                                                                                                                                                                             | `boolean`                                                                              | `true`      |
+| `leaveAnimation`  | --                 | Animation to use when the alert is dismissed.                                                                                                                                                                                                                                                                                      | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `message`         | `message`          | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined`                                                                  | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                  | `"ios" \| "md"`                                                                        | `undefined` |
+| `subHeader`       | `sub-header`       | The subtitle in the heading of the alert. Displayed under the title.                                                                                                                                                                                                                                                               | `string \| undefined`                                                                  | `undefined` |
+| `translucent`     | `translucent`      | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).                                                                                                               | `boolean`                                                                              | `false`     |


 ## Events
@@ -1111,16 +1097,15 @@ Type: `Promise<void>`

 ## CSS Custom Properties

-| Name                 | Description                 |
-| -------------------- | --------------------------- |
-| `--backdrop-opacity` | Opacity of the backdrop     |
-| `--background`       | Background of the alert     |
-| `--height`           | Height of the alert         |
-| `--max-height`       | Maximum height of the alert |
-| `--max-width`        | Maximum width of the alert  |
-| `--min-height`       | Minimum height of the alert |
-| `--min-width`        | Minimum width of the alert  |
-| `--width`            | Width of the alert          |
+| Name           | Description                 |
+| -------------- | --------------------------- |
+| `--background` | Background of the alert     |
+| `--height`     | Height of the alert         |
+| `--max-height` | Maximum height of the alert |
+| `--max-width`  | Maximum width of the alert  |
+| `--min-height` | Minimum height of the alert |
+| `--min-width`  | Minimum width of the alert  |
+| `--width`      | Width of the alert          |


 ## Dependencies
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -131,11 +131,6 @@
            placeholder: 'Placeholder 3',
            disabled: true
          },
-          {
-              type: 'textarea',
-              placeholder: 'Placeholder 4',
-              value: 'Textarea hello'
-          },
          {
            name: 'name3',
            type: 'text',
--- a/core/src/components/alert/test/preview/index.html
+++ b/core/src/components/alert/test/preview/index.html
--- a/core/src/components/alert/usage/angular.md
+++ b/core/src/components/alert/usage/angular.md
@@ -73,13 +73,6 @@ export class AlertExample {
          value: 'hello',
          placeholder: 'Placeholder 2'
        },
-        // multiline input.
-        {
-          name: 'paragraph',
-          id: 'paragraph',
-          type: 'textarea',
-          placeholder: 'Placeholder 3'
-        },
        {
          name: 'name3',
          value: 'http://ionicframework.com',
--- a/core/src/components/alert/usage/javascript.md
+++ b/core/src/components/alert/usage/javascript.md
@@ -58,13 +58,6 @@ function presentAlertPrompt() {
      value: 'hello',
      placeholder: 'Placeholder 2'
    },
-    // multiline input.
-    {
-      name: 'paragraph',
-      id: 'paragraph',
-      type: 'textarea',
-      placeholder: 'Placeholder 3'
-    },
    {
      name: 'name3',
      value: 'http://ionicframework.com',
--- a/core/src/components/anchor/anchor.scss
+++ b/core/src/components/anchor/anchor.scss
@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals";
+
+// Anchor
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --background: Background of the anchor
+   * @prop --color: Text color of the anchor
+   */
+  --background: transparent;
+  --color: #{ion-color(primary, base)};
+
+  background: var(--background);
+  color: var(--color);
+}
+
+:host(.ion-color) {
+  color: current-color(base);
+}
+
+a {
+  @include text-inherit();
+}
--- a/core/src/components/anchor/anchor.tsx
+++ b/core/src/components/anchor/anchor.tsx
@@ -0,0 +1,71 @@
+import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
+
+import { getIonMode } from '../../global/ionic-global';
+import { Color, RouterDirection } from '../../interface';
+import { createColorClasses, openURL } from '../../utils/theme';
+
+/**
+ * @deprecated Use `ion-router-link` instead.
+ */
+@Component({
+  tag: 'ion-anchor',
+  styleUrl: 'anchor.scss',
+  shadow: true
+})
+export class Anchor implements ComponentInterface {
+
+  /**
+   * 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).
+   */
+  @Prop() color?: Color;
+
+  /**
+   * Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
+  @Prop() href: string | undefined;
+
+  /**
+   * Specifies the relationship of the target object to the link object.
+   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+   */
+  @Prop() rel: string | undefined;
+
+  /**
+   * When using a router, it specifies the transition direction when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerDirection: RouterDirection = 'forward';
+
+  componentDidLoad() {
+    console.warn('[DEPRECATED][ion-anchor] The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
+  }
+
+  private onClick = (ev: Event) => {
+    openURL(this.href, ev, this.routerDirection);
+  }
+
+  render() {
+    const mode = getIonMode(this);
+    const attrs = {
+      href: this.href,
+      rel: this.rel
+    };
+    return (
+      <Host
+        onClick={this.onClick}
+        class={{
+          ...createColorClasses(this.color),
+          [mode]: true,
+          'ion-activatable': true
+        }}
+      >
+        <a {...attrs}>
+          <slot></slot>
+        </a>
+      </Host>
+    );
+  }
+}
--- a/core/src/components/anchor/readme.md
+++ b/core/src/components/anchor/readme.md
@@ -0,0 +1,28 @@
+# ion-anchor
+
+<!-- Auto Generated Below -->
+
+
+> **[DEPRECATED]** Use `ion-router-link` instead.
+
+## Properties
+
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type                            | Default     |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
+| `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`           | `undefined` |
+| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string \| undefined`           | `undefined` |
+| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                 | `string \| undefined`           | `undefined` |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                               | `"back" \| "forward" \| "root"` | `'forward'` |
+
+
+## CSS Custom Properties
+
+| Name           | Description              |
+| -------------- | ------------------------ |
+| `--background` | Background of the anchor |
+| `--color`      | Text color of the anchor |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
--- a/core/src/components/anchor/test/basic/index.html
+++ b/core/src/components/anchor/test/basic/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Anchor - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Anchor - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <p>
+        <a href="#">A</a>
+      </p>
+
+      <p>
+        <ion-anchor href="#">Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor href="https://ionicframework.com" rel="external" style="text-decoration: underline">Underline Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor href="#" download="yes" class="custom">Custom Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor color="dark" href="#">Dark Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor color="danger" href="#">Danger Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor id="toggleColor" color="tertiary" href="#">Dynamic Color</ion-anchor>
+      </p>
+
+      <ion-button onclick="toggleColor()">Toggle Color</ion-button>
+    </ion-content>
+
+
+  </ion-app>
+
+  <script>
+    const el = document.querySelector('#toggleColor');
+
+    function toggleColor() {
+      const prev = el.getAttribute('color');
+      el.setAttribute('color', prev === 'secondary' ? 'tertiary' : 'secondary');
+      el.innerHTML = prev === 'secondary' ? 'Tertiary Anchor' : 'Secondary Anchor';
+    }
+  </script>
+
+  <style>
+    .custom {
+      font-family: cursive;
+      font-size: 24px;
+      font-weight: bold;
+      letter-spacing: 5px;
+      text-decoration: dotted underline;
+      text-transform: uppercase;
+      color: magenta;
+    }
+  </style>
+</body>
+
+</html>
--- a/core/src/components/anchor/test/standalone/index.html
+++ b/core/src/components/anchor/test/standalone/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Anchor - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/core.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body class="ion-padding">
+  <h1>Default</h1>
+  <ion-anchor href="#">Anchor</ion-anchor>
+
+  <h1>Colors</h1>
+  <ion-anchor href="#" color="primary">Primary Anchor</ion-anchor>
+  <ion-anchor href="#" color="secondary">Secondary Anchor</ion-anchor>
+  <ion-anchor href="#" color="tertiary">Tertiary Anchor</ion-anchor>
+  <ion-anchor href="#" color="success">Success Anchor</ion-anchor>
+  <ion-anchor href="#" color="warning">Warning Anchor</ion-anchor>
+  <ion-anchor href="#" color="danger">Danger Anchor</ion-anchor>
+  <ion-anchor href="#" color="light">Light Anchor</ion-anchor>
+  <ion-anchor href="#" color="medium">Medium Anchor</ion-anchor>
+  <ion-anchor href="#" color="dark">Dark Anchor</ion-anchor>
+
+  <h1>Custom</h1>
+  <ion-anchor href="#" style="text-decoration: underline">Underline Anchor</ion-anchor>
+  <ion-anchor href="#" class="cursive">Cursive Anchor</ion-anchor>
+  <ion-anchor href="#" class="custom">Custom Anchor</ion-anchor>
+  <ion-anchor href="#" color="secondary" class="custom">Custom Secondary Anchor</ion-anchor>
+
+  <style>
+    ion-anchor {
+      display: block;
+      --color: blue;
+    }
+
+    .cursive {
+      font-family: cursive;
+      font-size: 24px;
+      font-weight: bold;
+      letter-spacing: 5px;
+      text-decoration: dotted underline;
+      text-transform: uppercase;
+      color: magenta;
+    }
+
+    .custom {
+      --background: blue;
+      --color: white;
+    }
+  </style>
+</body>
+
+</html>
--- a/core/src/components/app/test/safe-area/index.html
+++ b/core/src/components/app/test/safe-area/index.html
@@ -59,9 +59,7 @@
    async function showToast() {
      const toast = Object.assign(document.createElement('ion-toast'), {
        message: 'Hello world!',
-        buttons: [
-          { text: 'Close', role: 'close' }
-        ]
+        showCloseButton: true
      });
      document.body.appendChild(toast);
      await toast.present();
--- a/core/src/components/back-button/test/host-element/index.html
+++ b/core/src/components/back-button/test/host-element/index.html
@@ -24,9 +24,9 @@
            </ion-header>
            <ion-content class="ion-padding">
              <h1>Page One</h1>
-              <ion-nav-link router-direction="forward" component="page-two">
+              <ion-nav-push component="page-two">
                <ion-button class="next">Go to Page Two</ion-button>
-              </ion-nav-link>
+              </ion-nav-push>
            </ion-content>
        `;
      }
@@ -47,9 +47,9 @@
            <ion-content class="ion-padding">
              <h1>Page Two</h1>
              <div>
-                <ion-nav-link router-direction="forward" component="page-three">
+                <ion-nav-push component="page-three">
                  <ion-button class="next">Go to Page Three</ion-button>
-                </ion-nav-link>
+                </ion-nav-push>
              </div>
            </ion-content>
        `;
@@ -71,9 +71,9 @@
            <ion-content class="ion-padding">
              <h1>Page Three</h1>
              <div>
-                <ion-nav-link router-direction="forward" component="page-four">
+                <ion-nav-push component="page-four">
                  <ion-button class="next">Go to Page Four</ion-button>
-                </ion-nav-link>
+                </ion-nav-push>
              </div>
            </ion-content>
        `;
--- a/core/src/components/card-header/card-header.scss
+++ b/core/src/components/card-header/card-header.scss
@@ -4,9 +4,6 @@
 // --------------------------------------------------

 :host {
-  --background: transparent;
-  --color: inherit;
-
  display: block;
  position: relative;

@@ -18,3 +15,8 @@
  background: current-color(base);
  color: current-color(contrast);
 }
+
+:host(.ion-color) ::slotted(ion-card-title),
+:host(.ion-color) ::slotted(ion-card-subtitle) {
+  color: currentColor;
+}
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -37,7 +37,6 @@ export class CardHeader implements ComponentInterface {
        class={{
          ...createColorClasses(this.color),
          'card-header-translucent': this.translucent,
-          'ion-inherit-color': true,
          [mode]: true
        }}
      >
--- a/core/src/components/card-header/test/basic/index.html
+++ b/core/src/components/card-header/test/basic/index.html
@@ -46,17 +46,7 @@
          <ion-card-title>Card Title</ion-card-title>
        </ion-card-header>
        <ion-card-content>
-          Custom background, color=secondary on ion-card-header
-        </ion-card-content>
-      </ion-card>
-
-      <ion-card color="danger">
-        <ion-card-header>
-          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-          <ion-card-title>Card Title</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          color=danger on ion-card-header
+          This is Card Content
        </ion-card-content>
      </ion-card>

@@ -77,10 +67,6 @@
      --color: hotpink;
    }

-    body {
-      --ion-item-background: #1a1b1e;
-    }
-
  </style>
 </body>

--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -31,8 +31,7 @@ export class CardSubtitle implements ComponentInterface {
        aria-level="3"
        class={{
          ...createColorClasses(this.color),
-          'ion-inherit-color': true,
-          [mode]: true
+          [mode]: true,
        }}
      >
        <slot></slot>
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -31,7 +31,6 @@ export class CardTitle implements ComponentInterface {
        aria-level="2"
        class={{
          ...createColorClasses(this.color),
-          'ion-inherit-color': true,
          [mode]: true
        }}
      >
--- a/core/src/components/card/card.ios.scss
+++ b/core/src/components/card/card.ios.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------

 :host {
-  --background: #{$item-ios-background};
+  --background: var(--ion-item-background, transparent);
  --color: #{$card-ios-text-color};

  @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
--- a/core/src/components/card/card.md.scss
+++ b/core/src/components/card/card.md.scss
@@ -5,7 +5,7 @@
 // --------------------------------------------------

 :host {
-  --background: #{$item-md-background};
+  --background: var(--ion-item-background, transparent);
  --color: #{$card-md-text-color};

  @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
--- a/core/src/components/card/card.scss
+++ b/core/src/components/card/card.scss
@@ -24,7 +24,6 @@
  overflow: hidden;
 }

-
 // Card Colors
 // ---------------------------------------------

@@ -33,6 +32,25 @@
  color: current-color(contrast);
 }

+:host(.ion-color)::slotted(*) ion-card-header,
+:host(.ion-color)::slotted(*) ion-card-title,
+:host(.ion-color)::slotted(*) ion-card-subtitle {
+  color: current-color(contrast);
+}
+
+// Slotted Content
+// ---------------------------------------------
+
+::slotted(*) img {
+  display: block;
+
+  width: 100%;
+}
+
+::slotted(*) ion-list {
+  @include margin(0);
+}
+

 // Disabled Card
 // --------------------------------------------------
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -14,7 +14,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
    ios: 'card.ios.scss',
    md: 'card.md.scss'
  },
-  shadow: true
+  scoped: true
 })
 export class Card implements ComponentInterface, AnchorInterface, ButtonInterface {

--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.scss
@@ -64,7 +64,6 @@
 }

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

  background: transparent;
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -122,9 +122,9 @@
 .transition-effect {
  position: absolute;

-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
  left: -100%;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */

  width: 100%;
  height: 100%;
@@ -137,9 +137,9 @@
 .transition-cover {
  position: absolute;

-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
  right: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */

  width: 100%;
  height: 100%;
@@ -153,9 +153,9 @@
  display: block;
  position: absolute;

-  /* stylelint-disable property-blacklist */
+  /* stylelint-disable property-disallowed-list */
  right: 0;
-  /* stylelint-enable property-blacklist */
+  /* stylelint-enable property-disallowed-list */

  width: 10px;
  height: 100%;
@@ -164,11 +164,3 @@
  background-repeat: repeat-y;
  background-size: 10px 16px;
 }
-
-
-// Content: Fixed
-// --------------------------------------------------
-
-::slotted([slot="fixed"]) {
-  position: absolute;
-}
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -36,14 +36,14 @@ export class Content implements ComponentInterface {
    event: undefined!,
    startX: 0,
    startY: 0,
-    startTime: 0,
+    startTimeStamp: 0,
    currentX: 0,
    currentY: 0,
    velocityX: 0,
    velocityY: 0,
    deltaX: 0,
    deltaY: 0,
-    currentTime: 0,
+    timeStamp: 0,
    data: undefined,
    isScrolling: true,
  };
@@ -379,19 +379,19 @@ const updateScrollDetail = (
 ) => {
  const prevX = detail.currentX;
  const prevY = detail.currentY;
-  const prevT = detail.currentTime;
+  const prevT = detail.timeStamp;
  const currentX = el.scrollLeft;
  const currentY = el.scrollTop;
  const timeDelta = timestamp - prevT;

  if (shouldStart) {
    // remember the start positions
-    detail.startTime = timestamp;
+    detail.startTimeStamp = timestamp;
    detail.startX = currentX;
    detail.startY = currentY;
    detail.velocityX = detail.velocityY = 0;
  }
-  detail.currentTime = timestamp;
+  detail.timeStamp = timestamp;
  detail.currentX = detail.scrollLeft = currentX;
  detail.currentY = detail.scrollTop = currentY;
  detail.deltaX = currentX - detail.startX;
--- a/core/src/components/content/test/fixed/e2e.ts
+++ b/core/src/components/content/test/fixed/e2e.ts
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('content: fixed', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/content/test/fixed?ionic:_testing=true'
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
--- a/core/src/components/content/test/fixed/index.html
+++ b/core/src/components/content/test/fixed/index.html
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Content - Fixed</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
-
-<body>
-  <ion-app>
-    <ion-header id="header">
-      <ion-toolbar>
-        <ion-title>Content - Fixed</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content>
-      <h1>Regular Content</h1>
-      <div slot="fixed">
-        <h1>Fixed content</h1>
-        <p>Fixed paragraph</p>
-        <ion-button>Button</ion-button>
-      </div>
-      <ion-fab vertical="top" horizontal="end" slot="fixed">
-        <ion-fab-button>
-          <ion-icon name="add"></ion-icon>
-        </ion-fab-button>
-      </ion-fab>
-      <ion-fab vertical="bottom" horizontal="start" slot="fixed">
-        <ion-fab-button color="tertiary">
-          <ion-icon name="star"></ion-icon>
-        </ion-fab-button>
-      </ion-fab>
-    </ion-content>
-
-  </ion-app>
-</body>
-
-</html>
--- a/core/src/components/content/test/fullscreen/index.html
+++ b/core/src/components/content/test/fullscreen/index.html
@@ -13,7 +13,7 @@

 <body>
  <ion-app>
-    <ion-header>
+    <ion-header no-border>
      <ion-toolbar>
        <ion-title>Content - Fullscreen</ion-title>
      </ion-toolbar>
--- a/core/src/components/datetime/datetime-util.spec.ts
+++ b/core/src/components/datetime/datetime-util.spec.ts
@@ -220,6 +220,7 @@ describe('datetime-util', () => {
        "second": undefined,
        "tzOffset": 0,
        "year": 1000,
+        "ampm": undefined
      });
    });

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

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

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

--- a/core/src/components/datetime/datetime-util.ts
+++ b/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);
@@ -308,11 +314,15 @@ export const updateDate = (existingData: DatetimeData, newData: any): boolean =>
      }

    } else if ((newData.year || newData.hour || newData.month || newData.day || newData.minute || newData.second)) {
-      // newData is from of a datetime picker's selected values
-      // update the existing DatetimeData data with the new values
-
-      // do some magic for 12-hour values
-      if (newData.ampm && newData.hour) {
+      // newData is from the datetime picker's selected values
+      // update the existing datetimeValue with the new values
+      if (newData.ampm !== undefined && newData.hour !== undefined) {
+        // change the value of the hour based on whether or not it is am or pm
+        // if the meridiem is pm and equal to 12, it remains 12
+        // otherwise we add 12 to the hour value
+        // if the meridiem is am and equal to 12, we change it to 0
+        // otherwise we use its current hour value
+        // for example: 8 pm becomes 20, 12 am becomes 0, 4 am becomes 4
        newData.hour.value = (newData.ampm.value === 'pm')
          ? (newData.hour.value === 12 ? 12 : newData.hour.value + 12)
          : (newData.hour.value === 12 ? 0 : newData.hour.value);
@@ -335,7 +345,8 @@ export const updateDate = (existingData: DatetimeData, newData: any): boolean =>
            ? (existingData.hour! < 12 ? existingData.hour! + 12 : existingData.hour!)
            : (existingData.hour! >= 12 ? existingData.hour! - 12 : existingData.hour))
      };
-      (existingData as any)['hour'] = newData['hour'].value;
+      existingData['hour'] = newData['hour'].value;
+      existingData['ampm'] = newData['ampm'].value;
      return true;
    }

@@ -537,6 +548,7 @@ export interface DatetimeData {
  second?: number;
  millisecond?: number;
  tzOffset?: number;
+  ampm?: string;
 }

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

+      if (data.name !== 'ampm' && this.datetimeValue.ampm !== undefined) {
+        changeData['ampm'] = {
+          value: this.datetimeValue.ampm
+        };
+      }
+
      this.updateDatetimeValue(changeData);
      picker.columns = this.generateColumns();
    });
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -31,12 +31,12 @@
          <ion-label>Default</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>
-        
+
        <ion-item>
          <ion-label position="floating">Default with floating label</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>
-        
+
        <ion-item>
          <ion-label position="floating">Placeholder with floating label</ion-label>
          <ion-datetime placeholder="Select a date"></ion-datetime>
@@ -105,8 +105,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>
@@ -119,11 +119,25 @@
          <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>
        </ion-item>

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

    <script>
+      var todaysDateDatetime = document.querySelector('#todaysDate');
+      todaysDateDatetime.value = '2020-09-02T17:15:03.488Z';
+
      var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
      var customYearValues = document.getElementById('customYearValues');
      customYearValues.yearValues = yearValuesArray;
--- a/core/src/components/datetime/test/datetime.spec.ts
+++ b/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('getLocalDateTime()', () => {
--- a/core/src/components/footer/footer.ios.scss
+++ b/core/src/components/footer/footer.ios.scss
@@ -8,6 +8,10 @@
  --border-width: #{$hairlines-width} 0 0;
 }

+.footer-ios[no-border] ion-toolbar:first-child {
+  --border-width: 0;
+}
+
@supports (backdrop-filter: blur(0)) {
  .footer-translucent-ios {
    backdrop-filter: $footer-ios-translucent-filter;
@@ -17,8 +21,4 @@
    --opacity: .8;
    --backdrop-filter: #{$footer-ios-translucent-filter};
  }
-}
-
-.footer-ios.ion-no-border ion-toolbar:first-child {
-  --border-width: 0;
 }
--- a/core/src/components/footer/footer.md.scss
+++ b/core/src/components/footer/footer.md.scss
@@ -22,6 +22,6 @@
  content: "";
 }

-.footer-md.ion-no-border::before {
+.footer-md[no-border]::before {
  display: none;
-}
+}
--- a/core/src/components/footer/readme.md
+++ b/core/src/components/footer/readme.md
@@ -8,18 +8,11 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c

 ## Usage

-### Angular / javascript
+### Javascript

 ```html
 <ion-content></ion-content>

-<!-- Footer without a border -->
-<ion-footer class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Footer - No Border</ion-title>
-  </ion-toolbar>
-</ion-footer>
-
 <ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
@@ -37,13 +30,6 @@ import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
 export const FooterExample: React.FC = () => (
  <>
    <IonContent />
-    
-    {/*-- Footer without a border --*/}
-    <IonFooter className="ion-no-border">
-      <IonToolbar>
-        <IonTitle>Footer - No Border</IonTitle>
-      </IonToolbar>
-    </IonFooter>

    <IonFooter>
      <IonToolbar>
@@ -55,28 +41,6 @@ export const FooterExample: React.FC = () => (
 ```


-### Vue
-
-```html
-<template>
-  <ion-content></ion-content>
-  
-  <!-- Footer without a border -->
-  <ion-footer class="ion-no-border">
-    <ion-toolbar>
-      <ion-title>Footer - No Border</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-  
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-</template>
-```
-
-

 ## Properties

--- a/core/src/components/footer/test/basic/e2e.ts
+++ b/core/src/components/footer/test/basic/e2e.ts
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('footer: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/footer/test/basic?ionic:_testing=true'
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
--- a/core/src/components/footer/test/basic/index.html
+++ b/core/src/components/footer/test/basic/index.html
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-  <head>
-    <meta charset="UTF-8">
-    <title>Footer - Basic</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-  <body>
-    <ion-app>         
-      <ion-content>
-      
-        <br>
-        
-        <ion-footer>
-          <ion-toolbar>
-            <ion-title>Footer - Default</ion-title>
-          </ion-toolbar>
-        </ion-footer> 
-
-        <br>
-        
-        <ion-footer class="ion-no-border">
-          <ion-toolbar>
-            <ion-title>Footer - No Border</ion-title>
-          </ion-toolbar>
-        </ion-footer>
-                    
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/footer/test/translucent/e2e.ts
+++ b/core/src/components/footer/test/translucent/e2e.ts
@@ -7,8 +7,7 @@ test('footer: translucent', async () => {
    url: '/src/components/footer/test/translucent?ionic:_testing=true'
  });

-  const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
-  await checkComponentModeClasses(await page.find('ion-footer'), globalMode!, 'footer-translucent');
+  await checkComponentModeClasses(await page.find('ion-footer'), 'footer-translucent');

  const compare = await page.compareScreenshot();
  expect(compare).toMatchScreenshot();
--- a/core/src/components/footer/usage/angular.md
+++ b/core/src/components/footer/usage/angular.md
@@ -1,16 +0,0 @@
-```html
-<ion-content></ion-content>
-
-<!-- Footer without a border -->
-<ion-footer class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Footer - No Border</ion-title>
-  </ion-toolbar>
-</ion-footer>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-title>Footer</ion-title>
-  </ion-toolbar>
-</ion-footer>
-```
--- a/core/src/components/footer/usage/javascript.md
+++ b/core/src/components/footer/usage/javascript.md
@@ -1,13 +1,6 @@
 ```html
 <ion-content></ion-content>

-<!-- Footer without a border -->
-<ion-footer class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Footer - No Border</ion-title>
-  </ion-toolbar>
-</ion-footer>
-
 <ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
--- a/core/src/components/footer/usage/react.md
+++ b/core/src/components/footer/usage/react.md
@@ -5,13 +5,6 @@ import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
 export const FooterExample: React.FC = () => (
  <>
    <IonContent />
-    
-    {/*-- Footer without a border --*/}
-    <IonFooter className="ion-no-border">
-      <IonToolbar>
-        <IonTitle>Footer - No Border</IonTitle>
-      </IonToolbar>
-    </IonFooter>

    <IonFooter>
      <IonToolbar>
--- a/core/src/components/footer/usage/vue.md
+++ b/core/src/components/footer/usage/vue.md
@@ -1,18 +0,0 @@
-```html
-<template>
-  <ion-content></ion-content>
-  
-  <!-- Footer without a border -->
-  <ion-footer class="ion-no-border">
-    <ion-toolbar>
-      <ion-title>Footer - No Border</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-  
-  <ion-footer>
-    <ion-toolbar>
-      <ion-title>Footer</ion-title>
-    </ion-toolbar>
-  </ion-footer>
-</template>
-```
--- a/core/src/components/grid/grid.scss
+++ b/core/src/components/grid/grid.scss
@@ -39,11 +39,10 @@
 // --------------------------------------------------

 // Remove the padding from grid and all immediate children columns
-:host(.ion-no-padding) {
-  --ion-grid-column-padding: 0;
-  --ion-grid-column-padding-xs: 0;
-  --ion-grid-column-padding-sm: 0;
-  --ion-grid-column-padding-md: 0;
-  --ion-grid-column-padding-lg: 0;
-  --ion-grid-column-padding-xl: 0;
+:host([no-padding]) {
+  @include padding(0);
+}
+
+:host([no-padding]) ::slotted(ion-col) {
+  @include padding(0);
 }
--- a/core/src/components/header/header.ios.scss
+++ b/core/src/components/header/header.ios.scss
@@ -8,6 +8,10 @@
  --border-width: 0 0 #{$hairlines-width};
 }

+.header-ios[no-border] ion-toolbar:last-child {
+  --border-width: 0;
+}
+
@supports (backdrop-filter: blur(0)) {
  .header-translucent-ios {
    backdrop-filter: $header-ios-translucent-filter;
@@ -19,10 +23,6 @@
  }
 }

-.header-ios.ion-no-border ion-toolbar:last-child {
-  --border-width: 0;
-}
-
 // iOS Header - Collapse
 // --------------------------------------------------
 .header-collapse-condense {
@@ -51,24 +51,23 @@
  padding-bottom: 13px;
 }

-.header-collapse-main ion-toolbar.in-toolbar ion-title,
-.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
+ion-toolbar.in-toolbar ion-title,
+ion-toolbar.in-toolbar ion-buttons {
  transition: all 0.2s ease-in-out;
 }

-.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
-.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
-  opacity: 0;
-  pointer-events: none;
+/**
+ * There is a bug in Safari where animating the opacity
+ * on an element in a scrollable container while scrolling
+ * causes the scroll position to jump to the top
+ */
+.header-collapse-condense ion-toolbar ion-title,
+.header-collapse-condense ion-toolbar ion-buttons {
+  transition: none;
 }

-/**
- * There is a bug in Safari where changing
- * the opacity of an element in a scrollable container
- * while rubber-banding causes the scroll position
- * to jump to the top
- */
-.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
-.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
-  visibility: hidden;
+.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-title,
+.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+  opacity: 0;
+  pointer-events: none;
 }
--- a/core/src/components/header/header.md.scss
+++ b/core/src/components/header/header.md.scss
@@ -22,10 +22,10 @@
  content: "";
 }

-.header-collapse-condense {
+.header-md[no-border]::after {
  display: none;
 }

-.header-md.ion-no-border::after {
+.header-collapse-condense {
  display: none;
 }
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Host, Prop, h, readTask, writeT

 import { getIonMode } from '../../global/ionic-global';

-import { cloneElement, createHeaderIndex, handleContentScroll, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity } from './header.utils';
+import { cloneElement, createHeaderIndex, handleContentScroll, handleToolbarIntersection, setHeaderActive } from './header.utils';
 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
@@ -19,7 +19,6 @@ export class Header implements ComponentInterface {
  private scrollEl?: HTMLElement;
  private contentScrollCallback?: any;
  private intersectionObserver?: any;
-  private collapsibleMainHeader?: HTMLElement;

  @Element() el!: HTMLElement;

@@ -78,11 +77,6 @@ export class Header implements ComponentInterface {
      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
      this.contentScrollCallback = undefined;
    }
-
-    if (this.collapsibleMainHeader) {
-      this.collapsibleMainHeader.classList.remove('header-collapse-main');
-      this.collapsibleMainHeader = undefined;
-    }
  }

  private async setupCollapsibleHeader(contentEl: HTMLIonContentElement | null, pageEl: Element | null) {
@@ -90,20 +84,20 @@ export class Header implements ComponentInterface {

    this.scrollEl = await contentEl.getScrollElement();

-    const headers = pageEl.querySelectorAll('ion-header');
-    this.collapsibleMainHeader = Array.from(headers).find((header: any) => header.collapse !== 'condense') as HTMLElement | undefined;
-
-    if (!this.collapsibleMainHeader) { return; }
-
-    const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
-    const scrollHeaderIndex = createHeaderIndex(this.el);
-
-    if (!mainHeaderIndex || !scrollHeaderIndex) { return; }
-
-    setHeaderActive(mainHeaderIndex, false);
-    setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], 0);
-
    readTask(() => {
+      const headers = pageEl.querySelectorAll('ion-header');
+      const mainHeader = Array.from(headers).find((header: any) => header.collapse !== 'condense') as HTMLElement | undefined;
+
+      if (!mainHeader || !this.scrollEl) { return; }
+
+      const mainHeaderIndex = createHeaderIndex(mainHeader);
+      const scrollHeaderIndex = createHeaderIndex(this.el);
+
+      if (!mainHeaderIndex || !scrollHeaderIndex) { return; }
+
+      setHeaderActive(mainHeaderIndex, false);
+
+      readTask(() => {
        const mainHeaderHeight = mainHeaderIndex.el.clientHeight;

        /**
@@ -115,21 +109,20 @@ export class Header implements ComponentInterface {
        const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], rootMargin: `-${mainHeaderHeight}px 0px 0px 0px` });
        this.intersectionObserver.observe(scrollHeaderIndex.toolbars[0].el);
+      });

      /**
       * Handle scaling of large iOS titles and
       * showing/hiding border on last toolbar
       * in primary header
       */
-        this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, scrollHeaderIndex); };
-        this.scrollEl!.addEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, scrollHeaderIndex); };
+      this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
    });

    writeTask(() => {
      cloneElement('ion-title');
      cloneElement('ion-back-button');
-
-      this.collapsibleMainHeader!.classList.add('header-collapse-main');
    });

    this.collapsibleHeaderInitialized = true;
--- a/core/src/components/header/header.utils.ts
+++ b/core/src/components/header/header.utils.ts
@@ -45,7 +45,7 @@ export const createHeaderIndex = (headerEl: HTMLElement | undefined): HeaderInde
        innerTitleEl: (ionTitleEl) ? ionTitleEl.shadowRoot!.querySelector('.toolbar-title') : null,
        ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || []
      } as ToolbarIndex;
-    }) || []
+    }) || [[]]
  } as HeaderIndex;
 };

@@ -60,7 +60,7 @@ export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: He
  });
 };

-export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity?: number) => {
+const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity: number | undefined) => {
  if (opacity === undefined) {
    toolbar.background.style.removeProperty('--opacity');
  } else {
@@ -117,18 +117,20 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
      if (hasValidIntersection) {
        setHeaderActive(mainHeaderIndex);
        setHeaderActive(scrollHeaderIndex, false);
-        setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);
+        setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], 1);
      }
    }
  });
 };

 export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
-  if (active) {
-    headerIndex.el.classList.remove('header-collapse-condense-inactive');
-  } else {
-    headerIndex.el.classList.add('header-collapse-condense-inactive');
-  }
+  writeTask(() => {
+    if (active) {
+      headerIndex.el.classList.remove('header-collapse-condense-inactive');
+    } else {
+      headerIndex.el.classList.add('header-collapse-condense-inactive');
+    }
+  });
 };

 export const scaleLargeTitles = (toolbars: ToolbarIndex[] = [], scale = 1, transition = false) => {
--- a/core/src/components/header/readme.md
+++ b/core/src/components/header/readme.md
@@ -26,13 +26,6 @@ It's important to note that ion-header needs to be the one of the three root ele
  </ion-toolbar>
 </ion-header>

-<!-- Header without a border -->
-<ion-header class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Header - No Border</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
  <ion-header collapse="condense">
    <ion-toolbar>
@@ -64,13 +57,6 @@ export const HeaderExample: React.FC = () => (
      </IonToolbar>
    </IonHeader>
    
-    {/*-- Header without a border --*/}
-    <IonHeader className="ion-no-border">
-     <IonToolbar>
-      <IonTitle>Header - No Border</IonTitle>
-     </IonToolbar>
-    </IonHeader>
-    
    <IonContent>
      <IonHeader collapse="condense">
        <IonToolbar>
@@ -100,13 +86,6 @@ export const HeaderExample: React.FC = () => (
    </ion-toolbar>
  </ion-header>
  
-  <!-- Header without a border -->
-  <ion-header class="ion-no-border">
-    <ion-toolbar>
-      <ion-title>Header - No Border</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  
  <ion-content>
    <ion-header collapse="condense">
      <ion-toolbar>
--- a/core/src/components/header/test/basic/e2e.ts
+++ b/core/src/components/header/test/basic/e2e.ts
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('header: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/basic?ionic:_testing=true'
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
--- a/core/src/components/header/test/basic/index.html
+++ b/core/src/components/header/test/basic/index.html
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-  <head>
-    <meta charset="UTF-8">
-    <title>Header - Basic</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-  <body>
-    <ion-app>         
-      <ion-content>
-        
-        <ion-header>
-          <ion-toolbar>
-            <ion-title>Header - Default</ion-title>
-          </ion-toolbar>
-        </ion-header> 
-
-        <br>
-        
-        <ion-header class="ion-no-border">
-          <ion-toolbar>
-            <ion-title>Header - No Border</ion-title>
-          </ion-toolbar>
-        </ion-header>
-                    
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
--- a/core/src/components/header/test/translucent/e2e.ts
+++ b/core/src/components/header/test/translucent/e2e.ts
@@ -7,8 +7,7 @@ test('header: translucent', async () => {
    url: '/src/components/header/test/translucent?ionic:_testing=true'
  });

-  const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
-  await checkComponentModeClasses(await page.find('ion-header'), globalMode!, 'header-translucent');
+  await checkComponentModeClasses(await page.find('ion-header'), 'header-translucent');

  const compare = await page.compareScreenshot();
  expect(compare).toMatchScreenshot();
--- a/core/src/components/header/usage/angular.md
+++ b/core/src/components/header/usage/angular.md
@@ -12,13 +12,6 @@
  </ion-toolbar>
 </ion-header>

-<!-- Header without a border -->
-<ion-header class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Header - No Border</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
  <ion-header collapse="condense">
    <ion-toolbar>
--- a/core/src/components/header/usage/javascript.md
+++ b/core/src/components/header/usage/javascript.md
@@ -12,13 +12,6 @@
  </ion-toolbar>
 </ion-header>

-<!-- Header without a border -->
-<ion-header class="ion-no-border">
-  <ion-toolbar>
-    <ion-title>Header - No Border</ion-title>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
  <ion-header collapse="condense">
    <ion-toolbar>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Brandy Carney	bea21e73b6	merge release-4.11.13 4.11.13	2020-10-01 15:09:21 -04:00
Brandy Carney	e8e76324d9	4.11.13	2020-10-01 14:07:06 -04:00
Brandy Carney	210db5b265	fix(datetime): do not set ampm when the column doesn't exist (#22224 )	2020-10-01 13:58:20 -04:00
Brandy Carney	13168b6d77	merge release-4.11.12 4.11.12	2020-09-29 17:15:11 -04:00
Brandy Carney	4fe3798787	4.11.12	2020-09-29 16:45:51 -04:00
Brandy Carney	0d56c51664	fix(datetime): remove the automatic switching from am to pm and vice versa (#22208 ) fixes #18924	2020-09-29 16:32:41 -04:00
Brandy Carney	390ca65079	merge release-4.11.11 Release 4.11.11	2020-09-11 17:08:58 -04:00
Brandy Carney	3dbffa89b1	chore(scripts): add in v4-lts npm tag as an option to publish	2020-09-11 16:38:44 -04:00
Brandy Carney	c28c45f493	4.11.11	2020-09-11 16:18:46 -04:00
Brandy Carney	478723c55f	chore(common): comment out tests due to Stencil updating the jest version and causing build errors	2020-09-11 16:12:13 -04:00
Brandy Carney	1dac5a46f5	fix(datetime): do not reset to am when changing the hour and pm is set (#22016 ) fixes #19175 fixes #19260 fixes #20026 references #16630	2020-09-11 13:05:26 -04:00
Brandy Carney	b396e54d4f	chore(dependencies): update dependencies, lock them, build swiper (#22015 )	2020-09-01 12:55:21 -04:00
Liam DeBeasi	5bccf31bed	merge release-4.11.10 Release 4.11.10	2020-01-24 16:54:08 -05:00
Liam DeBeasi	0179aad2b3	4.11.10	2020-01-24 16:15:45 -05:00
Liam DeBeasi	db1fd1d72a	fix(input): revert previous type change This reverts commit `3a56228290`.	2020-01-24 16:03:03 -05:00
Ely Lucas	1bfc1c0393	release-4.11.9	2020-01-23 13:06:05 -07:00
Ely Lucas	7b9515ffa3	4.11.9	2020-01-23 13:00:15 -07:00
Ely Lucas	708020551f	fix(core): updating type of input value to accept numbers, fixes #20173 (#20267 )	2020-01-23 11:15:22 -07:00
Ely Lucas	63d4e877fb	fix(react): remove leaving view when routerdirection is back, fixes #20124 (#20268 )	2020-01-22 17:07:22 -07:00
Ely Lucas	ec6a8dd86f	fix(react): adding missing overlay component events, fixes #19923 (#20266 )	2020-01-22 14:52:21 -07:00
Ely Lucas	2f8c13b696	fix(react): support routes without a path for notfound routes, fixes #20259 (#20261 )	2020-01-21 16:12:42 -07:00
Ely Lucas	1411d8a173	fix(react): update icon types to be a string as well, fixes #20229 (#20230 )	2020-01-17 16:57:11 -07:00
Ely Lucas	9e35ebed4a	fix(react): re attach props on update, fixes 20192 (#20228 )	2020-01-17 16:23:26 -07:00
Ely Lucas	aff9612d11	fix(react): Don't render overlay children if isOpen is false, fixes #20225 (#20226 )	2020-01-17 15:42:58 -07:00
Ely Lucas	22f92294ce	chore(react): updating types for location state to fix type errors (#20206 )	2020-01-14 12:17:55 -07:00
Ely Lucas	ad8f3db725	release-4.11.8	2020-01-13 09:58:01 -07:00
Ely Lucas	023b835d16	4.11.8	2020-01-13 09:52:21 -07:00
Ely Lucas	8a5aba2068	fix(react): add missing react memory router	2020-01-13 09:08:34 -07:00
Ely Lucas	676cc19b89	fix(react): supporting ios and md props on icons (#20170 )	2020-01-08 16:13:52 -07:00
Ely Lucas	654d04c265	chore(docs): updating ActionSheet React sample	2019-12-17 10:52:58 -07:00
Ely Lucas	857bab6641	fix(react): fixing type of icon in ToastOptions, ActionSheetOptions, fixes #20100	2019-12-17 10:42:15 -07:00
Ely Lucas	027306a258	merge release-4.11.7	2019-12-12 15:35:01 -07:00
Ely Lucas	0f10bb29e8	4.11.7	2019-12-12 14:58:54 -07:00
Ely Lucas	4a73544502	fix(react): fire lifecycle events on initial render, fixes #20071	2019-12-12 14:31:57 -07:00
Ely Lucas	9ea75ebec7	fix(react): fire lifecycle events on initial render, fixes #20071	2019-12-12 14:30:25 -07:00
Ely Lucas	1454539cd3	chore(core): removing old test	2019-12-11 10:02:57 -07:00
Ely Lucas	6dfa0da460	merge release-4.11.6	2019-12-11 09:57:10 -07:00
Ely Lucas	78b3029665	4.11.6	2019-12-11 09:13:38 -07:00
Ely Lucas	e116712275	fix(react): support for 'root' router direction, fixes #19982 (#20052 )	2019-12-09 17:23:39 -07:00
Ely Lucas	1c7d1e5cf1	fix(react): first render performance improvements	2019-12-09 14:36:47 -07:00
Ely Lucas	684293ddbf	fix(react): don't show back button when not appropriate	2019-12-03 15:29:55 -07:00
Ely Lucas	f9bf8dbe6f	fix(react): support navigating to same page and route updates in IonRouterOutlet, fixes #19891 , #19892 , #19986	2019-12-03 14:22:26 -07:00
Ely Lucas	eef55bb007	fix(react): fix refs for controllers, overlays, ionpage, and ionrouteroutlet, fixes #19924 (#20012 )	2019-11-27 16:08:56 -07:00
Ely Lucas	637b082976	chore(react): fix tabs docs (#19995 )	2019-11-25 11:15:03 -07:00
Liam DeBeasi	6c20fecab0	merge release-4.11.5 Release 4.11.5	2019-11-14 15:15:53 -05:00
Liam DeBeasi	06c0c77673	4.11.5	2019-11-14 14:59:57 -05:00
Liam DeBeasi	dd007d55fe	chore(angular): update Config deprecation message (#19908 ) * update deprecation msg * add exact release	2019-11-14 14:42:50 -05:00
Ely Lucas	5ff786a23d	fix(react): improving lifecycle hooks to deal with stale closures, fixes #19873 (#19874 )	2019-11-08 16:15:52 -07:00
Ely Lucas	f0efe4aed6	merge release-4.11.4	2019-11-07 14:47:51 -07:00
Ely Lucas	d8b6098e30	4.11.4	2019-11-07 14:34:46 -07:00
Aubrey Holland	7356c40174	fix(react): check for component unmount, fixes #19859	2019-11-07 13:32:45 -07:00
Ely Lucas	de0a899be7	chore(react): lowering the timeout for the ionpage check to avoid false positives	2019-11-07 13:21:23 -07:00
Ely Lucas	0a3014d35e	fix(react): adding multiple subscriptions to lifecycle events, fixes #19792 (#19858 )	2019-11-07 11:55:47 -07:00
Ely Lucas	628e76668e	fix(react): add check to warn if no ionpage is found, fixes #19832 (#19857 )	2019-11-07 10:00:17 -07:00
Ely Lucas	d89508b1b5	fix(react): expand the location stack to better support back button, fixes #19748 (#19856 )	2019-11-07 09:00:01 -07:00
Ely Lucas	fd9745ddcd	fix(react): adding hardware back button support, fixes(19819) (#19851 )	2019-11-06 14:54:06 -07:00
Ely Lucas	bcc40c8d59	fix(react): adding swipe back functionality and routerOutlet ready improvements, fixes #19818 (#19849 )	2019-11-06 10:08:57 -07:00
Ely Lucas	9fad4161be	fix(react): create a new overlay each time component is presented, fixes #19841 , #19823 (#19842 )	2019-11-05 16:49:10 -07:00
Ely Lucas	17fe23a3b9	release-4.11.3	2019-10-30 12:23:08 -06:00
Ely Lucas	e61d7a3aeb	chore(changelog): fixing changelog items	2019-10-30 12:20:01 -06:00
Ely Lucas	8d55564a0e	4.11.3	2019-10-30 12:11:29 -06:00
Ely Lucas	f74d9c6b9b	chore(build): setting max workers to 2 in core tests	2019-10-30 11:17:48 -06:00
Ely Lucas	8fe8b4bbba	chore(build): awaiting on test task	2019-10-30 09:50:11 -06:00
Brandy Carney	7713f7fe74	chore(build): linking react	2019-10-30 09:49:28 -06:00
Ely Lucas	9d0caf6de0	fix(react): checking if node is actually an element before treating it like one, fixes #19769 (#19783 )	2019-10-29 10:36:28 -06:00
Ely Lucas	2dc5540910	fix(react): unmount leaving view when using browser back button, fixes #19749 (#19781 )	2019-10-29 09:30:37 -06:00
Ely Lucas	f70e71a3d4	fix(react): checking isOpen again after async call before opening overlay, fixes #19755	2019-10-28 10:22:03 -06:00
Ely Lucas	31c754dab7	fix(react): don't remove current view, provide a better method to determine showGoBack fixes #19731 and #19732	2019-10-23 12:11:33 -06:00
Liam DeBeasi	70fefb5463	merge release-4.11.2 Release 4.11.2	2019-10-21 17:27:58 -04:00
Liam DeBeasi	8853bd5045	4.11.2	2019-10-21 15:05:43 -04:00
Brandy Carney	e63c65b644	chore(release): update release script to move the npm link	2019-10-21 13:14:22 -04:00
Liam DeBeasi	d97e167f31	fix(animations): ensure all elements are cleaned up when calling .destroy() (#19654 ) * fix race condition * remove zero	2019-10-21 12:37:19 -04:00
Liam DeBeasi	48539093bf	fix(header): collapsible header works in tabs (#19658 ) fixes #19640	2019-10-21 12:34:40 -04:00
Liam DeBeasi	1535e95a5f	fix(menu): clamp out of bounds swipe value (#19684 ) fixes #18927	2019-10-21 12:34:32 -04:00
Liam DeBeasi	70e0562dc9	fix(ios): hide leaving view after nav transition to avoid flicker (#19691 ) fixes #19674	2019-10-21 12:34:26 -04:00
Ely Lucas	b7baf24e50	fix(react): adding change events to iontabs, fixes #19665 (#19711 )	2019-10-21 06:29:19 -06:00
Ely Lucas	ee21d3ae43	fix(react): removing pages from DOM on nav, fixes #19701 (#19712 )	2019-10-21 06:25:01 -06:00
Ely Lucas	d8ca878cb1	chore(react): removing console log and tree shaking change	2019-10-17 17:31:06 -06:00
Ely Lucas	fcdbb3ce98	fix(react): adding HashRouter to available ion routers, fixes #19621 (#19683 )	2019-10-17 12:32:47 -06:00
Ely Lucas	fc6a754b38	merge r Release 4.11.1	2019-10-14 10:41:03 -06:00
Ely Lucas	048a1a8265	4.11.1	2019-10-14 09:54:49 -06:00
Ely Lucas	ec188990d6	chore(): bumping timeout	2019-10-14 09:26:44 -06:00
Ely Lucas	81b1072322	chore(react): fixing test and another method to tab nav	2019-10-14 08:43:39 -06:00
Ely Lucas	87765564f6	fix(react): handle tab back nav better, fixes #19646 (#19647 )	2019-10-13 15:20:39 -06:00
Ely Lucas	ed98d9e658	fix(react): add IonPicker as controller component, fixes #19620 (#19643 )	2019-10-13 11:59:47 -06:00
Ely Lucas	b552daa6dd	fix(build): properly update peer dependencies (#19639 )	2019-10-11 16:57:57 -06:00
Ely Lucas	7f4b77ddba	fix(react): moving tslint and friends to devDependencies (#19624 )	2019-10-11 16:47:42 -06:00
Brandy Carney	c6ab439efb	merge release-4.11.0 Release 4.11.0	2019-10-09 17:01:40 -04:00
Liam DeBeasi	42a2be136f	merge release-4.10.3 Release 4.10.3	2019-10-09 15:14:19 -04:00