4.2.1 (#18149)

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-title: 'bug: '
+title: ''
 labels: ''
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,7 +1,7 @@
 ---
 name: Feature Request
 about: Suggest an idea for this project
-title: 'feat: '
+title: ''
 labels: ''
 assignees: ''
 ---

.github/ISSUE_TEMPLATE/support_question.md

@@ -1,7 +1,7 @@
 ---
 name: Support Question
 about: Question on how to use this project
-title: 'support: '
+title: ''
 labels: 'ionitron: support'
 assignees: ''
 ---

.github/PROCESS.md

@@ -140,14 +140,6 @@ Once the release is ready to ship, it will get merged into `stable` and `master`
 
 See the [steps for releasing](#releasing) below for detailed information on how to publish a release.
 
-### Version Branches
-
-Once a release has shipped and the release branch has been merged into `stable` and `master` it should also be merged into its corrsponding version branch. These version branches allow us to ship updates for specific versions of the framework (i.e. Lets us ship a bug fix that only affects 4.2.x).
-
-Patch releases should be merged into their corresponding version branches. For example, a `release-4.1.1` branch should be merged into the `4.1.x` version branch and a `release-5.0.1` branch should be merged into the `5.0.x` version branch.
-
-When releasing a major version such as `5.0.0 ` or a minor version such as `4.1.0` , the version branch will not exist. The version branch should be created once the release branch has been merged into `stable` and `master`. For example, when releasing `4.1.0`, the `release-4.1.0` release branch should be merged into `stable` and `master` and then the `4.1.x` version branch should be created off the latest `stable`.
-
 
 ### Hotfix Branches
 
@@ -222,31 +214,19 @@ Hotfixes bypass `master` and should only be used for urgent fixes that can't wai
 ## Releasing
 
 1. Create the release branch from `master`, for example: `release-4.1.0`.
-
 1. Submit a pull request from the release branch into `stable`. Do not merge this pull request yet.
-
 1. Verify all tests are passing, fix any bugs if needed and make sure no undesired commits are in.
-
 1. Navigate to the root of the repository while on the release branch.
-
 1. Run `npm i` if it hasn't already been done.
-
 1. Run `npm run release.prepare`
     - Select the version based on the type of commits and the [Ionic Versioning](https://ionicframework.com/docs/intro/versioning)
     - After the process completes, verify the version number in all packages (`core`, `docs`, `angular`)
     - Verify the changelog commits are accurate and follow the [proper format]((https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format))
     - Commit these changes with the version number as the message, e.g. `git commit -m "4.1.0"`
-
 1. Run `npm run release`
-
 1. Click **Merge pull request**. Use the dropdown to select this option if necessary.
 
     <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. For example, if this release is for `4.3.1`, the message would be `merge release-4.3.1`.
-
-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`. 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.
+1. Rewrite the commit message to `merge release-4.1.0` with the proper release branch.
+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.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,51 +1,12 @@
-<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing -->
-
-## Pull request checklist
-
-Please check if your PR fulfills the following requirements:
-- [ ] Tests for the changes have been added (for bug fixes / features)
-- [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
-- [ ] Build (`npm run build`) was run locally and any changes were pushed
-- [ ] Lint (`npm run lint`) has passed locally and any fixes were made for failures
+#### Short description of what this resolves:
 
 
-## Pull request type
-
-<!-- Please do not submit updates to dependencies unless it fixes an issue. --> 
-
-<!-- Please try to limit your pull request to one type, submit multiple pull requests if needed. --> 
-
-Please check the type of change your PR introduces:
-- [ ] Bugfix
-- [ ] Feature
-- [ ] Code style update (formatting, renaming)
-- [ ] Refactoring (no functional changes, no api changes)
-- [ ] Build related changes
-- [ ] Documentation content changes
-- [ ] Other (please describe): 
-
-
-## What is the current behavior?
-<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
-
-Issue Number: N/A
-
-
-## What is the new behavior?
-<!-- Please describe the behavior or changes that are being added by this PR. -->
+#### Changes proposed in this pull request:
 
 -
 -
 -
 
-## Does this introduce a breaking change?
+**Ionic Version**:
 
-- [ ] Yes
-- [ ] No
-
-<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->
-
-
-## Other information
-
-<!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
+**Fixes**: #

.github/ionic-issue-bot.yml

@@ -118,15 +118,6 @@ labelPullRequest:
 
 wrongRepo:
   repos:
-    - label: "ionitron: capacitor"
-      repo: capacitor
-      message: >
-        Thanks for the issue! We use this issue tracker exclusively for bug reports and feature requests
-        associated with the Ionic Framework. It appears that this issue is associated with Capacitor.
-        I am moving this issue to the Capacitor repository. Please track this issue over there.
-
-
-        Thank you for using Ionic!
     - label: "ionitron: v3"
       repo: ionic-v3
       message: >

CHANGELOG.md

@@ -1,69 +1,14 @@
-# [4.4.0 Beryllium](https://github.com/ionic-team/ionic/compare/v4.3.1...v4.4.0) (2019-05-08)
+## [4.2.1](https://github.com/ionic-team/ionic/compare/v4.2.0...v4.2.1) (2019-04-26)
 
 
 ### 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))
+* **angular:** support replaceUrl with angular <7.2 ([#18107](https://github.com/ionic-team/ionic/issues/18107)) ([26ca72c](https://github.com/ionic-team/ionic/commit/26ca72c))
+* sanitize components using innerHTML ([#18145](https://github.com/ionic-team/ionic/issues/18145)) ([96d7fdd](https://github.com/ionic-team/ionic/commit/96d7fdd))
 
 
 
-## [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)
-
-
-### Bug Fixes
-
-* **action-sheet:** default buttons to empty array ([9e63947](https://github.com/ionic-team/ionic/commit/9e63947))
-* **angular:** back button correctly goes back to proper tab ([#18005](https://github.com/ionic-team/ionic/issues/18005)) ([52e5a8d](https://github.com/ionic-team/ionic/commit/52e5a8d)), closes [#17278](https://github.com/ionic-team/ionic/issues/17278) [#15216](https://github.com/ionic-team/ionic/issues/15216)
-* **components:** add mode classes to components for use in shadow elements ([#17838](https://github.com/ionic-team/ionic/issues/17838)) ([e5c8c10](https://github.com/ionic-team/ionic/commit/e5c8c10)), closes [#17608](https://github.com/ionic-team/ionic/issues/17608)
-* **datetime:** date strings no longer revert to previous day ([#18018](https://github.com/ionic-team/ionic/issues/18018)) ([cc60b60](https://github.com/ionic-team/ionic/commit/cc60b60)), closes [#17977](https://github.com/ionic-team/ionic/issues/17977)
-* **input:** prevent input from losing focus when tapping clear button ([#18004](https://github.com/ionic-team/ionic/issues/18004)) ([29bb4fc](https://github.com/ionic-team/ionic/commit/29bb4fc)), closes [#18002](https://github.com/ionic-team/ionic/issues/18002)
-* **item:** use the correct input highlight for an inset line item ([#18052](https://github.com/ionic-team/ionic/issues/18052)) ([72be80c](https://github.com/ionic-team/ionic/commit/72be80c)), closes [#18051](https://github.com/ionic-team/ionic/issues/18051)
-* **item-sliding:** hide closed side options while dragging side options open ([#17986](https://github.com/ionic-team/ionic/issues/17986)) ([f13722c](https://github.com/ionic-team/ionic/commit/f13722c)), closes [#17822](https://github.com/ionic-team/ionic/issues/17822)
-* **slides:** allow zoom to work ([18b347b](https://github.com/ionic-team/ionic/commit/18b347b)), closes [#17981](https://github.com/ionic-team/ionic/issues/17981)
-* **slides:** expose interface to provide custom animations ([#17959](https://github.com/ionic-team/ionic/issues/17959)) ([4474974](https://github.com/ionic-team/ionic/commit/4474974)), closes [#16616](https://github.com/ionic-team/ionic/issues/16616)
-* **textarea:** float label when a value is changed async ([#18024](https://github.com/ionic-team/ionic/issues/18024)) ([494991e](https://github.com/ionic-team/ionic/commit/494991e)), closes [#17555](https://github.com/ionic-team/ionic/issues/17555) [#17559](https://github.com/ionic-team/ionic/issues/17559)
-* **textarea:** update label alignment for inputs and textareas ([#18042](https://github.com/ionic-team/ionic/issues/18042)) ([38ae362](https://github.com/ionic-team/ionic/commit/38ae362)), closes [#16187](https://github.com/ionic-team/ionic/issues/16187)
-* **vue:** use direction type from core ([#17901](https://github.com/ionic-team/ionic/issues/17901)) ([fa13173](https://github.com/ionic-team/ionic/commit/fa13173))
-
-
-### Features
-
-* **toast:** add header and additional custom toast buttons ([#17147](https://github.com/ionic-team/ionic/issues/17147)) ([6e1a8f1](https://github.com/ionic-team/ionic/commit/6e1a8f1)), closes [#16791](https://github.com/ionic-team/ionic/issues/16791) [#16237](https://github.com/ionic-team/ionic/issues/16237) [#17611](https://github.com/ionic-team/ionic/issues/17611)
-* **toast:** add variables to change position start/end of toast ([#17961](https://github.com/ionic-team/ionic/issues/17961)) ([07e739a](https://github.com/ionic-team/ionic/commit/07e739a)), closes [#17854](https://github.com/ionic-team/ionic/issues/17854)
-
-
-
-# [4.2.0 Helium](https://github.com/ionic-team/ionic/compare/v4.1.2...v4.2.0) (2019-04-03)
+# [4.2.0](https://github.com/ionic-team/ionic/compare/v4.1.2...v4.2.0) (2019-04-03)
 
 
 ### Bug Fixes

angular/BREAKING.md

@@ -182,14 +182,13 @@ These have been renamed to the following, and moved from the button element to t
 
 In addition, several sets of mutually exclusive boolean attributes have been combined into a single string attribute.
 
-The `small` and `large` attributes are now combined under the `size` attribute. The `clear`, `outline`, and `solid` attributes have been combined under `fill`. The `full` and `block` attributes have been combined under `expand`. And, lastly, the `round` attribute is now used under `shape`.
+The `small` and `large` attributes are now combined under the `size` attribute. The `clear`, `outline`, and `solid` attributes have been combined under `fill`. And, lastly, the `full` and `block` attributes have been combined under `expand`.
 
 | Old Property                | New Property | Property Behavior           |
 | --------------------------- | ------------ | --------------------------- |
 | `small`, `large`            | `size`       | Sets the button size.       |
 | `clear`, `outline`, `solid` | `fill`       | Sets the button fill style. |
 | `full`, `block`             | `expand`     | Sets the button width.      |
-| `round`                     | `shape`      | Sets the button shape.      |
 
 
 **Old Usage Example:**
@@ -226,10 +225,6 @@ The `small` and `large` attributes are now combined under the `size` attribute.
 <ion-button full>
   Full-width Button
 </ion-button>
-
-<ion-button round>
-  Round Button
-</ion-button>
 ```
 
 **New Usage Example:**
@@ -256,10 +251,6 @@ The `small` and `large` attributes are now combined under the `size` attribute.
 <ion-button expand="full">
   Full-width Button
 </ion-button>
-
-<ion-button shape="round">
-  Round Button
-</ion-button>
 ```
 
 
@@ -783,26 +774,6 @@ 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
 
@@ -1094,11 +1065,11 @@ async openLoading() {
   let loading = this.loadingCtrl.create({
     content: 'Loading...'
   });
-
+  
   await loading.present();
-
+  
   const { role, data } = await loading.onDidDismiss();
-
+    
   console.log('Loading dismissed!');
 }
 ```

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.4.0",
+  "version": "4.2.1",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -45,7 +45,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.4.0",
+    "@ionic/core": "4.2.1",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

angular/src/directives/navigation/stack-controller.ts

@@ -116,23 +116,7 @@ export class StackController {
         return Promise.resolve(false);
       }
       const view = views[views.length - deep - 1];
-      let url = view.url;
-
-      const viewSavedData = view.savedData;
-      if (viewSavedData) {
-        const primaryOutlet = viewSavedData.get('primary');
-        if (
-          primaryOutlet &&
-          primaryOutlet.route &&
-          primaryOutlet.route._routerState &&
-          primaryOutlet.route._routerState.snapshot &&
-          primaryOutlet.route._routerState.snapshot.url
-        ) {
-          url = primaryOutlet.route._routerState.snapshot.url;
-        }
-      }
-
-      return this.navCtrl.navigateBack(url).then(() => true);
+      return this.navCtrl.navigateBack(view.url).then(() => true);
     });
   }
 

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', 'button', 'type', 'disabled', 'href', 'routerDirection'] })
+@Component({ selector: 'ion-card', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 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', 'button', 'type', 'disabled', 'href', 'routerDirection']);
+proxyInputs(IonCard, ['color', 'mode']);
 
 export declare interface IonCardContent extends StencilComponents<'IonCardContent'> {}
 @Component({ selector: 'ion-card-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode'] })
@@ -293,14 +293,13 @@ 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, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']);
+    proxyOutputs(this, this.el, ['ionImgDidLoad', 'ionError']);
   }
 }
 proxyInputs(IonImg, ['alt', 'src']);
@@ -414,7 +413,7 @@ export class IonItemSliding {
     proxyOutputs(this, this.el, ['ionDrag']);
   }
 }
-proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']);
+proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'close', 'closeOpened']);
 proxyInputs(IonItemSliding, ['disabled']);
 
 export declare interface IonLabel extends StencilComponents<'IonLabel'> {}
@@ -603,7 +602,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', 'pullFactor', 'disabled'] })
+@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
 export class IonRefresher {
   ionRefresh!: EventEmitter<CustomEvent>;
   ionPull!: EventEmitter<CustomEvent>;
@@ -616,7 +615,7 @@ export class IonRefresher {
   }
 }
 proxyMethods(IonRefresher, ['complete', 'cancel', 'getProgress']);
-proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled']);
+proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', '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'] })
@@ -676,7 +675,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', 'disabled', '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', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
 export class IonSearchbar {
   ionInput!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
@@ -692,7 +691,7 @@ export class IonSearchbar {
   }
 }
 proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
-proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
+proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', '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'] })
@@ -857,7 +856,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', 'autoGrow', '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', 'value'] })
 export class IonTextarea {
   ionChange!: EventEmitter<CustomEvent>;
   ionInput!: EventEmitter<CustomEvent>;
@@ -871,7 +870,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', 'autoGrow', 'value']);
+proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
 
 export declare interface IonThumbnail extends StencilComponents<'IonThumbnail'> {}
 @Component({ selector: 'ion-thumbnail', changeDetection: 0, template: '<ng-content></ng-content>' })

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

@@ -130,25 +130,6 @@ 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 () => {
-      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');
-    });
-  })
 });
 
 async function testState(count: number, tab: string) {
@@ -156,7 +137,7 @@ async function testState(count: number, tab: string) {
 }
 
 async function testTabTitle(title: string) {
-  await waitTime(1000);
+  await waitTime(600);
   const tab = await getSelectedTab();
   expect(await tab.$('ion-title').getText()).toEqual(title);
   return tab;

angular/test/test-app/src/app/nested-outlet/nested-outlet.component.html

@@ -1,8 +1,5 @@
 <ion-header>
   <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
     <ion-title>
       NESTED OUTLET
     </ion-title>

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.html

@@ -9,6 +9,5 @@
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>
-    <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
   </p>
 </ion-content>

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.4.0/css/ionic.bundle.css" rel="stylesheet">
-<script src="https://unpkg.com/@ionic/core@4.4.0/dist/ionic.js"></script>
+<link href="https://unpkg.com/@ionic/core@4.2.1/css/ionic.bundle.css" rel="stylesheet">
+<script src="https://unpkg.com/@ionic/core@4.2.1/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')`.

core/api.txt

@@ -1,13 +1,13 @@
 
 ion-action-sheet-controller,none
-ion-action-sheet-controller,method,create,create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
+ion-action-sheet-controller,method,create,create(opts: 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>
 
 ion-action-sheet,scoped
 ion-action-sheet,prop,animated,boolean,true,false,false
 ion-action-sheet,prop,backdropDismiss,boolean,true,false,false
-ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],[],false,false
+ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],undefined,true,false
 ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-action-sheet,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-action-sheet,prop,header,string | undefined,undefined,false,false
@@ -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(options: AlertOptions) => Promise<HTMLIonAlertElement>
+ion-alert-controller,method,create,create(opts: 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>
 
@@ -186,13 +186,8 @@ 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
 
@@ -387,7 +382,6 @@ 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
@@ -477,7 +471,6 @@ 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: string | undefined) => Promise<void>
 ion-item-sliding,event,ionDrag,void,true
 
 ion-item,shadow
@@ -539,7 +532,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(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
+ion-loading-controller,method,create,create(opts?: 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>
 
@@ -579,24 +572,20 @@ 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,--color
-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(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,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,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(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,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,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => void
-ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise<boolean>
+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-toggle,shadow
 ion-menu-toggle,prop,autoHide,boolean,true,false,false
@@ -629,7 +618,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>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>
+ion-modal-controller,method,create,create<T extends ComponentRef>(opts: 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>
 
@@ -702,7 +691,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(options: PickerOptions) => Promise<HTMLIonPickerElement>
+ion-picker-controller,method,create,create(opts: 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>
 
@@ -741,7 +730,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>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
+ion-popover-controller,method,create,create<T extends ComponentRef>(opts: 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>
 
@@ -841,7 +830,6 @@ 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
@@ -861,7 +849,7 @@ ion-reorder,shadow
 
 ion-ripple-effect,shadow
 ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false
-ion-ripple-effect,method,addRipple,addRipple(x: number, y: number) => Promise<() => void>
+ion-ripple-effect,method,addRipple,addRipple(pageX: number, pageY: number) => Promise<() => void>
 
 ion-route-redirect,none
 ion-route-redirect,prop,from,string,undefined,true,false
@@ -897,7 +885,6 @@ 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
@@ -982,7 +969,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(event?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>
+ion-select,method,open,open(ev?: 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
@@ -1011,9 +998,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(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,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,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>
@@ -1097,7 +1084,6 @@ 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
@@ -1143,19 +1129,17 @@ ion-title,prop,color,string | undefined,undefined,false,false
 ion-title,css-prop,--color
 
 ion-toast-controller,none
-ion-toast-controller,method,create,create(options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
+ion-toast-controller,method,create,create(opts?: 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>
 
 ion-toast,shadow
 ion-toast,prop,animated,boolean,true,false,false
-ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
 ion-toast,prop,closeButtonText,string | undefined,undefined,false,false
 ion-toast,prop,color,string | undefined,undefined,false,false
 ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-toast,prop,duration,number,0,false,false
 ion-toast,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
-ion-toast,prop,header,string | undefined,undefined,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false
 ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-toast,prop,message,string | undefined,undefined,false,false
@@ -1179,13 +1163,11 @@ ion-toast,css-prop,--border-width
 ion-toast,css-prop,--box-shadow
 ion-toast,css-prop,--button-color
 ion-toast,css-prop,--color
-ion-toast,css-prop,--end
 ion-toast,css-prop,--height
 ion-toast,css-prop,--max-height
 ion-toast,css-prop,--max-width
 ion-toast,css-prop,--min-height
 ion-toast,css-prop,--min-width
-ion-toast,css-prop,--start
 ion-toast,css-prop,--width
 
 ion-toggle,shadow
@@ -1231,5 +1213,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, length?: number) => void
+ion-virtual-scroll,method,checkRange,checkRange(offset: number, len?: number) => void
 ion-virtual-scroll,method,positionForItem,positionForItem(index: number) => Promise<number>

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "4.4.0",
+  "version": "4.2.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -30,7 +30,7 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "4.5.6"
+    "ionicons": "4.5.5"
   },
   "devDependencies": {
     "@stencil/core": "0.17.3-0",

core/src/components.d.ts

@@ -68,7 +68,6 @@ import {
   TabButtonLayout,
   TextareaChangeEventDetail,
   TextFieldTypes,
-  ToastButton,
   ToastOptions,
   ToggleChangeEventDetail,
   TransitionDoneFn,
@@ -89,7 +88,7 @@ export namespace Components {
     /**
     * Create an action sheet overlay with action sheet options.
     */
-    'create': (options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
+    'create': (opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
     /**
     * Dismiss the open action sheet overlay.
     */
@@ -143,11 +142,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;
@@ -176,7 +175,7 @@ export namespace Components {
     /**
     * An array of buttons for the action sheet.
     */
-    'buttons'?: (ActionSheetButton | string)[];
+    'buttons': (ActionSheetButton | string)[];
     /**
     * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
     */
@@ -229,9 +228,9 @@ export namespace Components {
 
   interface IonAlertController {
     /**
-    * Create an alert overlay with alert options.
+    * Create an alert overlay with alert options
     */
-    'create': (options: AlertOptions) => Promise<HTMLIonAlertElement>;
+    'create': (opts: AlertOptions) => Promise<HTMLIonAlertElement>;
     /**
     * Dismiss the open alert overlay.
     */
@@ -716,64 +715,24 @@ 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 {
@@ -1089,11 +1048,11 @@ export namespace Components {
     */
     'fullscreen': boolean;
     /**
-    * 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.
+    * 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.
     */
     '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>;
     /**
@@ -1101,15 +1060,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>;
     /**
@@ -1456,7 +1415,7 @@ export namespace Components {
 
   interface IonFabList {
     /**
-    * If `true`, the fab list will show all fab buttons in the list.
+    * If `true`, the fab list will be show all fab buttons in the list.
     */
     'activated': boolean;
     /**
@@ -1466,7 +1425,7 @@ export namespace Components {
   }
   interface IonFabListAttributes extends StencilHTMLAttributes {
     /**
-    * If `true`, the fab list will show all fab buttons in the list.
+    * If `true`, the fab list will be show all fab buttons in the list.
     */
     'activated'?: boolean;
     /**
@@ -1481,7 +1440,7 @@ export namespace Components {
     */
     'activated': boolean;
     /**
-    * Close an active FAB list container.
+    * Close an active FAB list container
     */
     'close': () => void;
     /**
@@ -1591,13 +1550,9 @@ export namespace Components {
     */
     'onIonError'?: (event: CustomEvent<void>) => void;
     /**
-    * 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;
+    'onIonImgDidLoad'?: (event: CustomEvent<void>) => void;
     /**
     * The image URL. This attribute is mandatory for the <img> element.
     */
@@ -2023,10 +1978,6 @@ 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: string | undefined) => Promise<void>;
   }
   interface IonItemSlidingAttributes extends StencilHTMLAttributes {
     /**
@@ -2211,7 +2162,7 @@ export namespace Components {
     /**
     * Create a loading overlay with loading options.
     */
-    'create': (options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
+    'create': (opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
     /**
     * Dismiss the open loading overlay.
     */
@@ -2397,53 +2348,53 @@ export namespace Components {
   interface IonMenuController {
     '_getInstance': () => Promise<MenuControllerI>;
     /**
-    * 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 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': (menu?: string | null | undefined) => Promise<boolean>;
+    'close': (menuId?: string | null | undefined) => Promise<boolean>;
     /**
-    * 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.
+    * 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': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
+    'enable': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
     /**
-    * 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`.
+    * 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': (menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
+    'get': (menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
     /**
-    * Get all menu instances.
+    * Returns an array of all menu instances.
     */
     'getMenus': () => Promise<HTMLIonMenuElement[]>;
     /**
-    * Get the instance of the opened menu. Returns `null` if a menu is not found.
+    * Returns the instance of the menu already opened, otherwise `null`.
     */
     'getOpen': () => Promise<HTMLIonMenuElement | undefined>;
     /**
-    * Get whether or not a menu is animating. Returns `true` if any menu is currently animating.
+    * Returns `true` if any menu is currently animating.
     */
     'isAnimating': () => Promise<boolean>;
     /**
-    * 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.
+    * Returns `true` if the specified menu is enabled.
     */
-    'isEnabled': (menu?: string | null | undefined) => Promise<boolean>;
+    'isEnabled': (menuId?: string | null | undefined) => Promise<boolean>;
     /**
-    * 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.
+    * Returns `true` if the specified menu is open. If the menu is not specified, it will return `true` if any menu is currently open.
     */
-    'isOpen': (menu?: string | null | undefined) => Promise<boolean>;
+    'isOpen': (menuId?: string | null | undefined) => Promise<boolean>;
     /**
-    * 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 the menu.
     */
-    'open': (menu?: string | null | undefined) => Promise<boolean>;
+    'open': (menuId?: string | null | undefined) => Promise<boolean>;
     /**
-    * Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property.
+    * Registers a new animation that can be used in any `ion-menu`.  ```    * <ion-menu type="my-animation">    * ```
     */
     'registerAnimation': (name: string, animation: AnimationBuilder) => void;
     /**
-    * Enable or disable the ability to swipe open the menu.
+    * Used to enable or disable the ability to swipe open the menu.
     */
-    'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
+    'swipeGesture': (shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
     /**
-    * 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 the menu. If it's closed, it will open, and if opened, it will close.
     */
-    'toggle': (menu?: string | null | undefined) => Promise<boolean>;
+    'toggle': (menuId?: string | null | undefined) => Promise<boolean>;
   }
   interface IonMenuControllerAttributes extends StencilHTMLAttributes {}
 
@@ -2470,7 +2421,7 @@ export namespace Components {
 
   interface IonMenu {
     /**
-    * Close the menu. Returns `false` if the menu is already closed or it can't be closed.
+    * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
     */
     'close': (animated?: boolean) => Promise<boolean>;
     /**
@@ -2482,11 +2433,11 @@ export namespace Components {
     */
     'disabled': boolean;
     /**
-    * 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`.
+    * 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`.
     */
     'isActive': () => Promise<boolean>;
     /**
-    * Get whether or not the menu is open. Returns `true` if the menu is open.
+    * Returns `true` is the menu is open.
     */
     'isOpen': () => Promise<boolean>;
     /**
@@ -2498,11 +2449,11 @@ export namespace Components {
     */
     'menuId'?: string;
     /**
-    * Open the menu. Returns `false` if the menu is already open or it can't be opened.
+    * Opens the menu. If the menu is already open or it can't be opened, it returns `false`.
     */
     'open': (animated?: boolean) => Promise<boolean>;
     /**
-    * Sets the menu to open or closed. Returns `false` if the operation can't be completed successfully.
+    * Opens or closes the button. If the operation can't be completed successfully, it returns `false`.
     */
     'setOpen': (shouldOpen: boolean, animated?: boolean) => Promise<boolean>;
     /**
@@ -2514,11 +2465,11 @@ export namespace Components {
     */
     'swipeGesture': boolean;
     /**
-    * 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.
+    * 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': (animated?: boolean) => Promise<boolean>;
     /**
-    * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller.
+    * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
     */
     'type'?: string;
   }
@@ -2564,7 +2515,7 @@ export namespace Components {
     */
     'swipeGesture'?: boolean;
     /**
-    * The animation type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. Custom animations can be registered by the menu controller.
+    * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
     */
     'type'?: string;
   }
@@ -2573,7 +2524,7 @@ export namespace Components {
     /**
     * Create a modal overlay with modal options.
     */
-    'create': <T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>;
+    'create': <T extends ComponentRef>(opts: ModalOptions<T>) => Promise<HTMLIonModalElement>;
     /**
     * Dismiss the open modal overlay.
     */
@@ -2759,37 +2710,37 @@ export namespace Components {
     */
     'animation'?: AnimationBuilder;
     /**
-    * Returns `true` if the current view can go back.
+    * Returns `true` or false if the current view can go back
     */
     'canGoBack': (view?: ViewController | undefined) => Promise<boolean>;
     'delegate'?: FrameworkDelegate;
     /**
-    * Get the active view.
+    * Gets the active view
     */
     'getActive': () => Promise<ViewController | undefined>;
     /**
-    * Get the view at the specified index.
+    * Returns the view at the index
     */
     'getByIndex': (index: number) => Promise<ViewController | undefined>;
     /**
-    * Get the previous view.
+    * Gets the previous view
     */
     'getPrevious': (view?: ViewController | undefined) => Promise<ViewController | undefined>;
     'getRouteId': () => Promise<RouteID | undefined>;
     /**
-    * 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.
+    * 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.
     */
     '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 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.
+    * 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.
     */
     'insertPages': (insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
     /**
-    * Pop a component off of the navigation stack. Navigates back from the current component.
+    * Call to navigate back from a current component. Similar to push(), you can also pass navigation options.
     */
     '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>;
     /**
@@ -2797,11 +2748,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 component from the navigation stack at the specified index.
+    * Removes a page from the nav stack at the specified index.
     */
     'removeIndex': (startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>;
     /**
@@ -2813,11 +2764,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. Navigation parameters can also be passed 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.You can also pass any navigation params 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 to a component.
+    * Set the root for the current navigation stack.
     */
     '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>;
@@ -2895,7 +2846,7 @@ export namespace Components {
     /**
     * Create a picker overlay with picker options.
     */
-    'create': (options: PickerOptions) => Promise<HTMLIonPickerElement>;
+    'create': (opts: PickerOptions) => Promise<HTMLIonPickerElement>;
     /**
     * Dismiss the open picker overlay.
     */
@@ -2941,7 +2892,7 @@ export namespace Components {
     */
     'enterAnimation'?: AnimationBuilder;
     /**
-    * Get the column that matches the specified name.
+    * Returns the column the matches the specified name
     */
     'getColumn': (name: string) => Promise<PickerColumn | undefined>;
     /**
@@ -3041,7 +2992,7 @@ export namespace Components {
     /**
     * Create a popover overlay with popover options.
     */
-    'create': <T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>;
+    'create': <T extends ComponentRef>(opts: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>;
     /**
     * Dismiss the open popover overlay.
     */
@@ -3519,10 +3470,6 @@ 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;
@@ -3557,10 +3504,6 @@ 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;
@@ -3576,7 +3519,7 @@ export namespace Components {
 
   interface IonReorderGroup {
     /**
-    * 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.
+    * This method must be called once the `ionItemReorder` event is handled in order to complete the reorder operation.
     */
     'complete': (listOrReorder?: boolean | any[] | undefined) => Promise<any>;
     /**
@@ -3600,9 +3543,9 @@ export namespace Components {
 
   interface IonRippleEffect {
     /**
-    * Adds the ripple effect to the parent element.
+    * Adds the ripple effect to the parent element
     */
-    'addRipple': (x: number, y: number) => Promise<() => void>;
+    'addRipple': (pageX: number, pageY: 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.
     */
@@ -3776,10 +3719,6 @@ 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>;
@@ -3850,10 +3789,6 @@ 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;
@@ -4113,9 +4048,9 @@ export namespace Components {
     */
     'okText': string;
     /**
-    * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.
+    * Opens the select overlay, it could be an alert, action-sheet or popover, based in `ion-select` settings.
     */
-    'open': (event?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>;
+    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>;
     /**
     * The text to display when the select is empty.
     */
@@ -4236,17 +4171,17 @@ export namespace Components {
     */
     'length': () => Promise<number>;
     /**
-    * Lock or unlock the ability to slide to the next slide.
+    * Lock or unlock the ability to slide to the next slides.
     */
-    'lockSwipeToNext': (lock: boolean) => Promise<void>;
+    'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => Promise<void>;
     /**
-    * Lock or unlock the ability to slide to the previous slide.
+    * Lock or unlock the ability to slide to the previous slides.
     */
-    'lockSwipeToPrev': (lock: boolean) => Promise<void>;
+    'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => Promise<void>;
     /**
-    * Lock or unlock the ability to slide to the next or previous slide.
+    * Lock or unlock the ability to slide to change slides.
     */
-    'lockSwipes': (lock: boolean) => Promise<void>;
+    'lockSwipes': (shouldLockSwipes: boolean) => Promise<void>;
     /**
     * The mode determines which platform styles to use.
     */
@@ -4288,7 +4223,7 @@ export namespace Components {
     */
     'update': () => Promise<void>;
     /**
-    * Force swiper to update its height (when autoHeight is enabled) for the duration equal to 'speed' parameter.
+    * Force swiper to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
     */
     'updateAutoHeight': (speed?: number | undefined) => Promise<void>;
   }
@@ -4414,7 +4349,7 @@ export namespace Components {
 
   interface IonSplitPane {
     /**
-    * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
+    * The content `id` of the split-pane's main content. 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>    * ```
     */
     'contentId'?: string;
     /**
@@ -4428,7 +4363,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.
+    * 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>    * ```
     */
     'contentId'?: string;
     /**
@@ -4565,15 +4500,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 a specific tab by the value of its `tab` property or an element reference.
+    * Get the tab element given the tab name
     */
     'getTab': (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
     /**
-    * Select a tab by the value of its `tab` property or an element reference.
+    * Index or the Tab instance, of the tab to select.
     */
     'select': (tab: string | HTMLIonTabElement) => Promise<boolean>;
     'setRouteId': (id: string) => Promise<RouteWrite>;
@@ -4612,10 +4547,6 @@ 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.
     */
@@ -4698,10 +4629,6 @@ 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.
     */
@@ -4812,7 +4739,7 @@ export namespace Components {
     /**
     * Create a toast overlay with toast options.
     */
-    'create': (options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
+    'create': (opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
     /**
     * Dismiss the open toast overlay.
     */
@@ -4830,10 +4757,6 @@ export namespace Components {
     */
     'animated': boolean;
     /**
-    * An array of buttons for the toast.
-    */
-    'buttons'?: (ToastButton | string)[];
-    /**
     * Text to display in the close button.
     */
     'closeButtonText'?: string;
@@ -4858,10 +4781,6 @@ export namespace Components {
     */
     'enterAnimation'?: AnimationBuilder;
     /**
-    * Header to be shown in the toast.
-    */
-    'header'?: string;
-    /**
     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
     */
     'keyboardClose': boolean;
@@ -4909,10 +4828,6 @@ export namespace Components {
     */
     'animated'?: boolean;
     /**
-    * An array of buttons for the toast.
-    */
-    'buttons'?: (ToastButton | string)[];
-    /**
     * Text to display in the close button.
     */
     'closeButtonText'?: string;
@@ -4933,10 +4848,6 @@ export namespace Components {
     */
     'enterAnimation'?: AnimationBuilder;
     /**
-    * Header to be shown in the toast.
-    */
-    'header'?: string;
-    /**
     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
     */
     'keyboardClose'?: boolean;
@@ -5082,13 +4993,13 @@ export namespace Components {
     */
     'approxItemHeight': number;
     /**
-    * 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.
+    * 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);    * ```
     */
     'checkEnd': () => void;
     /**
-    * 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.
+    * 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.
     */
-    'checkRange': (offset: number, length?: number) => void;
+    'checkRange': (offset: number, len?: 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.

core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -12,23 +12,14 @@ 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(options: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
-    return createOverlay(this.doc.createElement('ion-action-sheet'), options);
+  create(opts: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
+    return createOverlay(this.doc.createElement('ion-action-sheet'), opts);
   }
 
   /**
    * 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) {

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

@@ -7,15 +7,15 @@ Action Sheet controllers programmatically control the action sheet component. Ac
 
 ## Methods
 
-### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
+### `create(opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
 
 Create an action sheet overlay with action sheet options.
 
 #### Parameters
 
-| Name      | Type                 | Description                                    |
-| --------- | -------------------- | ---------------------------------------------- |
-| `options` | `ActionSheetOptions` | The options to use to create the action sheet. |
+| Name   | Type                 | Description |
+| ------ | -------------------- | ----------- |
+| `opts` | `ActionSheetOptions` |             |
 
 #### Returns
 
@@ -29,11 +29,11 @@ Dismiss the open action sheet overlay.
 
 #### Parameters
 
-| 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.                                                                                                                                       |
+| Name   | Type                  | Description |
+| ------ | --------------------- | ----------- |
+| `data` | `any`                 |             |
+| `role` | `string \| undefined` |             |
+| `id`   | `string \| undefined` |             |
 
 #### Returns
 

core/src/components/action-sheet/action-sheet.tsx

@@ -51,7 +51,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   /**
    * An array of buttons for the action sheet.
    */
-  @Prop() buttons: (ActionSheetButton | string)[] = [];
+  @Prop() buttons!: (ActionSheetButton | string)[];
 
   /**
    * Additional classes to apply for custom CSS. If multiple classes are
@@ -128,12 +128,6 @@ 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> {
@@ -141,7 +135,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> {
@@ -149,7 +143,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()
@@ -202,8 +196,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         zIndex: 20000 + this.overlayIndex,
       },
       class: {
-        [`${this.mode}`]: true,
-
         ...getClassMap(this.cssClass),
         'action-sheet-translucent': this.translucent
       }

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

@@ -186,6 +186,7 @@ export default class ActionSheetExample extends Component<Props, State> {
     );
   }
 }
+
 ```
 
 
@@ -256,19 +257,19 @@ export default {
 
 ## Properties
 
-| Property          | Attribute          | Description                                                                                                                     | Type                                                                                   | Default     |
-| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
-| `animated`        | `animated`         | If `true`, the action sheet will animate.                                                                                       | `boolean`                                                                              | `true`      |
-| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked.                                                     | `boolean`                                                                              | `true`      |
-| `buttons`         | --                 | An array of buttons for the action sheet.                                                                                       | `(string \| ActionSheetButton)[]`                                                      | `[]`        |
-| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                | `string \| string[] \| undefined`                                                      | `undefined` |
-| `enterAnimation`  | --                 | Animation to use when the action sheet is presented.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
-| `header`          | `header`           | Title for the action sheet.                                                                                                     | `string \| undefined`                                                                  | `undefined` |
-| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                          | `boolean`                                                                              | `true`      |
-| `leaveAnimation`  | --                 | Animation to use when the action sheet is dismissed.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                               | `"ios" \| "md"`                                                                        | `undefined` |
-| `subHeader`       | `sub-header`       | Subtitle for the action sheet.                                                                                                  | `string \| undefined`                                                                  | `undefined` |
-| `translucent`     | `translucent`      | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. | `boolean`                                                                              | `false`     |
+| Property               | Attribute          | Description                                                                                                                     | Type                                                                                   | Default     |
+| ---------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
+| `animated`             | `animated`         | If `true`, the action sheet will animate.                                                                                       | `boolean`                                                                              | `true`      |
+| `backdropDismiss`      | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked.                                                     | `boolean`                                                                              | `true`      |
+| `buttons` _(required)_ | --                 | An array of buttons for the action sheet.                                                                                       | `(string \| ActionSheetButton)[]`                                                      | `undefined` |
+| `cssClass`             | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.                | `string \| string[] \| undefined`                                                      | `undefined` |
+| `enterAnimation`       | --                 | Animation to use when the action sheet is presented.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `header`               | `header`           | Title for the action sheet.                                                                                                     | `string \| undefined`                                                                  | `undefined` |
+| `keyboardClose`        | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                                          | `boolean`                                                                              | `true`      |
+| `leaveAnimation`       | --                 | Animation to use when the action sheet is dismissed.                                                                            | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
+| `mode`                 | `mode`             | The mode determines which platform styles to use.                                                                               | `"ios" \| "md"`                                                                        | `undefined` |
+| `subHeader`            | `sub-header`       | Subtitle for the action sheet.                                                                                                  | `string \| undefined`                                                                  | `undefined` |
+| `translucent`          | `translucent`      | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports backdrop-filter. | `boolean`                                                                              | `false`     |
 
 
 ## Events
@@ -289,10 +290,10 @@ Dismiss the action sheet overlay after it has been presented.
 
 #### Parameters
 
-| 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"`. |
+| Name   | Type                  | Description |
+| ------ | --------------------- | ----------- |
+| `data` | `any`                 |             |
+| `role` | `string \| undefined` |             |
 
 #### Returns
 
@@ -302,7 +303,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
 
@@ -312,7 +313,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
 

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

@@ -38,34 +38,34 @@ test('action-sheet: basic, scroll without cancel', async () => {
  * RTL Tests
  */
 
-test('action-sheet:rtl: basic', async () => {
+test('action-sheet: basic', async () => {
   await testActionSheet(DIRECTORY, '#basic', true);
 });
 
-test('action-sheet:rtl: basic, alert from action sheet', async () => {
+test('action-sheet: basic, alert from action sheet', async () => {
   await testActionSheet(DIRECTORY, '#alertFromActionSheet', true, testActionSheetAlert);
 });
 
-test('action-sheet:rtl: basic, cancel only', async () => {
+test('action-sheet: basic, cancel only', async () => {
   await testActionSheet(DIRECTORY, '#cancelOnly', true);
 });
 
-test('action-sheet:rtl: basic, custom', async () => {
+test('action-sheet: basic, custom', async () => {
   await testActionSheet(DIRECTORY, '#custom', true);
 });
 
-test('action-sheet:rtl: basic, icons', async () => {
+test('action-sheet: basic, icons', async () => {
   await testActionSheet(DIRECTORY, '#icons', true);
 });
 
-test('action-sheet:rtl: basic, no backdrop dismiss', async () => {
+test('action-sheet: basic, no backdrop dismiss', async () => {
   await testActionSheet(DIRECTORY, '#noBackdropDismiss', true, testActionSheetBackdrop);
 });
 
-test('action-sheet:rtl: basic, scrollable options', async () => {
+test('action-sheet: basic, scrollable options', async () => {
   await testActionSheet(DIRECTORY, '#scrollableOptions', true);
 });
 
-test('action-sheet:rtl: basic, scroll without cancel', async () => {
+test('action-sheet: basic, scroll without cancel', async () => {
   await testActionSheet(DIRECTORY, '#scrollWithoutCancel', true);
 });

core/src/components/action-sheet/test/test.utils.ts

@@ -1,15 +1,19 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-import { generateE2EUrl } from '../../../utils/test/utils';
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
 
 export async function testActionSheet(
   type: string,
   selector: string,
   rtl = false,
-  afterScreenshotHook = async (..._args: any[]): Promise<void> => {/**/}
+  afterScreenshotHook = async (..._args: any[]): Promise<void> => {/**/},
+  screenshotName: string = cleanScreenshotName(selector)
 ) {
   try {
     const pageUrl = generateE2EUrl('action-sheet', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
 
     const page = await newE2EPage({
       url: pageUrl
@@ -23,14 +27,14 @@ export async function testActionSheet(
     let actionSheet = await page.find('ion-action-sheet');
     await actionSheet.waitForVisible();
 
-    screenshotCompares.push(await page.compareScreenshot());
+    screenshotCompares.push(await page.compareScreenshot(screenshotName));
 
-    await afterScreenshotHook(page, screenshotCompares, actionSheet);
+    await afterScreenshotHook(page, screenshotName, screenshotCompares, actionSheet);
 
     await actionSheet.callMethod('dismiss');
     await actionSheet.waitForNotVisible();
 
-    screenshotCompares.push(await page.compareScreenshot('dismiss'));
+    screenshotCompares.push(await page.compareScreenshot(`dismissed ${screenshotName}`));
 
     actionSheet = await page.find('ion-action-sheet');
     expect(actionSheet).toBe(null);
@@ -46,14 +50,16 @@ export async function testActionSheet(
 
 export async function testActionSheetBackdrop(
   page: any,
+  screenshotName: string,
   screenshotCompares: any,
   actionSheet: any
 ) {
   try {
+    console.log('backdrop hook');
     const backdrop = await page.find('ion-backdrop');
     await backdrop.click();
 
-    screenshotCompares.push(await page.compareScreenshot(`dismiss backdrop`));
+    screenshotCompares.push(await page.compareScreenshot(`dismissed backdrop ${screenshotName}`));
 
     const isVisible = await actionSheet.isVisible();
     expect(isVisible).toBe(true);
@@ -64,6 +70,7 @@ export async function testActionSheetBackdrop(
 
 export async function testActionSheetAlert(
   page: any,
+  screenshotName: string,
   screenshotCompares: any
 ) {
   try {
@@ -74,7 +81,7 @@ export async function testActionSheetAlert(
     await alert.waitForVisible();
     await page.waitFor(250);
 
-    screenshotCompares.push(await page.compareScreenshot(`alert open`));
+    screenshotCompares.push(await page.compareScreenshot(`alert open ${screenshotName}`));
 
     const alertOkayBtn = await page.find({ contains: 'Okay' });
     await alertOkayBtn.click();

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

@@ -59,4 +59,5 @@ export default class ActionSheetExample extends Component<Props, State> {
     );
   }
 }
+
 ```

core/src/components/alert-controller/alert-controller.tsx

@@ -11,24 +11,15 @@ export class AlertController implements ComponentInterface, OverlayController {
   @Prop({ context: 'document' }) doc!: Document;
 
   /**
-   * Create an alert overlay with alert options.
-   *
-   * @param options The options to use to create the alert.
+   * Create an alert overlay with alert options
    */
   @Method()
-  create(options: AlertOptions): Promise<HTMLIonAlertElement> {
-    return createOverlay(this.doc.createElement('ion-alert'), options);
+  create(opts: AlertOptions): Promise<HTMLIonAlertElement> {
+    return createOverlay(this.doc.createElement('ion-alert'), opts);
   }
 
   /**
    * 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) {

core/src/components/alert-controller/readme.md

@@ -24,15 +24,15 @@ async function presentAlert() {
 
 ## Methods
 
-### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`
+### `create(opts: AlertOptions) => Promise<HTMLIonAlertElement>`
 
-Create an alert overlay with alert options.
+Create an alert overlay with alert options
 
 #### Parameters
 
-| Name      | Type           | Description                             |
-| --------- | -------------- | --------------------------------------- |
-| `options` | `AlertOptions` | The options to use to create the alert. |
+| Name   | Type           | Description |
+| ------ | -------------- | ----------- |
+| `opts` | `AlertOptions` |             |
 
 #### Returns
 
@@ -46,11 +46,11 @@ Dismiss the open alert overlay.
 
 #### Parameters
 
-| 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.                                                                                                                                       |
+| Name   | Type                  | Description |
+| ------ | --------------------- | ----------- |
+| `data` | `any`                 |             |
+| `role` | `string \| undefined` |             |
+| `id`   | `string \| undefined` |             |
 
 #### Returns
 

core/src/components/alert/alert.tsx

@@ -192,12 +192,6 @@ 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> {
@@ -206,6 +200,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * Returns a promise that resolves when the alert did dismiss.
+   *
    */
   @Method()
   onDidDismiss(): Promise<OverlayEventDetail> {
@@ -214,6 +209,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   /**
    * Returns a promise that resolves when the alert will dismiss.
+   *
    */
   @Method()
   onWillDismiss(): Promise<OverlayEventDetail> {
@@ -403,7 +399,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
       },
       class: {
         ...getClassMap(this.cssClass),
-        [`${this.mode}`]: true,
         'alert-translucent': this.translucent
       }
     };

core/src/components/alert/readme.md

@@ -797,6 +797,7 @@ export default class AlertExample extends Component<Props, State> {
     );
   }
 }
+
 ```
 
 
@@ -1089,10 +1090,10 @@ Dismiss the alert overlay after it has been presented.
 
 #### Parameters
 
-| 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"`. |
+| Name   | Type                  | Description |
+| ------ | --------------------- | ----------- |
+| `data` | `any`                 |             |
+| `role` | `string \| undefined` |             |
 
 #### Returns
 

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

@@ -37,34 +37,34 @@ test(`alert: basic, checkbox`, async () => {
 // Right to Left tests
 // ------------------------------------------------------
 
-test(`alert:rtl: basic`, async () => {
+test(`alert: basic`, async () => {
   await testAlert(DIRECTORY, '#basic', true);
 });
 
-test(`alert:rtl: basic, long message`, async () => {
+test(`alert: basic, long message`, async () => {
   await testAlert(DIRECTORY, '#longMessage', true);
 });
 
-test(`alert:rtl: basic, multiple buttons`, async () => {
+test(`alert: basic, multiple buttons`, async () => {
   await testAlert(DIRECTORY, '#multipleButtons', true);
 });
 
-test(`alert:rtl: basic, no message`, async () => {
+test(`alert: basic, no message`, async () => {
   await testAlert(DIRECTORY, '#noMessage', true);
 });
 
-test(`alert:rtl: basic, confirm`, async () => {
+test(`alert: basic, confirm`, async () => {
   await testAlert(DIRECTORY, '#confirm', true);
 });
 
-test(`alert:rtl: basic, prompt`, async () => {
+test(`alert: basic, prompt`, async () => {
   await testAlert(DIRECTORY, '#prompt', true);
 });
 
-test(`alert:rtl: basic, radio`, async () => {
+test(`alert: basic, radio`, async () => {
   await testAlert(DIRECTORY, '#radio', true);
 });
 
-test(`alert:rtl: basic, checkbox`, async () => {
+test(`alert: basic, checkbox`, async () => {
   await testAlert(DIRECTORY, '#checkbox', true);
 });

core/src/components/alert/test/test.utils.ts

@@ -1,14 +1,18 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-import { generateE2EUrl } from '../../../utils/test/utils';
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
 
 export async function testAlert(
   type: string,
   selector: string,
-  rtl = false
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
 ) {
   try {
     const pageUrl = generateE2EUrl('alert', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
 
     const page = await newE2EPage({
       url: pageUrl
@@ -24,12 +28,12 @@ export async function testAlert(
     expect(alert).not.toBe(null);
     await alert.waitForVisible();
 
-    screenshotCompares.push(await page.compareScreenshot());
+    screenshotCompares.push(await page.compareScreenshot(screenshotName));
 
     await alert.callMethod('dismiss');
     await alert.waitForNotVisible();
 
-    screenshotCompares.push(await page.compareScreenshot('dismiss'));
+    screenshotCompares.push(await page.compareScreenshot(`dismiss ${screenshotName}`));
 
     alert = await page.find('ion-alert');
     expect(alert).toBe(null);

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

@@ -267,4 +267,5 @@ export default class AlertExample extends Component<Props, State> {
     );
   }
 }
+
 ```

core/src/components/anchor/anchor.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Listen, Prop } from '@stencil/core';
 
-import { Color, Mode, RouterDirection } from '../../interface';
+import { Color, RouterDirection } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';
 
 @Component({
@@ -9,7 +9,6 @@ import { createColorClasses, openURL } from '../../utils/theme';
   shadow: true
 })
 export class Anchor implements ComponentInterface {
-  mode!: Mode;
 
   @Prop({ context: 'window' }) win!: Window;
 
@@ -41,7 +40,6 @@ export class Anchor implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
-        [`${this.mode}`]: true,
         'ion-activatable': true
       }
     };

core/src/components/app/app.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core';
 
-import { Config, Mode } from '../../interface';
+import { Config } from '../../interface';
 import { rIC } from '../../utils/helpers';
 import { isPlatform } from '../../utils/platform';
 
@@ -9,7 +9,6 @@ import { isPlatform } from '../../utils/platform';
   styleUrl: 'app.scss'
 })
 export class App implements ComponentInterface {
-  mode!: Mode;
 
   @Element() el!: HTMLElement;
 
@@ -35,7 +34,6 @@ export class App implements ComponentInterface {
   hostData() {
     return {
       class: {
-        [`${this.mode}`]: true,
         'ion-page': true,
         'force-statusbar-padding': this.config.getBoolean('_forceStatusbarPadding')
       }

core/src/components/avatar/avatar.tsx

@@ -1,7 +1,5 @@
 import { Component, ComponentInterface } from '@stencil/core';
 
-import { Mode } from '../../interface';
-
 @Component({
   tag: 'ion-avatar',
   styleUrls: {
@@ -11,15 +9,6 @@ import { Mode } from '../../interface';
   shadow: true
 })
 export class Avatar implements ComponentInterface {
-  mode!: Mode;
-
-  hostData() {
-    return {
-      class: {
-        [`${this.mode}`]: true,
-      }
-    };
-  }
 
   render() {
     return <slot></slot>;

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

@@ -62,7 +62,6 @@ export class BackButton implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
-        [`${this.mode}`]: true,
 
         'button': true, // ion-buttons target .button
         'ion-activatable': true,

core/src/components/backdrop/backdrop.tsx

@@ -1,6 +1,5 @@
 import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
 
-import { Mode } from '../../interface';
 import { GESTURE_CONTROLLER } from '../../utils/gesture';
 import { now } from '../../utils/helpers';
 
@@ -13,7 +12,6 @@ import { now } from '../../utils/helpers';
   shadow: true
 })
 export class Backdrop implements ComponentInterface {
-  mode!: Mode;
 
   private lastClick = -10000;
   private blocker = GESTURE_CONTROLLER.createBlocker({
@@ -80,7 +78,6 @@ export class Backdrop implements ComponentInterface {
     return {
       tabindex: '-1',
       class: {
-        [`${this.mode}`]: true,
         'backdrop-hide': !this.visible,
         'backdrop-no-tappable': !this.tappable,
       }

core/src/components/backdrop/readme.md

@@ -135,7 +135,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Example extends Vue {
+  export default class Menu extends Vue {
     backdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;

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

@@ -24,7 +24,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Example extends Vue {
+  export default class Menu extends Vue {
     backdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;

core/src/components/badge/badge.tsx

@@ -26,10 +26,7 @@ export class Badge implements ComponentInterface {
 
   hostData() {
     return {
-      class: {
-        ...createColorClasses(this.color),
-        [`${this.mode}`]: true
-      }
+      class: createColorClasses(this.color)
     };
   }
 

core/src/components/button/button.ios.scss

@@ -71,6 +71,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 Button Sizes
 // --------------------------------------------------
 
@@ -99,18 +111,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 strong Button
 // --------------------------------------------------
 

core/src/components/button/button.tsx

@@ -148,7 +148,6 @@ export class Button implements ComponentInterface {
       'aria-disabled': disabled ? 'true' : null,
       class: {
         ...createColorClasses(color),
-        [`${this.mode}`]: true,
         [buttonType]: true,
         [`${buttonType}-${expand}`]: expand !== undefined,
         [`${buttonType}-${size}`]: size !== undefined,

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

@@ -24,13 +24,6 @@
     <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>

core/src/components/buttons/buttons.tsx

@@ -1,7 +1,5 @@
 import { Component, ComponentInterface } from '@stencil/core';
 
-import { Mode } from '../../interface';
-
 @Component({
   tag: 'ion-buttons',
   styleUrls: {
@@ -10,14 +8,4 @@ import { Mode } from '../../interface';
   },
   scoped: true,
 })
-export class Buttons implements ComponentInterface {
-  mode!: Mode;
-
-  hostData() {
-    return {
-      class: {
-        [`${this.mode}`]: true
-      }
-    };
-  }
-}
+export class Buttons implements ComponentInterface {}

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

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-card-content',
@@ -18,12 +19,7 @@ export class CardContent implements ComponentInterface {
 
   hostData() {
     return {
-      class: {
-        [`${this.mode}`]: true,
-
-        // Used internally for styling
-        [`card-content-${this.mode}`]: true
-      }
+      class: createThemedClasses(this.mode, 'card-content')
     };
   }
 }

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

@@ -34,7 +34,6 @@ export class CardHeader implements ComponentInterface {
       class: {
         ...createColorClasses(this.color),
         'card-header-translucent': this.translucent,
-        [`${this.mode}`]: true
       }
     };
   }

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

@@ -26,10 +26,7 @@ export class CardSubtitle implements ComponentInterface {
 
   hostData() {
     return {
-      class: {
-        ...createColorClasses(this.color),
-        [`${this.mode}`]: true
-      },
+      class: createColorClasses(this.color),
       'role': 'heading',
       'aria-level': '3'
     };

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

@@ -26,10 +26,7 @@ export class CardTitle implements ComponentInterface {
 
   hostData() {
     return {
-      class: {
-        ...createColorClasses(this.color),
-        [`${this.mode}`]: true
-      },
+      class: createColorClasses(this.color),
       'role': 'heading',
       'aria-level': '2'
     };

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

@@ -13,13 +13,7 @@
 
   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};
-}

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

@@ -32,9 +32,3 @@ $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;

core/src/components/card/card.scss

@@ -50,54 +50,3 @@
 ::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);
-
-  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);
-}

core/src/components/card/card.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
-import { Color, Mode, RouterDirection } from '../../interface';
-import { createColorClasses, openURL } from '../../utils/theme';
+import { Color, Mode } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-card',
@@ -13,8 +13,6 @@ import { createColorClasses, openURL } 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"`.
@@ -27,72 +25,9 @@ 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),
-        'card-disabled': this.disabled,
-        'ion-activatable': this.isClickable()
-      }
+      class: createColorClasses(this.color)
     };
   }
-
-  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>
-    );
-  }
 }

core/src/components/card/readme.md

@@ -182,15 +182,10 @@ export default Example;
 
 ## Properties
 
-| 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'`  |
+| 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` |
 
 
 ## CSS Custom Properties

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

@@ -1,82 +0,0 @@
-<!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="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
-        </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-content>
-
-  </ion-app>
-  <style>
-    .content {
-      background: #e5e5e5;
-    }
-
-  </style>
-</body>
-
-</html>

core/src/components/checkbox/checkbox.tsx

@@ -137,7 +137,6 @@ export class Checkbox implements ComponentInterface {
       'aria-labelledby': labelId,
       class: {
         ...createColorClasses(color),
-        [`${this.mode}`]: true,
         'in-item': hostContext('ion-item', el),
         'checkbox-checked': checked,
         'checkbox-disabled': disabled,

core/src/components/checkbox/readme.md

@@ -174,7 +174,7 @@ export default CheckboxExample;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Example extends Vue {
+  export default class Menu extends Vue {
     form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },

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

@@ -29,7 +29,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Example extends Vue {
+  export default class Menu extends Vue {
     form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },

core/src/components/chip/chip.tsx

@@ -33,7 +33,6 @@ export class Chip implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
-        [`${this.mode}`]: true,
         'chip-outline': this.outline,
         'ion-activatable': true,
       }

core/src/components/col/col.tsx

@@ -1,6 +1,5 @@
 import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
 
-import { Mode } from '../../interface';
 import { matchBreakpoint } from '../../utils/media';
 
 const win = window as any;
@@ -13,8 +12,6 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   shadow: true
 })
 export class Col implements ComponentInterface {
-  mode!: Mode;
-
   @Prop({ context: 'window' }) win!: Window;
 
   @Element() el!: HTMLStencilElement;
@@ -250,9 +247,6 @@ export class Col implements ComponentInterface {
   hostData() {
     const isRTL = this.win.document.dir === 'rtl';
     return {
-      class: {
-        [`${this.mode}`]: true
-      },
       style: {
         ...this.calculateOffset(isRTL),
         ...this.calculatePull(isRTL),

core/src/components/content/content.tsx

@@ -169,12 +169,12 @@ export class Content implements ComponentInterface {
   }
 
   /**
-   * 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`:
+   * 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`:
    *
-   * i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
-   * and `scrollToPoint()` to scroll the content into a certain point.
+   * Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
+   * and scrollToPoint() to scroll the content into a certain point.
    */
   @Method()
   getScrollElement(): Promise<HTMLElement> {
@@ -182,9 +182,7 @@ export class Content implements ComponentInterface {
   }
 
   /**
-   * Scroll to the top of the component.
-   *
-   * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
+   * Scroll to the top of the component
    */
   @Method()
   scrollToTop(duration = 0): Promise<void> {
@@ -192,9 +190,7 @@ export class Content implements ComponentInterface {
   }
 
   /**
-   * Scroll to the bottom of the component.
-   *
-   * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
+   * Scroll to the bottom of the component
    */
   @Method()
   scrollToBottom(duration = 0): Promise<void> {
@@ -203,11 +199,7 @@ export class Content implements ComponentInterface {
   }
 
   /**
-   * Scroll by a specified X/Y distance in the component.
-   *
-   * @param x The amount to scroll by on the horizontal axis.
-   * @param y The amount to scroll by on the vertical axis.
-   * @param duration The amount of time to take scrolling by that amount.
+   * Scroll by a specified X/Y distance in the component
    */
   @Method()
   scrollByPoint(x: number, y: number, duration: number): Promise<void> {
@@ -215,11 +207,7 @@ export class Content implements ComponentInterface {
   }
 
   /**
-   * Scroll to a specified X/Y location in the component.
-   *
-   * @param x The point to scroll to on the horizontal axis.
-   * @param y The point to scroll to on the vertical axis.
-   * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
+   * Scroll to a specified X/Y location in the component
    */
   @Method()
   async scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration = 0): Promise<void> {
@@ -305,7 +293,6 @@ export class Content implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
-        [`${this.mode}`]: true,
         'content-sizing': hostContext('ion-popover', this.el),
         'overscroll': !!this.forceOverscroll,
       },

core/src/components/content/readme.md

@@ -96,12 +96,12 @@ export default Example;
 
 ### `getScrollElement() => Promise<HTMLElement>`
 
-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`:
+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`:
 
-i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
-and `scrollToPoint()` to scroll the content into a certain point.
+Ie. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events
+and scrollToPoint() to scroll the content into a certain point.
 
 #### Returns
 
@@ -111,15 +111,15 @@ Type: `Promise<HTMLElement>`
 
 ### `scrollByPoint(x: number, y: number, duration: number) => Promise<void>`
 
-Scroll by a specified X/Y distance in the component.
+Scroll by a specified X/Y distance in the component
 
 #### Parameters
 
-| Name       | Type     | Description                                          |
-| ---------- | -------- | ---------------------------------------------------- |
-| `x`        | `number` | The amount to scroll by on the horizontal axis.      |
-| `y`        | `number` | The amount to scroll by on the vertical axis.        |
-| `duration` | `number` | The amount of time to take scrolling by that amount. |
+| Name       | Type     | Description |
+| ---------- | -------- | ----------- |
+| `x`        | `number` |             |
+| `y`        | `number` |             |
+| `duration` | `number` |             |
 
 #### Returns
 
@@ -129,13 +129,13 @@ Type: `Promise<void>`
 
 ### `scrollToBottom(duration?: number) => Promise<void>`
 
-Scroll to the bottom of the component.
+Scroll to the bottom of the component
 
 #### Parameters
 
-| Name       | Type     | Description                                                          |
-| ---------- | -------- | -------------------------------------------------------------------- |
-| `duration` | `number` | The amount of time to take scrolling to the bottom. Defaults to `0`. |
+| Name       | Type     | Description |
+| ---------- | -------- | ----------- |
+| `duration` | `number` |             |
 
 #### Returns
 
@@ -145,15 +145,15 @@ Type: `Promise<void>`
 
 ### `scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>`
 
-Scroll to a specified X/Y location in the component.
+Scroll to a specified X/Y location in the component
 
 #### Parameters
 
-| Name       | Type                          | Description                                                          |
-| ---------- | ----------------------------- | -------------------------------------------------------------------- |
-| `x`        | `null \| number \| undefined` | The point to scroll to on the horizontal axis.                       |
-| `y`        | `null \| number \| undefined` | The point to scroll to on the vertical axis.                         |
-| `duration` | `number`                      | The amount of time to take scrolling to that point. Defaults to `0`. |
+| Name       | Type                          | Description |
+| ---------- | ----------------------------- | ----------- |
+| `x`        | `null \| number \| undefined` |             |
+| `y`        | `null \| number \| undefined` |             |
+| `duration` | `number`                      |             |
 
 #### Returns
 
@@ -163,13 +163,13 @@ Type: `Promise<void>`
 
 ### `scrollToTop(duration?: number) => Promise<void>`
 
-Scroll to the top of the component.
+Scroll to the top of the component
 
 #### Parameters
 
-| Name       | Type     | Description                                                       |
-| ---------- | -------- | ----------------------------------------------------------------- |
-| `duration` | `number` | The amount of time to take scrolling to the top. Defaults to `0`. |
+| Name       | Type     | Description |
+| ---------- | -------- | ----------- |
+| `duration` | `number` |             |
 
 #### Returns
 

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

@@ -2,7 +2,7 @@ import { convertDataToISO, parseDate } from './datetime-util';
 
 describe('datetime-util', () => {
   describe('convertDataToISO', () => {
-    it('prints an empty string for an empty datetime', () => {
+    it('prints an emptry string for an empty datetime', () => {
       expect(convertDataToISO({})).toEqual('');
     });
 

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

@@ -248,31 +248,8 @@ export function parseDate(val: string | undefined | null): DatetimeData | undefi
  * such as "01:47"
  */
 export const getLocalDateTime = (dateString: any = ''): Date => {
-  /**
-   * If user passed in undefined
-   * or null, convert it to the
-   * empty string since the rest
-   * of this functions expects
-   * a string
-   */
-  if (dateString === undefined || dateString === null) {
-    dateString = '';
-  }
-
-  /**
-   * Ensures that YYYY-MM-DD, YYYY-MM,
-   * YYYY-DD, etc does not get affected
-   * by timezones and stays on the day/month
-   * that the user provided
-   */
-  if (
-    dateString.length === 10 ||
-    dateString.length === 7
-  ) {
-    dateString += ' ';
-  }
-
   const date = (typeof dateString === 'string' && dateString.length > 0) ? new Date(dateString) : new Date();
+
   return new Date(
     Date.UTC(
       date.getFullYear(),
@@ -290,6 +267,7 @@ export function updateDate(existingData: DatetimeData, newData: any): boolean {
 
   if (!newData || typeof newData === 'string') {
     const localDateTime = getLocalDateTime(newData);
+
     if (!Number.isNaN(localDateTime.getTime())) {
       newData = localDateTime.toISOString();
     }

core/src/components/datetime/datetime.tsx

@@ -615,7 +615,6 @@ export class Datetime implements ComponentInterface {
       'aria-haspopup': 'true',
       'aria-labelledby': labelId,
       class: {
-        [`${this.mode}`]: true,
         'datetime-disabled': disabled,
         'datetime-readonly': readonly,
         'datetime-placeholder': addPlaceholderClass,

core/src/components/datetime/readme.md

@@ -643,7 +643,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Example extends Vue {
+  export default class Menu extends Vue {
     customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
 
     customDayShortNames = [

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

@@ -1,4 +1,4 @@
-import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime, renderDatetime } from '../datetime-util';
+import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime } from '../datetime-util';
 
 describe('Datetime', () => {
   describe('getDateValue()', () => {
@@ -52,34 +52,6 @@ describe('Datetime', () => {
         expect(convertToLocal.toISOString()).toEqual(expectedDateString);
       });
     });
-    
-    it('should format a date string and not get affected by the timezone offset', () => {
-
-      const dateStringTests = [
-        { input: '2019-03-20', expectedOutput: '2019-03-20' },
-        { input: '1994-04-15', expectedOutput: '1994-04-15' },
-        { input: '2008-09-02', expectedOutput: '2008-09-02' },
-        { input: '1995-02', expectedOutput: '1995-02' },
-        { input: '1994-03-14', expectedOutput: '1994-03-14' },
-        { input: '9 01:47', expectedOutput: '09-01T01:47' }
-      ];
-
-      dateStringTests.forEach(test => {
-        const convertToLocal = getLocalDateTime(test.input);
-        expect(convertToLocal.toISOString()).toContain(test.expectedOutput);
-      });
-    });
-    
-    it('should default to today for null and undefined cases', () => {
-      const today = new Date();
-      const todayString = renderDatetime('YYYY-MM-DD', { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() } )
-      
-      const convertToLocalUndefined = getLocalDateTime(undefined);
-      expect(convertToLocalUndefined.toISOString()).toContain(todayString);
-      
-      const convertToLocalNull = getLocalDateTime(null);
-      expect(convertToLocalNull.toISOString()).toContain(todayString);
-    });
   });
 
   describe('daysInMonth()', () => {

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

@@ -83,7 +83,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Example extends Vue {
+  export default class Menu extends Vue {
     customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
 
     customDayShortNames = [

core/src/components/fab-button/fab-button.scss

@@ -4,6 +4,17 @@
 // --------------------------------------------------
 
 :host {
+  --transition: background-color, opacity 100ms linear;
+  --ripple-color: currentColor;
+  --border-radius: #{$fab-border-radius};
+  --border-width: 0;
+  --border-style: none;
+  --border-color: initial;
+  --padding-top: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+
   /**
    * @prop --background: Background of the button
    * @prop --background-activated: Background of the button when activated
@@ -29,17 +40,6 @@
    * @prop --padding-bottom: Padding bottom of the button
    * @prop --padding-start: Padding start of the button
    */
-  --transition: background-color, opacity 100ms linear;
-  --ripple-color: currentColor;
-  --border-radius: #{$fab-border-radius};
-  --border-width: 0;
-  --border-style: none;
-  --border-color: initial;
-  --padding-top: 0;
-  --padding-end: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  
   @include margin(0);
   display: block;
 

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

@@ -95,7 +95,6 @@ export class FabButton implements ComponentInterface {
       'aria-disabled': disabled ? 'true' : null,
       class: {
         ...createColorClasses(color),
-        [`${this.mode}`]: true,
         'fab-button-in-list': inList,
         'fab-button-translucent-in-list': inList && translucent,
         'fab-button-close-active': activated,

core/src/components/fab-list/fab-list.tsx

@@ -1,19 +1,15 @@
 import { Component, ComponentInterface, Element, Prop, Watch } from '@stencil/core';
 
-import { Mode } from '../../interface';
-
 @Component({
   tag: 'ion-fab-list',
   styleUrl: 'fab-list.scss',
   shadow: true
 })
 export class FabList implements ComponentInterface {
-  mode!: Mode;
-
   @Element() el!: HTMLIonFabElement;
 
   /**
-   * If `true`, the fab list will show all fab buttons in the list.
+   * If `true`, the fab list will be show all fab buttons in the list.
    */
   @Prop() activated = false;
 
@@ -36,7 +32,6 @@ export class FabList implements ComponentInterface {
   hostData() {
     return {
       class: {
-        [`${this.mode}`]: true,
         'fab-list-active': this.activated,
         [`fab-list-side-${this.side}`]: true
       }

core/src/components/fab-list/readme.md

@@ -82,7 +82,7 @@ export default Example
 
 | Property    | Attribute   | Description                                                         | Type                                    | Default    |
 | ----------- | ----------- | ------------------------------------------------------------------- | --------------------------------------- | ---------- |
-| `activated` | `activated` | If `true`, the fab list will show all fab buttons in the list.      | `boolean`                               | `false`    |
+| `activated` | `activated` | If `true`, the fab list will be show all fab buttons in the list.   | `boolean`                               | `false`    |
 | `side`      | `side`      | The side the fab list will show on relative to the main fab button. | `"bottom" \| "end" \| "start" \| "top"` | `'bottom'` |
 
 

core/src/components/fab/fab.tsx

@@ -1,14 +1,11 @@
 import { Component, ComponentInterface, Element, Listen, Method, Prop, Watch } from '@stencil/core';
 
-import { Mode } from '../../interface';
-
 @Component({
   tag: 'ion-fab',
   styleUrl: 'fab.scss',
   shadow: true
 })
 export class Fab implements ComponentInterface {
-  mode!: Mode;
 
   @Element() el!: HTMLElement;
 
@@ -68,7 +65,7 @@ export class Fab implements ComponentInterface {
   }
 
   /**
-   * Close an active FAB list container.
+   * Close an active FAB list container
    */
   @Method()
   close() {
@@ -78,7 +75,6 @@ export class Fab implements ComponentInterface {
   hostData() {
     return {
       class: {
-        [`${this.mode}`]: true,
         [`fab-horizontal-${this.horizontal}`]: this.horizontal !== undefined,
         [`fab-vertical-${this.vertical}`]: this.vertical !== undefined,
         'fab-edge': this.edge

core/src/components/fab/readme.md

@@ -288,7 +288,7 @@ export default Example;
 
 ### `close() => void`
 
-Close an active FAB list container.
+Close an active FAB list container
 
 #### Returns
 

core/src/components/fab/test/test.utils.ts

@@ -1,21 +1,25 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-import { generateE2EUrl } from '../../../utils/test/utils';
+import { cleanScreenshotName, generateE2EUrl } from '../../../utils/test/utils';
 
 export async function testFab(
   type: string,
   selector: string,
-  rtl = false
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
 ) {
   try {
     const pageUrl = generateE2EUrl('fab', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
 
     const page = await newE2EPage({
       url: pageUrl
     });
 
     const screenshotCompares = [];
-    screenshotCompares.push(await page.compareScreenshot());
+    screenshotCompares.push(await page.compareScreenshot(`${screenshotName}`));
 
     const fab = await getFabComponent(page, selector);
     await fab.click();
@@ -24,7 +28,7 @@ export async function testFab(
 
     await ensureFabState(fab, 'active');
 
-    screenshotCompares.push(await page.compareScreenshot('open'));
+    screenshotCompares.push(await page.compareScreenshot(`${screenshotName} open`));
 
     const fabButton = await getFabButton(fab);
     await fabButton.click();
@@ -33,7 +37,7 @@ export async function testFab(
 
     await ensureFabState(fab, 'inactive');
 
-    screenshotCompares.push(await page.compareScreenshot('close'));
+    screenshotCompares.push(await page.compareScreenshot(`${screenshotName} close`));
 
     for (const screenshotCompare of screenshotCompares) {
       expect(screenshotCompare).toMatchScreenshot();
@@ -46,24 +50,28 @@ export async function testFab(
 export async function testDisabledFab(
   type: string,
   selector: string,
-  rtl = false
+  rtl = false,
+  screenshotName: string = cleanScreenshotName(selector)
 ) {
   try {
     const pageUrl = generateE2EUrl('fab', type, rtl);
+    if (rtl) {
+      screenshotName = `${screenshotName} rtl`;
+    }
 
     const page = await newE2EPage({
       url: pageUrl
     });
 
     const screenshotCompares = [];
-    screenshotCompares.push(await page.compareScreenshot('disabled'));
+    screenshotCompares.push(await page.compareScreenshot(`disabled ${screenshotName}`));
 
     const fab = await getFabComponent(page, selector);
     await fab.click();
 
     await ensureFabState(fab, 'inactive');
 
-    screenshotCompares.push(await page.compareScreenshot('disabled, attempt open'));
+    screenshotCompares.push(await page.compareScreenshot(`disabled ${screenshotName} attempt open`));
 
     for (const screenshotCompare of screenshotCompares) {
       expect(screenshotCompare).toMatchScreenshot();

core/src/components/footer/footer.tsx

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-footer',
@@ -24,15 +25,13 @@ export class Footer implements ComponentInterface {
   @Prop() translucent = false;
 
   hostData() {
+    const themedClasses = createThemedClasses(this.mode, 'footer');
+    const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'footer-translucent') : null;
+
     return {
       class: {
-        [`${this.mode}`]: true,
-
-        // Used internally for styling
-        [`footer-${this.mode}`]: true,
-
-        [`footer-translucent`]: this.translucent,
-        [`footer-translucent-${this.mode}`]: this.translucent,
+        ...themedClasses,
+        ...translucentClasses
       }
     };
   }

core/src/components/footer/test/translucent/e2e.ts

@@ -1,14 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { checkComponentModeClasses } from '../../../../utils/test/utils';
-
-test('footer: translucent', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/footer/test/translucent?ionic:_testing=true'
-  });
-
-  await checkComponentModeClasses(await page.find('ion-footer'), 'footer-translucent');
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/grid/grid.tsx

@@ -1,14 +1,11 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
-import { Mode } from '../../interface';
-
 @Component({
   tag: 'ion-grid',
   styleUrl: 'grid.scss',
   shadow: true
 })
 export class Grid implements ComponentInterface {
-  mode!: Mode;
 
   /**
    * If `true`, the grid will have a fixed width based on the screen size.
@@ -18,7 +15,6 @@ export class Grid implements ComponentInterface {
   hostData() {
     return {
       class: {
-        [`${this.mode}`]: true,
         'grid-fixed': this.fixed
       }
     };

core/src/components/header/header.tsx

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-header',
@@ -24,15 +25,13 @@ export class Header implements ComponentInterface {
   @Prop() translucent = false;
 
   hostData() {
+    const themedClasses = createThemedClasses(this.mode, 'header');
+    const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'header-translucent') : null;
+
     return {
       class: {
-        [`${this.mode}`]: true,
-
-        // Used internally for styling
-        [`header-${this.mode}`]: true,
-
-        [`header-translucent`]: this.translucent,
-        [`header-translucent-${this.mode}`]: this.translucent,
+        ...themedClasses,
+        ...translucentClasses
       }
     };
   }

core/src/components/header/test/translucent/e2e.ts

@@ -1,14 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { checkComponentModeClasses } from '../../../../utils/test/utils';
-
-test('header: translucent', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/translucent?ionic:_testing=true'
-  });
-
-  await checkComponentModeClasses(await page.find('ion-header'), 'header-translucent');
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/img/img.tsx

@@ -1,14 +1,11 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { Mode } from '../../interface';
-
 @Component({
   tag: 'ion-img',
   styleUrl: 'img.scss',
   shadow: true
 })
 export class Img implements ComponentInterface {
-  mode!: Mode;
 
   private io?: IntersectionObserver;
 
@@ -35,9 +32,6 @@ export class Img implements ComponentInterface {
   }
 
   /** Emitted when the img src has been set */
-  @Event() ionImgWillLoad!: EventEmitter<void>;
-
-  /** Emitted when the image has finished loading */
   @Event() ionImgDidLoad!: EventEmitter<void>;
 
   /** Emitted when the img fails to load */
@@ -73,10 +67,6 @@ export class Img implements ComponentInterface {
   private load() {
     this.loadError = this.onError;
     this.loadSrc = this.src;
-    this.ionImgWillLoad.emit();
-  }
-
-  private onLoad = () => {
     this.ionImgDidLoad.emit();
   }
 
@@ -91,21 +81,12 @@ export class Img implements ComponentInterface {
     }
   }
 
-  hostData() {
-    return {
-      class: {
-        [`${this.mode}`]: true,
-      }
-    };
-  }
-
   render() {
     return (
       <img
         src={this.loadSrc}
         alt={this.alt}
         decoding="async"
-        onLoad={this.onLoad}
         onError={this.loadError}
       />
     );

core/src/components/img/readme.md

@@ -79,11 +79,10 @@ export default Example
 
 ## Events
 
-| Event            | Description                                 | Type                |
-| ---------------- | ------------------------------------------- | ------------------- |
-| `ionError`       | Emitted when the img fails to load          | `CustomEvent<void>` |
-| `ionImgDidLoad`  | Emitted when the image has finished loading | `CustomEvent<void>` |
-| `ionImgWillLoad` | Emitted when the img src has been set       | `CustomEvent<void>` |
+| Event           | Description                           | Type                |
+| --------------- | ------------------------------------- | ------------------- |
+| `ionError`      | Emitted when the img fails to load    | `CustomEvent<void>` |
+| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent<void>` |
 
 
 ----------------------------------------------

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

@@ -67,10 +67,6 @@
     </style>
   </ion-app>
   <script>
-    document.body.addEventListener('ionImgWillLoad', (event) => {
-      console.log('image will load', event.target);
-    });
-
     document.body.addEventListener('ionImgDidLoad', (event) => {
       console.log('image did load', event.target);
     });

core/src/components/infinite-scroll-content/infinite-scroll-content.tsx

@@ -2,6 +2,7 @@ import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Config, Mode, SpinnerTypes } from '../../interface';
 import { sanitizeDOMString } from '../../utils/sanitization';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-infinite-scroll-content',
@@ -43,12 +44,7 @@ export class InfiniteScrollContent implements ComponentInterface {
 
   hostData() {
     return {
-      class: {
-        [`${this.mode}`]: true,
-
-        // Used internally for styling
-        [`infinite-scroll-content-${this.mode}`]: true
-      }
+      class: createThemedClasses(this.mode, 'infinite-scroll-content')
     };
   }
 

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,13 +1,10 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Mode } from '../../interface';
-
 @Component({
   tag: 'ion-infinite-scroll',
   styleUrl: 'infinite-scroll.scss'
 })
 export class InfiniteScroll implements ComponentInterface {
-  mode!: Mode;
 
   private thrPx = 0;
   private thrPc = 0;
@@ -215,7 +212,6 @@ export class InfiniteScroll implements ComponentInterface {
   hostData() {
     return {
       class: {
-        [`${this.mode}`]: true,
         'infinite-scroll-loading': this.isLoading,
         'infinite-scroll-enabled': !this.disabled
       }

core/src/components/infinite-scroll/readme.md

@@ -74,7 +74,7 @@ export class InfiniteScrollExample {
 
 ```html
 <ion-content>
-  <ion-button onClick="toggleInfiniteScroll()" expand="block">
+  <ion-button onclick="toggleInfiniteScroll()" expand="block">
     Toggle Infinite Scroll
   </ion-button>
 
@@ -114,57 +114,64 @@ function toggleInfiniteScroll() {
 ### React
 
 ```tsx
-import React, { Component } from 'react';
+import React from 'react';
 
-import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
+import { IonAvatar } from '@ionic/react';
 
-export default class Example extends Component<Props, State> {
+const Example: React.SFC<{}> = () => (
 
-  ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
+  <IonContent>
+    <IonButton onClick="toggleInfiniteScroll()" expand="block">
+      Toggle Infinite Scroll
+    </IonButton>
 
-  constructor() {
-    this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
+    <IonList></IonList>
+
+    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
+      <IonInfinite-scrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfinite-scrollContent>
+    </IonInfinite-scroll>
+  </IonContent>
+
+
+
+  import { Component, ViewChild } from '@angular/core';
+  import { IonInfiniteScroll } from '@ionic/angular';
+
+  @Component({
+    selector: 'infinite-scroll-example',
+    templateUrl: 'infinite-scroll-example.html',
+    styleUrls: ['./infinite-scroll-example.css']
+  })
+  export class InfiniteScrollExample {
+    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
+
+    constructor() {}
+
+    loadData(event) {
+      setTimeout(() => {
+        console.log('Done');
+        event.target.complete();
+
+        // App logic to determine if all data is loaded
+        // and disable the infinite scroll
+        if (data.length == 1000) {
+          event.target.disabled = true;
+        }
+      }, 500);
+    }
+
+    toggleInfiniteScroll() {
+      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
+    }
   }
 
-  loadData = (ev: MouseEvent) => {
-    setTimeout(() => {
-      console.log('Done');
-      ev.target.complete();
 
-      // App logic to determine if all data is loaded
-      // and disable the infinite scroll
-      if (data.length == 1000) {
-        ev.target.disabled = true;
-      }
-    }, 500);
-  }
+);
 
-  toggleInfiniteScroll = () => {
-    this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
-  }
-
-  render() {
-    return (
-      <>
-        <IonContent>
-          <IonButton onClick="toggleInfiniteScroll()" expand="block">
-            Toggle Infinite Scroll
-          </IonButton>
-
-          <IonList></IonList>
-
-          <IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
-            <IonInfiniteScrollContent
-              loadingSpinner="bubbles"
-              loadingText="Loading more data...">
-            </IonInfiniteScrollContent>
-          </IonInfiniteScroll>
-        </IonContent>
-      </>
-    );
-  }
-}
-```
+export default Example
 
 
 

core/src/components/infinite-scroll/usage/javascript.md

@@ -1,6 +1,6 @@
 ```html
 <ion-content>
-  <ion-button onClick="toggleInfiniteScroll()" expand="block">
+  <ion-button onclick="toggleInfiniteScroll()" expand="block">
     Toggle Infinite Scroll
   </ion-button>
 

core/src/components/infinite-scroll/usage/react.md

@@ -1,52 +1,59 @@
 ```tsx
-import React, { Component } from 'react';
+import React from 'react';
 
-import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
+import { IonAvatar } from '@ionic/react';
 
-export default class Example extends Component<Props, State> {
+const Example: React.SFC<{}> = () => (
 
-  ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
+  <IonContent>
+    <IonButton onClick="toggleInfiniteScroll()" expand="block">
+      Toggle Infinite Scroll
+    </IonButton>
 
-  constructor() {
-    this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
+    <IonList></IonList>
+
+    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
+      <IonInfinite-scrollContent
+        loadingSpinner="bubbles"
+        loadingText="Loading more data...">
+      </IonInfinite-scrollContent>
+    </IonInfinite-scroll>
+  </IonContent>
+
+
+
+  import { Component, ViewChild } from '@angular/core';
+  import { IonInfiniteScroll } from '@ionic/angular';
+
+  @Component({
+    selector: 'infinite-scroll-example',
+    templateUrl: 'infinite-scroll-example.html',
+    styleUrls: ['./infinite-scroll-example.css']
+  })
+  export class InfiniteScrollExample {
+    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
+
+    constructor() {}
+
+    loadData(event) {
+      setTimeout(() => {
+        console.log('Done');
+        event.target.complete();
+
+        // App logic to determine if all data is loaded
+        // and disable the infinite scroll
+        if (data.length == 1000) {
+          event.target.disabled = true;
+        }
+      }, 500);
+    }
+
+    toggleInfiniteScroll() {
+      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
+    }
   }
 
-  loadData = (ev: MouseEvent) => {
-    setTimeout(() => {
-      console.log('Done');
-      ev.target.complete();
 
-      // App logic to determine if all data is loaded
-      // and disable the infinite scroll
-      if (data.length == 1000) {
-        ev.target.disabled = true;
-      }
-    }, 500);
-  }
+);
 
-  toggleInfiniteScroll = () => {
-    this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
-  }
-
-  render() {
-    return (
-      <>
-        <IonContent>
-          <IonButton onClick="toggleInfiniteScroll()" expand="block">
-            Toggle Infinite Scroll
-          </IonButton>
-
-          <IonList></IonList>
-
-          <IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
-            <IonInfiniteScrollContent
-              loadingSpinner="bubbles"
-              loadingText="Loading more data...">
-            </IonInfiniteScrollContent>
-          </IonInfiniteScroll>
-        </IonContent>
-      </>
-    );
-  }
-}
-```
+export default Example

core/src/components/input/input.tsx

@@ -307,22 +307,8 @@ export class Input implements ComponentInterface {
     }
   }
 
-  private clearTextInput = (ev?: Event) => {
-    if (this.clearInput && !this.readonly && !this.disabled && ev) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-
+  private clearTextInput = () => {
     this.value = '';
-
-    /**
-     * This is needed for clearOnEdit
-     * Otherwise the value will not be cleared
-     * if user is inside the input
-     */
-    if (this.nativeInput) {
-      this.nativeInput.value = '';
-    }
   }
 
   private focusChanged() {
@@ -341,7 +327,6 @@ export class Input implements ComponentInterface {
       'aria-disabled': this.disabled ? 'true' : null,
       class: {
         ...createColorClasses(this.color),
-        [`${this.mode}`]: true,
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus
       }

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

@@ -118,11 +118,6 @@
         <ion-input clear-input value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
       </ion-item>
 
-      <ion-item>
-        <ion-label>Clear On Edit</ion-label>
-        <ion-input clear-on-edit value="reallylonglonglonginputtoseetheedgesreallylonglonglonginputtoseetheedges"></ion-input>
-      </ion-item>
-
       <ion-item style="max-width: 250px">
         <ion-input value="Narrow input"></ion-input>
         <ion-label text-right>Left</ion-label>

core/src/components/input/test/spec/e2e.ts

@@ -1,15 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('input: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/input/test/spec?ionic:_testing=true'
-  });
-
-  const compares = [];
-
-  compares.push(await page.compareScreenshot());
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});

core/src/components/input/test/spec/index.html

@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Input - Spec</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 class="ion-padding">
-      <ion-item>
-        <ion-label position="floating">Floating: input</ion-label>
-        <ion-input></ion-input>
-      </ion-item>
-      <ion-item class="item-has-focus">
-        <ion-label position="floating">Floating: input focused value</ion-label>
-        <ion-input value="value"></ion-input>
-      </ion-item>
-      <ion-item>
-        <ion-label position="stacked">Stacked: input</ion-label>
-        <ion-input></ion-input>
-      </ion-item>
-      <ion-item>
-        <ion-label position="stacked">Stacked: input value</ion-label>
-        <ion-input value="value"></ion-input>
-      </ion-item>
-      <ion-item>
-        <ion-label position="floating">Floating: textarea</ion-label>
-        <ion-textarea></ion-textarea>
-      </ion-item>
-      <ion-item>
-        <ion-label position="floating">Floating: textarea value</ion-label>
-        <ion-textarea value="value"></ion-textarea>
-      </ion-item>
-      <ion-item>
-        <ion-label position="stacked">Stacked: textarea</ion-label>
-        <ion-textarea></ion-textarea>
-      </ion-item>
-      <ion-item class="item-has-focus">
-        <ion-label position="stacked">Stacked: textarea focused value</ion-label>
-        <ion-textarea value="value"></ion-textarea>
-      </ion-item>
-      <ion-item class="custom item-has-focus">
-        <ion-label position="stacked">Stacked: textarea focus</ion-label>
-        <ion-textarea></ion-textarea>
-      </ion-item>
-
-    </ion-content>
-
-    <style>
-      ion-item {
-        --background: #f5f5f5;
-      }
-
-      .custom {
-        --background: lightblue;
-      }
-
-      .custom ion-label {
-        color: white !important;
-      }
-
-      .custom.item-has-focus ion-label {
-        color: purple !important;
-      }
-    </style>
-  </ion-app>
-</body>
-
-</html>

core/src/components/item-divider/item-divider.tsx

@@ -55,7 +55,6 @@ export class ItemDivider implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
-        [`${this.mode}`]: true,
         'item-divider-sticky': this.sticky,
         'item': true,
       }

core/src/components/item-group/item-group.tsx

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface } from '@stencil/core';
 
 import { Mode } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-item-group',
@@ -17,12 +18,8 @@ export class ItemGroup implements ComponentInterface {
     return {
       'role': 'group',
       class: {
-        [`${this.mode}`]: true,
-
-        // Used internally for styling
-        [`item-group-${this.mode}`]: true,
-
-        'item': true
+        ...createThemedClasses(this.mode, 'item-group'),
+        'item': true,
       }
     };
   }

core/src/components/item-option/item-option.tsx

@@ -64,8 +64,6 @@ export class ItemOption implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
-        [`${this.mode}`]: true,
-
         'item-option-disabled': disabled,
         'item-option-expandable': expandable,
         'ion-activatable': true,

core/src/components/item-options/item-options.scss

@@ -77,8 +77,6 @@ ion-item-options {
 
   ion-item-options {
     display: flex;
-
-    visibility: hidden;
   }
 
   &.item-sliding-active-options-start .item-options-start,

core/src/components/item-options/item-options.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
 
-import { Mode, Side } from '../../interface';
+import { Side } from '../../interface';
 import { isEndSide } from '../../utils/helpers';
 
 @Component({
@@ -11,8 +11,6 @@ import { isEndSide } from '../../utils/helpers';
   }
 })
 export class ItemOptions implements ComponentInterface {
-  mode!: Mode;
-
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'window' }) win!: Window;
@@ -40,11 +38,6 @@ export class ItemOptions implements ComponentInterface {
     const isEnd = isEndSide(this.win, this.side);
     return {
       class: {
-        [`${this.mode}`]: true,
-
-        // Used internally for styling
-        [`item-options-${this.mode}`]: true,
-
         'item-options-start': !isEnd,
         'item-options-end': isEnd
       }

core/src/components/item-sliding/item-sliding.scss

@@ -33,7 +33,7 @@ ion-item-sliding .item {
 .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
   @include multi-dir() {
     /* stylelint-disable-next-line property-blacklist */
-    padding-left: 100%;
+    padding-left: 90%;
   }
 
   @include ltr() {
@@ -51,7 +51,7 @@ ion-item-sliding .item {
 .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
   @include multi-dir() {
     /* stylelint-disable-next-line property-blacklist */
-    padding-right: 100%;
+    padding-right: 90%;
   }
 
   @include ltr() {

core/src/components/item-sliding/item-sliding.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Gesture, GestureDetail, Mode } from '../../interface';
+import { Gesture, GestureDetail } from '../../interface';
 
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
@@ -29,7 +29,6 @@ let openSlidingItem: HTMLIonItemSlidingElement | undefined;
   styleUrl: 'item-sliding.scss'
 })
 export class ItemSliding implements ComponentInterface {
-  mode!: Mode;
 
   private item: HTMLIonItemElement | null = null;
   private openAmount = 0;
@@ -117,52 +116,6 @@ export class ItemSliding implements ComponentInterface {
     return Promise.resolve(this.getSlidingRatioSync());
   }
 
-  /**
-   * Open the sliding item.
-   *
-   * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
-   */
-   // TODO update to work with RTL
-  @Method()
-  async open(side: string | undefined) {
-    if (this.item === null) { return; }
-
-    const optionsToOpen = this.getOptions(side);
-    if (!optionsToOpen) { return; }
-
-    /**
-     * If side is not set, we need to infer the side
-     * so we know which direction to move the options
-     */
-    if (side === undefined) {
-      side = (optionsToOpen === this.leftOptions) ? 'start' : 'end';
-    }
-
-    const isStartOpen = this.openAmount < 0;
-    const isEndOpen = this.openAmount > 0;
-
-    /**
-     * If a side is open and a user tries to
-     * re-open the same side, we should not do anything
-     */
-    if (isStartOpen && optionsToOpen === this.leftOptions) { return; }
-    if (isEndOpen && optionsToOpen === this.rightOptions) { return; }
-
-    this.closeOpened();
-
-    this.state = SlidingState.Enabled;
-
-    requestAnimationFrame(() => {
-      this.calculateOptsWidth();
-
-      const width = (side === 'end') ? this.optsWidthRightSide : -this.optsWidthLeftSide;
-      openSlidingItem = this.el;
-
-      this.setOpenAmount(width, false);
-      this.state = (side === 'end') ? SlidingState.End : SlidingState.Start;
-    });
-  }
-
   /**
    * Close the sliding item. Items can also be closed from the [List](../../list/List).
    */
@@ -184,22 +137,6 @@ export class ItemSliding implements ComponentInterface {
     return false;
   }
 
-   /**
-    * Given a side, attempt to return the ion-item-options element
-    *
-    * @param side This side of the options to get. If a side is not provided it will return the first one available
-    */
-    // TODO update to work with RTL
-  private getOptions(side?: string): HTMLIonItemOptionsElement | undefined {
-      if (side === undefined) {
-        return this.leftOptions || this.rightOptions;
-      } else if (side === 'start') {
-        return this.leftOptions;
-      } else {
-        return this.rightOptions;
-      }
-    }
-
   private async updateOptions() {
     const options = this.el.querySelectorAll('ion-item-options');
 
@@ -306,18 +243,13 @@ export class ItemSliding implements ComponentInterface {
   private calculateOptsWidth() {
     this.optsWidthRightSide = 0;
     if (this.rightOptions) {
-      this.rightOptions.style.display = 'flex';
       this.optsWidthRightSide = this.rightOptions.offsetWidth;
-      this.rightOptions.style.display = '';
     }
 
     this.optsWidthLeftSide = 0;
     if (this.leftOptions) {
-      this.leftOptions.style.display = 'flex';
       this.optsWidthLeftSide = this.leftOptions.offsetWidth;
-      this.leftOptions.style.display = '';
     }
-
     this.optsDirty = false;
   }
 
@@ -375,7 +307,6 @@ export class ItemSliding implements ComponentInterface {
   hostData() {
     return {
       class: {
-        [`${this.mode}`]: true,
         'item-sliding-active-slide': (this.state !== SlidingState.Disabled),
         'item-sliding-active-options-end': (this.state & SlidingState.End) !== 0,
         'item-sliding-active-options-start': (this.state & SlidingState.Start) !== 0,

core/src/components/item-sliding/readme.md

@@ -692,22 +692,6 @@ Type: `Promise<number>`
 
 
 
-### `open(side: string | undefined) => Promise<void>`
-
-Open the sliding item.
-
-#### Parameters
-
-| Name   | Type                  | Description                                                                                                                 |
-| ------ | --------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `side` | `string \| undefined` | The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item. |
-
-#### Returns
-
-Type: `Promise<void>`
-
-
-
 
 ----------------------------------------------
 

core/src/components/item-sliding/test/basic/index.html

@@ -38,9 +38,6 @@
         <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
         <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
         <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
-        <ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
-        <ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
-        <ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
       </div>
 
       <ion-list id="list">
@@ -313,44 +310,6 @@
             </ion-item>
           </ion-item-sliding>
 
-          <ion-item-sliding id="item10">
-            <ion-item detail>
-              <ion-label text-wrap>
-                <h2>RIGHT/LEFT side - many buttons</h2>
-                <p>Use mobile emulator to check</p>
-              </ion-label>
-            </ion-item>
-            <ion-item-options side="start" class="sliding-enabled">
-              <ion-item-option color="primary" expandable>
-                <ion-icon name="ios-checkmark"></ion-icon>Btn 1
-              </ion-item-option>
-              <ion-item-option color="secondary" expandable>
-                <ion-icon name="ios-checkmark"></ion-icon>Btn 2
-              </ion-item-option>
-              <ion-item-option color="danger" expandable>
-                <ion-icon name="ios-checkmark"></ion-icon>Btn 3
-              </ion-item-option>
-              <ion-item-option color="tertiary" expandable>
-                <ion-icon name="ios-checkmark"></ion-icon>Btn 4
-              </ion-item-option>
-            </ion-item-options>
-
-            <ion-item-options side="end" class="sliding-enabled">
-              <ion-item-option color="primary" expandable>
-                <ion-icon name="mail"></ion-icon>Btn 5
-              </ion-item-option>
-              <ion-item-option color="secondary" expandable>
-                <ion-icon name="mail"></ion-icon>Btn 6
-              </ion-item-option>
-              <ion-item-option color="danger" expandable>
-                <ion-icon name="mail"></ion-icon>Btn 7
-              </ion-item-option>
-              <ion-item-option color="tertiary" expandable>
-                <ion-icon name="mail"></ion-icon>Btn 8
-              </ion-item-option>
-            </ion-item-options>
-          </ion-item-sliding>
-
           <ion-item>
             <ion-label text-wrap>
               <h2>Normal ion-item (no sliding)</h2>
@@ -408,16 +367,6 @@
           list.closeSlidingItems();
         }
 
-        function openItem(side) {
-          var item = document.getElementById('item2');
-          item.open(side);
-        }
-        
-        function openItemOneSide() {
-          var item = document.getElementById('item1');
-          item.open();
-        }
-
         function noclose(item) {
           var itemEle = document.getElementById(item);
           console.log('no close', itemEle);