4.5.0

chore(): run linter
fix(test): avoid more race conditions
2026-03-13 10:22:08 +08:00 · 2019-06-12 12:43:33 -04:00 · 2019-06-12 12:24:08 -04:00 · 2019-06-12 12:16:52 -04:00 · 2019-06-12 11:41:26 -04:00 · 2019-06-11 17:56:13 -04:00
434 changed files with 8292 additions and 3153 deletions
--- a/.github/PROCESS.md
+++ b/.github/PROCESS.md
@@ -243,8 +243,10 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai

    <img width="191" alt="Merge pull request button" src="https://user-images.githubusercontent.com/236501/47032669-8be1b980-d138-11e8-9a90-d1518c223184.png">

-1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch.
+1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch. For example, if this release is for `4.3.1`, the message would be `merge release-4.3.1`.

-1. Create a pull request and merge the release branch back into `master` using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.
+1. Submit a pull request from the `stable` branch into `master`. Merge this pull request using the same commit format in the last step, to ensure any changes made on the release branch get added to future releases.

-1. Merge the release branch into its corresponding version branch. If this is a major or minor release, create the version branch off the latest `stable`.
+1. Merge the release branch into its corresponding version branch.
+    - If this is a major or minor release, create the version branch off the latest `stable`. For example, if this release was `4.2.0`, create a branch called `4.2.x` off of `stable`.
+    - If this is a patch release, merge the release branch into the version branch. For example, if this release is `4.2.1`, merge the release branch into the `4.2.x` branch.
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,115 @@
+# [4.5.0](https://github.com/ionic-team/ionic/compare/v4.4.2...v4.5.0) (2019-06-12)
+
+
+### Bug Fixes
+
+* **angular:** ensure all NavigationExtras values are preserved when navigating ([#18468](https://github.com/ionic-team/ionic/issues/18468)) ([7610787](https://github.com/ionic-team/ionic/commit/7610787)), closes [#18469](https://github.com/ionic-team/ionic/issues/18469)
+* **button:** set opacity on the host element for disabled button ([#18509](https://github.com/ionic-team/ionic/issues/18509)) ([320719b](https://github.com/ionic-team/ionic/commit/320719b)), closes [#16965](https://github.com/ionic-team/ionic/issues/16965)
+* **button:** use correct border-radius on menu and back button ([#18501](https://github.com/ionic-team/ionic/issues/18501)) ([055e125](https://github.com/ionic-team/ionic/commit/055e125)), closes [#17624](https://github.com/ionic-team/ionic/issues/17624)
+* **button:** use correct size on a dynamic button in an item ([#18395](https://github.com/ionic-team/ionic/issues/18395)) ([a3e23fc](https://github.com/ionic-team/ionic/commit/a3e23fc)), closes [#18085](https://github.com/ionic-team/ionic/issues/18085)
+* **card:** remove white space from bottom of card ([#18328](https://github.com/ionic-team/ionic/issues/18328)) ([d53e7aa](https://github.com/ionic-team/ionic/commit/d53e7aa))
+* **content:** prevent ion-searchbar from receiving padding adjustment when keyboard is open ([#18008](https://github.com/ionic-team/ionic/issues/18008)) ([b2290a6](https://github.com/ionic-team/ionic/commit/b2290a6)), closes [#18007](https://github.com/ionic-team/ionic/issues/18007)
+* **datetime:** recalculate time columns on change ([#18380](https://github.com/ionic-team/ionic/issues/18380)) ([292b24a](https://github.com/ionic-team/ionic/commit/292b24a))
+* **item:** start align the content under stacked and floating labels ([#18379](https://github.com/ionic-team/ionic/issues/18379)) ([f0af707](https://github.com/ionic-team/ionic/commit/f0af707)), closes [#16375](https://github.com/ionic-team/ionic/issues/16375)
+* **item:** inherit overflow to allow better customization ([#18502](https://github.com/ionic-team/ionic/issues/18502)) ([8d2a47e](https://github.com/ionic-team/ionic/commit/8d2a47e)), closes [#17670](https://github.com/ionic-team/ionic/issues/17670)
+* **item:** use a step color if the activated background is not set ([#18450](https://github.com/ionic-team/ionic/issues/18450)) ([1899c13](https://github.com/ionic-team/ionic/commit/1899c13)), closes [#18449](https://github.com/ionic-team/ionic/issues/18449)
+* **item-sliding:** use the correct gesture direction and side for rtl ([#18366](https://github.com/ionic-team/ionic/issues/18366)) ([4545100](https://github.com/ionic-team/ionic/commit/4545100)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **label:** include the ion-text-wrap class styles for larger font ([#18374](https://github.com/ionic-team/ionic/issues/18374)) ([4bba540](https://github.com/ionic-team/ionic/commit/4bba540))
+* **platform:** prevent error with Platform.is on Android 4.4 ([#18387](https://github.com/ionic-team/ionic/issues/18387)) ([54bdb36](https://github.com/ionic-team/ionic/commit/54bdb36))
+* **react:** ensure element exists in controller before dismissing it ([0fd3e5d](https://github.com/ionic-team/ionic/commit/0fd3e5d))
+* **slides:** resolve issue where double tap to zoom was enabled by default ([10de1da](https://github.com/ionic-team/ionic/commit/10de1da)), closes [#18035](https://github.com/ionic-team/ionic/issues/18035)
+* **tabs:** allow selection on enter and spacebar press ([#18381](https://github.com/ionic-team/ionic/issues/18381)) ([11cde99](https://github.com/ionic-team/ionic/commit/11cde99)), closes [#18363](https://github.com/ionic-team/ionic/issues/18363)
+* **textarea:** inherit white-space for better customization ([#18508](https://github.com/ionic-team/ionic/issues/18508)) ([a583902](https://github.com/ionic-team/ionic/commit/a583902)), closes [#18495](https://github.com/ionic-team/ionic/issues/18495)
+* **virtual-scroll:** do not crash with an empty cell list ([#17799](https://github.com/ionic-team/ionic/issues/17799)) ([20c146e](https://github.com/ionic-team/ionic/commit/20c146e))
+
+
+### Features
+
+* **back-button:** add variables and support for focused and hover states ([#18451](https://github.com/ionic-team/ionic/issues/18451)) ([58672fb](https://github.com/ionic-team/ionic/commit/58672fb)), closes [#18465](https://github.com/ionic-team/ionic/issues/18465)
+* **button:** add variables for customizing hover state ([#18499](https://github.com/ionic-team/ionic/issues/18499)) ([5c5934b](https://github.com/ionic-team/ionic/commit/5c5934b)), closes [#17974](https://github.com/ionic-team/ionic/issues/17974)
+* **item-divider:** add inner padding CSS variables ([#18490](https://github.com/ionic-team/ionic/issues/18490)) ([35c143a](https://github.com/ionic-team/ionic/commit/35c143a)), closes [#18484](https://github.com/ionic-team/ionic/issues/18484)
+* **menu-button:** add variables for hover and focused states ([#18434](https://github.com/ionic-team/ionic/issues/18434)) ([5ba0aa9](https://github.com/ionic-team/ionic/commit/5ba0aa9)), closes [#18279](https://github.com/ionic-team/ionic/issues/18279)
+* **searchbar:** add cancel button options ([b959e0b](https://github.com/ionic-team/ionic/commit/b959e0b))
+* **toast:** allow html content ([#18423](https://github.com/ionic-team/ionic/issues/18423)) ([c8104a2](https://github.com/ionic-team/ionic/commit/c8104a2))
+
+
+
+## [4.4.2](https://github.com/ionic-team/ionic/compare/v4.4.1...v4.4.2) (2019-05-22)
+
+
+### Bug Fixes
+
+* **angular:** account for query params and fragments within a string when navigating ([#18356](https://github.com/ionic-team/ionic/issues/18356)) ([b79f68a](https://github.com/ionic-team/ionic/commit/b79f68a))
+
+
+
+## [4.4.1](https://github.com/ionic-team/ionic/compare/v4.4.0...v4.4.1) (2019-05-22)
+
+
+### Bug Fixes
+
+* **angular:** ensure active page is not removed from change detection ([#18299](https://github.com/ionic-team/ionic/issues/18299)) ([b8d4961](https://github.com/ionic-team/ionic/commit/b8d4961)), closes [#18293](https://github.com/ionic-team/ionic/issues/18293)
+* **angular:** preserve queryParams and fragment when going back ([#18298](https://github.com/ionic-team/ionic/issues/18298)) ([bdd5109](https://github.com/ionic-team/ionic/commit/bdd5109)), closes [#16744](https://github.com/ionic-team/ionic/issues/16744)
+* **buttons:** use theme/color toolbar colors for buttons ([#18191](https://github.com/ionic-team/ionic/issues/18191)) ([0511989](https://github.com/ionic-team/ionic/commit/0511989)), closes [#18184](https://github.com/ionic-team/ionic/issues/18184) [#17840](https://github.com/ionic-team/ionic/issues/17840)
+* **datetime:** update label direction in RTL ([#18340](https://github.com/ionic-team/ionic/issues/18340)) ([17345ef](https://github.com/ionic-team/ionic/commit/17345ef))
+* **fab:** position fab buttons properly in RTL ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **icon:** remove stroke and move fill to host element ([#18241](https://github.com/ionic-team/ionic/issues/18241)) ([394cf8d](https://github.com/ionic-team/ionic/commit/394cf8d)), closes [#16483](https://github.com/ionic-team/ionic/issues/16483)
+* **input:** keep entire input in view when scrolling with keyboard open ([#18253](https://github.com/ionic-team/ionic/issues/18253)) ([3cad778](https://github.com/ionic-team/ionic/commit/3cad778)), closes [#17457](https://github.com/ionic-team/ionic/issues/17457)
+* **label:** position floating/stacked labels properly in RTL ([#18315](https://github.com/ionic-team/ionic/issues/18315)) ([00a27dc](https://github.com/ionic-team/ionic/commit/00a27dc)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **loading:** allow html content ([#18242](https://github.com/ionic-team/ionic/issues/18242)) ([a6cb5f2](https://github.com/ionic-team/ionic/commit/a6cb5f2)), closes [#18135](https://github.com/ionic-team/ionic/issues/18135)
+* **overlay:** hide scrollbars on non-scrollable content ([#16767](https://github.com/ionic-team/ionic/issues/16767)) ([875d563](https://github.com/ionic-team/ionic/commit/875d563)), closes [#14178](https://github.com/ionic-team/ionic/issues/14178)
+* **picker:** update the column positions in RTL ([#18339](https://github.com/ionic-team/ionic/issues/18339)) ([788a56c](https://github.com/ionic-team/ionic/commit/788a56c)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **range:** update border-radius on range pin for RTL ([#18321](https://github.com/ionic-team/ionic/issues/18321)) ([4855351](https://github.com/ionic-team/ionic/commit/4855351)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **searchbar:** position buttons properly in RTL ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **segment:** update segment border for RTL ([#18326](https://github.com/ionic-team/ionic/issues/18326)) ([805b225](https://github.com/ionic-team/ionic/commit/805b225)), closes [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **slides:** allow clicks to propagate to buttons ([#16728](https://github.com/ionic-team/ionic/issues/16728)) ([a8f9dfe](https://github.com/ionic-team/ionic/commit/a8f9dfe))
+* **tab-button:** apply background-focused when tabbing into tab button ([#17502](https://github.com/ionic-team/ionic/issues/17502)) ([d788a8e](https://github.com/ionic-team/ionic/commit/d788a8e)), closes [#17042](https://github.com/ionic-team/ionic/issues/17042)
+* **tabs:** position badge properly in RTL (only in Chrome) ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **tabs:** select the tab called by the select method after initialization ([#18300](https://github.com/ionic-team/ionic/issues/18300)) ([da38647](https://github.com/ionic-team/ionic/commit/da38647)), closes [#17957](https://github.com/ionic-team/ionic/issues/17957)
+* **toggle:** position toggle icon properly in RTL ([#18325](https://github.com/ionic-team/ionic/issues/18325)) ([845def8](https://github.com/ionic-team/ionic/commit/845def8)), references [#17012](https://github.com/ionic-team/ionic/issues/17012)
+* **toolbar:** update md toolbar button spacing and padding to match spec ([#17537](https://github.com/ionic-team/ionic/issues/17537)) ([fa87e35](https://github.com/ionic-team/ionic/commit/fa87e35)), closes [#16950](https://github.com/ionic-team/ionic/issues/16950) [#14444](https://github.com/ionic-team/ionic/issues/14444)
+
+
+
+# [4.4.0 Beryllium](https://github.com/ionic-team/ionic/compare/v4.3.1...v4.4.0) (2019-05-08)
+
+
+### Bug Fixes
+
+* **button:** apply round property to button sizes in iOS ([#18125](https://github.com/ionic-team/ionic/issues/18125)) ([ae0eccc](https://github.com/ionic-team/ionic/commit/ae0eccc)), closes [#18108](https://github.com/ionic-team/ionic/issues/18108)
+* **datetime:** default to current date when value is null ([#18105](https://github.com/ionic-team/ionic/issues/18105)) ([ca233b5](https://github.com/ionic-team/ionic/commit/ca233b5)), closes [#18099](https://github.com/ionic-team/ionic/issues/18099)
+* **input:** clear on edit from inside native input ([#17115](https://github.com/ionic-team/ionic/issues/17115)) ([85093d6](https://github.com/ionic-team/ionic/commit/85093d6)), closes [#17055](https://github.com/ionic-team/ionic/issues/17055)
+* **item:** use the global activated background for md ripple color ([#16752](https://github.com/ionic-team/ionic/issues/16752)) ([95945c0](https://github.com/ionic-team/ionic/commit/95945c0)), closes [#16585](https://github.com/ionic-team/ionic/issues/16585)
+* **label:** use primary color on focus for md input labels ([#18183](https://github.com/ionic-team/ionic/issues/18183)) ([ddb8ef8](https://github.com/ionic-team/ionic/commit/ddb8ef8)), closes [#15602](https://github.com/ionic-team/ionic/issues/15602)
+* **menu** add prefixed transform for side menu animation ([#18128](https://github.com/ionic-team/ionic/issues/18128)) ([2457a23](https://github.com/ionic-team/ionic/commit/2457a23)), closes [#17729](https://github.com/ionic-team/ionic/issues/17729)
+* **reorder-group:** remove required parameter for the complete method ([#18084](https://github.com/ionic-team/ionic/issues/18084)) ([bd96491](https://github.com/ionic-team/ionic/commit/bd96491)), closes [#16302](https://github.com/ionic-team/ionic/issues/16302)
+* **segment:** decrease icon size on ios and stretch segment buttons to fill height ([#17751](https://github.com/ionic-team/ionic/issues/17751)) ([0fa645b](https://github.com/ionic-team/ionic/commit/0fa645b)), closes [#17069](https://github.com/ionic-team/ionic/issues/17069)
+* **textarea:** reposition textarea when keyboard appears ([#18098](https://github.com/ionic-team/ionic/issues/18098)) ([3cdab10](https://github.com/ionic-team/ionic/commit/3cdab10)), closes [#17847](https://github.com/ionic-team/ionic/issues/17847)
+* **toast:** allow button-color CSS variable to be overridden ([#18133](https://github.com/ionic-team/ionic/issues/18133)) ([0c83fd3](https://github.com/ionic-team/ionic/commit/0c83fd3)), closes [#18127](https://github.com/ionic-team/ionic/issues/18127)
+
+
+### Features
+
+* **card:** add button functionality ([#17997](https://github.com/ionic-team/ionic/issues/17997)) ([669ec0d](https://github.com/ionic-team/ionic/commit/669ec0d)), closes [#17773](https://github.com/ionic-team/ionic/issues/17773)
+* **img:** add ionImgWillLoad event and emit ionImgDidLoad when image is loaded ([#18159](https://github.com/ionic-team/ionic/issues/18159)) ([38ffb98](https://github.com/ionic-team/ionic/commit/38ffb98)), closes [#17652](https://github.com/ionic-team/ionic/issues/17652) [#18161](https://github.com/ionic-team/ionic/issues/18161)
+* **item-sliding:** add open method ([#17964](https://github.com/ionic-team/ionic/issues/17964)) ([f912206](https://github.com/ionic-team/ionic/commit/f912206)), closes [#17899](https://github.com/ionic-team/ionic/issues/17899)
+* **menu-button:** add css variables for padding ([#18188](https://github.com/ionic-team/ionic/issues/18188)) ([ef98977](https://github.com/ionic-team/ionic/commit/ef98977)), closes [#18187](https://github.com/ionic-team/ionic/issues/18187)
+* **refresher:** add pullFactor property to control speed ([#16697](https://github.com/ionic-team/ionic/issues/16697)) ([9030dcc](https://github.com/ionic-team/ionic/commit/9030dcc)), closes [#15425](https://github.com/ionic-team/ionic/issues/15425)
+* **searchbar:** add disabled property ([#17935](https://github.com/ionic-team/ionic/issues/17935)) ([a5b9066](https://github.com/ionic-team/ionic/commit/a5b9066)), closes [#17921](https://github.com/ionic-team/ionic/issues/17921)
+* **textarea:** add option to expand textarea as value changes ([#16916](https://github.com/ionic-team/ionic/issues/16916)) ([cc8678a](https://github.com/ionic-team/ionic/commit/cc8678a))
+
+
+
+## [4.3.1](https://github.com/ionic-team/ionic/compare/v4.3.0...v4.3.1) (2019-04-26)
+
+
+### Bug Fixes
+
+* **angular:** support replaceUrl with angular <7.2 ([#18106](https://github.com/ionic-team/ionic/issues/18106)) ([eb3cbe4](https://github.com/ionic-team/ionic/commit/eb3cbe4))
+* **security:** sanitize components using innerHTML ([#18146](https://github.com/ionic-team/ionic/issues/18146)) ([b839e6f](https://github.com/ionic-team/ionic/commit/b839e6f))
+
+
+
 # [4.3.0 Lithium](https://github.com/ionic-team/ionic/compare/v4.2.0...v4.3.0) (2019-04-17)


--- a/angular/BREAKING.md
+++ b/angular/BREAKING.md
@@ -783,6 +783,26 @@ The option component should now be written as an `ion-item-option`. Previously i

 The `getSlidingPercent` method has been renamed to `getSlidingRatio` since the function is returning a ratio of the open amount of the item compared to the width of the options.

+### Arguments Changed
+
+The `ionDrag` event no longer gets the sliding item as an argument. It now takes an event with a property `details` which contains two properties `amount` and `ratio` reflecting the absolute and ratio values of the sliding action respectively.
+
+**Old Usage Example:**
+
+```typescript
+dragged(item: ItemSliding) {
+  console.log(item.getSlidingPercent());
+  console.log(item.getOpenAmount());
+}
+```
+
+**New Usage Example:**
+```typescript
+dragged(ev: { details: { amount: number, ratio: number } }) {
+  console.log(ev.details.ratio);
+  console.log(ev.details.amount);
+}
+```

 ## Label

--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "4.3.0",
+  "version": "4.5.0",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -45,7 +45,7 @@
    "css/"
  ],
  "dependencies": {
-    "@ionic/core": "4.3.0",
+    "@ionic/core": "4.5.0",
    "tslib": "^1.9.3"
  },
  "peerDependencies": {
--- a/angular/src/directives/navigation/ion-router-outlet.ts
+++ b/angular/src/directives/navigation/ion-router-outlet.ts
@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
 import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -59,6 +60,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
    private changeDetector: ChangeDetectorRef,
    private config: Config,
    private navCtrl: NavController,
+    commonLocation: Location,
    elementRef: ElementRef,
    router: Router,
    zone: NgZone,
@@ -68,7 +70,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
    this.nativeEl = elementRef.nativeElement;
    this.name = name || PRIMARY_OUTLET;
    this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
-    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone);
+    this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone, commonLocation);
    parentContexts.onChildOutletCreated(this.name, this as any);
  }

@@ -141,6 +143,20 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
    if (this.activated) {
      if (this.activatedView) {
        this.activatedView.savedData = new Map(this.getContext()!.children['contexts']);
+
+        /**
+         * Ensure we are saving the NavigationExtras
+         * data otherwise it will be lost
+         */
+        this.activatedView.savedExtras = {};
+        const context = this.getContext()!;
+
+        if (context.route) {
+          const contextSnapshot = context.route.snapshot;
+
+          this.activatedView.savedExtras.queryParams = contextSnapshot.queryParams;
+          this.activatedView.savedExtras.fragment = contextSnapshot.fragment;
+        }
      }
      const c = this.component;
      this.activatedView = null;
--- a/angular/src/directives/navigation/stack-controller.ts
+++ b/angular/src/directives/navigation/stack-controller.ts
@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterDirection } from '@ionic/core';
@@ -22,6 +23,7 @@ export class StackController {
    private router: Router,
    private navCtrl: NavController,
    private zone: NgZone,
+    private location: Location
  ) {
    this.tabsPrefix = tabsPrefix !== undefined ? toSegments(tabsPrefix) : undefined;
  }
@@ -59,7 +61,22 @@ export class StackController {
    }
    const viewsSnapshot = this.views.slice();

-    const currentNavigation = this.router.getCurrentNavigation();
+    let currentNavigation;
+
+    const router = (this.router as any);
+
+    // Angular >= 7.2.0
+    if (router.getCurrentNavigation) {
+      currentNavigation = router.getCurrentNavigation();
+
+    // Angular < 7.2.0
+    } else if (
+      router.navigations &&
+      router.navigations.value
+    ) {
+      currentNavigation = router.navigations.value;
+    }
+
    /**
     * If the navigation action
     * sets `replaceUrl: true`
@@ -80,7 +97,7 @@ export class StackController {
    const views = this.insertView(enteringView, direction);
    return this.wait(async () => {
      await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
-      await cleanupAsync(enteringView, views, viewsSnapshot);
+      await cleanupAsync(enteringView, views, viewsSnapshot, this.location);
      return {
        enteringView,
        direction,
@@ -117,7 +134,7 @@ export class StackController {
        }
      }

-      return this.navCtrl.navigateBack(url).then(() => true);
+      return this.navCtrl.navigateBack(url, view.savedExtras).then(() => true);
    });
  }

@@ -213,22 +230,35 @@ export class StackController {
  }
 }

-function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
+function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
  return new Promise(resolve => {
    requestAnimationFrame(() => {
-      cleanup(activeRoute, views, viewsSnapshot);
+      cleanup(activeRoute, views, viewsSnapshot, location);
      resolve();
    });
  });
 }

-function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
+function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
  viewsSnapshot
    .filter(view => !views.includes(view))
    .forEach(destroyView);

  views.forEach(view => {
-    if (view !== activeRoute) {
+
+    /**
+     * In the event that a user navigated multiple
+     * times in rapid succession, we want to make sure
+     * we don't pre-emptively detach a view while
+     * it is in mid-transition.
+     *
+     * In this instance we also do not care about query
+     * params or fragments as it will be the same view regardless
+     */
+    const locationWithoutParams = location.path().split('?')[0];
+    const locationWithoutFragment = locationWithoutParams.split('#')[0];
+
+    if (view !== activeRoute && view.url !== locationWithoutFragment) {
      const element = view.element;
      element.setAttribute('aria-hidden', 'true');
      element.classList.add('ion-page-hidden');
--- a/angular/src/directives/navigation/stack-utils.ts
+++ b/angular/src/directives/navigation/stack-utils.ts
@@ -1,5 +1,5 @@
 import { ComponentRef } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';

 export function insertView(views: RouteView[], view: RouteView, direction: RouterDirection) {
@@ -94,5 +94,6 @@ export interface RouteView {
  element: HTMLElement;
  ref: ComponentRef<any>;
  savedData?: any;
+  savedExtras?: NavigationExtras;
  unlistenEvents: () => void;
 }
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -85,7 +85,7 @@ export class IonButtons {
 }

 export declare interface IonCard extends StencilComponents<'IonCard'> {}
-@Component({ selector: 'ion-card', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
+@Component({ selector: 'ion-card', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection'] })
 export class IonCard {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -93,7 +93,7 @@ export class IonCard {
    this.el = r.nativeElement;
  }
 }
-proxyInputs(IonCard, ['color', 'mode']);
+proxyInputs(IonCard, ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection']);

 export declare interface IonCardContent extends StencilComponents<'IonCardContent'> {}
@Component({ selector: 'ion-card-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode'] })
@@ -293,13 +293,14 @@ proxyInputs(IonIcon, ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'm
 export declare interface IonImg extends StencilComponents<'IonImg'> {}
@Component({ selector: 'ion-img', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
 export class IonImg {
+  ionImgWillLoad!: EventEmitter<CustomEvent>;
  ionImgDidLoad!: EventEmitter<CustomEvent>;
  ionError!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef) {
    c.detach();
    this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionImgDidLoad', 'ionError']);
+    proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']);
  }
 }
 proxyInputs(IonImg, ['alt', 'src']);
@@ -413,7 +414,7 @@ export class IonItemSliding {
    proxyOutputs(this, this.el, ['ionDrag']);
  }
 }
-proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']);
+proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']);
 proxyInputs(IonItemSliding, ['disabled']);

 export declare interface IonLabel extends StencilComponents<'IonLabel'> {}
@@ -602,7 +603,7 @@ export class IonRange {
 proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']);

 export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {}
-@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
+@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled'] })
 export class IonRefresher {
  ionRefresh!: EventEmitter<CustomEvent>;
  ionPull!: EventEmitter<CustomEvent>;
@@ -615,7 +616,7 @@ export class IonRefresher {
  }
 }
 proxyMethods(IonRefresher, ['complete', 'cancel', 'getProgress']);
-proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled']);
+proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled']);

 export declare interface IonRefresherContent extends StencilComponents<'IonRefresherContent'> {}
@Component({ selector: 'ion-refresher-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
@@ -675,7 +676,7 @@ export class IonRow {
 }

 export declare interface IonSearchbar extends StencilComponents<'IonSearchbar'> {}
-@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
+@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
 export class IonSearchbar {
  ionInput!: EventEmitter<CustomEvent>;
  ionChange!: EventEmitter<CustomEvent>;
@@ -691,7 +692,7 @@ export class IonSearchbar {
  }
 }
 proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
-proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
+proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);

 export declare interface IonSegment extends StencilComponents<'IonSegment'> {}
@Component({ selector: 'ion-segment', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'scrollable', 'value'] })
@@ -856,7 +857,7 @@ export class IonText {
 proxyInputs(IonText, ['color', 'mode']);

 export declare interface IonTextarea extends StencilComponents<'IonTextarea'> {}
-@Component({ selector: 'ion-textarea', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'] })
+@Component({ selector: 'ion-textarea', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value'] })
 export class IonTextarea {
  ionChange!: EventEmitter<CustomEvent>;
  ionInput!: EventEmitter<CustomEvent>;
@@ -870,7 +871,7 @@ export class IonTextarea {
  }
 }
 proxyMethods(IonTextarea, ['setFocus', 'getInputElement']);
-proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
+proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value']);

 export declare interface IonThumbnail extends StencilComponents<'IonThumbnail'> {}
@Component({ selector: 'ion-thumbnail', changeDetection: 0, template: '<ng-content></ng-content>' })
--- a/angular/src/providers/nav-controller.ts
+++ b/angular/src/providers/nav-controller.ts
@@ -1,6 +1,6 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
-import { NavigationExtras, NavigationStart, Router, UrlTree } from '@angular/router';
+import { NavigationExtras, NavigationStart, Router, UrlSerializer, UrlTree } from '@angular/router';
 import { NavDirection, RouterDirection } from '@ionic/core';

 import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';
@@ -29,6 +29,7 @@ export class NavController {
  constructor(
    platform: Platform,
    private location: Location,
+    private serializer: UrlSerializer,
    @Optional() private router?: Router,
  ) {
    // Subscribe to router events to detect direction
@@ -184,7 +185,29 @@ export class NavController {
    if (Array.isArray(url)) {
      return this.router!.navigate(url, options);
    } else {
-      return this.router!.navigateByUrl(url, options);
+
+      /**
+       * navigateByUrl ignores any properties that
+       * would change the url, so things like queryParams
+       * would be ignored unless we create a url tree
+       * More Info: https://github.com/angular/angular/issues/18798
+       */
+      const urlTree = this.serializer.parse(url.toString());
+
+      if (options.queryParams !== undefined) {
+        urlTree.queryParams = { ...options.queryParams };
+      }
+
+      if (options.fragment !== undefined) {
+        urlTree.fragment = options.fragment;
+      }
+
+      /**
+       * `navigateByUrl` will still apply `NavigationExtras` properties
+       * that do not modify the url, such as `replaceUrl` which is why
+       * `options` is passed in here.
+       */
+      return this.router!.navigateByUrl(urlTree, options);
    }
  }
 }
--- a/angular/test/test-app/angular.json
+++ b/angular/test/test-app/angular.json
@@ -20,7 +20,16 @@
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
            ],
            "styles": [
              "src/styles.css"
--- a/angular/test/test-app/e2e/src/router-link.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/router-link.e2e-spec.ts
@@ -1,5 +1,49 @@
-import { browser, element, by } from 'protractor';
+import { browser, element, by, protractor } from 'protractor';
 import { waitTime, testStack, testLifeCycle, handleErrorMessages } from './utils';
+import { HttpUrlEncodingCodec } from '@angular/common/http';
+
+const EC = protractor.ExpectedConditions;
+
+describe('router-link params and fragments', () => {
+  const queryParam = 'A&=#Y';
+  const fragment = 'myDiv1';
+  const id = 'MyPageID==';
+  
+  afterEach(() => {
+    handleErrorMessages();
+  });
+  
+  it('should go to a page with properly encoded values', async () => {
+    await browser.get('/router-link?ionic:_testing=true');
+    await element(by.css('#queryParamsFragment')).click();
+    
+    const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
+
+    browser.wait(EC.urlContains(expectedRoute), 5000);
+  });
+  
+  it('should return to a page with preserved query param and fragment', async () => {
+    await browser.get('/router-link?ionic:_testing=true');
+    await element(by.css('#queryParamsFragment')).click();
+    await element(by.css('#goToPage3')).click(); 
+    
+    browser.wait(EC.urlContains('router-link-page3'), 5000);
+    
+    await element(by.css('#goBackFromPage3')).click(); 
+    
+    const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
+    browser.wait(EC.urlContains(expectedRoute), 5000);
+  });
+  
+  it('should preserve query param and fragment with defaultHref string', async () => {
+    await browser.get('/router-link-page3?ionic:_testing=true');
+    
+    await element(by.css('#goBackFromPage3')).click();
+
+    const expectedRoute = '?token=ABC#fragment';
+    browser.wait(EC.urlContains(expectedRoute), 5000);
+  });
+});

 describe('router-link', () => {

--- a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
@@ -130,22 +130,22 @@ describe('tabs', () => {
      expect(await tab.$('ion-back-button').isDisplayed()).toBe(false);
    });
  });
-  
+
  describe('enter url - /tabs/contact/one', () => {
    beforeEach(async () => {
      await browser.get('/tabs/contact/one');
    });
-    
-    it('should return to correct tab after going to page in different outlet', async () => {      
+
+    it('should return to correct tab after going to page in different outlet', async () => {
      const tab = await getSelectedTab();
      await tab.$('#goto-nested-page1').click();
-            
+
      await testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']);
-      
+
      const nestedOutlet = await element(by.css('app-nested-outlet'));
      const backButton = await nestedOutlet.$('ion-back-button');
      await backButton.click();
-            
+
      await testTabTitle('Tab 2 - Page 1');
    });
  })
@@ -156,7 +156,7 @@ async function testState(count: number, tab: string) {
 }

 async function testTabTitle(title: string) {
-  await waitTime(600);
+  await waitTime(1000);
  const tab = await getSelectedTab();
  expect(await tab.$('ion-title').getText()).toEqual(title);
  return tab;
--- a/angular/test/test-app/src/app/app-routing.module.ts
+++ b/angular/test/test-app/src/app/app-routing.module.ts
@@ -4,6 +4,8 @@ import { InputsComponent } from './inputs/inputs.component';
 import { ModalComponent } from './modal/modal.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
+import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
+import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
@@ -31,6 +33,8 @@ const routes: Routes = [
  { path: 'providers', component: ProvidersComponent },
  { path: 'router-link', component: RouterLinkComponent },
  { path: 'router-link-page', component: RouterLinkPageComponent },
+  { path: 'router-link-page2/:id', component: RouterLinkPage2Component },
+  { path: 'router-link-page3', component: RouterLinkPage3Component },
  { path: 'slides', component: SlidesComponent },
  { path: 'virtual-scroll', component: VirtualScrollComponent },
  { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
--- a/angular/test/test-app/src/app/app.module.ts
+++ b/angular/test/test-app/src/app/app.module.ts
@@ -11,6 +11,8 @@ import { ModalComponent } from './modal/modal.component';
 import { ModalExampleComponent } from './modal-example/modal-example.component';
 import { RouterLinkComponent } from './router-link/router-link.component';
 import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
+import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
+import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
 import { HomePageComponent } from './home-page/home-page.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
@@ -39,6 +41,8 @@ import { NavigationPage3Component } from './navigation-page3/navigation-page3.co
    ModalExampleComponent,
    RouterLinkComponent,
    RouterLinkPageComponent,
+    RouterLinkPage2Component,
+    RouterLinkPage3Component,
    HomePageComponent,
    TabsComponent,
    TabsTab1Component,
--- a/angular/test/test-app/src/app/router-link-page2/router-link-page2.component.html
+++ b/angular/test/test-app/src/app/router-link-page2/router-link-page2.component.html
@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Router Page 2</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <ion-button routerLink="/router-link-page3" id="goToPage3">Go to Page 3</ion-button>
+</ion-content>
--- a/angular/test/test-app/src/app/router-link-page2/router-link-page2.component.ts
+++ b/angular/test/test-app/src/app/router-link-page2/router-link-page2.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-router-link-page2',
+  templateUrl: './router-link-page2.component.html'
+})
+export class RouterLinkPage2Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/angular/test/test-app/src/app/router-link-page3/router-link-page3.component.html
+++ b/angular/test/test-app/src/app/router-link-page3/router-link-page3.component.html
@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar color="dark">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/?token=ABC#fragment" id="goBackFromPage3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Router Page 3</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  Page 3
+</ion-content>
--- a/angular/test/test-app/src/app/router-link-page3/router-link-page3.component.ts
+++ b/angular/test/test-app/src/app/router-link-page3/router-link-page3.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-router-link-page3',
+  templateUrl: './router-link-page3.component.html'
+})
+export class RouterLinkPage3Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/angular/test/test-app/src/app/router-link/router-link.component.html
+++ b/angular/test/test-app/src/app/router-link/router-link.component.html
@@ -26,5 +26,7 @@
  <p><button (click)="navigateForward()" id="button-forward">navigateForward</button></p>
  <p><button (click)="navigateRoot()" id="button-root">navigateForward</button></p>
  <p><button (click)="navigateBack()" id="button-back">navigateBack</button></p>
-
+  
+  <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }" fragment="myDiv1">Query Params and Fragment</button></p>
+  
 </ion-content>
--- a/core/README.md
+++ b/core/README.md
@@ -23,8 +23,8 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:

 ```html
-<link href="https://unpkg.com/@ionic/core@4.3.0/css/ionic.bundle.css" rel="stylesheet">
-<script src="https://unpkg.com/@ionic/core@4.3.0/dist/ionic.js"></script>
+<link href="https://unpkg.com/@ionic/core@4.5.0/css/ionic.bundle.css" rel="stylesheet">
+<script src="https://unpkg.com/@ionic/core@4.5.0/dist/ionic.js"></script>
 ```

 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.
--- a/core/api.txt
+++ b/core/api.txt
@@ -1,6 +1,6 @@

 ion-action-sheet-controller,none
-ion-action-sheet-controller,method,create,create(opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
+ion-action-sheet-controller,method,create,create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
 ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-action-sheet-controller,method,getTop,getTop() => Promise<HTMLIonActionSheetElement | undefined>

@@ -36,7 +36,7 @@ ion-action-sheet,css-prop,--min-width
 ion-action-sheet,css-prop,--width

 ion-alert-controller,none
-ion-alert-controller,method,create,create(opts: AlertOptions) => Promise<HTMLIonAlertElement>
+ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTMLIonAlertElement>
 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>

@@ -89,8 +89,12 @@ ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,css-prop,--background
+ion-back-button,css-prop,--background-focused
+ion-back-button,css-prop,--background-hover
 ion-back-button,css-prop,--border-radius
 ion-back-button,css-prop,--color
+ion-back-button,css-prop,--color-focused
+ion-back-button,css-prop,--color-hover
 ion-back-button,css-prop,--icon-font-size
 ion-back-button,css-prop,--icon-font-weight
 ion-back-button,css-prop,--icon-margin-bottom
@@ -149,6 +153,7 @@ ion-button,event,ionFocus,void,true
 ion-button,css-prop,--background
 ion-button,css-prop,--background-activated
 ion-button,css-prop,--background-focused
+ion-button,css-prop,--background-hover
 ion-button,css-prop,--border-color
 ion-button,css-prop,--border-radius
 ion-button,css-prop,--border-style
@@ -157,6 +162,7 @@ ion-button,css-prop,--box-shadow
 ion-button,css-prop,--color
 ion-button,css-prop,--color-activated
 ion-button,css-prop,--color-focused
+ion-button,css-prop,--color-hover
 ion-button,css-prop,--opacity
 ion-button,css-prop,--padding-bottom
 ion-button,css-prop,--padding-end
@@ -186,8 +192,13 @@ ion-card-title,prop,mode,"ios" | "md",undefined,false,false
 ion-card-title,css-prop,--color

 ion-card,scoped
+ion-card,prop,button,boolean,false,false,false
 ion-card,prop,color,string | undefined,undefined,false,false
+ion-card,prop,disabled,boolean,false,false,false
+ion-card,prop,href,string | undefined,undefined,false,false
 ion-card,prop,mode,"ios" | "md",undefined,false,false
+ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
+ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-card,css-prop,--background
 ion-card,css-prop,--color

@@ -382,6 +393,7 @@ ion-img,prop,alt,string | undefined,undefined,false,false
 ion-img,prop,src,string | undefined,undefined,false,false
 ion-img,event,ionError,void,true
 ion-img,event,ionImgDidLoad,void,true
+ion-img,event,ionImgWillLoad,void,true

 ion-infinite-scroll-content,none
 ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
@@ -445,6 +457,10 @@ ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
 ion-item-divider,css-prop,--background
 ion-item-divider,css-prop,--color
+ion-item-divider,css-prop,--inner-padding-bottom
+ion-item-divider,css-prop,--inner-padding-end
+ion-item-divider,css-prop,--inner-padding-start
+ion-item-divider,css-prop,--inner-padding-top
 ion-item-divider,css-prop,--padding-bottom
 ion-item-divider,css-prop,--padding-end
 ion-item-divider,css-prop,--padding-start
@@ -471,6 +487,7 @@ ion-item-sliding,method,close,close() => Promise<void>
 ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
 ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
 ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise<number>
+ion-item-sliding,method,open,open(side: "start" | "end" | undefined) => Promise<void>
 ion-item-sliding,event,ionDrag,void,true

 ion-item,shadow
@@ -532,7 +549,7 @@ ion-list,prop,mode,"ios" | "md",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>

 ion-loading-controller,none
-ion-loading-controller,method,create,create(opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
+ion-loading-controller,method,create,create(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
 ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-loading-controller,method,getTop,getTop() => Promise<HTMLIonLoadingElement | undefined>

@@ -571,21 +588,31 @@ ion-menu-button,prop,autoHide,boolean,true,false,false
 ion-menu-button,prop,color,string | undefined,undefined,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
+ion-menu-button,css-prop,--background
+ion-menu-button,css-prop,--background-focused
+ion-menu-button,css-prop,--background-hover
+ion-menu-button,css-prop,--border-radius
 ion-menu-button,css-prop,--color
+ion-menu-button,css-prop,--color-focused
+ion-menu-button,css-prop,--color-hover
+ion-menu-button,css-prop,--padding-bottom
+ion-menu-button,css-prop,--padding-end
+ion-menu-button,css-prop,--padding-start
+ion-menu-button,css-prop,--padding-top

 ion-menu-controller,none
-ion-menu-controller,method,close,close(menuId?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,enable,enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,get,get(menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
+ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean>
+ion-menu-controller,method,enable,enable(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
+ion-menu-controller,method,get,get(menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
 ion-menu-controller,method,getMenus,getMenus() => Promise<HTMLIonMenuElement[]>
 ion-menu-controller,method,getOpen,getOpen() => Promise<HTMLIonMenuElement | undefined>
 ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
-ion-menu-controller,method,isEnabled,isEnabled(menuId?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,isOpen,isOpen(menuId?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,open,open(menuId?: string | null | undefined) => 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) => void
-ion-menu-controller,method,swipeGesture,swipeGesture(shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,toggle,toggle(menuId?: string | null | undefined) => Promise<boolean>
+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>

 ion-menu-toggle,shadow
 ion-menu-toggle,prop,autoHide,boolean,true,false,false
@@ -618,7 +645,7 @@ ion-menu,css-prop,--min-width
 ion-menu,css-prop,--width

 ion-modal-controller,none
-ion-modal-controller,method,create,create<T extends ComponentRef>(opts: ModalOptions<T>) => Promise<HTMLIonModalElement>
+ion-modal-controller,method,create,create<T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>
 ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | undefined>

@@ -691,7 +718,7 @@ ion-note,prop,mode,"ios" | "md",undefined,false,false
 ion-note,css-prop,--color

 ion-picker-controller,none
-ion-picker-controller,method,create,create(opts: PickerOptions) => Promise<HTMLIonPickerElement>
+ion-picker-controller,method,create,create(options: PickerOptions) => Promise<HTMLIonPickerElement>
 ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-picker-controller,method,getTop,getTop() => Promise<HTMLIonPickerElement | undefined>

@@ -730,7 +757,7 @@ ion-picker,css-prop,--min-width
 ion-picker,css-prop,--width

 ion-popover-controller,none
-ion-popover-controller,method,create,create<T extends ComponentRef>(opts: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
+ion-popover-controller,method,create,create<T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
 ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-popover-controller,method,getTop,getTop() => Promise<HTMLIonPopoverElement | undefined>

@@ -830,6 +857,7 @@ ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,fal
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
 ion-refresher,prop,disabled,boolean,false,false,false
+ion-refresher,prop,pullFactor,number,1,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
 ion-refresher,prop,pullMin,number,60,false,false
 ion-refresher,prop,snapbackDuration,string,'280ms',false,false
@@ -849,7 +877,7 @@ ion-reorder,shadow

 ion-ripple-effect,shadow
 ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false
-ion-ripple-effect,method,addRipple,addRipple(pageX: number, pageY: number) => Promise<() => void>
+ion-ripple-effect,method,addRipple,addRipple(x: number, y: number) => Promise<() => void>

 ion-route-redirect,none
 ion-route-redirect,prop,from,string,undefined,true,false
@@ -885,10 +913,11 @@ 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
 ion-searchbar,prop,debounce,number,250,false,false
+ion-searchbar,prop,disabled,boolean,false,false,false
 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,false,false,false
+ion-searchbar,prop,showCancelButton,boolean | string,'never',false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,value,null | string | undefined,'',false,false
@@ -969,7 +998,7 @@ ion-select,prop,okText,string,'OK',false,false
 ion-select,prop,placeholder,null | string | undefined,undefined,false,false
 ion-select,prop,selectedText,null | string | undefined,undefined,false,false
 ion-select,prop,value,any,undefined,false,false
-ion-select,method,open,open(ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>
+ion-select,method,open,open(event?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>
 ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
 ion-select,event,ionChange,SelectChangeEventDetail,true
@@ -998,9 +1027,9 @@ ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise<number>
 ion-slides,method,isBeginning,isBeginning() => Promise<boolean>
 ion-slides,method,isEnd,isEnd() => Promise<boolean>
 ion-slides,method,length,length() => Promise<number>
-ion-slides,method,lockSwipeToNext,lockSwipeToNext(shouldLockSwipeToNext: boolean) => Promise<void>
-ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(shouldLockSwipeToPrev: boolean) => Promise<void>
-ion-slides,method,lockSwipes,lockSwipes(shouldLockSwipes: boolean) => Promise<void>
+ion-slides,method,lockSwipeToNext,lockSwipeToNext(lock: boolean) => Promise<void>
+ion-slides,method,lockSwipeToPrev,lockSwipeToPrev(lock: boolean) => Promise<void>
+ion-slides,method,lockSwipes,lockSwipes(lock: boolean) => Promise<void>
 ion-slides,method,slideNext,slideNext(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
 ion-slides,method,slidePrev,slidePrev(speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
 ion-slides,method,slideTo,slideTo(index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>
@@ -1084,6 +1113,7 @@ ion-text,prop,color,string | undefined,undefined,false,false
 ion-text,prop,mode,"ios" | "md",undefined,false,false

 ion-textarea,scoped
+ion-textarea,prop,autoGrow,boolean,false,false,false
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
@@ -1129,7 +1159,7 @@ ion-title,prop,color,string | undefined,undefined,false,false
 ion-title,css-prop,--color

 ion-toast-controller,none
-ion-toast-controller,method,create,create(opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
+ion-toast-controller,method,create,create(options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
 ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-toast-controller,method,getTop,getTop() => Promise<HTMLIonToastElement | undefined>

@@ -1217,5 +1247,5 @@ ion-virtual-scroll,prop,renderFooter,((item: any, index: number) => any) | undef
 ion-virtual-scroll,prop,renderHeader,((item: any, index: number) => any) | undefined,undefined,false,false
 ion-virtual-scroll,prop,renderItem,((item: any, index: number) => any) | undefined,undefined,false,false
 ion-virtual-scroll,method,checkEnd,checkEnd() => void
-ion-virtual-scroll,method,checkRange,checkRange(offset: number, len?: number) => void
+ion-virtual-scroll,method,checkRange,checkRange(offset: number, length?: number) => void
 ion-virtual-scroll,method,positionForItem,positionForItem(index: number) => Promise<number>
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "4.3.0",
+  "version": "4.5.0",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -30,7 +30,7 @@
    "loader/"
  ],
  "dependencies": {
-    "ionicons": "4.5.6"
+    "ionicons": "4.5.8"
  },
  "devDependencies": {
    "@stencil/core": "0.17.3-0",
@@ -39,7 +39,7 @@
    "@types/jest": "^23.3.13",
    "@types/node": "10.12.18",
    "@types/puppeteer": "1.11.2",
-    "@types/swiper": "4.4.1",
+    "@types/swiper": "^4.4.2",
    "agadoo": "^1.0.0",
    "autoprefixer": "9.4.6",
    "aws-sdk": "^2.320.0",
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -89,7 +89,7 @@ export namespace Components {
    /**
    * Create an action sheet overlay with action sheet options.
    */
-    'create': (opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
+    'create': (options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
    /**
    * Dismiss the open action sheet overlay.
    */
@@ -143,11 +143,11 @@ export namespace Components {
    */
    'mode': Mode;
    /**
-    * Returns a promise that resolves when the action-sheet did dismiss.
+    * Returns a promise that resolves when the action sheet did dismiss.
    */
    'onDidDismiss': () => Promise<OverlayEventDetail<any>>;
    /**
-    * Returns a promise that resolves when the action-sheet will dismiss.
+    * Returns a promise that resolves when the action sheet will dismiss.
    */
    'onWillDismiss': () => Promise<OverlayEventDetail<any>>;
    'overlayIndex': number;
@@ -229,9 +229,9 @@ export namespace Components {

  interface IonAlertController {
    /**
-    * Create an alert overlay with alert options
+    * Create an alert overlay with alert options.
    */
-    'create': (opts: AlertOptions) => Promise<HTMLIonAlertElement>;
+    'create': (options: AlertOptions) => Promise<HTMLIonAlertElement>;
    /**
    * Dismiss the open alert overlay.
    */
@@ -285,7 +285,7 @@ export namespace Components {
    */
    'leaveAnimation'?: AnimationBuilder;
    /**
-    * The main message to be displayed in the alert.
+    * 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)
    */
    'message'?: string;
    /**
@@ -352,7 +352,7 @@ export namespace Components {
    */
    'leaveAnimation'?: AnimationBuilder;
    /**
-    * The main message to be displayed in the alert.
+    * 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)
    */
    'message'?: string;
    /**
@@ -716,24 +716,64 @@ export namespace Components {
  }

  interface IonCard {
+    /**
+    * If `true`, a button tag will be rendered and the card will be tappable.
+    */
+    'button': boolean;
    /**
    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
    */
    'color'?: Color;
    /**
+    * If `true`, the user cannot interact with the card.
+    */
+    'disabled': boolean;
+    /**
+    * 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;
+    /**
    * The mode determines which platform styles to use.
    */
    'mode': Mode;
+    /**
+    * When using a router, it specifies the transition direction when navigating to another page using `href`.
+    */
+    'routerDirection': RouterDirection;
+    /**
+    * The type of the button. Only used when an `onclick` or `button` property is present.
+    */
+    'type': 'submit' | 'reset' | 'button';
  }
  interface IonCardAttributes extends StencilHTMLAttributes {
+    /**
+    * If `true`, a button tag will be rendered and the card will be tappable.
+    */
+    'button'?: boolean;
    /**
    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
    */
    'color'?: Color;
    /**
+    * If `true`, the user cannot interact with the card.
+    */
+    'disabled'?: boolean;
+    /**
+    * 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;
+    /**
    * The mode determines which platform styles to use.
    */
    'mode'?: Mode;
+    /**
+    * When using a router, it specifies the transition direction when navigating to another page using `href`.
+    */
+    'routerDirection'?: RouterDirection;
+    /**
+    * The type of the button. Only used when an `onclick` or `button` property is present.
+    */
+    'type'?: 'submit' | 'reset' | 'button';
  }

  interface IonCheckbox {
@@ -1049,11 +1089,11 @@ export namespace Components {
    */
    'fullscreen': boolean;
    /**
-    * Returns the element where the actual scrolling takes places. This element is the one you could subscribe to `scroll` events or manually modify `scrollTop`, however, it's recommended to use the API provided by `ion-content`:  Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and scrollToPoint() to scroll the content into a certain point.
+    * Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`:  i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.
    */
    'getScrollElement': () => Promise<HTMLElement>;
    /**
-    * Scroll by a specified X/Y distance in the component
+    * Scroll by a specified X/Y distance in the component.
    */
    'scrollByPoint': (x: number, y: number, duration: number) => Promise<void>;
    /**
@@ -1061,15 +1101,15 @@ export namespace Components {
    */
    'scrollEvents': boolean;
    /**
-    * Scroll to the bottom of the component
+    * Scroll to the bottom of the component.
    */
    'scrollToBottom': (duration?: number) => Promise<void>;
    /**
-    * Scroll to a specified X/Y location in the component
+    * Scroll to a specified X/Y location in the component.
    */
    'scrollToPoint': (x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>;
    /**
-    * Scroll to the top of the component
+    * Scroll to the top of the component.
    */
    'scrollToTop': (duration?: number) => Promise<void>;
    /**
@@ -1416,7 +1456,7 @@ export namespace Components {

  interface IonFabList {
    /**
-    * If `true`, the fab list will be show all fab buttons in the list.
+    * If `true`, the fab list will show all fab buttons in the list.
    */
    'activated': boolean;
    /**
@@ -1426,7 +1466,7 @@ export namespace Components {
  }
  interface IonFabListAttributes extends StencilHTMLAttributes {
    /**
-    * If `true`, the fab list will be show all fab buttons in the list.
+    * If `true`, the fab list will show all fab buttons in the list.
    */
    'activated'?: boolean;
    /**
@@ -1441,7 +1481,7 @@ export namespace Components {
    */
    'activated': boolean;
    /**
-    * Close an active FAB list container
+    * Close an active FAB list container.
    */
    'close': () => void;
    /**
@@ -1551,10 +1591,14 @@ export namespace Components {
    */
    'onIonError'?: (event: CustomEvent<void>) => void;
    /**
-    * Emitted when the img src has been set
+    * Emitted when the image has finished loading
    */
    'onIonImgDidLoad'?: (event: CustomEvent<void>) => void;
    /**
+    * Emitted when the img src has been set
+    */
+    'onIonImgWillLoad'?: (event: CustomEvent<void>) => void;
+    /**
    * The image URL. This attribute is mandatory for the <img> element.
    */
    'src'?: string;
@@ -1566,7 +1610,7 @@ export namespace Components {
    */
    'loadingSpinner'?: SpinnerTypes | null;
    /**
-    * Optional text to display while loading.
+    * Optional text to display while loading. `loadingText` 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)
    */
    'loadingText'?: string;
  }
@@ -1576,7 +1620,7 @@ export namespace Components {
    */
    'loadingSpinner'?: SpinnerTypes | null;
    /**
-    * Optional text to display while loading.
+    * Optional text to display while loading. `loadingText` 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)
    */
    'loadingText'?: string;
  }
@@ -1979,6 +2023,10 @@ export namespace Components {
    * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.
    */
    'getSlidingRatio': () => Promise<number>;
+    /**
+    * Open the sliding item.
+    */
+    'open': (side: "start" | "end" | undefined) => Promise<void>;
  }
  interface IonItemSlidingAttributes extends StencilHTMLAttributes {
    /**
@@ -2163,7 +2211,7 @@ export namespace Components {
    /**
    * Create a loading overlay with loading options.
    */
-    'create': (opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
+    'create': (options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
    /**
    * Dismiss the open loading overlay.
    */
@@ -2349,53 +2397,53 @@ export namespace Components {
  interface IonMenuController {
    '_getInstance': () => Promise<MenuControllerI>;
    /**
-    * Close the menu. If no menu is specified, then it will close any menu that is open. If a menu is specified, it will close that menu.
+    * Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`.
    */
-    'close': (menuId?: string | null | undefined) => Promise<boolean>;
+    'close': (menu?: string | null | undefined) => Promise<boolean>;
    /**
-    * Used to enable or disable a menu. For example, there could be multiple left menus, but only one of them should be able to be opened at the same time. If there are multiple menus on the same side, then enabling one menu will also automatically disable all the others that are on the same side.
+    * Enable or disable a menu. Disabling a menu will not allow gestures for that menu or any calls to open it. This is useful when there are multiple menus on the same side and only one of them should be allowed to open. Enabling a menu will automatically disable all other menus on that side.
    */
-    'enable': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
+    'enable': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
    /**
-    * Used to get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`.
+    * Get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`.
    */
-    'get': (menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
+    'get': (menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
    /**
-    * Returns an array of all menu instances.
+    * Get all menu instances.
    */
    'getMenus': () => Promise<HTMLIonMenuElement[]>;
    /**
-    * Returns the instance of the menu already opened, otherwise `null`.
+    * Get the instance of the opened menu. Returns `null` if a menu is not found.
    */
    'getOpen': () => Promise<HTMLIonMenuElement | undefined>;
    /**
-    * Returns `true` if any menu is currently animating.
+    * Get whether or not a menu is animating. Returns `true` if any menu is currently animating.
    */
    'isAnimating': () => Promise<boolean>;
    /**
-    * Returns `true` if the specified menu is enabled.
+    * Get whether or not the menu is enabled. Returns `true` if the specified menu is enabled. Returns `false` if a menu is disabled or not found.
    */
-    'isEnabled': (menuId?: string | null | undefined) => Promise<boolean>;
+    'isEnabled': (menu?: string | null | undefined) => Promise<boolean>;
    /**
-    * Returns `true` if the specified menu is open. If the menu is not specified, it will return `true` if any menu is currently open.
+    * Get whether or not the menu is open. Returns `true` if the specified menu is open. If a menu is not specified, it will return `true` if any menu is currently open.
    */
-    'isOpen': (menuId?: string | null | undefined) => Promise<boolean>;
+    'isOpen': (menu?: string | null | undefined) => Promise<boolean>;
    /**
-    * Open the menu.
+    * Open the menu. If a menu is not provided then it will open the first menu found. If the specified menu is `start` or `end`, then it will open the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `false`.
    */
-    'open': (menuId?: string | null | undefined) => Promise<boolean>;
+    'open': (menu?: string | null | undefined) => Promise<boolean>;
    /**
-    * Registers a new animation that can be used in any `ion-menu`.  ```    * <ion-menu type="my-animation">    * ```
+    * Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property.
    */
    'registerAnimation': (name: string, animation: AnimationBuilder) => void;
    /**
-    * Used to enable or disable the ability to swipe open the menu.
+    * Enable or disable the ability to swipe open the menu.
    */
-    'swipeGesture': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
+    'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
    /**
-    * Toggle the menu. If it's closed, it will open, and if opened, it will close.
+    * Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if a menu is not found.
    */
-    'toggle': (menuId?: string | null | undefined) => Promise<boolean>;
+    'toggle': (menu?: string | null | undefined) => Promise<boolean>;
  }
  interface IonMenuControllerAttributes extends StencilHTMLAttributes {}

@@ -2422,7 +2470,7 @@ export namespace Components {

  interface IonMenu {
    /**
-    * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
+    * Close the menu. Returns `false` if the menu is already closed or it can't be closed.
    */
    'close': (animated?: boolean) => Promise<boolean>;
    /**
@@ -2434,11 +2482,11 @@ export namespace Components {
    */
    'disabled': boolean;
    /**
-    * Returns `true` is the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.
+    * Get whether or not the menu is active. Returns `true` if the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of an `ion-split-pane`.
    */
    'isActive': () => Promise<boolean>;
    /**
-    * Returns `true` is the menu is open.
+    * Get whether or not the menu is open. Returns `true` if the menu is open.
    */
    'isOpen': () => Promise<boolean>;
    /**
@@ -2450,11 +2498,11 @@ export namespace Components {
    */
    'menuId'?: string;
    /**
-    * Opens the menu. If the menu is already open or it can't be opened, it returns `false`.
+    * Open the menu. Returns `false` if the menu is already open or it can't be opened.
    */
    'open': (animated?: boolean) => Promise<boolean>;
    /**
-    * Opens or closes the button. If the operation can't be completed successfully, it returns `false`.
+    * Sets the menu to open or closed. Returns `false` if the operation can't be completed successfully.
    */
    'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise<boolean>;
    /**
@@ -2466,11 +2514,11 @@ export namespace Components {
    */
    'swipeGesture': boolean;
    /**
-    * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.
+    * Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if the operation can't be completed successfully.
    */
    'toggle': (animated?: boolean) => Promise<boolean>;
    /**
-    * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
+    * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller.
    */
    'type'?: string;
  }
@@ -2516,7 +2564,7 @@ export namespace Components {
    */
    'swipeGesture'?: boolean;
    /**
-    * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
+    * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller.
    */
    'type'?: string;
  }
@@ -2525,7 +2573,7 @@ export namespace Components {
    /**
    * Create a modal overlay with modal options.
    */
-    'create': <T extends ComponentRef>(opts: ModalOptions<T>) => Promise<HTMLIonModalElement>;
+    'create': <T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>;
    /**
    * Dismiss the open modal overlay.
    */
@@ -2711,37 +2759,37 @@ export namespace Components {
    */
    'animation'?: AnimationBuilder;
    /**
-    * Returns `true` or false if the current view can go back
+    * Returns `true` if the current view can go back.
    */
    'canGoBack': (view?: ViewController | undefined) => Promise<boolean>;
    'delegate'?: FrameworkDelegate;
    /**
-    * Gets the active view
+    * Get the active view.
    */
    'getActive': () => Promise<ViewController | undefined>;
    /**
-    * Returns the view at the index
+    * Get the view at the specified index.
    */
    'getByIndex': (index: number) => Promise<ViewController | undefined>;
    /**
-    * Gets the previous view
+    * Get the previous view.
    */
    'getPrevious': (view?: ViewController | undefined) => Promise<ViewController | undefined>;
    'getRouteId': () => Promise<RouteID | undefined>;
    /**
-    * Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack.
+    * Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.
    */
    'insert': <T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
-    * Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.
+    * Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.
    */
    'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
-    * Call to navigate back from a current component. Similar to push(), you can also pass navigation options.
+    * Pop a component off of the navigation stack. Navigates back from the current component.
    */
    'pop': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
-    * Pop to a specific index in the navigation stack
+    * Pop to a specific index in the navigation stack.
    */
    'popTo': (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
@@ -2749,11 +2797,11 @@ export namespace Components {
    */
    'popToRoot': (opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
-    * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams
+    * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
    */
    'push': <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
-    * Removes a page from the nav stack at the specified index.
+    * Removes a component from the navigation stack at the specified index.
    */
    'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
@@ -2765,11 +2813,11 @@ export namespace Components {
    */
    'rootParams'?: ComponentProps;
    /**
-    * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array.
+    * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.
    */
    'setPages': (views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    /**
-    * Set the root for the current navigation stack.
+    * Set the root for the current navigation stack to a component.
    */
    'setRoot': <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
    'setRouteId': (id: string, params: { [key: string]: any; } | undefined, direction: RouterDirection) => Promise<RouteWrite>;
@@ -2847,7 +2895,7 @@ export namespace Components {
    /**
    * Create a picker overlay with picker options.
    */
-    'create': (opts: PickerOptions) => Promise<HTMLIonPickerElement>;
+    'create': (options: PickerOptions) => Promise<HTMLIonPickerElement>;
    /**
    * Dismiss the open picker overlay.
    */
@@ -2893,7 +2941,7 @@ export namespace Components {
    */
    'enterAnimation'?: AnimationBuilder;
    /**
-    * Returns the column the matches the specified name
+    * Get the column that matches the specified name.
    */
    'getColumn': (name: string) => Promise<PickerColumn | undefined>;
    /**
@@ -2993,7 +3041,7 @@ export namespace Components {
    /**
    * Create a popover overlay with popover options.
    */
-    'create': <T extends ComponentRef>(opts: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>;
+    'create': <T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>;
    /**
    * Dismiss the open popover overlay.
    */
@@ -3418,7 +3466,7 @@ export namespace Components {
    */
    'pullingIcon'?: string | null;
    /**
-    * The text you want to display when you begin to pull down
+    * The text you want to display when you begin to pull down. `pullingText` 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)
    */
    'pullingText'?: string;
    /**
@@ -3426,7 +3474,7 @@ export namespace Components {
    */
    'refreshingSpinner'?: SpinnerTypes | null;
    /**
-    * The text you want to display when performing a refresh
+    * The text you want to display when performing a refresh. `refreshingText` 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)
    */
    'refreshingText'?: string;
  }
@@ -3436,7 +3484,7 @@ export namespace Components {
    */
    'pullingIcon'?: string | null;
    /**
-    * The text you want to display when you begin to pull down
+    * The text you want to display when you begin to pull down. `pullingText` 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)
    */
    'pullingText'?: string;
    /**
@@ -3444,7 +3492,7 @@ export namespace Components {
    */
    'refreshingSpinner'?: SpinnerTypes | null;
    /**
-    * The text you want to display when performing a refresh
+    * The text you want to display when performing a refresh. `refreshingText` 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)
    */
    'refreshingText'?: string;
  }
@@ -3471,6 +3519,10 @@ export namespace Components {
    */
    'getProgress': () => Promise<number>;
    /**
+    * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
+    */
+    'pullFactor': number;
+    /**
    * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
    */
    'pullMax': number;
@@ -3505,6 +3557,10 @@ export namespace Components {
    */
    'onIonStart'?: (event: CustomEvent<void>) => void;
    /**
+    * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
+    */
+    'pullFactor'?: number;
+    /**
    * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
    */
    'pullMax'?: number;
@@ -3520,7 +3576,7 @@ export namespace Components {

  interface IonReorderGroup {
    /**
-    * This method must be called once the `ionItemReorder` event is handled in order to complete the reorder operation.
+    * Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
    */
    'complete': (listOrReorder?: boolean | any[] | undefined) => Promise<any>;
    /**
@@ -3544,9 +3600,9 @@ export namespace Components {

  interface IonRippleEffect {
    /**
-    * Adds the ripple effect to the parent element
+    * Adds the ripple effect to the parent element.
    */
-    'addRipple': (pageX: number, pageY: number) => Promise<() => void>;
+    'addRipple': (x: number, y: number) => Promise<() => void>;
    /**
    * Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
    */
@@ -3720,6 +3776,10 @@ export namespace Components {
    */
    'debounce': number;
    /**
+    * If `true`, the user cannot interact with the input.
+    */
+    'disabled': boolean;
+    /**
    * Returns the native `<input>` element used under the hood.
    */
    'getInputElement': () => Promise<HTMLInputElement>;
@@ -3728,7 +3788,7 @@ export namespace Components {
    */
    'mode': Mode;
    /**
-    * Set the input's placeholder.
+    * Set the input's placeholder. `placeholder` 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)
    */
    'placeholder': string;
    /**
@@ -3740,9 +3800,9 @@ export namespace Components {
    */
    'setFocus': () => void;
    /**
-    * If `true`, show the cancel button.
+    * 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;
+    'showCancelButton': boolean | string;
    /**
    * If `true`, enable spellcheck on the input.
    */
@@ -3790,6 +3850,10 @@ export namespace Components {
    */
    'debounce'?: number;
    /**
+    * If `true`, the user cannot interact with the input.
+    */
+    'disabled'?: boolean;
+    /**
    * The mode determines which platform styles to use.
    */
    'mode'?: Mode;
@@ -3818,7 +3882,7 @@ export namespace Components {
    */
    'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
    /**
-    * Set the input's placeholder.
+    * Set the input's placeholder. `placeholder` 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)
    */
    'placeholder'?: string;
    /**
@@ -3826,9 +3890,9 @@ export namespace Components {
    */
    'searchIcon'?: string;
    /**
-    * If `true`, show the cancel button.
+    * 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;
+    'showCancelButton'?: boolean | string;
    /**
    * If `true`, enable spellcheck on the input.
    */
@@ -4049,9 +4113,9 @@ export namespace Components {
    */
    'okText': string;
    /**
-    * Opens the select overlay, it could be an alert, action-sheet or popover, based in `ion-select` settings.
+    * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.
    */
-    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>;
+    'open': (event?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>;
    /**
    * The text to display when the select is empty.
    */
@@ -4172,17 +4236,17 @@ export namespace Components {
    */
    'length': () => Promise<number>;
    /**
-    * Lock or unlock the ability to slide to the next slides.
+    * Lock or unlock the ability to slide to the next slide.
    */
-    'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => Promise<void>;
+    'lockSwipeToNext': (lock: boolean) => Promise<void>;
    /**
-    * Lock or unlock the ability to slide to the previous slides.
+    * Lock or unlock the ability to slide to the previous slide.
    */
-    'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => Promise<void>;
+    'lockSwipeToPrev': (lock: boolean) => Promise<void>;
    /**
-    * Lock or unlock the ability to slide to change slides.
+    * Lock or unlock the ability to slide to the next or previous slide.
    */
-    'lockSwipes': (shouldLockSwipes: boolean) => Promise<void>;
+    'lockSwipes': (lock: boolean) => Promise<void>;
    /**
    * The mode determines which platform styles to use.
    */
@@ -4224,7 +4288,7 @@ export namespace Components {
    */
    'update': () => Promise<void>;
    /**
-    * Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
+    * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.
    */
    'updateAutoHeight': (speed?: number | undefined) => Promise<void>;
  }
@@ -4350,7 +4414,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.  ```html    * <ion-split-pane content-id="my-content">    *   <ion-menu></ion-menu>    *   <div id="my-content">    * </ion-split-pane>    * ```
+    * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
    */
    'contentId'?: string;
    /**
@@ -4364,7 +4428,7 @@ export namespace Components {
  }
  interface IonSplitPaneAttributes extends StencilHTMLAttributes {
    /**
-    * 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.  ```html    * <ion-split-pane content-id="my-content">    *   <ion-menu></ion-menu>    *   <div id="my-content">    * </ion-split-pane>    * ```
+    * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
    */
    'contentId'?: string;
    /**
@@ -4501,15 +4565,15 @@ export namespace Components {
  interface IonTabs {
    'getRouteId': () => Promise<RouteID | undefined>;
    /**
-    * Get the currently selected tab
+    * Get the currently selected tab.
    */
    'getSelected': () => Promise<string | undefined>;
    /**
-    * Get the tab element given the tab name
+    * Get a specific tab by the value of its `tab` property or an element reference.
    */
    'getTab': (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
    /**
-    * Index or the Tab instance, of the tab to select.
+    * Select a tab by the value of its `tab` property or an element reference.
    */
    'select': (tab: string | HTMLIonTabElement) => Promise<boolean>;
    'setRouteId': (id: string) => Promise<RouteWrite>;
@@ -4548,6 +4612,10 @@ export namespace Components {
  }

  interface IonTextarea {
+    /**
+    * If `true`, the element height will increase based on the value.
+    */
+    'autoGrow': boolean;
    /**
    * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
    */
@@ -4630,6 +4698,10 @@ export namespace Components {
    'wrap'?: 'hard' | 'soft' | 'off';
  }
  interface IonTextareaAttributes extends StencilHTMLAttributes {
+    /**
+    * If `true`, the element height will increase based on the value.
+    */
+    'autoGrow'?: boolean;
    /**
    * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
    */
@@ -4740,7 +4812,7 @@ export namespace Components {
    /**
    * Create a toast overlay with toast options.
    */
-    'create': (opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
+    'create': (options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
    /**
    * Dismiss the open toast overlay.
    */
@@ -5010,13 +5082,13 @@ export namespace Components {
    */
    'approxItemHeight': number;
    /**
-    * This method marks the tail the items array as dirty, so they can be re-rendered.  It's equivalent to calling:  ```js    * virtualScroll.checkRange(lastItemLen);    * ```
+    * Marks the tail of the items array as dirty, so they can be re-rendered. It's equivalent to calling `checkRange(length)` where `length` is the total length of the items.
    */
    'checkEnd': () => void;
    /**
-    * This method marks a subset of items as dirty, so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.  The subset of items to be updated can are specifing by an offset and a length.
+    * Marks a subset of the items as dirty so they can be re-rendered. Items should be marked as dirty any time the content or their style changes.  The subset of items to be updated are specified by an offset and a length. If a length is not provided it will check all of the items beginning at the offset.
    */
-    'checkRange': (offset: number, len?: number) => void;
+    'checkRange': (offset: number, length?: number) => void;
    'domRender'?: DomRenderFn;
    /**
    * Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created.
--- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx
+++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
@@ -12,14 +12,23 @@ export class ActionSheetController implements ComponentInterface, OverlayControl

  /**
   * Create an action sheet overlay with action sheet options.
+   *
+   * @param options The options to use to create the action sheet.
   */
  @Method()
-  create(opts: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
-    return createOverlay(this.doc.createElement('ion-action-sheet'), opts);
+  create(options: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
+    return createOverlay(this.doc.createElement('ion-action-sheet'), options);
  }

  /**
   * Dismiss the open action sheet overlay.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the action sheet.
+   * This can be useful in a button handler for determining which button was
+   * clicked to dismiss the action sheet.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   * @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet.
   */
  @Method()
  dismiss(data?: any, role?: string, id?: string) {
--- a/core/src/components/action-sheet-controller/readme.md
+++ b/core/src/components/action-sheet-controller/readme.md
@@ -7,15 +7,15 @@ Action Sheet controllers programmatically control the action sheet component. Ac

 ## Methods

-### `create(opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
+### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`

 Create an action sheet overlay with action sheet options.

 #### Parameters

-| Name   | Type                 | Description |
-| ------ | -------------------- | ----------- |
-| `opts` | `ActionSheetOptions` |             |
+| Name      | Type                 | Description                                    |
+| --------- | -------------------- | ---------------------------------------------- |
+| `options` | `ActionSheetOptions` | The options to use to create the action sheet. |

 #### Returns

@@ -29,11 +29,11 @@ Dismiss the open action sheet overlay.

 #### Parameters

-| Name   | Type                  | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any`                 |             |
-| `role` | `string \| undefined` |             |
-| `id`   | `string \| undefined` |             |
+| Name   | Type                  | Description                                                                                                                                                                                                                                                   |
+| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any`                 | Any data to emit in the dismiss events.                                                                                                                                                                                                                       |
+| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
+| `id`   | `string \| undefined` | The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet.                                                                                                                                       |

 #### Returns

--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -6,7 +6,7 @@

 :host {
  --background: #{$action-sheet-ios-background-color};
-  --background-selected: #{$action-sheet-ios-button-background-selected)};
+  --background-selected: #{$action-sheet-ios-button-background-selected};
  --background-activated: #{$action-sheet-ios-button-background-activated};

  text-align: $action-sheet-ios-text-align;
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -102,7 +102,7 @@
 .action-sheet-group {
  flex-shrink: 2;
  overscroll-behavior-y: contain;
-  overflow-y: scroll;
+  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: all;

--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -128,6 +128,12 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {

  /**
   * Dismiss the action sheet overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the action sheet.
+   * This can be useful in a button handler for determining which button was
+   * clicked to dismiss the action sheet.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
   */
  @Method()
  dismiss(data?: any, role?: string): Promise<boolean> {
@@ -135,7 +141,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
  }

  /**
-   * Returns a promise that resolves when the action-sheet did dismiss.
+   * Returns a promise that resolves when the action sheet did dismiss.
   */
  @Method()
  onDidDismiss(): Promise<OverlayEventDetail> {
@@ -143,7 +149,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
  }

  /**
-   * Returns a promise that resolves when the action-sheet will dismiss.
+   * Returns a promise that resolves when the action sheet will dismiss.
   *
   */
  @Method()
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -186,7 +186,6 @@ export default class ActionSheetExample extends Component<Props, State> {
    );
  }
 }
-
 ```


@@ -290,10 +289,10 @@ Dismiss the action sheet overlay after it has been presented.

 #### Parameters

-| Name   | Type                  | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any`                 |             |
-| `role` | `string \| undefined` |             |
+| Name   | Type                  | Description                                                                                                                                                                                                                                                   |
+| ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any`                 | Any data to emit in the dismiss events.                                                                                                                                                                                                                       |
+| `role` | `string \| undefined` | The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |

 #### Returns

@@ -303,7 +302,7 @@ Type: `Promise<boolean>`

 ### `onDidDismiss() => Promise<OverlayEventDetail<any>>`

-Returns a promise that resolves when the action-sheet did dismiss.
+Returns a promise that resolves when the action sheet did dismiss.

 #### Returns

@@ -313,7 +312,7 @@ Type: `Promise<OverlayEventDetail<any>>`

 ### `onWillDismiss() => Promise<OverlayEventDetail<any>>`

-Returns a promise that resolves when the action-sheet will dismiss.
+Returns a promise that resolves when the action sheet will dismiss.

 #### Returns

--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -22,7 +22,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content padding>
+    <ion-content class="ion-padding">
      <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
      <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
      <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
--- a/core/src/components/action-sheet/test/preview/index.html
+++ b/core/src/components/action-sheet/test/preview/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content padding fullscreen>
+    <ion-content class="ion-padding" fullscreen>
      <ion-action-sheet-controller></ion-action-sheet-controller>

      <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
--- a/core/src/components/action-sheet/test/spec/index.html
+++ b/core/src/components/action-sheet/test/spec/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content padding>
+    <ion-content class="ion-padding">
      <ion-action-sheet-controller></ion-action-sheet-controller>

      <ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button>
--- a/core/src/components/action-sheet/test/test.utils.ts
+++ b/core/src/components/action-sheet/test/test.utils.ts
@@ -50,7 +50,6 @@ export async function testActionSheetBackdrop(
  actionSheet: any
 ) {
  try {
-    console.log('backdrop hook');
    const backdrop = await page.find('ion-backdrop');
    await backdrop.click();

--- a/core/src/components/action-sheet/test/translucent/index.html
+++ b/core/src/components/action-sheet/test/translucent/index.html
@@ -20,7 +20,7 @@
        </ion-toolbar>
      </ion-header>

-      <ion-content padding>
+      <ion-content class="ion-padding">
        <ion-action-sheet-controller></ion-action-sheet-controller>

        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
--- a/core/src/components/action-sheet/usage/react.md
+++ b/core/src/components/action-sheet/usage/react.md
@@ -59,5 +59,4 @@ export default class ActionSheetExample extends Component<Props, State> {
    );
  }
 }
-
 ```
--- a/core/src/components/alert-controller/alert-controller.tsx
+++ b/core/src/components/alert-controller/alert-controller.tsx
@@ -11,15 +11,24 @@ export class AlertController implements ComponentInterface, OverlayController {
  @Prop({ context: 'document' }) doc!: Document;

  /**
-   * Create an alert overlay with alert options
+   * Create an alert overlay with alert options.
+   *
+   * @param options The options to use to create the alert.
   */
  @Method()
-  create(opts: AlertOptions): Promise<HTMLIonAlertElement> {
-    return createOverlay(this.doc.createElement('ion-alert'), opts);
+  create(options: AlertOptions): Promise<HTMLIonAlertElement> {
+    return createOverlay(this.doc.createElement('ion-alert'), options);
  }

  /**
   * Dismiss the open alert overlay.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the alert.
+   * This can be useful in a button handler for determining which button was
+   * clicked to dismiss the alert.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   * @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert.
   */
  @Method()
  dismiss(data?: any, role?: string, id?: string) {
--- a/core/src/components/alert-controller/readme.md
+++ b/core/src/components/alert-controller/readme.md
@@ -1,22 +1,6 @@
 # ion-alert-controller

-Alert controllers programmatically control the alert component. Alerts can be created and dismissed from the alert controller. View the [Alert](../alert) documentation for a full list of options to pass upon creation.
-
-
-```javascript
-async function presentAlert() {
-  const alertController = document.querySelector('ion-alert-controller');
-  await alertController.componentOnReady();
-
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['OK']
-  });
-  return await alert.present();
-}
-```
+Alert controllers programmatically control the alert component. Alerts can be created and dismissed by the alert controller. View the [Alert](../alert) documentation for the list of options to pass upon creation and usage information.


 <!-- Auto Generated Below -->
@@ -24,15 +8,15 @@ async function presentAlert() {

 ## Methods

-### `create(opts: AlertOptions) => Promise<HTMLIonAlertElement>`
+### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`

-Create an alert overlay with alert options
+Create an alert overlay with alert options.

 #### Parameters

-| Name   | Type           | Description |
-| ------ | -------------- | ----------- |
-| `opts` | `AlertOptions` |             |
+| Name      | Type           | Description                             |
+| --------- | -------------- | --------------------------------------- |
+| `options` | `AlertOptions` | The options to use to create the alert. |

 #### Returns

@@ -46,11 +30,11 @@ Dismiss the open alert overlay.

 #### Parameters

-| Name   | Type                  | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any`                 |             |
-| `role` | `string \| undefined` |             |
-| `id`   | `string \| undefined` |             |
+| Name   | Type                  | Description                                                                                                                                                                                                                                     |
+| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any`                 | Any data to emit in the dismiss events.                                                                                                                                                                                                         |
+| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |
+| `id`   | `string \| undefined` | The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert.                                                                                                                                       |

 #### Returns

--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -112,7 +112,7 @@
  max-height: $alert-ios-content-max-height;

  border-top: $alert-ios-list-border-top;
-  overflow-y: scroll;
+  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
 }

--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -83,7 +83,7 @@
 .alert-message {
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
-  overflow-y: scroll;
+  overflow-y: auto;
  overscroll-behavior-y: contain;
 }

--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -2,6 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me

 import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
+import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';

 import { iosEnterAnimation } from './animations/ios.enter';
@@ -72,6 +73,12 @@ export class Alert implements ComponentInterface, OverlayInterface {

  /**
   * 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)
   */
  @Prop() message?: string;

@@ -185,6 +192,12 @@ export class Alert implements ComponentInterface, OverlayInterface {

  /**
   * Dismiss the alert overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the alert.
+   * This can be useful in a button handler for determining which button was
+   * clicked to dismiss the alert.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
   */
  @Method()
  dismiss(data?: any, role?: string): Promise<boolean> {
@@ -193,7 +206,6 @@ export class Alert implements ComponentInterface, OverlayInterface {

  /**
   * Returns a promise that resolves when the alert did dismiss.
-   *
   */
  @Method()
  onDidDismiss(): Promise<OverlayEventDetail> {
@@ -202,7 +214,6 @@ export class Alert implements ComponentInterface, OverlayInterface {

  /**
   * Returns a promise that resolves when the alert will dismiss.
-   *
   */
  @Method()
  onWillDismiss(): Promise<OverlayEventDetail> {
@@ -440,7 +451,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
          {this.subHeader && <h2 id={subHdrId} class="alert-sub-title">{this.subHeader}</h2>}
        </div>

-        <div id={msgId} class="alert-message" innerHTML={this.message}></div>
+        <div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(this.message)}></div>

        {this.renderAlertInputs(labelledById)}
        {this.renderAlertButtons()}
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -797,7 +797,6 @@ export default class AlertExample extends Component<Props, State> {
    );
  }
 }
-
 ```


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


 ## Events
@@ -1090,10 +1089,10 @@ Dismiss the alert overlay after it has been presented.

 #### Parameters

-| Name   | Type                  | Description |
-| ------ | --------------------- | ----------- |
-| `data` | `any`                 |             |
-| `role` | `string \| undefined` |             |
+| Name   | Type                  | Description                                                                                                                                                                                                                                     |
+| ------ | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `data` | `any`                 | Any data to emit in the dismiss events.                                                                                                                                                                                                         |
+| `role` | `string \| undefined` | The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. |

 #### Returns

--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content padding>
+    <ion-content class="ion-padding">
      <ion-alert-controller></ion-alert-controller>

      <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
--- a/core/src/components/alert/test/preview/index.html
+++ b/core/src/components/alert/test/preview/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content padding fullscreen>
+    <ion-content class="ion-padding" fullscreen>
      <ion-alert-controller></ion-alert-controller>

      <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
--- a/core/src/components/alert/test/translucent/index.html
+++ b/core/src/components/alert/test/translucent/index.html
@@ -20,7 +20,7 @@
        </ion-toolbar>
      </ion-header>

-      <ion-content padding>
+      <ion-content class="ion-padding">
        <ion-alert-controller></ion-alert-controller>

        <ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
--- a/core/src/components/alert/usage/react.md
+++ b/core/src/components/alert/usage/react.md
@@ -267,5 +267,4 @@ export default class AlertExample extends Component<Props, State> {
    );
  }
 }
-
 ```
--- a/core/src/components/anchor/test/basic/index.html
+++ b/core/src/components/anchor/test/basic/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content padding>
+    <ion-content class="ion-padding">
      <p>
        <a href="#">A</a>
      </p>
--- a/core/src/components/anchor/test/standalone/index.html
+++ b/core/src/components/anchor/test/standalone/index.html
@@ -11,7 +11,7 @@
  <script src="../../../../../dist/ionic.js"></script>
 </head>

-<body padding>
+<body class="ion-padding">
  <h1>Default</h1>
  <ion-anchor href="#">Anchor</ion-anchor>

--- a/core/src/components/avatar/test/preview/index.html
+++ b/core/src/components/avatar/test/preview/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content fullscreen padding>
+    <ion-content class="ion-padding" fullscreen>
      <ion-avatar>
        <img src="/src/components/avatar/test/avatar.svg">
      </ion-avatar>
--- a/core/src/components/avatar/test/standalone/index.html
+++ b/core/src/components/avatar/test/standalone/index.html
@@ -11,19 +11,19 @@
  <script src="../../../../../dist/ionic.js"></script>
 </head>

-<body padding>
+<body class="ion-padding">
  <h1>Default</h1>
  <ion-avatar>
-    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="/>
  </ion-avatar>

  <h1>Custom</h1>
  <ion-avatar style="width: 200px; height: 200px">
-    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="/>
  </ion-avatar>

  <ion-avatar style="--border-radius: 4px;">
-    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="/>
  </ion-avatar>
 </body>
 </html>
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -5,26 +5,13 @@
 // --------------------------------------------------

 :host {
+  --background-focused: #{ion-color(primary, base, .1)};
+  --border-radius: 4px;
  --color: #{$back-button-ios-color};
-  --margin-top: 0;
-  --margin-end: 0;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --min-height: 32px;
-  --min-width: auto;
-  --icon-padding-top: 0;
-  --icon-padding-end: 0;
-  --icon-padding-bottom: 0;
-  --icon-padding-start: 0;
-  --icon-margin-top: 0;
  --icon-margin-end: -5px;
-  --icon-margin-bottom: 0;
  --icon-margin-start: -4px;
  --icon-font-size: 1.85em;
+  --min-height: 32px;

  font-size: 17px;
 }
@@ -35,3 +22,25 @@
  overflow: visible;
  z-index: $back-button-ios-button-z-index;
 }
+
+// Back Button States
+// --------------------------------------------------
+
+:host(.activated) .button-native {
+  opacity: .4;
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --opacity: .6;
+  }
+}
+
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  background: #{current-color(base, .1)};
+}
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -5,25 +5,18 @@
 // --------------------------------------------------

 :host {
+  --border-radius: 4px;
+  --background-focused: rgba(66, 66, 66, 0.24);
+  --background-hover: rgba(66, 66, 66, 0.08);
  --color: #{$back-button-md-color};
-  --margin-top: 1px;
-  --margin-end: 6px;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --padding-top: 0;
-  --padding-end: 5px;
-  --padding-bottom: 0;
-  --padding-start: 5px;
-  --min-height: 32px;
-  --min-width: 44px;
-  --icon-padding-end: .3em;
-  --icon-padding-start: .3em;
-  --icon-margin-top: 0;
-  --icon-margin-end: 6px;
-  --icon-margin-bottom: 0;
-  --icon-margin-start: 6px;
+  --icon-margin-end: 0;
+  --icon-margin-start: 0;
  --icon-font-size: 24px;
  --icon-font-weight: normal;
+  --min-height: 32px;
+  --min-width: 44px;
+  --padding-start: 12px;
+  --padding-end: 12px;

  font-size: 14px;
  font-weight: 500;
@@ -31,12 +24,41 @@
  text-transform: uppercase;
 }

+:host(.back-button-has-icon-only) {
+  --border-radius: 50%;
+
+  min-width: 48px;
+  height: 48px;
+}
+
 .button-native {
  box-shadow: none;
 }

+.button-text {
+  @include padding(0, 4px);
+}
+
 ion-icon {
  line-height: .67;

  text-align: start;
 }
+
+
+// Back Button Color: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    background: #{current-color(base, .08)};
+  }
+}
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  background: #{current-color(base, .24)};
+}
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -6,8 +6,12 @@
 :host {
 /**
   * @prop --background: Background of the button
+   * @prop --background-focused: Background of the button when focused
+   * @prop --background-hover: Background of the button when hover
   *
   * @prop --color: Text color of the button
+   * @prop --color-focused: Text color of the button when focused
+   * @prop --color-hover: Text color of the button when hover
   *
   * @prop --min-width: Minimum width of the button
   * @prop --min-height: Minimum height of the button
@@ -44,12 +48,33 @@
   * @prop --icon-font-weight: Font weight of the button icon
   */
  --background: transparent;
+  --color-focused: var(--color);
+  --color-hover: var(--color);
+  --icon-margin-top: 0;
+  --icon-margin-bottom: 0;
+  --icon-padding-top: 0;
+  --icon-padding-end: 0;
+  --icon-padding-bottom: 0;
+  --icon-padding-start: 0;
+  --margin-top: 0;
+  --margin-end: 0;
+  --margin-bottom: 0;
+  --margin-start: 0;
+  --min-width: auto;
+  --min-height: auto;
+  --padding-top: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --opacity: 1;
  --ripple-color: currentColor;
  --transition: background-color, opacity 100ms linear;
-  --opacity: 1;

  display: none;

+  min-width: var(--min-width);
+  min-height: var(--min-height);
+
  color: var(--color);

  font-family: $font-family-base;
@@ -77,10 +102,6 @@
 // Back Button States
 // --------------------------------------------------

-:host(.activated) .button-native {
-  opacity: .4;
-}
-
 :host-context(.can-go-back > ion-header),
 :host(.show-back-button) {
  display: block;
@@ -100,8 +121,10 @@
  display: block;
  position: relative;

-  min-width: var(--min-width);
-  min-height: var(--min-height);
+  width: 100%;
+  height: 100%;
+
+  min-height: inherit;

  transition: var(--transition);

@@ -148,3 +171,48 @@ ion-icon {

  pointer-events: none;
 }
+
+
+// Back Button: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    background: var(--background-hover);
+    color: var(--color-hover);
+  }
+}
+
+// Back Button: Focused
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+
+// Back Button Color: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    color: #{current-color(base)};
+  }
+}
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  color: #{current-color(base)};
+}
+
+
+// Back Button in Toolbar: Global Theming
+// --------------------------------------------------
+
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color) {
+  color: #{var(--ion-toolbar-color, var(--color))};
+}
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -56,6 +56,29 @@ export class BackButton implements ComponentInterface {
    return openURL(this.win, this.defaultHref, ev, 'back');
  }

+  private get backButtonIcon() {
+    return this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
+  }
+
+  private get backButtonText() {
+    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
+    return this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
+  }
+
+  private get hasIconOnly() {
+    return this.backButtonIcon && !this.backButtonText;
+  }
+
+  private get rippleType() {
+    // If the button only has an icon we use the unbounded
+    // "circular" ripple effect
+    if (this.hasIconOnly) {
+      return 'unbounded';
+    }
+
+    return 'bounded';
+  }
+
  hostData() {
    const showBackButton = this.defaultHref !== undefined;

@@ -65,27 +88,24 @@ export class BackButton implements ComponentInterface {
        [`${this.mode}`]: true,

        'button': true, // ion-buttons target .button
+        'back-button-has-icon-only': this.hasIconOnly,
        'ion-activatable': true,
+        'ion-focusable': true,
        'show-back-button': showBackButton
      }
    };
  }

  render() {
-    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
-    const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
-    const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
+    const { backButtonIcon, backButtonText } = this;

    return (
-      <button
-        type="button"
-        class="button-native"
-      >
+      <button type="button" class="button-native">
        <span class="button-inner">
          {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
          {backButtonText && <span class="button-text">{backButtonText}</span>}
        </span>
-        {this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
+        {this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
      </button>
    );
  }
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -250,34 +250,38 @@ export default Example;

 ## CSS Custom Properties

-| Name                    | Description                       |
-| ----------------------- | --------------------------------- |
-| `--background`          | Background of the button          |
-| `--border-radius`       | Border radius of the button       |
-| `--color`               | Text color of the button          |
-| `--icon-font-size`      | Font size of the button icon      |
-| `--icon-font-weight`    | Font weight of the button icon    |
-| `--icon-margin-bottom`  | Margin bottom of the button icon  |
-| `--icon-margin-end`     | Margin end of the button icon     |
-| `--icon-margin-start`   | Margin start of the button icon   |
-| `--icon-margin-top`     | Margin top of the button icon     |
-| `--icon-padding-bottom` | Padding bottom of the button icon |
-| `--icon-padding-end`    | Padding end of the button icon    |
-| `--icon-padding-start`  | Padding start of the button icon  |
-| `--icon-padding-top`    | Padding top of the button icon    |
-| `--margin-bottom`       | Margin bottom of the button       |
-| `--margin-end`          | Margin end of the button          |
-| `--margin-start`        | Margin start of the button        |
-| `--margin-top`          | Margin top of the button          |
-| `--min-height`          | Minimum height of the button      |
-| `--min-width`           | Minimum width of the button       |
-| `--opacity`             | Opacity of the button             |
-| `--padding-bottom`      | Padding bottom of the button      |
-| `--padding-end`         | Padding end of the button         |
-| `--padding-start`       | Padding start of the button       |
-| `--padding-top`         | Padding top of the button         |
-| `--ripple-color`        | Color of the button ripple effect |
-| `--transition`          | Transition of the button          |
+| Name                    | Description                           |
+| ----------------------- | ------------------------------------- |
+| `--background`          | Background of the button              |
+| `--background-focused`  | Background of the button when focused |
+| `--background-hover`    | Background of the button when hover   |
+| `--border-radius`       | Border radius of the button           |
+| `--color`               | Text color of the button              |
+| `--color-focused`       | Text color of the button when focused |
+| `--color-hover`         | Text color of the button when hover   |
+| `--icon-font-size`      | Font size of the button icon          |
+| `--icon-font-weight`    | Font weight of the button icon        |
+| `--icon-margin-bottom`  | Margin bottom of the button icon      |
+| `--icon-margin-end`     | Margin end of the button icon         |
+| `--icon-margin-start`   | Margin start of the button icon       |
+| `--icon-margin-top`     | Margin top of the button icon         |
+| `--icon-padding-bottom` | Padding bottom of the button icon     |
+| `--icon-padding-end`    | Padding end of the button icon        |
+| `--icon-padding-start`  | Padding start of the button icon      |
+| `--icon-padding-top`    | Padding top of the button icon        |
+| `--margin-bottom`       | Margin bottom of the button           |
+| `--margin-end`          | Margin end of the button              |
+| `--margin-start`        | Margin start of the button            |
+| `--margin-top`          | Margin top of the button              |
+| `--min-height`          | Minimum height of the button          |
+| `--min-width`           | Minimum width of the button           |
+| `--opacity`             | Opacity of the button                 |
+| `--padding-bottom`      | Padding bottom of the button          |
+| `--padding-end`         | Padding end of the button             |
+| `--padding-start`       | Padding start of the button           |
+| `--padding-top`         | Padding top of the button             |
+| `--ripple-color`        | Color of the button ripple effect     |
+| `--transition`          | Transition of the button              |


 ----------------------------------------------
--- a/core/src/components/back-button/test/basic/e2e.ts
+++ b/core/src/components/back-button/test/basic/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('back-button: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/basic?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
--- a/core/src/components/back-button/test/basic/index.html
+++ b/core/src/components/back-button/test/basic/index.html
@@ -3,129 +3,144 @@

 <head>
  <meta charset="UTF-8">
-  <title>Back Button</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Back Button - 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 src="../../../../../dist/ionic.js"></script>
 </head>

-<body onload="loadFirstPage()">
+<body>
  <ion-app>
-    <ion-nav></ion-nav>
+    <ion-content>
+      <h3>Default</h3>
+      <p>
+        <ion-back-button></ion-back-button>
+        <ion-back-button text="Back"></ion-back-button>
+        <ion-back-button icon="add"></ion-back-button>
+        <ion-back-button text="Text Only" icon=""></ion-back-button>
+        <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
+      </p>
+      <p>
+        <ion-back-button class="ion-focused"></ion-back-button>
+        <ion-back-button class="ion-focused" text="Back"></ion-back-button>
+        <ion-back-button class="ion-focused" icon="add"></ion-back-button>
+        <ion-back-button class="ion-focused" text="Text Only" icon=""></ion-back-button>
+        <ion-back-button class="ion-focused" icon="heart" text="Love" color="danger"></ion-back-button>
+      </p>
+
+      <h3>Colors</h3>
+      <p>
+        <ion-back-button color="primary"></ion-back-button>
+        <ion-back-button color="secondary"></ion-back-button>
+        <ion-back-button color="tertiary"></ion-back-button>
+        <ion-back-button color="success"></ion-back-button>
+        <ion-back-button color="warning"></ion-back-button>
+        <ion-back-button color="danger"></ion-back-button>
+        <ion-back-button color="light"></ion-back-button>
+        <ion-back-button color="medium"></ion-back-button>
+        <ion-back-button color="dark"></ion-back-button>
+      </p>
+      <p>
+        <ion-back-button color="primary" class="ion-focused"></ion-back-button>
+        <ion-back-button color="secondary" class="ion-focused"></ion-back-button>
+        <ion-back-button color="tertiary" class="ion-focused"></ion-back-button>
+        <ion-back-button color="success" class="ion-focused"></ion-back-button>
+        <ion-back-button color="warning" class="ion-focused"></ion-back-button>
+        <ion-back-button color="danger" class="ion-focused"></ion-back-button>
+        <ion-back-button color="light" class="ion-focused"></ion-back-button>
+        <ion-back-button color="medium" class="ion-focused"></ion-back-button>
+        <ion-back-button color="dark" class="ion-focused"></ion-back-button>
+      </p>
+
+      <h3>Custom</h3>
+
+      <!-- Custom Font -->
+      <p>
+        <ion-back-button class="wide" text="wide"></ion-back-button>
+        <ion-back-button class="large" text="large"></ion-back-button>
+        <ion-back-button class="round" text="round"></ion-back-button>
+        <ion-back-button class="small"></ion-back-button>
+      </p>
+      <p>
+        <ion-back-button class="wide ion-focused" text="wide"></ion-back-button>
+        <ion-back-button class="large ion-focused" text="large"></ion-back-button>
+        <ion-back-button class="round ion-focused" text="round"></ion-back-button>
+        <ion-back-button class="small ion-focused"></ion-back-button>
+      </p>
+
+      <!-- Custom Colors -->
+      <p>
+        <ion-back-button class="custom"></ion-back-button>
+        <ion-back-button color="secondary" class="custom"></ion-back-button>
+      </p>
+
+      <p>
+        <ion-back-button class="custom ion-focused"></ion-back-button>
+        <ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
+      </p>
+    </ion-content>
  </ion-app>
+
+  <script>
+    var buttons = document.querySelectorAll('ion-back-button');
+
+    for(var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', (event) => onClick(event));
+    }
+
+    function onClick(ev) {
+      console.log("clicked the button", ev.target.innerText);
+    }
+  </script>
+
+  <style>
+    h3 {
+      padding-left: 16px;
+    }
+
+    p {
+      padding-left: 8px;
+    }
+
+    ion-back-button {
+      display: inline-block !important;
+      vertical-align: middle;
+    }
+
+    .wide {
+      --background: #d1f3ff;
+      --background-hover: #add8e6;
+      --background-focused: #84c5db;
+
+      height: 50px;
+      width: 150px;
+    }
+
+    .large {
+      --icon-font-size: 32px;
+
+      font-size: 32px;
+      text-transform: capitalize;
+    }
+
+    .small {
+      --icon-font-size: 15px;
+    }
+
+    .custom {
+      --background: #ffdde2;
+      --background-hover: #fcc6ce;
+      --background-focused: lightpink;
+      --color: rgb(214, 60, 235);
+      --border-radius: 10px;
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+
+  </style>
 </body>

-<script>
-
-  async function loadFirstPage() {
-    const nav = document.querySelector('ion-nav');
-    await nav.componentOnReady();
-    const firstPage = document.createElement('div');
-    firstPage.classList.add('first-page');
-    firstPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <h1>Page One</h1>
-        <ion-button class="next">Go to Page Two</ion-button>
-      </ion-content>
-    `;
-
-    await nav.setRoot(firstPage);
-
-    // okay cool, we're in the DOM now
-    const button = firstPage.querySelector('.next');
-    button.addEventListener('click', async () => {
-      await goToPageTwo(nav);
-    });
-  }
-
-  async function goToPageTwo(nav) {
-    const secondPage = document.createElement('div');
-    secondPage.classList.add('second-page');
-    secondPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar color="secondary">
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Two</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <h1>Page Two</h1>
-        <p>Just an empty <code>ion-back-button</code></p>
-        <ion-button class="next">Go to Page Three</ion-button>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(secondPage);
-
-    const nextButton = secondPage.querySelector('ion-button.next');
-    nextButton.addEventListener('click', async () => {
-      await goToPageThree(nav);
-    });
-  }
-
-  async function goToPageThree(nav) {
-    const thirdPage = document.createElement('div');
-    thirdPage.classList.add('third-page');
-    thirdPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Three</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <h1>Page Three</h1>
-        <p>Custom back button</p>
-        <ion-button class="next">Go to Page Four</ion-button>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(thirdPage);
-
-    const nextButton = thirdPage.querySelector('ion-button.next');
-    nextButton.addEventListener('click', async () => {
-      await goToPageFour(nav);
-    });
-  }
-
-  async function goToPageFour(nav) {
-    const fourthPage = document.createElement('div');
-    fourthPage.classList.add('fourth-page');
-    fourthPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-back-button color="danger"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Four</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content padding>
-        <h1>Page Four</h1>
-        <p>Back button and menu button</p>
-      </ion-content>
-    `;
-
-    // okay cool, we're in the DOM now
-    await nav.push(fourthPage);
-  }
-</script>
-
 </html>
--- a/core/src/components/back-button/test/host-element/index.html
+++ b/core/src/components/back-button/test/host-element/index.html
@@ -22,7 +22,7 @@
                <ion-title>Page One</ion-title>
              </ion-toolbar>
            </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
              <h1>Page One</h1>
              <ion-nav-push component="page-two">
                <ion-button class="next">Go to Page Two</ion-button>
@@ -44,7 +44,7 @@
                <ion-title>Page Two</ion-title>
              </ion-toolbar>
            </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
              <h1>Page Two</h1>
              <div>
                <ion-nav-push component="page-three">
@@ -68,7 +68,7 @@
                <ion-title>Page Three</ion-title>
              </ion-toolbar>
            </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
              <h1>Page Three</h1>
              <div>
                <ion-nav-push component="page-four">
@@ -92,7 +92,7 @@
                <ion-title>Page Four</ion-title>
              </ion-toolbar>
            </ion-header>
-            <ion-content padding>
+            <ion-content class="ion-padding">
              <h1>Page Four</h1>
            </ion-content>
        `;
--- a/core/src/components/back-button/test/navigation/index.html
+++ b/core/src/components/back-button/test/navigation/index.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Back Button - Navigation</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 src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body onload="loadFirstPage()">
+  <ion-app>
+    <ion-nav></ion-nav>
+  </ion-app>
+</body>
+
+<script>
+
+  async function loadFirstPage() {
+    const nav = document.querySelector('ion-nav');
+    await nav.componentOnReady();
+    const firstPage = document.createElement('div');
+    firstPage.classList.add('first-page');
+    firstPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page One</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page One</h1>
+        <ion-button class="next">Go to Page Two</ion-button>
+      </ion-content>
+    `;
+
+    await nav.setRoot(firstPage);
+
+    // okay cool, we're in the DOM now
+    const button = firstPage.querySelector('.next');
+    button.addEventListener('click', async () => {
+      await goToPageTwo(nav);
+    });
+  }
+
+  async function goToPageTwo(nav) {
+    const secondPage = document.createElement('div');
+    secondPage.classList.add('second-page');
+    secondPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Two</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Two</h1>
+        <p>Just an empty <code>ion-back-button</code></p>
+        <ion-button class="next">Go to Page Three</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(secondPage);
+
+    const nextButton = secondPage.querySelector('ion-button.next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageThree(nav);
+    });
+  }
+
+  async function goToPageThree(nav) {
+    const thirdPage = document.createElement('div');
+    thirdPage.classList.add('third-page');
+    thirdPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Three</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Three</h1>
+        <p>Custom back button</p>
+        <ion-button class="next">Go to Page Four</ion-button>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(thirdPage);
+
+    const nextButton = thirdPage.querySelector('ion-button.next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageFour(nav);
+    });
+  }
+
+  async function goToPageFour(nav) {
+    const fourthPage = document.createElement('div');
+    fourthPage.classList.add('fourth-page');
+    fourthPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+            <ion-back-button color="danger"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Four</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Page Four</h1>
+        <p>Back button and menu button</p>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(fourthPage);
+  }
+</script>
+
+</html>
--- a/core/src/components/back-button/test/preview/index.html
+++ b/core/src/components/back-button/test/preview/index.html
@@ -33,7 +33,7 @@
          <ion-title>Page One</ion-title>
        </ion-toolbar>
      </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
        <h1>Page One</h1>
        <ion-button class="next">Go to Page Two</ion-button>
      </ion-content>
@@ -60,7 +60,7 @@
          <ion-title>Page Two</ion-title>
        </ion-toolbar>
      </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
        <h1>Page Two</h1>
        <p>Just an empty <code>ion-back-button</code></p>
        <ion-button class="next">Go to Page Three</ion-button>
@@ -88,7 +88,7 @@
          <ion-title>Page Three</ion-title>
        </ion-toolbar>
      </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
        <h1>Page Three</h1>
        <p>Custom back button</p>
        <ion-button class="next">Go to Page Four</ion-button>
@@ -117,7 +117,7 @@
          <ion-title>Page Four</ion-title>
        </ion-toolbar>
      </ion-header>
-      <ion-content padding>
+      <ion-content class="ion-padding">
        <h1>Page Four</h1>
        <p>Back button and menu button</p>
      </ion-content>
--- a/core/src/components/back-button/test/standalone/e2e.ts
+++ b/core/src/components/back-button/test/standalone/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('back-button: standalone', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/standalone?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
--- a/core/src/components/back-button/test/standalone/index.html
+++ b/core/src/components/back-button/test/standalone/index.html
@@ -3,7 +3,7 @@

 <head>
  <meta charset="UTF-8">
-  <title>Back Button</title>
+  <title>Back Button - 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">
--- a/core/src/components/back-button/test/toolbar/e2e.ts
+++ b/core/src/components/back-button/test/toolbar/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('back-button: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/back-button/test/basic?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
--- a/core/src/components/back-button/test/toolbar/index.html
+++ b/core/src/components/back-button/test/toolbar/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Back Button - Toolbar</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 src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button class="custom"></ion-back-button>
+          <ion-back-button class="custom ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Custom</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button color="secondary"></ion-back-button>
+          <ion-back-button color="secondary" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Secondary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Light</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="danger">
+        <ion-buttons slot="start">
+          <ion-button>
+            <ion-icon name="star" slot="icon-only"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Danger</ion-title>
+        <ion-buttons slot="end">
+          <ion-back-button icon="star" text=""></ion-back-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="dark">
+        <ion-buttons slot="start">
+          <ion-back-button text="Back" icon=""></ion-back-button>
+          <ion-back-button text="Back" icon="" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Dark</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-back-button text=""></ion-back-button>
+          <ion-back-button text="" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Tertiary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+          <ion-back-button text="Back"></ion-back-button>
+          <ion-back-button text="Back" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Primary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="success">
+        <ion-buttons slot="start">
+          <ion-back-button text="undo" icon="paper"></ion-back-button>
+          <ion-back-button text="undo" icon="paper" class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Success</ion-title>
+      </ion-toolbar>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    var buttons = document.querySelectorAll('ion-back-button');
+
+    for(var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', (event) => onClick(event));
+    }
+
+    function onClick(ev) {
+      console.log("clicked the button", ev.target.innerText);
+    }
+  </script>
+
+  <style>
+    ion-back-button {
+      display: inline-block !important;
+    }
+
+    .custom {
+      --background: #ffdde2;
+      --background-hover: #fcc6ce;
+      --background-focused: lightpink;
+      --color: rgb(214, 60, 235);
+      --border-radius: 10px;
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+  </style>
+</body>
+
+</html>
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -135,7 +135,7 @@ export default Example;
  import { Component, Vue } from 'vue-property-decorator';

  @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
    backdropDismiss = false;
    showBackdrop = false;
    shouldPropagate = false;
--- a/core/src/components/backdrop/usage/vue.md
+++ b/core/src/components/backdrop/usage/vue.md
@@ -24,7 +24,7 @@
  import { Component, Vue } from 'vue-property-decorator';

  @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
    backdropDismiss = false;
    showBackdrop = false;
    shouldPropagate = false;
--- a/core/src/components/badge/test/standalone/index.html
+++ b/core/src/components/badge/test/standalone/index.html
@@ -11,7 +11,7 @@
  <script src="../../../../../dist/ionic.js"></script>
 </head>

-<body padding>
+<body class="ion-padding">
  <h1>Default</h1>

  <!-- Default -->
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -71,18 +71,6 @@
 }


-// iOS Round Button
-// --------------------------------------------------
-
-:host(.button-round) {
-  --border-radius: #{$button-ios-round-border-radius};
-  --padding-top: #{$button-ios-round-padding-top};
-  --padding-start: #{$button-ios-round-padding-start};
-  --padding-end: #{$button-ios-round-padding-end};
-  --padding-bottom: #{$button-ios-round-padding-bottom};
-}
-
-
 // iOS Button Sizes
 // --------------------------------------------------

@@ -111,6 +99,18 @@
 }


+// iOS Round Button
+// --------------------------------------------------
+
+:host(.button-round) {
+  --border-radius: #{$button-ios-round-border-radius};
+  --padding-top: #{$button-ios-round-padding-top};
+  --padding-start: #{$button-ios-round-padding-start};
+  --padding-end: #{$button-ios-round-padding-end};
+  --padding-bottom: #{$button-ios-round-padding-bottom};
+}
+
+
 // iOS strong Button
 // --------------------------------------------------

@@ -127,7 +127,21 @@
    --opacity: #{$button-ios-opacity-hover};
  }

-  :host(.button-clear:hover) {
+  :host(.button-clear:hover),
+  :host(.button-outline:hover) {
    --opacity: #{$button-ios-clear-opacity-hover};
  }
+
+  // Since iOS changes the opacity on hover,
+  // we want to keep the background if focused
+  // or activated
+  :host(.ion-focused:hover) {
+    --background-hover: var(--background-focused);
+    --color-hover: var(--color-focused);
+  }
+
+  :host(.activated:hover) {
+    --background-hover: var(--background-activated);
+    --color-hover: var(--color-activated);
+  }
 }
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -47,6 +47,7 @@
  --box-shadow: none;
  --background-activated: transparent;
  --background-focused: #{ion-color(primary, base, .1)};
+  --background-hover: #{ion-color(primary, base, .04)};
  --color-activated: #{ion-color(primary, base)};
 }

@@ -62,6 +63,7 @@
  --opacity: #{$button-md-clear-opacity};
  --background-activated: transparent;
  --background-focused: #{ion-color(primary, base, .1)};
+  --background-hover: #{ion-color(primary, base, .04)};
  --color-activated: #{ion-color(primary, base)};
  --color-focused: #{ion-color(primary, base)};
 }
@@ -117,23 +119,16 @@
 }


-// Material Design Button Sizes
+// Material Design Button: Hover
 // --------------------------------------------------

@media (any-hover: hover) {
-  :host(.button-outline:hover) .button-native {
-    background: ion-color(primary, base, .04);
+  :host(.button-solid.ion-color:hover) .button-native {
+    background: #{current-color(base, .92)};
  }

+  :host(.button-clear.ion-color:hover) .button-native,
  :host(.button-outline.ion-color:hover) .button-native {
-    background: current-color(base, .04);
+    background: #{current-color(base, .04)};
  }
-
-  :host(.button-clear:hover) .button-native {
-    background: ion-color(primary, base, .04);
-  }
-
-  :host(.button-clear.ion-color:hover) .button-native {
-    background: current-color(base, .04);
-  }
-}
+}
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -8,10 +8,12 @@
   * @prop --background: Background of the button
   * @prop --background-activated: Background of the button when activated
   * @prop --background-focused: Background of the button when focused
+   * @prop --background-hover: Background of the button on hover
   *
   * @prop --color: Text color of the button
   * @prop --color-activated: Text color of the button when activated
   * @prop --color-focused: Text color of the button when focused
+   * @prop --color-hover: Text color of the button when hover
   *
   * @prop --transition: Transition of the button
   *
@@ -35,6 +37,7 @@
  --border-width: initial;
  --border-color: initial;
  --border-style: initial;
+  --color-hover: initial;
  --box-shadow: none;

  display: inline-block;
@@ -60,12 +63,12 @@
 }

 :host(.button-disabled) {
+  --opacity: .5;
  pointer-events: none;
 }

 :host(.button-disabled) .button-native {
  cursor: default;
-  opacity: .5;
  pointer-events: none;
 }

@@ -76,6 +79,7 @@
 :host(.button-solid) {
  --background: #{ion-color(primary, base)};
  --background-focused: #{ion-color(primary, shade)};
+  --background-hover: #{ion-color(primary, base, 0.92)};
  --color: #{ion-color(primary, contrast)};
  --color-activated: #{ion-color(primary, contrast)};
  --color-focused: #{ion-color(primary, contrast)};
@@ -234,21 +238,6 @@
  border: 0;
 }

-:host(.ion-focused) .button-native {
-  background: var(--background-focused);
-  color: var(--color-focused);
-}
-
-:host(.activated) .button-native {
-  background: var(--background-activated);
-  color: var(--color-activated);
-}
-
-
-// .button > .button-container:hover {
-//   opacity: var(--opacity-hover);
-// }
-
 .button-inner {
  display: flex;

@@ -289,3 +278,23 @@
 ion-ripple-effect {
  color: var(--ripple-color);
 }
+
+// Button: Hover
+// --------------------------------------------------
+
+:host(.ion-focused) .button-native {
+  background: var(--background-focused);
+  color: var(--color-focused);
+}
+
+:host(.activated) .button-native {
+  background: var(--background-activated);
+  color: var(--color-activated);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    background: var(--background-hover);
+    color: var(--color-hover);
+  }
+}
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -21,6 +21,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
 export class Button implements ComponentInterface {

  private inToolbar = false;
+  private inItem = false;

  @Element() el!: HTMLElement;

@@ -105,6 +106,7 @@ export class Button implements ComponentInterface {

  componentWillLoad() {
    this.inToolbar = !!this.el.closest('ion-buttons');
+    this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
  }

  @Listen('click')
@@ -130,6 +132,22 @@ export class Button implements ComponentInterface {
    }
  }

+  private get hasIconOnly() {
+    return !!this.el.querySelector('ion-icon[slot="icon-only"]');
+  }
+
+  private get rippleType() {
+    const hasClearFill = this.fill === undefined || this.fill === 'clear';
+
+    // If the button is in a toolbar, has a clear fill (which is the default)
+    // and only has an icon we use the unbounded "circular" ripple effect
+    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+      return 'unbounded';
+    }
+
+    return 'bounded';
+  }
+
  private onFocus = () => {
    this.ionFocus.emit();
  }
@@ -139,11 +157,12 @@ export class Button implements ComponentInterface {
  }

  hostData() {
-    const { buttonType, disabled, color, expand, shape, size, strong } = this;
+    const { buttonType, disabled, color, expand, hasIconOnly, shape, strong } = this;
    let fill = this.fill;
    if (fill === undefined) {
      fill = this.inToolbar ? 'clear' : 'solid';
    }
+    const size = this.size === undefined && this.inItem ? 'small' : this.size;
    return {
      'aria-disabled': disabled ? 'true' : null,
      class: {
@@ -156,6 +175,7 @@ export class Button implements ComponentInterface {
        [`${buttonType}-${fill}`]: true,
        [`${buttonType}-strong`]: strong,

+        'button-has-icon-only': hasIconOnly,
        'button-disabled': disabled,
        'ion-activatable': true,
        'ion-focusable': true,
@@ -183,7 +203,7 @@ export class Button implements ComponentInterface {
          <slot></slot>
          <slot name="end"></slot>
        </span>
-        {this.mode === 'md' && <ion-ripple-effect type={this.inToolbar ? 'unbounded' : 'bounded'}></ion-ripple-effect>}
+        {this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
      </TagType>
    );
  }
--- a/core/src/components/button/button.vars.scss
+++ b/core/src/components/button/button.vars.scss
@@ -17,5 +17,3 @@ $button-round-padding-start:      $button-round-padding-end !default;

 /// @prop - Border radius of the round button
 $button-round-border-radius:      64px !default;
-
-/// @prop - Opacity of the button when disabled
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -255,6 +255,7 @@ export default Example;
 | `--background`           | Background of the button                |
 | `--background-activated` | Background of the button when activated |
 | `--background-focused`   | Background of the button when focused   |
+| `--background-hover`     | Background of the button on hover       |
 | `--border-color`         | Border color of the button              |
 | `--border-radius`        | Border radius of the button             |
 | `--border-style`         | Border style of the button              |
@@ -263,6 +264,7 @@ export default Example;
 | `--color`                | Text color of the button                |
 | `--color-activated`      | Text color of the button when activated |
 | `--color-focused`        | Text color of the button when focused   |
+| `--color-hover`          | Text color of the button when hover     |
 | `--opacity`              | Opacity of the button                   |
 | `--padding-bottom`       | Padding bottom of the button            |
 | `--padding-end`          | Padding end of the button               |
--- a/core/src/components/button/test/anchor/index.html
+++ b/core/src/components/button/test/anchor/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
      <p>
        <ion-button href="#">Default</ion-button>
        <ion-button href="#" class="activated">Default.activated</ion-button>
--- a/core/src/components/button/test/basic/index.html
+++ b/core/src/components/button/test/basic/index.html
@@ -20,70 +20,75 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce text-center>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
      <p>
        <ion-button>Default</ion-button>
-        <ion-button class="focused">Default.focused</ion-button>
+        <ion-button class="ion-focused">Default.focused</ion-button>
        <ion-button class="activated">Default.activated</ion-button>
      </p>

      <p>
        <ion-button color="primary">Primary</ion-button>
-        <ion-button class="focused" color="primary">Primary.focused</ion-button>
+        <ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
        <ion-button class="activated" color="primary">Primary.activated</ion-button>
      </p>

      <p>
        <ion-button color="secondary">Secondary</ion-button>
-        <ion-button class="focused" color="secondary">Secondary.focused</ion-button>
+        <ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
        <ion-button class="activated" color="secondary">Secondary.activated</ion-button>
      </p>

      <p>
        <ion-button color="tertiary">Tertiary</ion-button>
-        <ion-button class="focused" color="tertiary">Tertiary.focused</ion-button>
+        <ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
        <ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
      </p>

      <p>
        <ion-button color="success">Success</ion-button>
-        <ion-button class="focused" color="success">Success.focused</ion-button>
+        <ion-button class="ion-focused" color="success">Success.focused</ion-button>
        <ion-button class="activated" color="success">Success.activated</ion-button>
      </p>

      <p>
        <ion-button color="warning">Warning</ion-button>
-        <ion-button class="focused" color="warning">Warning.focused</ion-button>
+        <ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
        <ion-button class="activated" color="warning">Warning.activated</ion-button>
      </p>

      <p>
        <ion-button color="danger">Danger</ion-button>
-        <ion-button class="focused" color="danger">Danger.focused</ion-button>
+        <ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
        <ion-button class="activated" color="danger">Danger.activated</ion-button>
      </p>

      <p>
        <ion-button color="light">Light</ion-button>
-        <ion-button class="focused" color="light">Light.focused</ion-button>
+        <ion-button class="ion-focused" color="light">Light.focused</ion-button>
        <ion-button class="activated" color="light">Light.activated</ion-button>
      </p>

      <p>
        <ion-button color="medium">Medium</ion-button>
-        <ion-button class="focused" color="medium">Medium.focused</ion-button>
+        <ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
        <ion-button class="activated" color="medium">Medium.activated</ion-button>
      </p>

      <p>
        <ion-button color="dark">Dark</ion-button>
-        <ion-button class="focused" color="dark">Dark.focused</ion-button>
+        <ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
        <ion-button class="activated" color="dark">Dark.activated</ion-button>
      </p>

+      <p>
+        <ion-button style="--opacity: .2">Opacity: 0.2</ion-button>
+      </p>
+
      <p>
        <ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)">Button Disabled</ion-button>
        <ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
+        <ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
      </p>

      <p>
--- a/core/src/components/button/test/clear/index.html
+++ b/core/src/components/button/test/clear/index.html
@@ -20,75 +20,75 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
      <p>
        <ion-button fill="clear">Default</ion-button>
        <ion-button fill="clear" class="activated">Default.activated</ion-button>
-        <ion-button fill="clear" class="focused">Default.focused</ion-button>
-        <ion-button fill="clear" class="activated focused">Default.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused">Default.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused">Default.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="primary">Primary</ion-button>
        <ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="primary">Primary.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="primary">Primary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="primary">Primary.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="secondary">Secondary</ion-button>
        <ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="secondary">Secondary.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="tertiary">Tertiary</ion-button>
        <ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="success">Success</ion-button>
        <ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="success">Success.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="success">Success.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="success">Success.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="warning">Warning</ion-button>
        <ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="warning">Warning.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="warning">Warning.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="warning">Warning.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="danger">Danger</ion-button>
        <ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="danger">Danger.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="danger">Danger.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="danger">Danger.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="light">Light</ion-button>
        <ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="light">Light.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="light">Light.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="light">Light.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="medium">Medium</ion-button>
        <ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="medium">Medium.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="medium">Medium.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="medium">Medium.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="clear" color="dark">Dark</ion-button>
        <ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
-        <ion-button fill="clear" class="focused" color="dark">Dark.focused</ion-button>
-        <ion-button fill="clear" class="activated focused" color="dark">Dark.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-focused" color="dark">Dark.focused</ion-button>
+        <ion-button fill="clear" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
      </p>
      <p>
        <ion-button fill="clear" disabled>Disabled</ion-button>
--- a/core/src/components/button/test/dynamic/e2e.ts
+++ b/core/src/components/button/test/dynamic/e2e.ts
@@ -0,0 +1,31 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('button: dynamic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/button/test/dynamic?ionic:_testing=true'
+  });
+
+  const compares = [];
+
+  compares.push(await page.compareScreenshot());
+
+  await page.click('#add-item-button');
+
+  compares.push(await page.compareScreenshot('add item button'));
+
+  await page.click('#add-item-divider-button');
+
+  compares.push(await page.compareScreenshot('add item divider button'));
+
+  await page.click('#change-item-button');
+
+  compares.push(await page.compareScreenshot('change item button size'));
+
+  await page.click('#change-item-divider-button');
+
+  compares.push(await page.compareScreenshot('change item divider button size'));
+
+  for (const compare of compares) {
+    expect(compare).toMatchScreenshot();
+  }
+});
--- a/core/src/components/button/test/dynamic/index.html
+++ b/core/src/components/button/test/dynamic/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Button - Dynamic</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 src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Button - Dynamic</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding" id="content" no-bounce>
+      <ion-item id="dynamicItem">
+        <ion-button slot="start">Default</ion-button>
+        <ion-label>Dynamic Button</ion-label>
+        <ion-button id="dynamicItemLarge" slot="end" size="large">Large</ion-button>
+      </ion-item>
+      <ion-button id="add-item-button" color="success" onClick="addButton('dynamicItem')">
+        Add a Button
+      </ion-button>
+      <ion-button id="change-item-button" color="tertiary" onClick="changeButtonSize('dynamicItemLarge')">
+        Change Button Size
+      </ion-button>
+
+      <ion-item-divider id="dynamicItemDivider">
+        <ion-button slot="start">Default</ion-button>
+        <ion-label>Dynamic Button</ion-label>
+        <ion-button id="dynamicItemDividerLarge" slot="end" size="large">Large</ion-button>
+      </ion-item-divider>
+      <ion-button id="add-item-divider-button" color="success" onClick="addButton('dynamicItemDivider')">
+        Add a Button
+      </ion-button>
+      <ion-button id="change-item-divider-button" color="tertiary" onClick="changeButtonSize('dynamicItemDividerLarge')">
+        Change Button Size
+      </ion-button>
+    </ion-content>
+
+  </ion-app>
+
+  <script>
+    function addButton(dynamicId) {
+      var item = document.querySelector('#' + dynamicId);
+      var button = document.createElement("ion-button");
+      button.textContent = "Button";
+      button.slot = "start";
+      item.appendChild(button);
+    }
+
+    function changeButtonSize(dynamicId) {
+      var button = document.querySelector('#' + dynamicId);
+      var size = button.size === 'large' ? undefined : 'large';
+      button.size = size;
+    }
+  </script>
+</body>
+
+</html>
--- a/core/src/components/button/test/expand/index.html
+++ b/core/src/components/button/test/expand/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
      <p>
        <ion-button expand="block">Block</ion-button>
        <ion-button expand="full">Full</ion-button>
--- a/core/src/components/button/test/form/index.html
+++ b/core/src/components/button/test/form/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce text-center>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce>

      <form onsubmit="return validate(event)" action="http://httpbin.org/get" method="GET">

--- a/core/src/components/button/test/icon/index.html
+++ b/core/src/components/button/test/icon/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
      <p>
        <ion-button>
          <ion-icon name="home" slot="start"></ion-icon>
--- a/core/src/components/button/test/outline/index.html
+++ b/core/src/components/button/test/outline/index.html
@@ -20,75 +20,75 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
      <p>
        <ion-button fill="outline">Default</ion-button>
        <ion-button fill="outline" class="activated">Default.activated</ion-button>
-        <ion-button fill="outline" class="focused">Default.focused</ion-button>
-        <ion-button fill="outline" class="activated focused">Default.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused">Default.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused">Default.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="primary">Primary</ion-button>
        <ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="primary">Primary.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="primary">Primary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="primary">Primary.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="secondary">Secondary</ion-button>
        <ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="secondary">Secondary.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="tertiary">Tertiary</ion-button>
        <ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="success">Success</ion-button>
        <ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="success">Success.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="success">Success.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="success">Success.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="warning">Warning</ion-button>
        <ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="warning">Warning.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="warning">Warning.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="warning">Warning.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="danger">Danger</ion-button>
        <ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="danger">Danger.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="danger">Danger.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="danger">Danger.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="light">Light</ion-button>
        <ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="light">Light.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="light">Light.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="light">Light.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="medium">Medium</ion-button>
        <ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="medium">Medium.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="medium">Medium.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="medium">Medium.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
      </p>

      <p>
        <ion-button fill="outline" color="dark">Dark</ion-button>
        <ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
-        <ion-button fill="outline" class="focused" color="dark">Dark.focused</ion-button>
-        <ion-button fill="outline" class="activated focused" color="dark">Dark.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
+        <ion-button fill="outline" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
      </p>
      <p>
        <ion-button fill="outline" disabled>Disabled</ion-button>
--- a/core/src/components/button/test/preview/index.html
+++ b/core/src/components/button/test/preview/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce text-center fullscreen>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce fullscreen>
      <p>
        <ion-button>Default</ion-button>
        <ion-button class="activated">Default.activated</ion-button>
--- a/core/src/components/button/test/round/index.html
+++ b/core/src/components/button/test/round/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding text-center no-bounce>
+    <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
      <ion-button shape="round">Default</ion-button>
      <ion-button shape="round" color="primary">Primary</ion-button>
      <ion-button shape="round" color="secondary">Secondary</ion-button>
--- a/core/src/components/button/test/size/index.html
+++ b/core/src/components/button/test/size/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
      <p>
        <ion-button>Default</ion-button>
        <ion-button href="#">Default</ion-button>
--- a/core/src/components/button/test/standalone/index.html
+++ b/core/src/components/button/test/standalone/index.html
@@ -24,6 +24,13 @@
    <ion-button fill="clear" expand="block">Block Clear</ion-button>
  </p>

+  <h3>Round button combinations</h3>
+  <p>
+    <ion-button shape="round" size="small">Round & Small</ion-button>
+    <ion-button shape="round" size="large">Round & Large</ion-button>
+    <ion-button shape="round" fill="outline">Round & Outline</ion-button>
+  </p>
+
  <h3>Colors</h3>
  <p>
    <ion-button color="primary">Primary</ion-button>
@@ -46,8 +53,10 @@

  <!-- Custom Colors -->
  <ion-button class="custom">custom</ion-button>
+  <ion-button class="custom activated ion-focused">custom.focused</ion-button>
  <ion-button class="custom activated">custom.activated</ion-button>
  <ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
+  <ion-button fill="clear" class="medium">custom medium</ion-button>

  <ion-toolbar>
    <ion-buttons slot="start">
@@ -92,11 +101,17 @@

    .custom {
      --background: lightpink;
+      --background-hover: rgba(255, 182, 193, 0.5);
      --background-activated: green;
      --color: #222;
      --color-activated: white;
      --opacity: 1;
    }
+
+    .medium {
+      --color: #989aa2;
+      --background-hover: rgba(152, 154, 162, 0.4);
+    }
  </style>
 </body>
 </html>
--- a/core/src/components/button/test/strong/index.html
+++ b/core/src/components/button/test/strong/index.html
@@ -20,7 +20,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="content" padding no-bounce>
+    <ion-content class="ion-padding" id="content" no-bounce>
      <p>
        <ion-button strong>Default</ion-button>
      </p>
--- a/core/src/components/button/test/toolbar/index.html
+++ b/core/src/components/button/test/toolbar/index.html
@@ -21,7 +21,7 @@
    </ion-header>

    <ion-content id="content">
-      <ion-toolbar no-padding>
+      <ion-toolbar class="ion-no-padding">
        <ion-title>This should have no padding</ion-title>
      </ion-toolbar>

--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -6,42 +6,93 @@
 // --------------------------------------------------

 ::slotted(*) ion-button {
-  --padding-top: 0;
-  --padding-bottom: 0;
  --padding-start: 5px;
  --padding-end: 5px;

+  @include margin-horizontal(2px, 2px);
+
  height: 32px;

  font-size: #{$toolbar-ios-button-font-size};
  font-weight: 400;
 }

+
+
 ::slotted(*) ion-button:not(.button-round) {
  --border-radius: #{$toolbar-ios-button-border-radius};
 }

-// iOS Toolbar with Color Default Button
+// iOS Toolbar with Color: Default Buttons
 // --------------------------------------------------

 :host-context(.ion-color)::slotted(*) .button {
  --color: initial;
-  --color-activated: initial;
+  --border-color: initial;
+  --background-focused: #{current-color(contrast, .1)};
+
+}
+
+:host-context(.ion-color)::slotted(*) .button-solid {
+  --background: #{current-color(contrast)};
+  --background-activated: #{current-color(contrast, .8)};
+  --background-focused: #{current-color(contrast, .6)};
+  --color: #{current-color(base)};
+  --color-focused: #{current-color(base)};
+}
+
+:host-context(.ion-color)::slotted(*) .button-clear {
+  --background-focused: #{current-color(contrast, .1)};
+  --color-activated: #{current-color(contrast)};
+  --color-focused: #{current-color(contrast)};
+}
+
+:host-context(.ion-color)::slotted(*) .button-outline {
+  --background-activated: #{current-color(contrast)};
+  --background-focused: #{current-color(contrast, .1)};
+  --color-activated: #{current-color(base)};
+  --color-focused: #{current-color(contrast)};
+}
+
+
+// iOS Toolbar Button Clear
+// --------------------------------------------------
+
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear {
+  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --color-activated: #{$toolbar-ios-color-activated};
+  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+}
+
+
+// iOS Toolbar Button Outline
+// --------------------------------------------------
+
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline {
+  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
+  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))};
 }


 // iOS Toolbar Button Solid
 // --------------------------------------------------

-@media (any-hover: hover) {
-  ::slotted(*) .button-solid-ios:hover {
-    opacity: .4;
-  }
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
+  --color: #{$toolbar-ios-background};
+  --color-activated: #{$toolbar-ios-background};
+  --color-focused: #{$toolbar-ios-background};
+  --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
+  --background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
 }


 // iOS Toolbar Button Icon
 // --------------------------------------------------
+
 ::slotted(*) ion-icon[slot="start"] {
  @include margin(0);
  @include margin-horizontal(null, .3em);
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -11,6 +11,8 @@
  --padding-end: 8px;
  --box-shadow: none;

+  @include margin-horizontal(2px, 2px);
+
  height: 32px;

  font-size: #{$toolbar-md-button-font-size};
@@ -22,16 +24,52 @@
 }


-// Material Design Toolbar w/ Color Default Button
+// Material Design Toolbar w/ Color: Default Buttons
 // --------------------------------------------------

 :host-context(.ion-color)::slotted(*) .button {
  --color: initial;
-  --color-activated: initial;
-  --color-focused: initial;
-  --background-focused: #{ion-color(primary, contrast, 0.1)};
+  --color-focused: #{current-color(contrast)};
+  --color-hover: #{current-color(contrast)};
+  --background-hover: #{current-color(contrast, .08)};
+  --background-focused: #{current-color(contrast, .24)};
 }

+:host-context(.ion-color)::slotted(*) .button-solid {
+  --background: #{current-color(contrast)};
+  --background-activated: #{current-color(contrast)};
+  --background-focused: #{current-color(contrast, .9)};
+  --background-hover: #{current-color(contrast, .92)};
+  --color: #{current-color(base)};
+  --color-focused: #{current-color(base)};
+  --color-hover: #{current-color(base)};
+}
+
+:host-context(.ion-color)::slotted(*) .button-outline {
+  --border-color: #{current-color(contrast)};
+}
+
+
+// Material Design Toolbar Icon Only Clear Button
+// --------------------------------------------------
+
+::slotted(*) .button-has-icon-only.button-clear {
+  --padding-top: 12px;
+  --padding-end: 12px;
+  --padding-bottom: 12px;
+  --padding-start: 12px;
+  --border-radius: 50%;
+
+  @include margin(0);
+
+  width: 48px;
+  height: 48px;
+}
+
+
+::slotted(*) .button {
+  --background-hover: rgba(66, 66, 66, 0.08);
+}

 // Material Design Toolbar Solid Button
 // --------------------------------------------------
@@ -41,6 +79,8 @@
  --color-activated: #{$toolbar-md-background};
  --background: #{$toolbar-md-color};
  --background-activated: #{$toolbar-md-color};
+  --background-focused: #{$toolbar-md-color-activated};
+  --background-hover: rgba(66, 66, 66, 0.92);
 }


@@ -50,9 +90,11 @@
 ::slotted(*) .button-outline {
  --color: initial;
  --color-activated: currentColor;
+  --color-focused: #{$toolbar-md-color};
  --background: transparent;
  --background-activated: transparent;
-  --border-color: currentColor;
+  --border-color: #{$toolbar-md-color};
+  --background-focused: rgba(66, 66, 66, 0.1);
 }


@@ -61,8 +103,10 @@

 ::slotted(*) .button-clear {
  --color: initial;
+  --color-focused: #{$toolbar-md-color};
  --color-activated: currentColor;
  --background: transparent;
+  --background-focused: rgba(66, 66, 66, 0.1);
 }


--- a/core/src/components/buttons/buttons.scss
+++ b/core/src/components/buttons/buttons.scss
@@ -16,11 +16,6 @@
 ::slotted(*) ion-button {
  --padding-top: 0;
  --padding-bottom: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-  --box-shadow: none;
-  --overflow: visible;

  @include margin(0);
-  @include margin-horizontal(2px, 2px);
 }
--- a/core/src/components/buttons/test/icon/index.html
+++ b/core/src/components/buttons/test/icon/index.html
@@ -27,7 +27,7 @@
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
-    <ion-content padding no-bounce text-center>
+    <ion-content class="ion-padding ion-text-center" no-bounce>
      Content
    </ion-content>

--- a/core/src/components/card/card.ios.scss
+++ b/core/src/components/card/card.ios.scss
@@ -13,7 +13,13 @@

  transform: translateZ(0);

+  transition: transform 500ms $card-ios-transition-timing-function;
+
  font-size: $card-ios-font-size;

  box-shadow: $card-ios-box-shadow;
 }
+
+:host(.activated) {
+  transform: #{$card-ios-transform-activated};
+}
--- a/core/src/components/card/card.ios.vars.scss
+++ b/core/src/components/card/card.ios.vars.scss
@@ -32,3 +32,9 @@ $card-ios-font-size:                   14px !default;

 /// @prop - Color of the card text
 $card-ios-text-color:                  $text-color-step-400 !default;
+
+/// @prop - Transition timing function of the card
+$card-ios-transition-timing-function:  cubic-bezier(0.12, 0.72, 0.29, 1) !default;
+
+/// @prop - Transform of the card on activate
+$card-ios-transform-activated:         scale3d(.97, .97, 1) !default;
--- a/core/src/components/card/card.scss
+++ b/core/src/components/card/card.scss
@@ -50,3 +50,56 @@
 ::slotted(*) ion-list {
  @include margin(0);
 }
+
+
+// Disabled Card
+// --------------------------------------------------
+
+:host(.card-disabled) {
+  cursor: default;
+  opacity: .3;
+  pointer-events: none;
+}
+
+
+// Native
+// --------------------------------------------------
+
+.card-native {
+  @include text-inherit();
+  @include padding(0);
+  @include margin(0);
+
+  display: block;
+
+  width: 100%;
+  min-height: var(--min-height);
+
+  transition: var(--transition);
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+
+  outline: none;
+
+  background: var(--background);
+}
+
+.card-native::-moz-focus-inner {
+  border: 0;
+}
+
+button, a {
+  cursor: pointer;
+  user-select: none;
+
+  -webkit-user-drag: none;
+}
+
+// Card Button Ripple effect
+// --------------------------------------------------
+
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';

-import { Color, Mode } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { Color, Mode, RouterDirection } from '../../interface';
+import { createColorClasses, openURL } from '../../utils/theme';

@Component({
  tag: 'ion-card',
@@ -13,6 +13,8 @@ import { createColorClasses } from '../../utils/theme';
 })
 export class Card implements ComponentInterface {

+  @Prop({ context: 'window' }) win!: Window;
+
  /**
   * The color to use from your application's color palette.
   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -25,12 +27,72 @@ export class Card implements ComponentInterface {
   */
  @Prop() mode!: Mode;

+  /**
+   * If `true`, a button tag will be rendered and the card will be tappable.
+   */
+  @Prop() button = false;
+
+  /**
+   * The type of the button. Only used when an `onclick` or `button` property is present.
+   */
+  @Prop() type: 'submit' | 'reset' | 'button' = 'button';
+
+  /**
+   * If `true`, the user cannot interact with the card.
+   */
+  @Prop() disabled = false;
+
+  /**
+   * 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;
+
+  /**
+   * When using a router, it specifies the transition direction when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerDirection: RouterDirection = 'forward';
+
+  private isClickable(): boolean {
+    return (this.href !== undefined || this.button);
+  }
+
  hostData() {
    return {
      class: {
+        [`${this.mode}`]: true,
+
        ...createColorClasses(this.color),
-        [`${this.mode}`]: true
+        'card-disabled': this.disabled,
+        'ion-activatable': this.isClickable()
      }
    };
  }
+
+  render() {
+    const clickable = this.isClickable();
+
+    if (!clickable) {
+      return [
+        <slot></slot>
+      ];
+    }
+
+    const { href, mode, win, routerDirection, type } = this;
+    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
+    const attrs = TagType === 'button' ? { type } : { href };
+
+    return (
+      <TagType
+        {...attrs}
+        class="card-native"
+        disabled={this.disabled}
+        onClick={(ev: Event) => openURL(win, href, ev, routerDirection)}
+      >
+        <slot></slot>
+        {clickable && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+      </TagType>
+    );
+  }
 }
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -182,10 +182,15 @@ export default Example;

 ## 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` |
-| `mode`   | `mode`    | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type                              | Default     |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `button`          | `button`           | If `true`, a button tag will be rendered and the card will be tappable.                                                                                                                                                                                                | `boolean`                         | `false`     |
+| `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` |
+| `disabled`        | `disabled`         | If `true`, the user cannot interact with the card.                                                                                                                                                                                                                     | `boolean`                         | `false`     |
+| `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` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                   | `undefined` |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                               | `"back" \| "forward" \| "root"`   | `'forward'` |
+| `type`            | `type`             | The type of the button. Only used when an `onclick` or `button` property is present.                                                                                                                                                                                   | `"button" \| "reset" \| "submit"` | `'button'`  |


 ## CSS Custom Properties
--- a/core/src/components/card/test/button/index.html
+++ b/core/src/components/card/test/button/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Card - 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 src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Card - Button</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+
+      <ion-card button>
+        <ion-card-header>
+          <ion-card-subtitle>
+            Subtitle
+          </ion-card-subtitle>
+          <ion-card-title>
+            Button Card
+          </ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          This is content, inside of a card with a button attribute.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card href="#">
+        <ion-card-header>
+          <ion-card-title>
+            Anchor Card
+          </ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          This is content, inside of a card with a href attribute.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card button>
+        <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg==">
+        </div>
+
+        <ion-card-header>
+          <ion-card-subtitle>
+            Subtitle
+          </ion-card-subtitle>
+          <ion-card-title>
+            Title
+          </ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          This button should have a background.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card button>
+        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg==">
+      </ion-card>
+
+    </ion-content>
+
+  </ion-app>
+  <style>
+    .content {
+      background: #e5e5e5;
+    }
+
+  </style>
+</body>
+
+</html>
--- a/core/src/components/card/test/img.jpg
+++ b/core/src/components/card/test/img.jpg
--- a/core/src/components/card/test/translucent/index.html
+++ b/core/src/components/card/test/translucent/index.html
@@ -44,7 +44,7 @@

      <ion-card>
        <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
-          <img style="transform: rotate(145deg) scale(1.5)" src="http://images.all-free-download.com/images/graphiclarge/travel_icons_6813629.jpg">
+          <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg">
        </div>
        <ion-card-header translucent>
          <ion-card-subtitle>
@@ -61,7 +61,7 @@

      <ion-card style="color: white;">
        <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
-          <img style="transform: scale(2)" src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          <img style="transform: scale(2)" src="/src/components/card/test/img.jpg">
        </div>
        <ion-card-header translucent>
          <ion-card-subtitle>
@@ -79,7 +79,7 @@

      <ion-card>
        <div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
-          <img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
+          <img src="/src/components/card/test/img.jpg">
        </div>

        <ion-card-header>
@@ -108,13 +108,13 @@

        <ion-grid>
          <ion-row>
-            <ion-col no-padding>
+            <ion-col class="ion-no-padding">
              <ion-button fill="clear" size="small">
                <ion-icon slot="start" name="star"></ion-icon>
                Star
              </ion-button>
            </ion-col>
-            <ion-col no-padding text-right>
+            <ion-col class="ion-no-padding ion-text-right">
              <ion-button fill="clear" size="small" class="activated">
                <ion-icon slot="start" name="share"></ion-icon>
                Activated
@@ -184,19 +184,19 @@

        <ion-grid>
          <ion-row>
-            <ion-col no-padding>
+            <ion-col class="ion-no-padding">
              <ion-button fill="clear" size="small">
                <ion-icon slot="start" name="star"></ion-icon>
                Favorite
              </ion-button>
            </ion-col>
-            <ion-col no-padding text-center>
+            <ion-col class="ion-no-padding ion-text-center">
              <ion-button fill="clear" size="small">
                <ion-icon slot="start" name="musical-notes"></ion-icon>
                Listen
              </ion-button>
            </ion-col>
-            <ion-col no-padding align-self-center padding-end text-right>
+            <ion-col class="ion-no-padding ion-padding-end ion-text-right ion-align-self-center">
              <ion-note>
                11h ago
              </ion-note>
@@ -205,7 +205,7 @@
        </ion-grid>
      </ion-card>

-      <ion-card no-margin>
+      <ion-card class="ion-no-margin">

        <div>
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@@ -217,20 +217,20 @@

        <ion-grid>
          <ion-row>
-            <ion-col no-padding>
+            <ion-col class="ion-no-padding">
              <ion-button fill="clear" size="small" color="dark">
                <ion-icon slot="start" name="star"></ion-icon>
                Favorite
              </ion-button>
            </ion-col>

-            <ion-col no-padding text-center>
+            <ion-col class="ion-no-padding ion-text-center">
              <ion-button fill="clear" size="small" color="dark">
                <ion-icon slot="start" name="musical-notes"></ion-icon>
                Listen
              </ion-button>
            </ion-col>
-            <ion-col no-padding text-right>
+            <ion-col class="ion-no-padding ion-text-right">
              <ion-button fill="clear" size="small" color="dark">
                <ion-icon slot="start" name="share-alt"></ion-icon>
                Share
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -174,7 +174,7 @@ export default CheckboxExample;
  import { Component, Vue } from 'vue-property-decorator';

  @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
    form = [
      { val: 'Pepperoni', isChecked: true },
      { val: 'Sausage', isChecked: false },
--- a/Show More
+++ b/Show More