remove old lines

only fire pressUp if press was fired; allow overriding of other gesture params
add angular integration
2026-03-13 10:22:08 +08:00 · 2019-11-18 15:03:42 -05:00 · 2019-11-18 15:02:38 -05:00 · 2019-11-12 11:39:21 -05:00 · 2019-11-12 11:33:42 -05:00 · 2019-11-12 10:45:06 -05:00
284 changed files with 3033 additions and 4089 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -181,6 +181,16 @@ 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:
@@ -318,6 +328,8 @@ 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,6 +2,30 @@

 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

@@ -116,13 +140,32 @@ 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 Format
+## Commit Message Guidelines

-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).
+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).

-`type(scope): subject`
+### 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
 Must be one of the following:

 * **feat**: A new feature
@@ -134,10 +177,12 @@ 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. 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.
+### 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

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

 * use the imperative, present tense: "change" not "changed" nor "changes"
@@ -147,6 +192,66 @@ 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,6 +240,8 @@ 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
@@ -0,0 +1,7 @@
+# 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
@@ -1,6 +1,7 @@
 const fs = require('fs-extra');
 const path = require('path');
 const execa = require('execa');
+const inquirer = require('inquirer');
 const Listr = require('listr');
 const semver = require('semver');
 const tc = require('turbocolor');
@@ -34,6 +35,34 @@ function projectPath(project) {
  return path.join(rootDir, project);
 }

+async function askTag() {
+  const prompts = [
+    {
+      type: 'list',
+      name: 'tag',
+      message: 'Select npm tag or specify a new tag',
+      choices: ['latest', 'next']
+        .concat([
+          new inquirer.Separator(),
+          {
+            name: 'Other (specify)',
+            value: null
+          }
+        ])
+    },
+    {
+      type: 'confirm',
+      name: 'confirm',
+      message: answers => {
+        return `Will publish to ${tc.cyan(answers.tag)}. Continue?`;
+      }
+    }
+  ];
+
+  const { tag, confirm } = await inquirer.prompt(prompts);
+  return { tag, confirm };
+}
+
 function checkGit(tasks) {
  tasks.push(
    {
@@ -127,16 +156,9 @@ function preparePackage(tasks, package, version, install) {
        title: `${pkg.name}: lint`,
        task: () => execa('npm', ['run', 'lint'], { cwd: projectRoot })
      });
-      projectTasks.push({
-        title: `${pkg.name}: update ionic/core dep to ${version}`,
-        task: () => {
-          updateDependency(pkg, '@ionic/core', version);
-          writePkg(package, pkg);
-        }
-      });
      projectTasks.push({
        title: `${pkg.name}: test`,
-        task: () => execa('npm', ['test'], { cwd: projectRoot })
+        task: async () => await execa('npm', ['test'], { cwd: projectRoot })
      });
    }

@@ -144,12 +166,22 @@ function preparePackage(tasks, package, version, install) {
      title: `${pkg.name}: build`,
      task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
    });
-    if (package === 'core') {
+    if (package === 'core' || package === 'packages/react') {
      projectTasks.push({
        title: `${pkg.name}: npm link`,
        task: () => execa('npm', ['link'], { cwd: projectRoot })
      });
    }
+
+    if (version) {
+      projectTasks.push({
+        title: `${pkg.name}: update ionic/core dep to ${version}`,
+        task: () => {
+          updateDependency(pkg, '@ionic/core', version);
+          writePkg(package, pkg);
+        }
+      });
+    }
  }

  // Add project tasks
@@ -186,7 +218,7 @@ function prepareDevPackage(tasks, package, version) {
      task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
    });

-    if (package === 'core') {
+    if (package === 'core' || package === 'packages/react') {
      projectTasks.push({
        title: `${pkg.name}: npm link`,
        task: () => execa('npm', ['link'], { cwd: projectRoot })
@@ -278,6 +310,9 @@ function updateDependency(pkg, dependency, version) {
  if (pkg.devDependencies && pkg.devDependencies[dependency]) {
    pkg.devDependencies[dependency] = version;
  }
+  if (pkg.peerDependencies && pkg.peerDependencies[dependency]) {
+    pkg.peerDependencies[dependency] = version;
+  }
 }

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

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

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

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

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


--- a/.scripts/release.js
+++ b/.scripts/release.js
@@ -13,6 +13,8 @@ const fs = require('fs-extra');

 async function main() {
  try {
+    const dryRun = process.argv.indexOf('--dry-run') > -1;
+
    if (!process.env.GH_TOKEN) {
      throw new Error('env.GH_TOKEN is undefined');
    }
@@ -26,15 +28,31 @@ async function main() {
    // repo must be clean
    common.checkGit(tasks);

-    // publish each package in NPM
-    common.publishPackages(tasks, common.packages, version);
+    const { tag, confirm } = await common.askTag();

-    // push tag to git remote
-    publishGit(tasks, version, changelog);
+    if (!confirm) {
+      return;
+    }
+
+    if(!dryRun) {
+      // publish each package in NPM
+      common.publishPackages(tasks, common.packages, version, tag);
+
+      // push tag to git remote
+      publishGit(tasks, version, changelog);
+    }

    const listr = new Listr(tasks);
    await listr.run();
-    console.log(`\nionic ${version} published!! 🎉\n`);
+
+    // 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
+      `);
+    } else {
+      console.log(`\nionic ${version} published to ${tag}!! 🎉\n`);
+    }

  } catch (err) {
    console.log('\n', tc.red(err), '\n');
@@ -104,10 +122,16 @@ 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: 'master',
+    target_commitish: branch,
    tag_name: tag,
    name: version,
    body: changelog,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,168 @@
+## [4.11.4](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.4) (2019-11-07)
+
+
+### Bug Fixes
+
+* **react:** check for component unmount, fixes [#19859](https://github.com/ionic-team/ionic/issues/19859) ([7356c40](https://github.com/ionic-team/ionic/commit/7356c401742ce2b3241d6ab05fce0fa65d2f1f8a))
+* **react:** adding multiple subscriptions to lifecycle events, fixes [#19792](https://github.com/ionic-team/ionic/issues/19792) ([#19858](https://github.com/ionic-team/ionic/issues/19858)) ([0a3014d](https://github.com/ionic-team/ionic/commit/0a3014d35e2102570fd3d8c5ada29eb01aab18e9))
+* **react:** add check to warn if no ionpage is found, fixes [#19832](https://github.com/ionic-team/ionic/issues/19832) ([#19857](https://github.com/ionic-team/ionic/issues/19857)) ([628e766](https://github.com/ionic-team/ionic/commit/628e76668ea72baebdb02b9dcfe24c0da837fb08))
+* **react:** expand the location stack to better support back button, fixes [#19748](https://github.com/ionic-team/ionic/issues/19748) ([#19856](https://github.com/ionic-team/ionic/issues/19856)) ([d89508b](https://github.com/ionic-team/ionic/commit/d89508b1b58481d518b89362a8792d05f3f451c9))
+* **react:** adding hardware back button support, fixes(19819) ([#19851](https://github.com/ionic-team/ionic/issues/19851)) ([fd9745d](https://github.com/ionic-team/ionic/commit/fd9745ddcddded76d64220838aef0f599bf4352f))
+* **react:** adding swipe back functionality and routerOutlet ready improvements, fixes [#19818](https://github.com/ionic-team/ionic/issues/19818) ([#19849](https://github.com/ionic-team/ionic/issues/19849)) ([bcc40c8](https://github.com/ionic-team/ionic/commit/bcc40c8d59b723bbdb1dfd318bfb2219eb8df3cf))
+* **react:** create a new overlay each time component is presented, fixes [#19841](https://github.com/ionic-team/ionic/issues/19841), [#19823](https://github.com/ionic-team/ionic/issues/19823) ([#19842](https://github.com/ionic-team/ionic/issues/19842)) ([9fad416](https://github.com/ionic-team/ionic/commit/9fad4161be4859969e14d4d33169ef022052d6bf))
+
+
+## [4.11.3](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* **react:** adding change events to iontabs, fixes [#19665](https://github.com/ionic-team/ionic/issues/19665) ([#19711](https://github.com/ionic-team/ionic/issues/19711)) ([b7baf24](https://github.com/ionic-team/ionic/commit/b7baf24e5053a379156e6c3d82c2b5d3afa999f1))
+* **react:** adding HashRouter to available ion routers, fixes [#19621](https://github.com/ionic-team/ionic/issues/19621) ([#19683](https://github.com/ionic-team/ionic/issues/19683)) ([fcdbb3c](https://github.com/ionic-team/ionic/commit/fcdbb3ce98747d3b37107904ca110daad95e48bc))
+* **react:** checking if node is actually an element before treating it like one, fixes [#19769](https://github.com/ionic-team/ionic/issues/19769) ([#19783](https://github.com/ionic-team/ionic/issues/19783)) ([9d0caf6](https://github.com/ionic-team/ionic/commit/9d0caf6de070145c4af618847b27e24c49027b8e))
+* **react:** checking isOpen again after async call before opening overlay, fixes [#19755](https://github.com/ionic-team/ionic/issues/19755) ([f70e71a](https://github.com/ionic-team/ionic/commit/f70e71a3d461cdab65626a5a7e1b6f4d03b852b1))
+* **react:** don't remove current view, provide a better method to determine showGoBack fixes [#19731](https://github.com/ionic-team/ionic/issues/19731) and [#19732](https://github.com/ionic-team/ionic/issues/19732) ([31c754d](https://github.com/ionic-team/ionic/commit/31c754dab7ada494ff5f0026d5cf3f7f65198eff))
+* **react:** removing pages from DOM on nav, fixes [#19701](https://github.com/ionic-team/ionic/issues/19701) ([#19712](https://github.com/ionic-team/ionic/issues/19712)) ([ee21d3a](https://github.com/ionic-team/ionic/commit/ee21d3ae43d8c6b076387a58bca655a56c920bcd))
+* **react:** unmount leaving view when using browser back button, fixes [#19749](https://github.com/ionic-team/ionic/issues/19749) ([#19781](https://github.com/ionic-team/ionic/issues/19781)) ([2dc5540](https://github.com/ionic-team/ionic/commit/2dc554091056612f1bcd2751d6eeb41cae488751))
+
+
+
+## [4.11.2](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.2) (2019-10-21)
+
+
+### Bug Fixes
+
+* **animations:** ensure all elements are cleaned up when calling .destroy() ([#19654](https://github.com/ionic-team/ionic/issues/19654)) ([d97e167](https://github.com/ionic-team/ionic/commit/d97e167))
+* **header:** collapsible header works in tabs ([#19658](https://github.com/ionic-team/ionic/issues/19658)) ([4853909](https://github.com/ionic-team/ionic/commit/4853909)), closes [#19640](https://github.com/ionic-team/ionic/issues/19640)
+* **ios:** hide leaving view after nav transition to avoid flicker ([#19691](https://github.com/ionic-team/ionic/issues/19691)) ([70e0562](https://github.com/ionic-team/ionic/commit/70e0562)), closes [#19674](https://github.com/ionic-team/ionic/issues/19674)
+* **menu:** clamp out of bounds swipe value ([#19684](https://github.com/ionic-team/ionic/issues/19684)) ([1535e95](https://github.com/ionic-team/ionic/commit/1535e95)), closes [#18927](https://github.com/ionic-team/ionic/issues/18927)
+* **react:** add IonPicker as controller component, fixes [#19620](https://github.com/ionic-team/ionic/issues/19620) ([#19643](https://github.com/ionic-team/ionic/issues/19643)) ([ed98d9e](https://github.com/ionic-team/ionic/commit/ed98d9e))
+* **react:** adding change events to IonTabs, fixes [#19665](https://github.com/ionic-team/ionic/issues/19665) ([#19711](https://github.com/ionic-team/ionic/issues/19711)) ([b7baf24](https://github.com/ionic-team/ionic/commit/b7baf24))
+* **react:** adding HashRouter to available ion routers, fixes [#19621](https://github.com/ionic-team/ionic/issues/19621) ([#19683](https://github.com/ionic-team/ionic/issues/19683)) ([fcdbb3c](https://github.com/ionic-team/ionic/commit/fcdbb3c))
+* **react:** pages no longer hidden when navigating between tabs, fixes [#19646](https://github.com/ionic-team/ionic/issues/19646) ([#19647](https://github.com/ionic-team/ionic/issues/19647)) ([8776556](https://github.com/ionic-team/ionic/commit/8776556))
+* **react:** ensure views are removed from DOM after navigating back, fixes [#19701](https://github.com/ionic-team/ionic/issues/19701) ([#19712](https://github.com/ionic-team/ionic/issues/19712)) ([ee21d3a](https://github.com/ionic-team/ionic/commit/ee21d3a))
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* **build:** properly update peer dependencies ([#19639](https://github.com/ionic-team/ionic/issues/19639)) ([b552daa](https://github.com/ionic-team/ionic/commit/b552daa))
+* **react:** add IonPicker as controller component, fixes [#19620](https://github.com/ionic-team/ionic/issues/19620) ([#19643](https://github.com/ionic-team/ionic/issues/19643)) ([ed98d9e](https://github.com/ionic-team/ionic/commit/ed98d9e))
+* **react:** handle tab back nav better, fixes [#19646](https://github.com/ionic-team/ionic/issues/19646) ([#19647](https://github.com/ionic-team/ionic/issues/19647)) ([8776556](https://github.com/ionic-team/ionic/commit/8776556))
+* **react:** moving tslint and friends to devDependencies ([#19624](https://github.com/ionic-team/ionic/issues/19624)) ([7f4b77d](https://github.com/ionic-team/ionic/commit/7f4b77d))
+
+
+
+# [4.11.0 Sodium](https://github.com/ionic-team/ionic/compare/v4.10.3...v4.11.0) (2019-10-09)
+
+Ionic React! Enjoy! 🧂 🌊 🐼
+
 ## [4.10.3](https://github.com/ionic-team/ionic/compare/v4.10.2...v4.10.3) (2019-10-09)


@@ -175,13 +340,13 @@ With this version comes support for Angular 8! Follow the below steps to update.
    $ npm install @ionic/angular-toolkit@2.0.0 -D
    ```

-1. Update `@angular/core` and `@angular/cli`:
+2. Update `@angular/core` and `@angular/cli`:

    ```shell
    $ npx ng update @angular/core @angular/cli
    ```

-1. Update `@angular-devkit` dependencies:
+3. Update `@angular-devkit` dependencies:

    ```shell
    $ npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "4.10.3",
+  "version": "5.0.0-beta.0",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -49,7 +49,7 @@
    "css/"
  ],
  "dependencies": {
-    "@ionic/core": "4.10.3",
+    "@ionic/core": "5.0.0-beta.0",
    "tslib": "^1.9.3"
  },
  "peerDependencies": {
--- a/angular/src/directives/css-utils-deprecations.ts
+++ b/angular/src/directives/css-utils-deprecations.ts
@@ -1,134 +0,0 @@
-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(param: string): any {
+  get<T = any>(param: string): T {
    return this.data[param];
  }
 }
--- a/angular/src/directives/proxies-list.txt
+++ b/angular/src/directives/proxies-list.txt
@@ -44,9 +44,6 @@ 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,38 +517,6 @@ 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 {
@@ -761,7 +729,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', 'width'] })
+@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated'] })
 export class IonSkeletonText {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -769,7 +737,7 @@ export class IonSkeletonText {
    this.el = r.nativeElement;
  }
 }
-proxyInputs(IonSkeletonText, ['animated', 'width']);
+proxyInputs(IonSkeletonText, ['animated']);

 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,14 +14,12 @@ 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';
@@ -32,6 +30,8 @@ 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,13 +8,12 @@ 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, 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 { 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 { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
 import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -68,9 +67,6 @@ const DECLARATIONS = [
  IonMenuToggle,
  IonNav,
  IonNavLink,
-  IonNavPop,
-  IonNavPush,
-  IonNavSetRoot,
  IonNote,
  IonProgressBar,
  IonRadio,
@@ -120,10 +116,7 @@ const DECLARATIONS = [
  VirtualFooter,
  VirtualHeader,
  VirtualItem,
-  IonVirtualScroll,
-
-  // Deprecations
-  CssUtilsDeprecations
+  IonVirtualScroll
 ];

@NgModule({
--- a/angular/src/providers/animation-controller.ts
+++ b/angular/src/providers/animation-controller.ts
@@ -0,0 +1,32 @@
+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/events.ts
+++ b/angular/src/providers/events.ts
@@ -1,81 +0,0 @@
-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
@@ -0,0 +1,21 @@
+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,18 +48,6 @@ 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/e2e/protractor.conf.js
+++ b/angular/test/test-app/e2e/protractor.conf.js
@@ -1,4 +1,4 @@
-// @ts-check
+  // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts

@@ -23,7 +23,7 @@ exports.config = {
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
-    defaultTimeoutInterval: 30000,
+    defaultTimeoutInterval: 70000,
    print: function() {}
  },
  onPrepare() {
--- 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, Events, PickerController, MenuController,
+  PopoverController, ToastController, PickerController, MenuController,
  LoadingController, NavController, DomController, Config
 } from '@ionic/angular';

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

  isLoaded = false;
  isReady = false;
-  isEvent = false;
  isResumed = false;
  isPaused = false;
  isResized = false;
@@ -25,7 +24,6 @@ export class ProvidersComponent {
  constructor(
    actionSheetCtrl: ActionSheetController,
    alertCtrl: AlertController,
-    events: Events,
    loadingCtrl: LoadingController,
    menuCtrl: MenuController,
    pickerCtrl: PickerController,
@@ -40,7 +38,7 @@ export class ProvidersComponent {
  ) {
    // test all providers load
    if (
-      actionSheetCtrl && alertCtrl && events && loadingCtrl && menuCtrl && pickerCtrl &&
+      actionSheetCtrl && alertCtrl && loadingCtrl && menuCtrl && pickerCtrl &&
      modalCtrl && platform && popoverCtrl && toastCtrl && navCtrl && domCtrl && config
      ) {
        this.isLoaded = true;
@@ -69,13 +67,6 @@ 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/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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => 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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => 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,6 +19,7 @@ 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
@@ -40,11 +41,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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-alert,prop,enterAnimation,((baseEl: any, opts?: any) => 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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => 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
@@ -57,6 +58,7 @@ 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
@@ -70,14 +72,6 @@ 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
@@ -180,7 +174,7 @@ ion-button,css-prop,--transition
 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false

-ion-card,scoped
+ion-card,shadow
 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
@@ -581,9 +575,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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-loading,prop,keyboardClose,boolean,true,false,false
-ion-loading,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => 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
@@ -597,6 +591,7 @@ 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
@@ -665,7 +660,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 | ((menu: MenuI) => IonicAnimation)) => Promise<void>
+ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => 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>

@@ -679,9 +674,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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,keyboardClose,boolean,true,false,false
-ion-modal,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => 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>
@@ -692,6 +687,7 @@ 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
@@ -711,7 +707,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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-nav,prop,animation,((baseEl: any, opts?: any) => 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
@@ -736,16 +732,6 @@ 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
@@ -758,9 +744,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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,keyboardClose,boolean,true,false,false
-ion-picker,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => 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>
@@ -772,6 +758,7 @@ 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
@@ -796,10 +783,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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => 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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => 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
@@ -811,6 +798,7 @@ 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
@@ -945,7 +933,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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-router-outlet,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-router-outlet,prop,mode,"ios" | "md",getIonMode(this),false,false

 ion-row,shadow
@@ -954,7 +942,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,'md-arrow-back',false,false
+ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'md-arrow-back') as string,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
@@ -964,7 +952,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,boolean | string,'never',false,false
+ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'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
@@ -977,6 +965,7 @@ 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
@@ -1049,6 +1038,8 @@ 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
@@ -1057,7 +1048,6 @@ 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
@@ -1103,6 +1093,10 @@ 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
@@ -1111,12 +1105,15 @@ 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,none
+ion-split-pane,shadow
 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
@@ -1213,18 +1210,16 @@ 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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => 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,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
+ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => 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.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "4.10.3",
+  "version": "5.0.0-beta.0",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -34,18 +34,18 @@
    "tslib": "^1.10.0"
  },
  "devDependencies": {
-    "@stencil/core": "1.6.1",
+    "@stencil/core": "1.7.5",
    "@stencil/sass": "1.0.1",
-    "@types/jest": "24.0.17",
-    "@types/node": "12.7.1",
+    "@types/jest": "24.0.21",
+    "@types/node": "12.12.3",
    "@types/puppeteer": "1.19.1",
    "@types/swiper": "4.4.4",
    "aws-sdk": "^2.497.0",
    "clean-css-cli": "^4.1.11",
    "domino": "^2.1.3",
    "fs-extra": "^8.0.1",
-    "jest": "24.8.0",
-    "jest-cli": "24.8.0",
+    "jest": "24.9.0",
+    "jest-cli": "24.9.0",
    "np": "^5.0.3",
    "pixelmatch": "4.0.2",
    "puppeteer": "1.20.0",
@@ -66,7 +66,6 @@
    "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,10 +79,10 @@
    "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
    "prerender.e2e": "node scripts/testing/prerender.js",
    "start": "npm run build.css && stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.spec": "stencil test --spec",
+    "test": "stencil test --spec --e2e --max-workers=2",
+    "test.spec": "stencil test --spec --max-workers=2",
    "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec",
-    "test.e2e": "stencil test --e2e",
+    "test.e2e": "stencil test --e2e --max-workers=2",
    "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,3 +1,4 @@
+/* eslint-disable */
 /* tslint:disable */
 /**
 * This is an autogenerated file created by the Stencil compiler.
@@ -25,13 +26,11 @@ import {
  HeaderFn,
  HeaderHeightFn,
  InputChangeEventDetail,
-  IonicAnimation,
  ItemHeightFn,
  ItemRenderFn,
  ItemReorderEventDetail,
  LoadingOptions,
  MenuChangeEventDetail,
-  MenuI,
  ModalOptions,
  NavComponent,
  NavOptions,
@@ -253,24 +252,6 @@ 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 {
@@ -1434,7 +1415,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 | ((menu: MenuI) => IonicAnimation)) => Promise<void>;
+    'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
    /**
    * Enable or disable the ability to swipe open the menu.
    * @param enable If `true`, the menu swipe gesture should be enabled.
@@ -1662,27 +1643,6 @@ 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).
@@ -2227,7 +2187,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': boolean | string;
+    'showCancelButton': 'never' | 'focus' | 'always';
    /**
    * If `true`, enable spellcheck on the input.
    */
@@ -2381,10 +2341,6 @@ 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 {
@@ -2500,7 +2456,7 @@ export namespace Components {
  }
  interface IonSplitPane {
    /**
-    * 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.
+    * The content `id` of the split-pane's main content.
    */
    'contentId'?: string;
    /**
@@ -2720,10 +2676,6 @@ 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;
@@ -2783,10 +2735,6 @@ 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;
@@ -2941,12 +2889,6 @@ 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;
@@ -3223,24 +3165,6 @@ 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;
@@ -3515,7 +3439,6 @@ 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;
@@ -3562,9 +3485,6 @@ 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;
@@ -3748,24 +3668,6 @@ 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 {
@@ -4992,27 +4894,6 @@ 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).
@@ -5547,7 +5428,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'?: boolean | string;
+    'showCancelButton'?: 'never' | 'focus' | 'always';
    /**
    * If `true`, enable spellcheck on the input.
    */
@@ -5720,10 +5601,6 @@ 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 {
@@ -5828,7 +5705,7 @@ declare namespace LocalJSX {
  }
  interface IonSplitPane {
    /**
-    * 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.
+    * The content `id` of the split-pane's main content.
    */
    'contentId'?: string;
    /**
@@ -6045,10 +5922,6 @@ 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;
@@ -6105,10 +5978,6 @@ 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;
@@ -6222,7 +6091,6 @@ 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;
@@ -6269,9 +6137,6 @@ 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;
@@ -6330,7 +6195,6 @@ 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>;
@@ -6377,9 +6241,6 @@ 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,6 +8,7 @@
  --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,6 +8,7 @@
  --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,6 +18,8 @@
   * @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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

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

  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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.4, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

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

  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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.32, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 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.                                                                                                                                                                        | `((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`     |
+| 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`     |


 ## Events
@@ -321,6 +321,7 @@ 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,6 +34,10 @@ 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
 */
@@ -69,3 +73,7 @@ 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,6 +28,7 @@
      <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>
@@ -49,6 +50,10 @@
      --height: 325px;
    }

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

-    async function presentWithCssClass() {
+    async function presentWithCssClass(classList) {
+      const addClass = classList ? classList : "my-color-class my-custom-class";
+
      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
        header: "Custom Css Class",
-        cssClass: "my-color-class my-custom-class",
+        cssClass: addClass,
        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';
+  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
  name?: string;
  placeholder?: string;
  value?: any;
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -7,6 +7,7 @@
 :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,6 +7,7 @@
 :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,6 +14,8 @@
   * @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;
@@ -195,3 +197,8 @@
 .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,25 +373,46 @@ export class Alert implements ComponentInterface, OverlayInterface {
    }
    return (
      <div class="alert-input-group" aria-labelledby={labelledby}>
-        { 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>
-        ))}
+        { 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>
+            );
+          }
+        })}
      </div>
    );
  }
--- a/core/src/components/alert/alert.vars.scss
+++ b/core/src/components/alert/alert.vars.scss
@@ -14,3 +14,6 @@ $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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

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

  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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.3, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

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

  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 { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

  backdropAnimation
    .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.32, 0);
+    .fromTo('opacity', 'var(--backdrop-opacity)', 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`, 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`, `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.


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


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

 ## CSS Custom Properties

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


 ## Dependencies
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -131,6 +131,11 @@
            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,6 +73,13 @@ 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,6 +58,13 @@ 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
@@ -1,24 +0,0 @@
-@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
@@ -1,71 +0,0 @@
-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
@@ -1,28 +0,0 @@
-# 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
@@ -1,81 +0,0 @@
-<!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
@@ -1,58 +0,0 @@
-<!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,7 +59,9 @@
    async function showToast() {
      const toast = Object.assign(document.createElement('ion-toast'), {
        message: 'Hello world!',
-        showCloseButton: true
+        buttons: [
+          { text: 'Close', role: 'close' }
+        ]
      });
      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-push component="page-two">
+              <ion-nav-link router-direction="forward" component="page-two">
                <ion-button class="next">Go to Page Two</ion-button>
-              </ion-nav-push>
+              </ion-nav-link>
            </ion-content>
        `;
      }
@@ -47,9 +47,9 @@
            <ion-content class="ion-padding">
              <h1>Page Two</h1>
              <div>
-                <ion-nav-push component="page-three">
+                <ion-nav-link router-direction="forward" component="page-three">
                  <ion-button class="next">Go to Page Three</ion-button>
-                </ion-nav-push>
+                </ion-nav-link>
              </div>
            </ion-content>
        `;
@@ -71,9 +71,9 @@
            <ion-content class="ion-padding">
              <h1>Page Three</h1>
              <div>
-                <ion-nav-push component="page-four">
+                <ion-nav-link router-direction="forward" component="page-four">
                  <ion-button class="next">Go to Page Four</ion-button>
-                </ion-nav-push>
+                </ion-nav-link>
              </div>
            </ion-content>
        `;
--- a/core/src/components/card-header/card-header.scss
+++ b/core/src/components/card-header/card-header.scss
@@ -4,6 +4,9 @@
 // --------------------------------------------------

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

@@ -15,8 +18,3 @@
  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,6 +37,7 @@ 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,7 +46,17 @@
          <ion-card-title>Card Title</ion-card-title>
        </ion-card-header>
        <ion-card-content>
-          This is 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
        </ion-card-content>
      </ion-card>

@@ -67,6 +77,10 @@
      --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,7 +31,8 @@ export class CardSubtitle implements ComponentInterface {
        aria-level="3"
        class={{
          ...createColorClasses(this.color),
-          [mode]: true,
+          'ion-inherit-color': true,
+          [mode]: true
        }}
      >
        <slot></slot>
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -31,6 +31,7 @@ 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: var(--ion-item-background, transparent);
+  --background: #{$item-ios-background};
  --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: var(--ion-item-background, transparent);
+  --background: #{$item-md-background};
  --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,6 +24,7 @@
  overflow: hidden;
 }

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

@@ -32,25 +33,6 @@
  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'
  },
-  scoped: true
+  shadow: true
 })
 export class Card implements ComponentInterface, AnchorInterface, ButtonInterface {

--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -130,7 +130,7 @@
  height: 100%;

  opacity: 0;
-  
+
  pointer-events: none;
 }

@@ -164,3 +164,11 @@
  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,
-    startTimeStamp: 0,
+    startTime: 0,
    currentX: 0,
    currentY: 0,
    velocityX: 0,
    velocityY: 0,
    deltaX: 0,
    deltaY: 0,
-    timeStamp: 0,
+    currentTime: 0,
    data: undefined,
    isScrolling: true,
  };
@@ -379,19 +379,19 @@ const updateScrollDetail = (
 ) => {
  const prevX = detail.currentX;
  const prevY = detail.currentY;
-  const prevT = detail.timeStamp;
+  const prevT = detail.currentTime;
  const currentX = el.scrollLeft;
  const currentY = el.scrollTop;
  const timeDelta = timestamp - prevT;

  if (shouldStart) {
    // remember the start positions
-    detail.startTimeStamp = timestamp;
+    detail.startTime = timestamp;
    detail.startX = currentX;
    detail.startY = currentY;
    detail.velocityX = detail.velocityY = 0;
  }
-  detail.timeStamp = timestamp;
+  detail.currentTime = 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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,44 @@
+<!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 no-border>
+    <ion-header>
      <ion-toolbar>
        <ion-title>Content - Fullscreen</ion-title>
      </ion-toolbar>
--- a/core/src/components/footer/footer.ios.scss
+++ b/core/src/components/footer/footer.ios.scss
@@ -8,10 +8,6 @@
  --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;
@@ -21,4 +17,8 @@
    --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[no-border]::before {
+.footer-md.ion-no-border::before {
  display: none;
-}
+}
--- a/core/src/components/footer/readme.md
+++ b/core/src/components/footer/readme.md
@@ -8,11 +8,18 @@ Footer can be a wrapper for ion-toolbar to make sure the content area is sized c

 ## Usage

-### Javascript
+### Angular / 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>
@@ -30,6 +37,13 @@ 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>
@@ -41,6 +55,28 @@ 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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,36 @@
+<!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,7 +7,8 @@ test('footer: translucent', async () => {
    url: '/src/components/footer/test/translucent?ionic:_testing=true'
  });

-  await checkComponentModeClasses(await page.find('ion-footer'), 'footer-translucent');
+  const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
+  await checkComponentModeClasses(await page.find('ion-footer'), globalMode!, '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
@@ -0,0 +1,16 @@
+```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,6 +1,13 @@
 ```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,6 +5,13 @@ 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
@@ -0,0 +1,18 @@
+```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,10 +39,11 @@
 // --------------------------------------------------

 // Remove the padding from grid and all immediate children columns
-:host([no-padding]) {
-  @include padding(0);
-}
-
-:host([no-padding]) ::slotted(ion-col) {
-  @include padding(0);
+: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;
 }
--- a/core/src/components/header/header.ios.scss
+++ b/core/src/components/header/header.ios.scss
@@ -8,10 +8,6 @@
  --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;
@@ -23,6 +19,10 @@
  }
 }

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

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

-/**
- * 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;
-}
-
-.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-title,
-.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
+.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 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;
 }
--- a/core/src/components/header/header.md.scss
+++ b/core/src/components/header/header.md.scss
@@ -22,10 +22,10 @@
  content: "";
 }

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

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

  @Element() el!: HTMLElement;

@@ -57,14 +58,10 @@ export class Header implements ComponentInterface {
    // Determine if the header can collapse
    const hasCollapse = this.collapse === 'condense';
    const canCollapse = (hasCollapse && getIonMode(this) === 'ios') ? hasCollapse : false;
-
    if (!canCollapse && this.collapsibleHeaderInitialized) {
      this.destroyCollapsibleHeader();
    } else if (canCollapse && !this.collapsibleHeaderInitialized) {
-      const tabs = this.el.closest('ion-tabs');
-      const page = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-
-      const pageEl = (tabs) ? tabs : (page) ? page : null;
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
      const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;

      await this.setupCollapsibleHeader(contentEl, pageEl);
@@ -81,6 +78,11 @@ 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) {
@@ -88,49 +90,46 @@ 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);
-
-      // TODO: Find a better way to do this
-      let remainingHeight = 0;
-      for (let i = 1; i <= scrollHeaderIndex.toolbars.length - 1; i++) {
-        remainingHeight += scrollHeaderIndex.toolbars[i].el.clientHeight;
-      }
-
-      /**
-       * Handle interaction between toolbar collapse and
-       * showing/hiding content in the primary ion-header
-       */
-      const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
-
-      readTask(() => {
        const mainHeaderHeight = mainHeaderIndex.el.clientHeight;
-        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { threshold: 0.25, rootMargin: `-${mainHeaderHeight}px 0px 0px 0px` });
+
+        /**
+         * Handle interaction between toolbar collapse and
+         * showing/hiding content in the primary ion-header
+         * as well as progressively showing/hiding the main header
+         * border as the top-most toolbar collapses or expands.
+         */
+        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!, mainHeaderIndex, scrollHeaderIndex, remainingHeight); };
-      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,29 +45,22 @@ 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;
 };

-export const handleContentScroll = (scrollEl: HTMLElement, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, remainingHeight = 0) => {
+export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: HeaderIndex) => {
  readTask(() => {
    const scrollTop = scrollEl.scrollTop;
-    const lastMainToolbar = mainHeaderIndex.toolbars[mainHeaderIndex.toolbars.length - 1];
-
    const scale = clamp(1, 1 + (-scrollTop / 500), 1.1);

-    const borderOpacity = clamp(0, (scrollTop - remainingHeight) / lastMainToolbar.el.clientHeight, 1);
-    const maxOpacity = 1;
-    const scaledOpacity = borderOpacity * maxOpacity;
-
    writeTask(() => {
      scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
-      setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], (scaledOpacity === 1) ? undefined : scaledOpacity);
    });
  });
 };

-const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity: number | undefined) => {
+export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity?: number) => {
  if (opacity === undefined) {
    toolbar.background.style.removeProperty('--opacity');
  } else {
@@ -75,6 +68,13 @@ const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity: number | un
  }
 };

+const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) => {
+  if (!ev[0].isIntersecting) { return; }
+
+  const scale = ((1 - ev[0].intersectionRatio) * 100) / 75;
+  setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], (scale === 1) ? undefined : scale);
+};
+
 /**
 * If toolbars are intersecting, hide the scrollable toolbar content
 * and show the primary toolbar content. If the toolbars are not intersecting,
@@ -82,7 +82,10 @@ const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity: number | un
 */
 export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex) => {
  writeTask(() => {
+    handleToolbarBorderIntersection(ev, mainHeaderIndex);
+
    const event = ev[0];
+
    const intersection = event.intersectionRect;
    const intersectionArea = intersection.width * intersection.height;
    const rootArea = event.rootBounds.width * event.rootBounds.height;
@@ -114,20 +117,18 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
      if (hasValidIntersection) {
        setHeaderActive(mainHeaderIndex);
        setHeaderActive(scrollHeaderIndex, false);
+        setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);
      }
    }
  });
 };

 export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
-  writeTask(() => {
-    if (active) {
-      headerIndex.el.classList.remove('header-collapse-condense-inactive');
-    } else {
-      headerIndex.el.classList.add('header-collapse-condense-inactive');
-    }
-    setToolbarBackgroundOpacity(headerIndex.toolbars[0], (active) ? undefined : 0);
-  });
+  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,6 +26,13 @@ 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>
@@ -57,6 +64,13 @@ 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>
@@ -86,6 +100,13 @@ 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
@@ -0,0 +1,10 @@
+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
@@ -0,0 +1,34 @@
+<!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,7 +7,8 @@ test('header: translucent', async () => {
    url: '/src/components/header/test/translucent?ionic:_testing=true'
  });

-  await checkComponentModeClasses(await page.find('ion-header'), 'header-translucent');
+  const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
+  await checkComponentModeClasses(await page.find('ion-header'), globalMode!, '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,6 +12,13 @@
  </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,6 +12,13 @@
  </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/react.md
+++ b/core/src/components/header/usage/react.md
@@ -17,6 +17,13 @@ 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>
--- a/core/src/components/header/usage/vue.md
+++ b/core/src/components/header/usage/vue.md
@@ -13,6 +13,13 @@
    </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/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -55,7 +55,7 @@ export class ItemSliding implements ComponentInterface {
  @Watch('disabled')
  disabledChanged() {
    if (this.gesture) {
-      this.gesture.setDisabled(this.disabled);
+      this.gesture.enable(!this.disabled);
    }
  }

--- a/core/src/components/list/list.ios.scss
+++ b/core/src/components/list/list.ios.scss
@@ -79,3 +79,11 @@
  --border-width: 0;
  --inner-border-width: 0;
 }
+
+
+// iOS List Inside A Card
+// --------------------------------------------------
+
+ion-card .list-ios {
+  @include margin(0);
+}
--- a/core/src/components/list/list.md.scss
+++ b/core/src/components/list/list.md.scss
@@ -87,4 +87,12 @@
 .list-md .item-lines-none {
  --border-width: 0;
  --inner-border-width: 0;
-}
+}
+
+
+// Material Design List Inside A Card
+// --------------------------------------------------
+
+ion-card .list-md {
+  @include margin(0);
+}
--- a/core/src/components/loading/animations/ios.enter.ts
+++ b/core/src/components/loading/animations/ios.enter.ts
@@ -1,17 +1,17 @@
-import { IonicAnimation } from '../../../interface';
+import { Animation } from '../../../interface';
 import { createAnimation } from '../../../utils/animation/animation';

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

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

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

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

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

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

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

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

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

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

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

  wrapperAnimation
    .addElement(baseEl.querySelector('.loading-wrapper')!)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Liam DeBeasi	926b119231	remove old lines	2019-11-18 15:03:42 -05:00
Liam DeBeasi	256c7de469	only fire pressUp if press was fired; allow overriding of other gesture params	2019-11-18 15:02:38 -05:00
Liam DeBeasi	b7b5b94cce	add angular integration	2019-11-12 11:39:21 -05:00
Liam DeBeasi	5e1e883585	sync with master	2019-11-12 11:33:42 -05:00
Liam DeBeasi	21484f1f3a	fix(gesture): release gesture when disabling (#19855 ) fixes #19848	2019-11-12 10:45:06 -05:00
Tawfiek Khalaf	b28cf02ef3	feat(alert): add support for textarea (#16851 ) resolves #14153	2019-11-11 14:27:45 -05:00
Liam DeBeasi	bef0f53d0d	feat(select): add --placeholder-opacity and --placeholder-color, expose shadow parts (#19893 ) resolves #17446	2019-11-11 12:49:10 -05:00
Brandy Carney	1a8b7a4559	fix(card): update background to use the same as item (#19602 ) uses item background but falls back to the background of the content	2019-11-08 12:55:19 -05:00
Brandy Carney	b23c759456	docs(slides): document css vars (#19872 )	2019-11-08 12:37:00 -05:00
Antoine	1ab7066aa0	feat(searchbar): add --box-shadow variable to style searchbar input (#19838 ) * Updates searchbar.md.scss to expose box-shadow We would like to style the box-shadow property in searchbar and give the parent the ability to control it. * fix(searchbar): add box shadow to main input for both modes	2019-11-08 10:53:42 -05:00
Liam DeBeasi	48a766246d	feat(angular): expose Ionic Gestures via GestureController (#19864 ) * expose gestures thru angular * run linter	2019-11-08 10:35:52 -05:00
Brandy Carney	fce3e24600	fix(content): set fixed content to position absolute (#19867 ) Adds absolute position to fixed slot in order to display text that is inside of the slot. Fixes #17754 Co-authored-by: Matthew de Nobrega matthew@caro.health	2019-11-08 10:31:33 -05:00
Masahiko Sakakibara	be0ab5c2ff	chore(menu): change deprecated error message (#19717 )	2019-11-07 18:58:32 -05:00
Simon	c5be8831a2	docs(searchbar): update vue usage to kebab-case for the attributes (#19625 )	2019-11-07 18:55:47 -05:00
Ely Lucas	edf64ef121	merge release-4.11.4	2019-11-07 15:54:48 -07:00
Himujjal Upadhyaya	504051d709	fix(nav-params): set generic type on navigation parameters get() (#19195 )	2019-11-07 17:45:31 -05:00
Dylan Ballandras	90be7ec4b6	docs(toggle): update prop name for toggle OnChange in react (#19344 ) closes #19343	2019-11-07 17:36:37 -05:00
Ely Lucas	1af1e2a14f	chore(core): fixing test from bad rebase	2019-11-07 15:32:39 -07:00
Ely Lucas	2cc4244c05	4.11.4	2019-11-07 15:26:04 -07:00
Aubrey Holland	74e40cdc35	fix(react): check for component unmount, fixes #19859	2019-11-07 15:24:52 -07:00
Ely Lucas	13b323f25d	chore(react): lowering the timeout for the ionpage check to avoid false positives	2019-11-07 15:24:52 -07:00
Ely Lucas	3e14a57f84	fix(react): adding multiple subscriptions to lifecycle events, fixes #19792 (#19858 )	2019-11-07 15:24:52 -07:00
Ely Lucas	9864c17c1c	fix(react): add check to warn if no ionpage is found, fixes #19832 (#19857 )	2019-11-07 15:24:52 -07:00
Ely Lucas	e2ed0e9e87	fix(react): expand the location stack to better support back button, fixes #19748 (#19856 )	2019-11-07 15:24:52 -07:00
Ely Lucas	a4b2de5730	fix(react): adding hardware back button support, fixes(19819) (#19851 )	2019-11-07 15:24:52 -07:00
Ely Lucas	f3ac682010	fix(react): adding swipe back functionality and routerOutlet ready improvements, fixes #19818 (#19849 )	2019-11-07 15:24:52 -07:00
Ely Lucas	2f5d823748	fix(react): create a new overlay each time component is presented, fixes #19841 , #19823 (#19842 )	2019-11-07 15:24:52 -07:00
Liam DeBeasi	e5e9dd5dfe	fix(menu): clamp out of bounds swipe value (#19684 ) fixes #18927	2019-11-07 15:24:09 -07:00
Liam DeBeasi	ad747b05f1	add press up handler	2019-11-07 15:20:49 -05:00
Liam DeBeasi	3b52074a10	fix typo	2019-11-07 15:17:26 -05:00
Liam DeBeasi	9eac7266a0	Fix	2019-11-07 15:04:18 -05:00
Liam DeBeasi	12a4c974b4	add press recognizer	2019-11-07 15:03:05 -05:00
Liam DeBeasi	a3666ddf0c	fix(header): avoid flicker on ios when collapsing (#19850 ) fixes #19839	2019-11-07 09:51:03 -05:00
Liam DeBeasi	cace1b357e	fix(ios): only animate large title if back button is in start slot (#19846 ) fixes #19840	2019-11-06 11:14:09 -05:00
Mike Hartington	ab9d3b2696	chore(): update stencil (#19734 ) * chore(): update stencil * bump deps * chore(): bump jest	2019-11-01 10:06:23 -07:00
Mike Hartington	60aa027903	chore(): fix tabs (#19821 ) * fix(tabs): do not wait on child tab setActive() lazy loading * whenDefined example * chore(): fix lint	2019-11-01 09:29:30 -07:00
Liam DeBeasi	7bd4412889	fix(animation): track correctly when updating CSS Animation (#19813 ) * fix bug * update menu * fix	2019-10-31 12:50:54 -04:00
Liam DeBeasi	96a5e600e5	feat(animation): cubic-bezier easing conversion utility (experimental) (#19788 ) resolves #19789	2019-10-31 10:16:33 -04:00
Ely Lucas	33cf08bf0e	chore(react): removing beta verbiage from readme (#19803 )	2019-10-30 17:10:00 -06:00
Ely Lucas	7e6e81db55	chore(build) setting max workers in core spec and e2e tests to 2 (#19805 )	2019-10-30 16:47:49 -06:00
Ray Clanan	f2d18a2346	chore(react): update readme to remove capacitor instruction	2019-10-30 15:51:37 -06:00
Ely Lucas	77d18c7172	release-4.11.3	2019-10-30 13:31:36 -06:00
Ely Lucas	ec43b8c9b8	chore(changelog): fixing changelog items	2019-10-30 13:18:05 -06:00
Ely Lucas	b4938db5f9	4.11.3	2019-10-30 13:18:04 -06:00
Ely Lucas	9c7beff910	chore(build): setting max workers to 2 in core tests	2019-10-30 13:16:15 -06:00
Ely Lucas	16815b3cc8	chore(build): awaiting on test task	2019-10-30 13:16:15 -06:00
Ely Lucas	e23d91c6e7	fix(react): checking if node is actually an element before treating it like one, fixes #19769 (#19783 )	2019-10-30 13:16:15 -06:00
Ely Lucas	1f2b161ccd	fix(react): unmount leaving view when using browser back button, fixes #19749 (#19781 )	2019-10-30 13:16:15 -06:00
Ely Lucas	67737bbb54	fix(react): checking isOpen again after async call before opening overlay, fixes #19755	2019-10-30 13:16:15 -06:00
Ely Lucas	29f8178794	fix(react): don't remove current view, provide a better method to determine showGoBack fixes #19731 and #19732	2019-10-30 13:16:15 -06:00
Liam DeBeasi	d80f45516d	feat(split-pane): convert to shadow component, add width, max-width, and min-width vars (#19754 ) resolves #17088 Co-authored-by: troyanskiy <roman.rosluk@utopix.ch>	2019-10-30 14:16:39 -04:00
Liam DeBeasi	420aa66392	fix(toast): call button handler on cancel (#19793 ) fixes #19791	2019-10-30 14:02:18 -04:00
Brandy Carney	7988720b1c	fix(picker): pass data and role to the dismiss based on button click or backdrop (#19787 ) - Pass the button role on dismiss of the picker (on button click or backdrop tap) - Pass the selected values in the data on dismiss ONLY if the dismiss role is not "cancel" or "backdrop" - Call the cancel handler when dismissing if the role is "cancel" or "backdrop" Fixes #18454	2019-10-30 13:25:11 -04:00
Liam DeBeasi	67a7e232b9	feat(angular): Expose Ionic Animations via the AnimationController (#19745 ) * Add animation controller for angular * remove empty constructor * sync with master	2019-10-29 16:14:26 -04:00
Liam DeBeasi	7d417154c5	feat(animation): Animation Identifiers (#19771 ) resolves #19550	2019-10-29 15:44:41 -04:00
Liam DeBeasi	b642b532e8	fix(header): translucent toolbars now work with collapsible headers (#19774 ) fixes #19773	2019-10-29 15:43:26 -04:00
Liam DeBeasi	0a7aae28a7	fix(header): avoid flicker on collapsible header load (#19682 ) * fix flicker on collapse load * remove old test	2019-10-29 14:36:26 -04:00
Liam DeBeasi	39fb8f6720	fix(menu): clicking backdrop closes menu properly (#19785 )	2019-10-29 13:26:15 -04:00
Brandy Carney	f63d37a4c5	fix(textarea): remove padding from textarea placeholder (#19694 ) fixes #19616	2019-10-22 11:01:15 -04:00
Liam DeBeasi	9568f228b2	merge release-4.11.2 Sync 4.11.2	2019-10-21 17:54:25 -04:00
Liam DeBeasi	a2e1c55911	4.11.2	2019-10-21 17:36:16 -04:00
Ely Lucas	834666c754	fix(react): adding change events to iontabs, fixes #19665 (#19711 )	2019-10-21 17:32:37 -04:00
Ely Lucas	5acb58a03d	fix(react): removing pages from DOM on nav, fixes #19701 (#19712 )	2019-10-21 17:32:32 -04:00
Ely Lucas	ce7314db0b	chore(react): removing console log and tree shaking change	2019-10-21 17:32:28 -04:00
Ely Lucas	71fdcbc1b4	fix(react): adding HashRouter to available ion routers, fixes #19621 (#19683 )	2019-10-21 17:32:22 -04:00
Brandy Carney	4ed525dbac	chore(github): add weekly digest	2019-10-18 12:07:02 -04:00
Liam DeBeasi	e6e01381eb	fix(ios): hide leaving view after nav transition to avoid flicker (#19691 ) fixes #19674	2019-10-18 10:08:42 -04:00
Liam DeBeasi	e3233000c6	fix(menu): clamp out of bounds swipe value (#19684 ) fixes #18927	2019-10-18 08:56:53 -04:00
Liam DeBeasi	f0e4215f41	docs(header): add collapse header styling details (#19669 ) * update large title styles * add missing space	2019-10-17 14:19:33 -04:00
Liam DeBeasi	df1bc1e627	refactor(gesture): update Gesture API to latest (#19671 )	2019-10-17 14:18:39 -04:00
Liam DeBeasi	f69f9e4d54	fix(header): collapsible header works in tabs (#19658 ) fixes #19640	2019-10-17 12:59:08 -04:00
Michael Asimakopoulos	ed6f3b9f3f	fix(searchbar): use back button config value (#19353 ) fixes #19347	2019-10-16 11:41:25 -04:00
Brandy Carney	2981eaa501	docs(contributing): add an example of multi-line breaking changes	2019-10-15 13:14:48 -04:00
Brandy Carney	c1bff121d9	docs(contributing): update commit message guidelines	2019-10-15 12:21:44 -04:00
Brandy Carney	7fc93b61cd	merge release-5.0.0-beta.0 release 5.0.0-beta.0	2019-10-15 11:44:54 -04:00
Brandy Carney	cbf30ea9b7	5.0.0-beta.0	2019-10-15 11:29:02 -04:00
Brandy Carney	43ecf6ce5f	chore(release): update target branch to current branch for release tag	2019-10-14 20:07:55 -04:00
Brandy Carney	ce0bed4cf3	chore(release): update release script to move the npm link	2019-10-14 20:07:55 -04:00
Brandy Carney	b3e035085c	chore: increase timeout	2019-10-14 20:07:55 -04:00
Brandy Carney	94c13c2994	chore(scripts): update release script to include tag for rc - adds support for changing the tag from `latest` to `next` - checks the user's confirmation on the prepare and tag to end the script if the user selects no - adds support for passing --dry-run to see what the publish will be	2019-10-14 20:07:55 -04:00
Liam DeBeasi	2f882373bf	fix(animations): ensure all elements are cleaned up when calling .destroy() (#19654 ) * fix race condition * remove zero	2019-10-14 14:18:29 -04:00
Ely Lucas	91008ac9a4	merge release-4.11.1	2019-10-14 11:36:08 -06:00
Ely Lucas	53010057bb	4.11.1	2019-10-14 11:14:53 -06:00
Ely Lucas	48575f8163	chore(): bumping timeout	2019-10-14 11:14:53 -06:00
Ely Lucas	28d21ae55f	chore(react): fixing test and another method to tab nav	2019-10-14 11:13:20 -06:00
Ely Lucas	8935d4d1b6	fix(react): handle tab back nav better, fixes #19646 (#19647 )	2019-10-14 11:13:20 -06:00
Ely Lucas	3ba9e71a1f	fix(react): add IonPicker as controller component, fixes #19620 (#19643 )	2019-10-14 11:13:20 -06:00
Ely Lucas	889f282450	fix(build): properly update peer dependencies (#19639 )	2019-10-14 11:13:20 -06:00
Ely Lucas	b5f077b60e	fix(react): moving tslint and friends to devDependencies (#19624 )	2019-10-14 11:13:20 -06:00
Brandy Carney	1cb97504d9	chore(release): npm link react package for the release script (#19657 )	2019-10-14 12:54:30 -04:00
Brandy Carney	981cb5674b	chore(tests): update tests and add e2e to ci (#19637 ) - increase timeout to fix failing tests	2019-10-11 16:51:02 -04:00
Liam DeBeasi	32b97582cb	refactor(): remove old animation utility (#19586 ) Use Ionic Animations instead	2019-10-11 13:47:52 -04:00
Liam DeBeasi	0d699fb2e4	perf(animations): do not create setTimeout if infinite iterations (#19632 ) closes #19627	2019-10-11 12:49:54 -04:00
Liam DeBeasi	589e67e4af	perf(animations): wrap loops in requestAnimationFrame call (#19630 ) fixes #19629	2019-10-11 12:00:52 -04:00
Stefanos Anagnostou	250718a40f	fix(toast): inherit height in container to center align content (#19409 )	2019-10-10 16:05:11 -04:00
Adam Bradley	08bb60dcbb	refactor(card): convert card to shadow (#19395 ) references #18899	2019-10-10 15:55:35 -04:00
Brandy Carney	17119f59cf	fix(grid): remove padding on children columns when grid has ion-no-padding (#19592 ) fixes #17459	2019-10-10 15:22:59 -04:00
Liam DeBeasi	17170f01da	refactor(angular): removes Events service (#19600 ) BREAKING CHANGES The Events Service in @ionic/angular has been removed. - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables - Use "Redux" for advanced state management: https://ngrx.io	2019-10-10 14:34:16 -04:00
Liam DeBeasi	e623fbff80	refactor(split-pane): remove [main] deprecation warning (#19599 )	2019-10-10 14:34:16 -04:00
Oori	5d6e077067	fix(css): update responsive display media queries (#18601 ) BREAKING CHANGES The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. 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. fixes #18600	2019-10-10 14:34:16 -04:00
Brandy Carney	bd22926c49	feat(overlays): add global backdrop opacity variable for animations (#19533 ) adds `--backdrop-opacity` to all overlays and `--ion-backdrop-opacity` for global control closes #16446	2019-10-10 14:34:16 -04:00
Brandy Carney	3dd5f05760	feat(components): cascade mode from parent to child components (#19369 ) fixes #18285	2019-10-10 14:34:16 -04:00
Adam Bradley	dbf6a448ff	feat(menu): default to overlay for ios menu (#19063 ) resolves #18662	2019-10-10 14:34:16 -04:00
Liam DeBeasi	1b9d61bfa8	refactor(): remove deprecated swipeEnable (#19526 )	2019-10-10 14:34:16 -04:00
Liam DeBeasi	ac4f254a4f	refactor(): remove [main] from split-pane (#19511 )	2019-10-10 14:34:16 -04:00
Liam DeBeasi	e665d38d23	refactor(): remove no-border references, add ion-no-border class (#18954 ) * remove no border ref * change to dispaly * update usage	2019-10-10 14:34:16 -04:00
Brandy Carney	3cac855e1a	refactor(searchbar): remove boolean values from showCancelButton (#18953 ) BREAKING CHANGES The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`. The following should change: ``` <ion-searchbar show-cancel-button> <ion-searchbar show-cancel-button="true"> <ion-searchbar show-cancel-button="false"> ``` becomes ``` <ion-searchbar show-cancel-button="focus"> <ion-searchbar show-cancel-button="focus"> <ion-searchbar show-cancel-button="never"> ```	2019-10-10 14:34:16 -04:00
Brandy Carney	97964a9e9f	refactor(anchor): remove anchor in favor of router-link (#18935 ) BREAKING CHANGES The deprecated `ion-anchor` component has been removed in favor using `ion-router-link`. It should still only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.	2019-10-10 14:34:16 -04:00
Brandy Carney	13974c1047	refactor(skeleton-text): remove width property (#18936 ) BREAKING CHANGES Skeleton text's `width` property has been removed. Please use CSS instead to set the width.	2019-10-10 14:34:16 -04:00
Brandy Carney	e67f7e81f7	refactor(css): remove CSS util attributes (#18956 ) BREAKING CHANGES Removes all CSS utility attributes. Please use CSS classes instead. See the documentation for the correct class names: https://ionicframework.com/docs/layout/css-utilities	2019-10-10 14:34:16 -04:00
Brandy Carney	5f235307cd	refactor(themes): update to new ionic colors (#19279 ) BREAKING CHANGES The Ionic default colors have been updated to the following: primary: #3880ff secondary: #3dc2ff tertiary: #5260ff success: #2dd36f warning: #ffc409 danger: #eb445a light: #f4f5f8 medium: #92949c dark: #222428 `primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.	2019-10-10 14:34:16 -04:00
Brandy Carney	1a7aa404c5	refactor(scss): remove scss (#19292 ) BREAKING CHANGES Removes `scss` files from the distributed files. Please use CSS variables for theming instead.	2019-10-10 14:34:16 -04:00
Brandy Carney	07d5f77584	refactor(nav): remove nav-push, nav-pop nav-root (#19240 ) BREAKING CHANGES Removes ion-nav-pop, ion-nav-push and ion-nav-set-root in favor of using ion-nav-link with router-direction	2019-10-10 14:34:16 -04:00
Manu MA	c8ac0266f2	refactor(): deprecate web component controllers (#19109 )	2019-10-10 14:34:16 -04:00
Liam DeBeasi	d6c20a9dec	refactor(toast): remove showCloseButton and closeButtonText (#18957 ) * Remove close button * update tests * update tests * add build	2019-10-10 14:34:16 -04:00
Ely Lucas	f742dc5519	merge release-4.11.0	2019-10-09 14:52:09 -06:00
Ely Lucas	209cd5adfa	4.11.0	2019-10-09 14:33:20 -06:00