5.2.3

docs(coc): add Contributor Covenant Code of Conduct (#21550 )
chore(deps): bump deps (#21632 )
2026-03-13 10:22:08 +08:00 · 2020-07-01 13:28:43 -04:00 · 2020-06-29 11:35:29 -04:00 · 2020-06-29 10:21:06 -05:00 · 2020-06-26 09:42:05 -05:00 · 2020-06-25 11:46:52 -04:00
128 changed files with 32738 additions and 1051 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -19,7 +19,8 @@ assignees: ''
 **Ionic version:**
 <!-- (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) -->
 <!-- (For Ionic 2.x & 3.x issues, please use https://github.com/ionic-team/ionic-v3) -->
-[x] **4.x**
+[ ] **4.x**
+[x] **5.x**

 **Current behavior:**
 <!-- Describe how the bug manifests. -->
--- a/.gitignore
+++ b/.gitignore
@@ -64,3 +64,4 @@ core/loader/
 core/www/
 .stencil/
 angular/build/
+core/components/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,76 @@
+## [5.2.3](https://github.com/ionic-team/ionic/compare/v5.2.2...v5.2.3) (2020-07-01)
+
+
+### Bug Fixes
+
+* **angular:** expose createAnimation in addition to AnimationController ([#21616](https://github.com/ionic-team/ionic/issues/21616)) ([a5b3750](https://github.com/ionic-team/ionic/commit/a5b3750ee2a7c005f80f8453b03c67dd1a5622ca)), closes [#21615](https://github.com/ionic-team/ionic/issues/21615)
+* **select:** change role to listbox ([#21609](https://github.com/ionic-team/ionic/issues/21609)) ([8c79e2c](https://github.com/ionic-team/ionic/commit/8c79e2c5b58ad562967f2d559c6b548e57536936))
+* **slides:** enable keyboard integration ([#21608](https://github.com/ionic-team/ionic/issues/21608)) ([26674f1](https://github.com/ionic-team/ionic/commit/26674f1dfa8c9a28f5525f1b16070e8ec494c232)), closes [#21554](https://github.com/ionic-team/ionic/issues/21554)
+* **textarea:** add aria-labelledby to native textarea ([#21606](https://github.com/ionic-team/ionic/issues/21606)) ([88f23b1](https://github.com/ionic-team/ionic/commit/88f23b1626eb400336f2f52a3e0d34ac3c161e64)), closes [#21600](https://github.com/ionic-team/ionic/issues/21600)
+
+
+
+## [5.2.2](https://github.com/ionic-team/ionic/compare/v5.2.1...v5.2.2) (2020-06-17)
+
+
+### Bug Fixes
+
+* **action-sheet, alert:** resolve double click issue when running in iOS mode on chrome ([#21506](https://github.com/ionic-team/ionic/issues/21506)) ([bcccc21](https://github.com/ionic-team/ionic/commit/bcccc217b8833a284a1781e287db5e46043b3548)), closes [#21503](https://github.com/ionic-team/ionic/issues/21503)
+* **angular:** fix issue where navAnimation was being incorrectly overridden ([#21508](https://github.com/ionic-team/ionic/issues/21508)) ([e968bd0](https://github.com/ionic-team/ionic/commit/e968bd029a4fb37b4001d96a490c6091a948785a)), closes [#21495](https://github.com/ionic-team/ionic/issues/21495)
+* **input:** add aria-label to clear button ([#21538](https://github.com/ionic-team/ionic/issues/21538)) ([d8b377f](https://github.com/ionic-team/ionic/commit/d8b377ffeb88eaae23b33eadeae5c8e54e1bc77c)), closes [#21537](https://github.com/ionic-team/ionic/issues/21537)
+* **ios:** respect toolbar opacity when doing nav transition ([#21512](https://github.com/ionic-team/ionic/issues/21512)) ([24cfdc3](https://github.com/ionic-team/ionic/commit/24cfdc308f63b7a55969ac58806eafd67116b017))
+* **segment:** ensure checked classes get set after not having a value ([#21547](https://github.com/ionic-team/ionic/issues/21547)) ([17308f2](https://github.com/ionic-team/ionic/commit/17308f247f8750029ece39548c9f457e15326189)), closes [#21546](https://github.com/ionic-team/ionic/issues/21546)
+
+
+## [5.2.1](https://github.com/ionic-team/ionic/compare/v5.2.0...v5.2.1) (2020-06-11)
+
+
+### Bug Fixes
+
+* **angular:** resolve error when not using ngModel on components ([4083e32](https://github.com/ionic-team/ionic/commit/4083e32e103db71f6db86ed1ecd398fda407c28b))
+
+
+
+# [5.2.0 Silicon](https://github.com/ionic-team/ionic/compare/v5.1.1...v5.2.0) (2020-06-10)
+
+
+### Bug Fixes
+
+* **action-sheet, toast:** allow button handler to return `Promise<void>` ([#21259](https://github.com/ionic-team/ionic/issues/21259)) ([7703da2](https://github.com/ionic-team/ionic/commit/7703da28f8181b02390b97a7d4d02df99b2ad34c))
+* **angular:** patch FormControl methods to properly sync Ionic form classes ([#21429](https://github.com/ionic-team/ionic/issues/21429)) ([e95b481](https://github.com/ionic-team/ionic/commit/e95b481a53191582bca635f322ad07eadbd62d64))
+* **datetime:** ensure year-only values are not affected by timezone when parsing ([#21309](https://github.com/ionic-team/ionic/issues/21309)) ([3937101](https://github.com/ionic-team/ionic/commit/3937101e5c2b181a6b7926eb8386c22b0f887716))
+* **header:** large title transition now works on older versions of iOS ([#21339](https://github.com/ionic-team/ionic/issues/21339)) ([2dac12c](https://github.com/ionic-team/ionic/commit/2dac12c577e0c7a5310857389dbda2b2b3dfadd1))
+* **img:** use setTimeout fallback on older versions of chrome  ([#21358](https://github.com/ionic-team/ionic/issues/21358)) ([0bf9449](https://github.com/ionic-team/ionic/commit/0bf9449ee1f9b2498e35f61511cb3e018814c6ca))
+* **ios:** add haptic drag gesture for action sheet and alert components ([#21060](https://github.com/ionic-team/ionic/issues/21060)) ([33be1f0](https://github.com/ionic-team/ionic/commit/33be1f061ebbe27ee22e357c394f112af42ec360))
+* **item:** inherit align-items from parent item ([#19278](https://github.com/ionic-team/ionic/issues/19278)) ([882f8fe](https://github.com/ionic-team/ionic/commit/882f8fef07dfb6ebda17ca09046d1af281075098)), closes [#18703](https://github.com/ionic-team/ionic/issues/18703)
+* **item:** input-wrapper now inherits overflow ([#21282](https://github.com/ionic-team/ionic/issues/21282)) ([29d208d](https://github.com/ionic-team/ionic/commit/29d208de88f340e216e22badb6366bba4eda8bfb))
+* **menu-button:** screen readers now properly announce menu button ([#21324](https://github.com/ionic-team/ionic/issues/21324)) ([eaf4fb6](https://github.com/ionic-team/ionic/commit/eaf4fb6b2a6d68f5c3d8d49ef41b4885f096070d))
+* **modal:** card style modal no longer gets stuck when swiping quickly ([#21224](https://github.com/ionic-team/ionic/issues/21224)) ([448dfa0](https://github.com/ionic-team/ionic/commit/448dfa0a6955008ce4dc73354f5b8319ae1a1cc2))
+* **modal:** set card-style modal height using the --height css variable ([#21453](https://github.com/ionic-team/ionic/issues/21453)) ([a4f0bdb](https://github.com/ionic-team/ionic/commit/a4f0bdb4c3ceeeaf902d520e9aa72e04a6ec2302))
+* **reorder-group:** revert item to original position when passing false to complete ([#21396](https://github.com/ionic-team/ionic/issues/21396)) ([5f2001c](https://github.com/ionic-team/ionic/commit/5f2001c43c0846ec8973cbb8eb5662976ba7e31a)), closes [#19128](https://github.com/ionic-team/ionic/issues/19128)
+* **router:** use correct nav transition when going back ([#21301](https://github.com/ionic-team/ionic/issues/21301)) ([c8db0d5](https://github.com/ionic-team/ionic/commit/c8db0d5eeba6f10d1492e95e6df6b4d871d43400))
+* **scroll-assist:** improve scroll detection accuracy ([#21416](https://github.com/ionic-team/ionic/issues/21416)) ([137c49d](https://github.com/ionic-team/ionic/commit/137c49d70be45e1b0ee73d41fed6e9d69a2caa32))
+* **slides:** update Swiper dependency to resolve error when doing SSR ([#21350](https://github.com/ionic-team/ionic/issues/21350)) ([3290604](https://github.com/ionic-team/ionic/commit/32906048a491961ec7340ba2e085807ea8a9c118))
+* **textarea:** native textarea inherits max/min width and height ([#21333](https://github.com/ionic-team/ionic/issues/21333)) ([2377480](https://github.com/ionic-team/ionic/commit/237748049c7644ae8a7a74101ece5cfd7a160470))
+
+
+### Features
+
+* **alert:** add destructive role to alert buttons ([#21269](https://github.com/ionic-team/ionic/issues/21269)) ([e53f024](https://github.com/ionic-team/ionic/commit/e53f0241e2bf91461c55097fde271ae85ca644ea))
+* **alert:** add support for custom input attributes ([#21365](https://github.com/ionic-team/ionic/issues/21365)) ([1ed8169](https://github.com/ionic-team/ionic/commit/1ed81693f225b6801a0897ef1a8314999c122484))
+* **all:** add all autocomplete values to input and searchbar ([#21297](https://github.com/ionic-team/ionic/issues/21297)) ([4fd7c0c](https://github.com/ionic-team/ionic/commit/4fd7c0cc5a6c97100fa380e4ff1be0bb84c7006b))
+* **all:** add optional generic typings for overlay component methods ([#21393](https://github.com/ionic-team/ionic/issues/21393)) ([5bf83b8](https://github.com/ionic-team/ionic/commit/5bf83b80d7d2749719dd1a280ae8e205fbc4b2a9))
+* **all:** add shadow parts to missing components ([#21436](https://github.com/ionic-team/ionic/issues/21436)) ([17375d2](https://github.com/ionic-team/ionic/commit/17375d232500b47ef1cacd7c028c38990d307984))
+* **all:** add support for configuring animations on a per-page basis  ([#21433](https://github.com/ionic-team/ionic/issues/21433)) ([f34d375](https://github.com/ionic-team/ionic/commit/f34d3752e3462c9d81487fc86af5ec185cc3d1e3))
+* **angular:** expose activatedView ([#21302](https://github.com/ionic-team/ionic/issues/21302)) ([829a0d9](https://github.com/ionic-team/ionic/commit/829a0d9be5a20c5fc96b5c5f18fedc4eb5e5b9ec))
+* **angular:** expose getPlatforms and isPlatform ([#21308](https://github.com/ionic-team/ionic/issues/21308)) ([4af54a2](https://github.com/ionic-team/ionic/commit/4af54a2fea5d9cef843b1ebce849fb4a5c206f0b))
+* **angular:** add strongly typed Ionic lifecycle hooks ([#18044](https://github.com/ionic-team/ionic/issues/18044)) ([53fc8e3](https://github.com/ionic-team/ionic/commit/53fc8e37c89cea793d0e00246d52805166730108)), closes [#18043](https://github.com/ionic-team/ionic/issues/18043)
+* **fab-button:** add close icon font size css variable ([#19628](https://github.com/ionic-team/ionic/issues/19628)) ([df408f9](https://github.com/ionic-team/ionic/commit/df408f91f1aef903adaa5e635fef9bc7542e8739))
+* **fab-button:** add closeIcon property ([#19626](https://github.com/ionic-team/ionic/issues/19626)) ([698e526](https://github.com/ionic-team/ionic/commit/698e526b9f882e98efc4bf160999182c645b772c))
+* **select-option:** pass class from the option to the interface for individual styling  ([#21304](https://github.com/ionic-team/ionic/issues/21304)) ([5285824](https://github.com/ionic-team/ionic/commit/5285824da5258ea638420fc60c50e0a19952f89c))
+
+
+
 ## [5.1.1](https://github.com/ionic-team/ionic/compare/v5.1.0...v5.1.1) (2020-05-13)


--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1,11 +1,129 @@
-# Contributor Code of Conduct

-As contributors and maintainers of the Ionic project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
+# Contributor Covenant Code of Conduct

-Communication through any of Ionic's channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+## Our Pledge

-We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Ionic project to do the same.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.

-If any member of the community violates this code of conduct, the maintainers of the Ionic project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.

-If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [hi@ionicframework.com](mailto:hi@ionicframework.com).
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[contact@ionic.io](mailto:contact@ionic.io).
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
--- a/README.md
+++ b/README.md
@@ -31,6 +31,8 @@ Thanks for your interest in contributing! Read up on our guidelines for
 and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.

+Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
+

 ### Examples

--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "5.1.1",
+  "version": "5.2.3",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -42,7 +42,7 @@
    "validate": "npm i && npm run lint && npm run test && npm run build"
  },
  "dependencies": {
-    "@ionic/core": "5.1.1",
+    "@ionic/core": "5.2.3",
    "tslib": "^1.9.3"
  },
  "peerDependencies": {
--- a/angular/scripts/rollup.config.js
+++ b/angular/scripts/rollup.config.js
@@ -1,4 +1,4 @@
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';

 export default {
  input: 'build/es2015/core.js',
--- a/angular/src/directives/control-value-accessors/boolean-value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/boolean-value-accessor.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';

 import { ValueAccessor, setIonicClasses } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor, setIonicClasses } from './value-accessor';
 })
 export class BooleanValueAccessor extends ValueAccessor {

-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
  }

  writeValue(value: any) {
--- a/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts
+++ b/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';

 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class NumericValueAccessor extends ValueAccessor {

-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
  }

  @HostListener('ionChange', ['$event.target'])
--- a/angular/src/directives/control-value-accessors/radio-value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/radio-value-accessor.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';

 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class RadioValueAccessor extends ValueAccessor {

-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
  }

  @HostListener('ionSelect', ['$event.target'])
--- a/angular/src/directives/control-value-accessors/select-value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/select-value-accessor.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';

 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class SelectValueAccessor extends ValueAccessor {

-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
  }

  @HostListener('ionChange', ['$event.target'])
--- a/angular/src/directives/control-value-accessors/text-value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/text-value-accessor.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';

 import { ValueAccessor } from './value-accessor';
@@ -16,8 +16,8 @@ import { ValueAccessor } from './value-accessor';
 })
 export class TextValueAccessor extends ValueAccessor {

-  constructor(el: ElementRef) {
-    super(el);
+  constructor(injector: Injector, el: ElementRef) {
+    super(injector, el);
  }

  @HostListener('ionChange', ['$event.target'])
--- a/angular/src/directives/control-value-accessors/value-accessor.ts
+++ b/angular/src/directives/control-value-accessors/value-accessor.ts
@@ -1,15 +1,17 @@
-import { ElementRef, HostListener } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { AfterViewInit, ElementRef, HostListener, Injector, OnDestroy, Type } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';

 import { raf } from '../../util/util';

-export class ValueAccessor implements ControlValueAccessor {
+export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDestroy {

  private onChange: (value: any) => void = () => {/**/};
  private onTouched: () => void = () => {/**/};
  protected lastValue: any;
+  private statusChanges?: Subscription;

-  constructor(protected el: ElementRef) {}
+  constructor(protected injector: Injector, protected el: ElementRef) {}

  writeValue(value: any) {
    /**
@@ -52,6 +54,50 @@ export class ValueAccessor implements ControlValueAccessor {
  setDisabledState(isDisabled: boolean) {
    this.el.nativeElement.disabled = isDisabled;
  }
+
+  ngOnDestroy() {
+    if (this.statusChanges) {
+      this.statusChanges.unsubscribe();
+    }
+  }
+
+  ngAfterViewInit() {
+    let ngControl;
+    try {
+      ngControl = this.injector.get<NgControl>(NgControl as Type<NgControl>);
+    } catch { /* No FormControl or ngModel binding */ }
+
+    if (!ngControl) { return; }
+
+    // Listen for changes in validity, disabled, or pending states
+    if (ngControl.statusChanges) {
+      this.statusChanges = ngControl.statusChanges.subscribe(() => setIonicClasses(this.el));
+    }
+
+    /**
+     * TODO Remove this in favor of https://github.com/angular/angular/issues/10887
+     * whenever it is implemented. Currently, Ionic's form status classes
+     * do not react to changes when developers manually call
+     * Angular form control methods such as markAsTouched.
+     * This results in Ionic's form status classes being out
+     * of sync with the ng form status classes.
+     * This patches the methods to manually sync
+     * the classes until this feature is implemented in Angular.
+     */
+    const formControl = ngControl.control;
+    if (formControl) {
+      const methodsToPatch = ['markAsTouched', 'markAllAsTouched', 'markAsUntouched', 'markAsDirty', 'markAsPristine'];
+      methodsToPatch.forEach(method => {
+       if (formControl[method]) {
+         const oldFn = formControl[method].bind(formControl);
+         formControl[method] = (...params) => {
+           oldFn(...params);
+           setIonicClasses(this.el);
+          };
+        }
+      });
+    }
+  }
 }

 export const setIonicClasses = (element: ElementRef) => {
--- a/angular/src/directives/navigation/ion-back-button.ts
+++ b/angular/src/directives/navigation/ion-back-button.ts
@@ -1,4 +1,5 @@
 import { Directive, HostListener, Optional } from '@angular/core';
+import { AnimationBuilder } from '@ionic/core';

 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
@@ -7,11 +8,12 @@ import { IonRouterOutlet } from './ion-router-outlet';

@Directive({
  selector: 'ion-back-button',
-  inputs: ['defaultHref'],
+  inputs: ['defaultHref', 'routerAnimation'],
 })
 export class IonBackButtonDelegate {

  defaultHref: string | undefined | null;
+  routerAnimation?: AnimationBuilder;

  constructor(
    @Optional() private routerOutlet: IonRouterOutlet,
@@ -27,10 +29,11 @@ export class IonBackButtonDelegate {
    const defaultHref = this.defaultHref || this.config.get('backButtonDefaultHref');

    if (this.routerOutlet && this.routerOutlet.canGoBack()) {
+      this.navCtrl.setDirection('back', undefined, undefined, this.routerAnimation);
      this.routerOutlet.pop();
      ev.preventDefault();
    } else if (defaultHref != null) {
-      this.navCtrl.navigateBack(defaultHref);
+      this.navCtrl.navigateBack(defaultHref, { animation: this.routerAnimation });
      ev.preventDefault();
    }
  }
--- a/angular/src/directives/navigation/router-link-delegate.ts
+++ b/angular/src/directives/navigation/router-link-delegate.ts
@@ -1,20 +1,21 @@
 import { LocationStrategy } from '@angular/common';
 import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
-import { RouterDirection } from '@ionic/core';
+import { AnimationBuilder, RouterDirection } from '@ionic/core';
 import { Subscription } from 'rxjs';

 import { NavController } from '../../providers/nav-controller';

@Directive({
  selector: '[routerLink]',
-  inputs: ['routerDirection']
+  inputs: ['routerDirection', 'routerAnimation']
 })
 export class RouterLinkDelegate {

  private subscription?: Subscription;

  routerDirection: RouterDirection = 'forward';
+  routerAnimation?: AnimationBuilder;

  constructor(
    private locationStrategy: LocationStrategy,
@@ -50,7 +51,7 @@ export class RouterLinkDelegate {
   */
  @HostListener('click', ['$event'])
  onClick(ev: UIEvent) {
-    this.navCtrl.setDirection(this.routerDirection);
+    this.navCtrl.setDirection(this.routerDirection, undefined, undefined, this.routerAnimation);
    ev.preventDefault();
  }
 }
--- a/angular/src/directives/navigation/stack-controller.ts
+++ b/angular/src/directives/navigation/stack-controller.ts
@@ -1,7 +1,7 @@
 import { Location } from '@angular/common';
 import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RouterDirection } from '@ionic/core';
+import { AnimationBuilder, RouterDirection } from '@ionic/core';

 import { bindLifecycleEvents } from '../../providers/angular-delegate';
 import { NavController } from '../../providers/nav-controller';
@@ -52,7 +52,8 @@ export class StackController {
  }

  setActive(enteringView: RouteView): Promise<StackEvent> {
-    let { direction, animation } = this.navCtrl.consumeTransition();
+    const consumeResult = this.navCtrl.consumeTransition();
+    let { direction, animation, animationBuilder } = consumeResult;
    const leavingView = this.activeView;
    const tabSwitch = isTabSwitch(enteringView, leavingView);
    if (tabSwitch) {
@@ -105,6 +106,31 @@ export class StackController {
      enteringView.ref.changeDetectorRef.detectChanges();
    }

+    /**
+     * If we are going back from a page that
+     * was presented using a custom animation
+     * we should default to using that
+     * unless the developer explicitly
+     * provided another animation.
+     */
+    const customAnimation = enteringView.animationBuilder;
+    if (
+      animationBuilder === undefined &&
+      direction === 'back' &&
+      !tabSwitch &&
+      customAnimation !== undefined
+    ) {
+      animationBuilder = customAnimation;
+    }
+
+    /**
+     * Save any custom animation so that navigating
+     * back will use this custom animation by default.
+     */
+    if (animationBuilder !== undefined && leavingView) {
+      leavingView.animationBuilder = animationBuilder;
+    }
+
    // Wait until previous transitions finish
    return this.zone.runOutsideAngular(() => {
      return this.wait(() => {
@@ -116,7 +142,7 @@ export class StackController {
        // In case the enteringView is the same as the leavingPage we need to reattach()
        enteringView.ref.changeDetectorRef.reattach();

-        return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false)
+        return this.transition(enteringView, leavingView, animation, this.canGoBack(1), false, animationBuilder)
          .then(() => cleanupAsync(enteringView, views, viewsSnapshot, this.location))
          .then(() => ({
            enteringView,
@@ -154,8 +180,8 @@ export class StackController {
          url = primaryOutlet.route._routerState.snapshot.url;
        }
      }
-
-      return this.navCtrl.navigateBack(url, view.savedExtras).then(() => true);
+      const { animationBuilder } = this.navCtrl.consumeTransition();
+      return this.navCtrl.navigateBack(url, { ...view.savedExtras, animation: animationBuilder }).then(() => true);
    });
  }

@@ -225,7 +251,8 @@ export class StackController {
    leavingView: RouteView | undefined,
    direction: 'forward' | 'back' | undefined,
    showGoBack: boolean,
-    progressAnimation: boolean
+    progressAnimation: boolean,
+    animationBuilder?: AnimationBuilder
  ) {
    if (this.skipTransition) {
      this.skipTransition = false;
@@ -250,7 +277,8 @@ export class StackController {
          duration: direction === undefined ? 0 : undefined,
          direction,
          showGoBack,
-          progressAnimation
+          progressAnimation,
+          animationBuilder
        });
      }
    }
--- a/angular/src/directives/navigation/stack-utils.ts
+++ b/angular/src/directives/navigation/stack-utils.ts
@@ -1,6 +1,6 @@
 import { ComponentRef } from '@angular/core';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
-import { NavDirection, RouterDirection } from '@ionic/core';
+import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core';

 export const insertView = (views: RouteView[], view: RouteView, direction: RouterDirection) => {
  if (direction === 'root') {
@@ -96,4 +96,5 @@ export interface RouteView {
  savedData?: any;
  savedExtras?: NavigationExtras;
  unlistenEvents: () => void;
+  animationBuilder?: AnimationBuilder;
 }
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -26,8 +26,8 @@ export class IonAvatar {
 }
 export declare interface IonBackButton extends Components.IonBackButton {
 }
-@ProxyCmp({ inputs: ["color", "defaultHref", "disabled", "icon", "mode", "text", "type"] })
-@Component({ selector: "ion-back-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "text", "type"] })
+@ProxyCmp({ inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] })
+@Component({ selector: "ion-back-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] })
 export class IonBackButton {
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -61,8 +61,8 @@ export class IonBadge {
 }
 export declare interface IonButton extends Components.IonButton {
 }
-@ProxyCmp({ inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerDirection", "shape", "size", "strong", "target", "type"] })
-@Component({ selector: "ion-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerDirection", "shape", "size", "strong", "target", "type"] })
+@ProxyCmp({ inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] })
+@Component({ selector: "ion-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] })
 export class IonButton {
    ionFocus!: EventEmitter<CustomEvent>;
    ionBlur!: EventEmitter<CustomEvent>;
@@ -86,8 +86,8 @@ export class IonButtons {
 }
 export declare interface IonCard extends Components.IonCard {
 }
-@ProxyCmp({ inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "target", "type"] })
-@Component({ selector: "ion-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "target", "type"] })
+@ProxyCmp({ inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
+@Component({ selector: "ion-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
 export class IonCard {
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -220,8 +220,8 @@ export class IonFab {
 }
 export declare interface IonFabButton extends Components.IonFabButton {
 }
-@ProxyCmp({ inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "show", "size", "target", "translucent", "type"] })
-@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "color", "disabled", "download", "href", "mode", "rel", "routerDirection", "show", "size", "target", "translucent", "type"] })
+@ProxyCmp({ inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
+@Component({ selector: "ion-fab-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] })
 export class IonFabButton {
    ionFocus!: EventEmitter<CustomEvent>;
    ionBlur!: EventEmitter<CustomEvent>;
@@ -344,8 +344,8 @@ export class IonInput {
 }
 export declare interface IonItem extends Components.IonItem {
 }
-@ProxyCmp({ inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerDirection", "target", "type"] })
-@Component({ selector: "ion-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerDirection", "target", "type"] })
+@ProxyCmp({ inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
+@Component({ selector: "ion-item", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] })
 export class IonItem {
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -462,8 +462,8 @@ export class IonMenu {
 }
 export declare interface IonMenuButton extends Components.IonMenuButton {
 }
-@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "type"] })
-@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["autoHide", "color", "disabled", "menu", "type"] })
+@ProxyCmp({ inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] })
+@Component({ selector: "ion-menu-button", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] })
 export class IonMenuButton {
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -498,8 +498,8 @@ export class IonNav {
 }
 export declare interface IonNavLink extends Components.IonNavLink {
 }
-@ProxyCmp({ inputs: ["component", "componentProps", "routerDirection"] })
-@Component({ selector: "ion-nav-link", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["component", "componentProps", "routerDirection"] })
+@ProxyCmp({ inputs: ["component", "componentProps", "routerAnimation", "routerDirection"] })
+@Component({ selector: "ion-nav-link", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["component", "componentProps", "routerAnimation", "routerDirection"] })
 export class IonNavLink {
    protected el: HTMLElement;
    constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
--- a/angular/src/index.ts
+++ b/angular/src/index.ts
@@ -43,7 +43,7 @@ export * from './types/ionic-lifecycle-hooks';
 export { IonicModule } from './ionic-module';

 // UTILS
-export { IonicSafeString, getPlatforms, isPlatform } from '@ionic/core';
+export { IonicSafeString, getPlatforms, isPlatform, createAnimation } from '@ionic/core';

 // CORE TYPES
 export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core';
--- a/angular/src/providers/nav-controller.ts
+++ b/angular/src/providers/nav-controller.ts
@@ -1,7 +1,7 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
 import { NavigationExtras, NavigationStart, Router, UrlSerializer, UrlTree } from '@angular/router';
-import { NavDirection, RouterDirection } from '@ionic/core';
+import { AnimationBuilder, NavDirection, RouterDirection } from '@ionic/core';

 import { IonRouterOutlet } from '../directives/navigation/ion-router-outlet';

@@ -9,6 +9,7 @@ import { Platform } from './platform';

 export interface AnimationOptions {
  animated?: boolean;
+  animation?: AnimationBuilder;
  animationDirection?: 'forward' | 'back';
 }

@@ -22,6 +23,7 @@ export class NavController {
  private topOutlet?: IonRouterOutlet;
  private direction: 'forward' | 'back' | 'root' | 'auto' = DEFAULT_DIRECTION;
  private animated?: NavDirection = DEFAULT_ANIMATED;
+  private animationBuilder?: AnimationBuilder;
  private guessDirection: RouterDirection = 'forward';
  private guessAnimation?: NavDirection;
  private lastNavId = -1;
@@ -65,7 +67,7 @@ export class NavController {
   * ```
   */
  navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
-    this.setDirection('forward', options.animated, options.animationDirection);
+    this.setDirection('forward', options.animated, options.animationDirection, options.animation);
    return this.navigate(url, options);
  }

@@ -88,7 +90,7 @@ export class NavController {
   * ```
   */
  navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
-    this.setDirection('back', options.animated, options.animationDirection);
+    this.setDirection('back', options.animated, options.animationDirection, options.animation);
    return this.navigate(url, options);
  }

@@ -111,7 +113,7 @@ export class NavController {
   * ```
   */
  navigateRoot(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
-    this.setDirection('root', options.animated, options.animationDirection);
+    this.setDirection('root', options.animated, options.animationDirection, options.animation);
    return this.navigate(url, options);
  }

@@ -121,7 +123,7 @@ export class NavController {
   * by default.
   */
  back(options: AnimationOptions = { animated: true, animationDirection: 'back' }) {
-    this.setDirection('back', options.animated, options.animationDirection);
+    this.setDirection('back', options.animated, options.animationDirection, options.animation);
    return this.location.back();
  }

@@ -150,9 +152,10 @@ export class NavController {
   *
   * It's recommended to use `navigateForward()`, `navigateBack()` and `navigateRoot()` instead of `setDirection()`.
   */
-  setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back') {
+  setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back', animationBuilder?: AnimationBuilder) {
    this.direction = direction;
    this.animated = getAnimation(direction, animated, animationDirection);
+    this.animationBuilder = animationBuilder;
  }

  /**
@@ -168,6 +171,7 @@ export class NavController {
  consumeTransition() {
    let direction: RouterDirection = 'root';
    let animation: NavDirection | undefined;
+    const animationBuilder = this.animationBuilder;

    if (this.direction === 'auto') {
      direction = this.guessDirection;
@@ -178,10 +182,12 @@ export class NavController {
    }
    this.direction = DEFAULT_DIRECTION;
    this.animated = DEFAULT_ANIMATED;
+    this.animationBuilder = undefined;

    return {
      direction,
-      animation
+      animation,
+      animationBuilder
    };
  }

--- a/angular/test/test-app/e2e/src/form.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/form.e2e-spec.ts
@@ -1,5 +1,5 @@
 import { browser, element, by } from 'protractor';
-import { handleErrorMessages, setProperty, getText, waitTime } from './utils';
+import { handleErrorMessages, getProperty, setProperty, getText, waitTime } from './utils';

 describe('form', () => {

@@ -7,6 +7,20 @@ describe('form', () => {
    return handleErrorMessages();
  });

+  describe('status updates', () => {
+    beforeEach(async () => {
+      await browser.get('/form');
+      await waitTime(30);
+    });
+
+    it('should update Ionic form classes when calling form methods programatically', async () => {
+      await element(by.css('form #input-touched')).click();
+      await waitTime(100);
+      const classList = (await getProperty('#touched-input-test', 'classList')) as string[];
+      expect(classList.includes('ion-touched')).toEqual(true);
+    });
+  });
+
  describe('change', () => {
    beforeEach(async () => {
      await browser.get('/form');
--- a/angular/test/test-app/src/app/alert/alert.component.html
+++ b/angular/test/test-app/src/app/alert/alert.component.html
@@ -1,5 +1,8 @@
 <ion-header>
  <ion-toolbar>
+    <ion-buttons>
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
    <ion-title>
      Alert test
    </ion-title>
--- a/angular/test/test-app/src/app/form/form.component.html
+++ b/angular/test/test-app/src/app/form/form.component.html
@@ -35,9 +35,11 @@

      <ion-item>
        <ion-label>Input (required)</ion-label>
-        <ion-input formControlName="input" class="required"></ion-input>
+        <ion-input formControlName="input" class="required" id="touched-input-test"></ion-input>
      </ion-item>

+      <ion-button id="input-touched" (click)="setTouched()">Set Input Touched</ion-button>
+
      <ion-item>
        <ion-label>Input</ion-label>
        <ion-input formControlName="input2"></ion-input>
--- a/angular/test/test-app/src/app/form/form.component.ts
+++ b/angular/test/test-app/src/app/form/form.component.ts
@@ -25,6 +25,11 @@ export class FormComponent {
    });
  }

+  setTouched() {
+    const formControl = this.profileForm.get('input');
+    formControl.markAsTouched();
+  }
+
  onSubmit(_ev) {
    this.submitted = 'true';
  }
--- a/angular/test/test-app/src/app/home-page/home-page.component.html
+++ b/angular/test/test-app/src/app/home-page/home-page.component.html
@@ -7,7 +7,7 @@
  </ion-header>
  <ion-content>
    <ion-list>
-      <ion-item routerLink="/alerts">
+      <ion-item routerLink="/alerts" [routerAnimation]="routerAnimation">
        <ion-label>
          Alerts test
        </ion-label>
--- a/angular/test/test-app/src/app/home-page/home-page.component.ts
+++ b/angular/test/test-app/src/app/home-page/home-page.component.ts
@@ -1,9 +1,25 @@
 import { Component } from '@angular/core';
+import { AnimationBuilder, AnimationController } from '@ionic/angular';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
 })
 export class HomePageComponent {
+  routerAnimation: AnimationBuilder = (_, opts) => {
+    const { direction, enteringEl, leavingEl } = opts;
+    const animation = this.animationCtrl.create().duration(500).easing('ease-out');
+    const enteringAnimation = this.animationCtrl.create().addElement(enteringEl).beforeRemoveClass(['ion-page-invisible']);
+    const leavingAnimation = this.animationCtrl.create().addElement(leavingEl).beforeRemoveClass(['ion-page-invisible']);
+    if (direction === 'back') {
+      enteringAnimation.fromTo('transform', 'translateX(-100%)', 'translateX(0%)');
+      leavingAnimation.fromTo('transform', 'translateX(0%)', 'translateX(100%)');
+    } else {
+      enteringAnimation.fromTo('transform', 'translateX(100%)', 'translateX(0%)');
+      leavingAnimation.fromTo('transform', 'translateX(0%)', 'translateX(-100%)');
+    }
+    return animation.addAnimation([enteringAnimation, leavingAnimation]);
+  };

+  constructor(private animationCtrl: AnimationController) {}
 }
--- a/core/.npmrc
+++ b/core/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/core/CONTRIBUTING.md
+++ b/core/CONTRIBUTING.md
@@ -1,121 +0,0 @@
-# Contribution guide
-
-## Contribute to Ionic Core
-
-Ionic Core is the fundation of Ionic v4. It's based in [Stencil](https://stenciljs.com) and consist in a set of web components a long of JS and CSS utils.
-
-
-### Installing dependencies
-
-Before you can build ionic, we assume the following list of software is already installed in your system
-
- Git
- Node 8 or higher
- Npm 6.0 or higher
-
-
-### Fork repository
-
-In order to contributo to Ionic, you must have a github account so you can push code and create a new Pull Request (PR).
-
-Once you are all setup, following the Github's guide of how to fork a repository: https://guides.github.com/activities/forking/
-
-
-### Build Ionic Core
-
-```bash
-# Clone your Github repository:
-git clone https://github.com/<github username>/ionic.git
-
-# Go to the core directory:
-cd ionic/core
-
-# Install npm dependencies
-npm install
-
-# Run Ionic dev server
-npm start
-```
-
-### Development Workflow
-
-#### 1. Run Dev Server
-
-```bash
-# Move to the core folder
-cd core
-
-# Run dev server
-npm start
-```
-
-You should be able to navigate to `http://localhost:3333` which will look like a file browser.
-
-E2E tests are located inside the `src/components` folder, in the following way: `http://localhost:3333/src/components/{COMPONENT}/test/`
-
-
-**Path examples:**
-
- ActionSheet basic test: http://localhost:3333/src/components/action-sheet/test/basic
- Nav basic test: http://localhost:3333/src/components/nav/test/basic
- Button basic test:
-http://localhost:3333/src/components/button/test/basic
-
-
-**IMPORTANT**
-
-Leave the dev server running in the background while you make changes. The dev server listen for changes and automatically recompile Ionic for you.
-
-
-
-#### 2. Open `core` folder in your IDE
-
-Components implementations live inside the `core/src/components` folder.
-
-You can find each ionic component inside their directory.
-
-
-#### 3. Run test suite
-
-Before commiting your changes make sure tests are passing:
-
-```
-npm run validate
-```
-
-#### 4. Create a branch and commit
-
-```bash
-# Create a git branch
-git checkout -b my-improvement
-
-# Add changes
-git add .
-
-# Create commit
-git commit -m "fix(component): message"
-```
-
-Create a PR:
-https://guides.github.com/activities/forking/
-
-
-### Summary
-
-```bash
-# Clone repo
-git clone git@github.com:ionic-team/ionic.git
-
-# Move to ionic/core folder
-cd ionic/core
-
-# Install npm dependencies
-npm i
-
-# Run dev server
-npm start
-
-# Run test suite
-npm run validate
-```
-
--- a/core/api.txt
+++ b/core/api.txt
@@ -85,6 +85,7 @@ ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
 ion-back-button,prop,disabled,boolean,false,false,true
 ion-back-button,prop,icon,null | string | undefined,undefined,false,false
 ion-back-button,prop,mode,"ios" | "md",undefined,false,false
+ion-back-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-back-button,css-prop,--background
@@ -119,6 +120,9 @@ ion-back-button,css-prop,--padding-start
 ion-back-button,css-prop,--padding-top
 ion-back-button,css-prop,--ripple-color
 ion-back-button,css-prop,--transition
+ion-back-button,part,icon
+ion-back-button,part,native
+ion-back-button,part,text

 ion-backdrop,shadow
 ion-backdrop,prop,stopPropagation,boolean,true,false,false
@@ -146,6 +150,7 @@ ion-button,prop,fill,"clear" | "default" | "outline" | "solid" | undefined,undef
 ion-button,prop,href,string | undefined,undefined,false,false
 ion-button,prop,mode,"ios" | "md",undefined,false,false
 ion-button,prop,rel,string | undefined,undefined,false,false
+ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-button,prop,shape,"round" | undefined,undefined,false,true
 ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true
@@ -177,6 +182,7 @@ ion-button,css-prop,--padding-start
 ion-button,css-prop,--padding-top
 ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
+ion-button,part,native

 ion-buttons,scoped
 ion-buttons,prop,collapse,boolean,false,false,false
@@ -189,11 +195,13 @@ ion-card,prop,download,string | undefined,undefined,false,false
 ion-card,prop,href,string | undefined,undefined,false,false
 ion-card,prop,mode,"ios" | "md",undefined,false,false
 ion-card,prop,rel,string | undefined,undefined,false,false
+ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-card,css-prop,--background
 ion-card,css-prop,--color
+ion-card,part,native

 ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
@@ -288,7 +296,7 @@ ion-content,prop,scrollY,boolean,true,false,false
 ion-content,method,getScrollElement,getScrollElement() => Promise<HTMLElement>
 ion-content,method,scrollByPoint,scrollByPoint(x: number, y: number, duration: number) => Promise<void>
 ion-content,method,scrollToBottom,scrollToBottom(duration?: number) => Promise<void>
-ion-content,method,scrollToPoint,scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>
+ion-content,method,scrollToPoint,scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>
 ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
@@ -351,12 +359,14 @@ ion-fab,method,close,close() => Promise<void>

 ion-fab-button,shadow
 ion-fab-button,prop,activated,boolean,false,false,false
+ion-fab-button,prop,closeIcon,string,'close',false,false
 ion-fab-button,prop,color,string | undefined,undefined,false,false
 ion-fab-button,prop,disabled,boolean,false,false,false
 ion-fab-button,prop,download,string | undefined,undefined,false,false
 ion-fab-button,prop,href,string | undefined,undefined,false,false
 ion-fab-button,prop,mode,"ios" | "md",undefined,false,false
 ion-fab-button,prop,rel,string | undefined,undefined,false,false
+ion-fab-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-fab-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-fab-button,prop,show,boolean,false,false,false
 ion-fab-button,prop,size,"small" | undefined,undefined,false,false
@@ -377,6 +387,7 @@ ion-fab-button,css-prop,--border-radius
 ion-fab-button,css-prop,--border-style
 ion-fab-button,css-prop,--border-width
 ion-fab-button,css-prop,--box-shadow
+ion-fab-button,css-prop,--close-icon-font-size
 ion-fab-button,css-prop,--color
 ion-fab-button,css-prop,--color-activated
 ion-fab-button,css-prop,--color-focused
@@ -387,6 +398,8 @@ ion-fab-button,css-prop,--padding-start
 ion-fab-button,css-prop,--padding-top
 ion-fab-button,css-prop,--ripple-color
 ion-fab-button,css-prop,--transition
+ion-fab-button,part,close-icon
+ion-fab-button,part,native

 ion-fab-list,shadow
 ion-fab-list,prop,activated,boolean,false,false,false
@@ -492,6 +505,7 @@ ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-item,prop,mode,"ios" | "md",undefined,false,false
 ion-item,prop,rel,string | undefined,undefined,false,false
+ion-item,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-item,prop,target,string | undefined,undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
@@ -531,6 +545,7 @@ ion-item,css-prop,--padding-top
 ion-item,css-prop,--ripple-color
 ion-item,css-prop,--transition
 ion-item,part,detail-icon
+ion-item,part,native

 ion-item-divider,shadow
 ion-item-divider,prop,color,string | undefined,undefined,false,false
@@ -561,6 +576,7 @@ ion-item-option,prop,target,string | undefined,undefined,false,false
 ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item-option,css-prop,--background
 ion-item-option,css-prop,--color
+ion-item-option,part,native

 ion-item-options,none
 ion-item-options,prop,side,"end" | "start",'end',false,false
@@ -572,7 +588,7 @@ ion-item-sliding,method,close,close() => Promise<void>
 ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
 ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
 ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise<number>
-ion-item-sliding,method,open,open(side: "start" | "end" | undefined) => Promise<void>
+ion-item-sliding,method,open,open(side: Side | undefined) => Promise<void>
 ion-item-sliding,event,ionDrag,any,true

 ion-label,scoped
@@ -662,6 +678,7 @@ ion-menu-button,prop,autoHide,boolean,true,false,false
 ion-menu-button,prop,color,string | undefined,undefined,false,false
 ion-menu-button,prop,disabled,boolean,false,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,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-menu-button,css-prop,--background
 ion-menu-button,css-prop,--background-focused
@@ -676,6 +693,8 @@ 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-button,part,icon
+ion-menu-button,part,native

 ion-menu-toggle,shadow
 ion-menu-toggle,prop,autoHide,boolean,true,false,false
@@ -740,6 +759,7 @@ ion-nav,event,ionNavWillChange,void,false
 ion-nav-link,none
 ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-nav-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false

 ion-note,shadow
@@ -927,7 +947,7 @@ ion-router,none
 ion-router,prop,root,string,'/',false,false
 ion-router,prop,useHash,boolean,true,false,false
 ion-router,method,back,back() => Promise<void>
-ion-router,method,push,push(url: string, direction?: RouterDirection) => Promise<boolean>
+ion-router,method,push,push(url: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>
 ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true

@@ -935,6 +955,7 @@ ion-router-link,shadow
 ion-router-link,prop,color,string | undefined,undefined,false,false
 ion-router-link,prop,href,string | undefined,undefined,false,false
 ion-router-link,prop,rel,string | undefined,undefined,false,false
+ion-router-link,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-router-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-router-link,prop,target,string | undefined,undefined,false,false
 ion-router-link,css-prop,--background
@@ -1029,6 +1050,8 @@ ion-segment-button,css-prop,--padding-end
 ion-segment-button,css-prop,--padding-start
 ion-segment-button,css-prop,--padding-top
 ion-segment-button,css-prop,--transition
+ion-segment-button,part,indicator
+ion-segment-button,part,native

 ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false
@@ -1166,6 +1189,7 @@ ion-tab-button,css-prop,--padding-end
 ion-tab-button,css-prop,--padding-start
 ion-tab-button,css-prop,--padding-top
 ion-tab-button,css-prop,--ripple-color
+ion-tab-button,part,native

 ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "5.1.1",
+  "version": "5.2.3",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -30,29 +30,29 @@
    "loader/"
  ],
  "dependencies": {
-    "ionicons": "^5.0.1",
+    "ionicons": "^5.1.2",
    "tslib": "^1.10.0"
  },
  "devDependencies": {
-    "@stencil/core": "1.13.0",
-    "@stencil/sass": "1.3.1",
-    "@types/jest": "24.9.1",
-    "@types/node": "12.12.3",
-    "@types/puppeteer": "1.19.1",
+    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-virtual": "^2.0.3",
+    "@stencil/core": "1.14.0",
+    "@stencil/sass": "1.3.2",
+    "@types/jest": "26.0.3",
+    "@types/node": "14.0.14",
+    "@types/puppeteer": "3.0.0",
    "@types/swiper": "5.3.1",
-    "aws-sdk": "^2.497.0",
+    "aws-sdk": "^2.705.0",
    "clean-css-cli": "^4.1.11",
    "domino": "^2.1.3",
-    "fs-extra": "^8.0.1",
-    "jest": "24.9.0",
-    "jest-cli": "24.9.0",
+    "fs-extra": "^9.0.1",
+    "jest": "26.1.0",
+    "jest-cli": "26.1.0",
    "np": "^5.0.3",
    "pixelmatch": "4.0.2",
    "puppeteer": "1.20.0",
-    "rollup": "1.32.0",
-    "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-virtual": "^1.0.1",
-    "sass": "^1.22.9",
+    "rollup": "^2.18.1",
+    "sass": "^1.26.9",
    "stylelint": "10.1.0",
    "stylelint-order": "3.0.1",
    "swiper": "5.4.1",
--- a/core/scripts/swiper.rollup.config.js
+++ b/core/scripts/swiper.rollup.config.js
@@ -1,4 +1,4 @@
-import resolve from 'rollup-plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve';

 export default {
  input: 'src/components/slides/swiper/swiper.js',
--- a/core/scripts/treeshaking.js
+++ b/core/scripts/treeshaking.js
@@ -1,7 +1,7 @@

 const path = require('path');
 const { rollup } = require('rollup');
-const virtual = require('rollup-plugin-virtual');
+const virtual = require('@rollup/plugin-virtual');
 const fs = require('fs');

 function main() {
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -250,7 +250,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
        onIonBackdropTap={this.onBackdropTap}
      >
        <ion-backdrop tappable={this.backdropDismiss}/>
-        <div class="action-sheet-wrapper ion-wrapper" role="dialog"  ref={el => this.wrapperEl = el}>
+        <div class="action-sheet-wrapper" role="dialog" ref={el => this.wrapperEl = el}>
          <div class="action-sheet-container">
            <div class="action-sheet-group" ref={el => this.groupEl = el}>
              {this.header !== undefined &&
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -514,7 +514,7 @@ export class Alert implements ComponentInterface, OverlayInterface {

        <ion-backdrop tappable={this.backdropDismiss}/>

-        <div class="alert-wrapper ion-wrapper" ref={el => this.wrapperEl = el}>
+        <div class="alert-wrapper" ref={el => this.wrapperEl = el}>

          <div class="alert-head">
            {header && <h2 id={hdrId} class="alert-title">{header}</h2>}
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -2,12 +2,16 @@ import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/

 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Color } from '../../interface';
+import { AnimationBuilder, Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';

 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML button element that wraps all child elements.
+ * @part icon - The back button icon (uses ion-icon).
+ * @part text - The back button text.
 */
@Component({
  tag: 'ion-back-button',
@@ -53,6 +57,12 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   */
  @Prop() type: 'submit' | 'reset' | 'button' = 'button';

+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
  componentWillLoad() {
    if (this.defaultHref === undefined) {
      this.defaultHref = config.get('backButtonDefaultHref');
@@ -99,9 +109,9 @@ export class BackButton implements ComponentInterface, ButtonInterface {
    ev.preventDefault();

    if (nav && await nav.canGoBack()) {
-      return nav.pop({ skipIfBusy: true });
+      return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
    }
-    return openURL(this.defaultHref, ev, 'back');
+    return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
  }

  render() {
@@ -126,10 +136,16 @@ export class BackButton implements ComponentInterface, ButtonInterface {
          'show-back-button': showBackButton
        }}
      >
-        <button type={type} disabled={disabled} class="button-native" aria-label={backButtonText || 'back'}>
+        <button
+          type={type}
+          disabled={disabled}
+          class="button-native"
+          part="native"
+          aria-label={backButtonText || 'back'}
+        >
          <span class="button-inner">
-            {backButtonIcon && <ion-icon icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
-            {backButtonText && <span aria-hidden="true" class="button-text">{backButtonText}</span>}
+            {backButtonIcon && <ion-icon part="icon" icon={backButtonIcon} aria-hidden="true" lazy={false}></ion-icon>}
+            {backButtonText && <span part="text" aria-hidden="true" class="button-text">{backButtonText}</span>}
          </span>
          {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
        </button>
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -301,15 +301,25 @@ export class BackButtonExample {

 ## Properties

-| Property      | Attribute      | Description                                                                                                                                                                                                                                                            | Type                              | Default     |
-| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
-| `color`       | `color`        | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`             | `undefined` |
-| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history.                                                                                                                                                                                                       | `string \| undefined`             | `undefined` |
-| `disabled`    | `disabled`     | If `true`, the user cannot interact with the button.                                                                                                                                                                                                                   | `boolean`                         | `false`     |
-| `icon`        | `icon`         | The icon name to use for the back button.                                                                                                                                                                                                                              | `null \| string \| undefined`     | `undefined` |
-| `mode`        | `mode`         | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                   | `undefined` |
-| `text`        | `text`         | The text to display in the back button.                                                                                                                                                                                                                                | `null \| string \| undefined`     | `undefined` |
-| `type`        | `type`         | The type of the button.                                                                                                                                                                                                                                                | `"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` |
+| `defaultHref`     | `default-href` | The url to navigate back to by default when there is no history.                                                                                                                                                                                                       | `string \| undefined`                                   | `undefined` |
+| `disabled`        | `disabled`     | If `true`, the user cannot interact with the button.                                                                                                                                                                                                                   | `boolean`                                               | `false`     |
+| `icon`            | `icon`         | The icon name to use for the back button.                                                                                                                                                                                                                              | `null \| string \| undefined`                           | `undefined` |
+| `mode`            | `mode`         | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                         | `undefined` |
+| `routerAnimation` | --             | When using a router, it specifies the transition animation when navigating to another page.                                                                                                                                                                            | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `text`            | `text`         | The text to display in the back button.                                                                                                                                                                                                                                | `null \| string \| undefined`                           | `undefined` |
+| `type`            | `type`         | The type of the button.                                                                                                                                                                                                                                                | `"button" \| "reset" \| "submit"`                       | `'button'`  |
+
+
+## Shadow Parts
+
+| Part       | Description                                                   |
+| ---------- | ------------------------------------------------------------- |
+| `"icon"`   | The back button icon (uses ion-icon).                         |
+| `"native"` | The native HTML button element that wraps all child elements. |
+| `"text"`   | The back button text.                                         |


 ## CSS Custom Properties
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';

 import { getIonMode } from '../../global/ionic-global';
-import { Color, RouterDirection } from '../../interface';
+import { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { hasShadowDom } from '../../utils/helpers';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@@ -13,6 +13,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 * @slot icon-only - Should be used on an icon in a button that has no text.
 * @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
 * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
+ *
+ * @part native - The native HTML button or anchor element that wraps all child elements.
 */
@Component({
  tag: 'ion-button',
@@ -65,6 +67,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   */
  @Prop() routerDirection: RouterDirection = 'forward';

+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
  /**
   * This attribute instructs browsers to download a URL instead of navigating to
   * it, so the user will be prompted to save it as a local file. If the attribute
@@ -146,7 +154,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf

  private handleClick = (ev: Event) => {
    if (this.type === 'button') {
-      openURL(this.href, ev, this.routerDirection);
+      openURL(this.href, ev, this.routerDirection, this.routerAnimation);

    } else if (hasShadowDom(this.el)) {
      // this button wants to specifically submit a form
@@ -216,6 +224,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
        <TagType
          {...attrs}
          class="button-native"
+          part="native"
          disabled={disabled}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -291,6 +291,7 @@ export class ButtonExample {
 | `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` |
 | `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`                                       | `undefined` |
+| `routerAnimation` | --                 | When using a router, it specifies the transition animation when navigating to another page using `href`.                                                                                                                                                                                  | `((baseEl: any, opts?: any) => Animation) \| undefined`     | `undefined` |
 | `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`                             | `'forward'` |
 | `shape`           | `shape`            | The button shape.                                                                                                                                                                                                                                                                         | `"round" \| undefined`                                      | `undefined` |
 | `size`            | `size`             | The button size.                                                                                                                                                                                                                                                                          | `"default" \| "large" \| "small" \| undefined`              | `undefined` |
@@ -317,6 +318,13 @@ export class ButtonExample {
 | `"start"`     | Content is placed to the left of the button text in LTR, and to the right in RTL. |


+## Shadow Parts
+
+| Part       | Description                                                             |
+| ---------- | ----------------------------------------------------------------------- |
+| `"native"` | The native HTML button or anchor element that wraps all child elements. |
+
+
 ## CSS Custom Properties

 | Name                             | Description                                                                                               |
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -1,12 +1,14 @@
 import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';

 import { getIonMode } from '../../global/ionic-global';
-import { Color, Mode, RouterDirection } from '../../interface';
+import { AnimationBuilder, Color, Mode, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, openURL } from '../../utils/theme';

 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML button, anchor, or div element that wraps all child elements.
 */
@Component({
  tag: 'ion-card',
@@ -66,6 +68,12 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
   */
  @Prop() routerDirection: RouterDirection = 'forward';

+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
  /**
   * Specifies where to display the linked URL.
   * Only applies when an `href` is provided.
@@ -85,7 +93,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
        <slot></slot>
      ];
    }
-    const { href, routerDirection } = this;
+    const { href, routerAnimation, routerDirection } = this;
    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
    const attrs = (TagType === 'button')
      ? { type: this.type }
@@ -100,8 +108,9 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac
      <TagType
        {...attrs}
        class="card-native"
+        part="native"
        disabled={this.disabled}
-        onClick={(ev: Event) => openURL(href, ev, routerDirection)}
+        onClick={(ev: Event) => openURL(href, ev, routerDirection, routerAnimation)}
      >
        <slot></slot>
        {clickable && mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -254,18 +254,26 @@ export class CardExample {

 ## 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`     |
-| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`             | `undefined` |
-| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`             | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                   | `undefined` |
-| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`             | `undefined` |
-| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`   | `'forward'` |
-| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`             | `undefined` |
-| `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     |
+| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `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`     |
+| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`                                   | `undefined` |
+| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`                                   | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                                         | `undefined` |
+| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`                                   | `undefined` |
+| `routerAnimation` | --                 | When using a router, it specifies the transition animation when navigating to another page using `href`.                                                                                                                                                                                  | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`                         | `'forward'` |
+| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`                                   | `undefined` |
+| `type`            | `type`             | The type of the button. Only used when an `onclick` or `button` property is present.                                                                                                                                                                                                      | `"button" \| "reset" \| "submit"`                       | `'button'`  |
+
+
+## Shadow Parts
+
+| Part       | Description                                                                   |
+| ---------- | ----------------------------------------------------------------------------- |
+| `"native"` | The native HTML button, anchor, or div element that wraps all child elements. |


 ## CSS Custom Properties
--- a/core/src/components/content/readme.md
+++ b/core/src/components/content/readme.md
@@ -196,7 +196,7 @@ Type: `Promise<void>`



-### `scrollToPoint(x: number | null | undefined, y: number | null | undefined, duration?: number) => Promise<void>`
+### `scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>`

 Scroll to a specified X/Y location in the component.

--- a/core/src/components/fab-button/fab-button.ios.scss
+++ b/core/src/components/fab-button/fab-button.ios.scss
@@ -15,6 +15,7 @@
  --color: #{$fab-ios-text-color};
  --box-shadow: #{$fab-ios-box-shadow};
  --transition: #{$fab-ios-transition};
+  --close-icon-font-size: #{$fab-ios-icon-font-size};
 }

 :host(.ion-activated) {
@@ -23,11 +24,11 @@
  --transition: #{$fab-ios-transition-activated};
 }

-::slotted(ion-icon),
-.close-icon {
+::slotted(ion-icon) {
  font-size: $fab-ios-icon-font-size;
 }

+
 // FAB buttons in a list
 // --------------------------------------------------

@@ -112,4 +113,4 @@
  :host(.ion-color.ion-activated.fab-button-translucent) .button-native {
    background: #{current-color(base)};
  }
-}
+}
--- a/core/src/components/fab-button/fab-button.md.scss
+++ b/core/src/components/fab-button/fab-button.md.scss
@@ -21,14 +21,14 @@
    opacity 15ms linear 30ms,
    transform 270ms cubic-bezier(0, 0, .2, 1) 0ms
  };
+  --close-icon-font-size: #{$fab-md-icon-font-size};
 }

 :host(.ion-activated) {
  --box-shadow: #{$fab-md-box-shadow-activated};
 }

-::slotted(ion-icon),
-.close-icon {
+::slotted(ion-icon) {
  font-size: $fab-md-icon-font-size;
 }

--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -20,6 +20,8 @@
   *
   * @prop --transition: Transition of the button
   *
+   * @prop --close-icon-font-size: Font size of the close icon
+   *
   * @prop --border-radius: Border radius of the button
   * @prop --border-width: Border width of the button
   * @prop --border-style: Border style of the button
@@ -207,14 +209,11 @@
 // --------------------------------------------------

 .close-icon {
+  @include margin(0, auto);
  @include position(0, 0, null, 0);

-  display: flex;
  position: absolute;

-  align-items: center;
-  justify-content: center;
-
  height: 100%;

  transform: scale(.4) rotateZ(-45deg);
@@ -222,11 +221,14 @@
  transition: all ease-in-out 300ms;
  transition-property: transform, opacity;

+  font-size: var(--close-icon-font-size);
+
  opacity: 0;

  z-index: 1;
 }

+
 // FAB Animation
 // --------------------------------------------------

--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,12 +1,15 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';

 import { getIonMode } from '../../global/ionic-global';
-import { Color, RouterDirection } from '../../interface';
+import { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';

 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML button or anchor element that wraps all child elements.
+ * @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
 */
@Component({
  tag: 'ion-fab-button',
@@ -62,6 +65,12 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
   */
  @Prop() routerDirection: RouterDirection = 'forward';

+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
  /**
   * Specifies where to display the linked URL.
   * Only applies when an `href` is provided.
@@ -87,10 +96,17 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
  @Prop() type: 'submit' | 'reset' | 'button' = 'button';

  /**
-   * The size of the button. Set this to `small` in order to have a mini fab.
+   * The size of the button. Set this to `small` in order to have a mini fab button.
   */
  @Prop() size?: 'small';

+  /**
+   * The icon name to use for the close icon. This will appear when the fab button
+   * is pressed. Only applies if it is the main button inside of a fab containing a
+   * fab list.
+   */
+  @Prop() closeIcon = 'close';
+
  /**
   * Emitted when the button has focus.
   */
@@ -144,14 +160,13 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
        <TagType
          {...attrs}
          class="button-native"
+          part="native"
          disabled={disabled}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
-          onClick={(ev: Event) => openURL(href, ev, this.routerDirection)}
+          onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
        >
-          <span class="close-icon">
-            <ion-icon name="close" lazy={false}></ion-icon>
-          </span>
+          <ion-icon icon={this.closeIcon} part="close-icon" class="close-icon" lazy={false}></ion-icon>
          <span class="button-inner">
            <slot></slot>
          </span>
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -137,21 +137,23 @@ export class FabButtonExample {

 ## Properties

-| Property          | Attribute          | Description                                                                                                                                                                                                                                                                               | Type                              | Default     |
-| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
-| `activated`       | `activated`        | If `true`, the fab button will be show a close icon.                                                                                                                                                                                                                                      | `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 fab button.                                                                                                                                                                                                                                  | `boolean`                         | `false`     |
-| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`             | `undefined` |
-| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`             | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                   | `undefined` |
-| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`             | `undefined` |
-| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`   | `'forward'` |
-| `show`            | `show`             | If `true`, the fab button will show when in a fab-list.                                                                                                                                                                                                                                   | `boolean`                         | `false`     |
-| `size`            | `size`             | The size of the button. Set this to `small` in order to have a mini fab.                                                                                                                                                                                                                  | `"small" \| undefined`            | `undefined` |
-| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`             | `undefined` |
-| `translucent`     | `translucent`      | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).                                                                 | `boolean`                         | `false`     |
-| `type`            | `type`             | The type of the button.                                                                                                                                                                                                                                                                   | `"button" \| "reset" \| "submit"` | `'button'`  |
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                                               | Type                                                    | Default     |
+| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `activated`       | `activated`        | If `true`, the fab button will be show a close icon.                                                                                                                                                                                                                                      | `boolean`                                               | `false`     |
+| `closeIcon`       | `close-icon`       | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.                                                                                                                    | `string`                                                | `'close'`   |
+| `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 fab button.                                                                                                                                                                                                                                  | `boolean`                                               | `false`     |
+| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`                                   | `undefined` |
+| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`                                   | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                                         | `undefined` |
+| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`                                   | `undefined` |
+| `routerAnimation` | --                 | When using a router, it specifies the transition animation when navigating to another page using `href`.                                                                                                                                                                                  | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`                         | `'forward'` |
+| `show`            | `show`             | If `true`, the fab button will show when in a fab-list.                                                                                                                                                                                                                                   | `boolean`                                               | `false`     |
+| `size`            | `size`             | The size of the button. Set this to `small` in order to have a mini fab button.                                                                                                                                                                                                           | `"small" \| undefined`                                  | `undefined` |
+| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`                                   | `undefined` |
+| `translucent`     | `translucent`      | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).                                                                 | `boolean`                                               | `false`     |
+| `type`            | `type`             | The type of the button.                                                                                                                                                                                                                                                                   | `"button" \| "reset" \| "submit"`                       | `'button'`  |


 ## Events
@@ -162,6 +164,14 @@ export class FabButtonExample {
 | `ionFocus` | Emitted when the button has focus.   | `CustomEvent<void>` |


+## Shadow Parts
+
+| Part           | Description                                                             |
+| -------------- | ----------------------------------------------------------------------- |
+| `"close-icon"` | The close icon that is displayed when a fab list opens (uses ion-icon). |
+| `"native"`     | The native HTML button or anchor element that wraps all child elements. |
+
+
 ## CSS Custom Properties

 | Name                             | Description                                                                                               |
@@ -178,6 +188,7 @@ export class FabButtonExample {
 | `--border-style`                 | Border style of the button                                                                                |
 | `--border-width`                 | Border width of the button                                                                                |
 | `--box-shadow`                   | Box shadow of the button                                                                                  |
+| `--close-icon-font-size`         | Font size of the close icon                                                                               |
 | `--color`                        | Text color of the button                                                                                  |
 | `--color-activated`              | Text color of the button when pressed                                                                     |
 | `--color-focused`                | Text color of the button when focused with the tab key                                                    |
--- a/core/src/components/fab-button/test/standalone/index.html
+++ b/core/src/components/fab-button/test/standalone/index.html
@@ -71,6 +71,22 @@
  <ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
  <ion-fab-button class="fab-button-in-list custom-border ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>

+  <ion-fab slot="fixed" horizontal="center" vertical="bottom">
+    <ion-fab-button class="custom-close"><ion-icon name="star"></ion-icon></ion-fab-button>
+
+    <ion-fab-list side="top">
+      <ion-fab-button>
+        <ion-icon name="heart"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="square"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button>
+        <ion-icon name="triangle"></ion-icon>
+      </ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
  <style>
    ion-fab-button {
      display: inline-block;
@@ -104,6 +120,12 @@
      --border-style: dashed;
      --border-color: red;
    }
+
+    .custom-close::part(close-icon) {
+      color: red;
+
+      font-size: 44px;
+    }
  </style>
 </body>
 </html>
--- a/core/src/components/fab/test/basic/index.html
+++ b/core/src/components/fab/test/basic/index.html
@@ -200,7 +200,6 @@
      f:last-of-type {
        background: yellow;
      }
-
    </style>
  </ion-app>
 </body>
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -53,7 +53,11 @@ export class Img implements ComponentInterface {
    if (this.src === undefined) {
      return;
    }
-    if ('IntersectionObserver' in window) {
+    if (
+      typeof (window as any) !== 'undefined' &&
+      'IntersectionObserver' in window &&
+      'IntersectionObserverEntry' in window &&
+      'isIntersecting' in window.IntersectionObserverEntry.prototype) {
      this.removeIO();
      this.io = new IntersectionObserver(data => {
        // because there will only ever be one instance
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -393,7 +393,7 @@ export class Input implements ComponentInterface {
          placeholder={this.placeholder || ''}
          readOnly={this.readonly}
          required={this.required}
-          spellcheck={this.spellcheck ? 'true' : undefined}
+          spellcheck={this.spellcheck}
          step={this.step}
          size={this.size}
          tabindex={this.tabindex}
@@ -405,6 +405,7 @@ export class Input implements ComponentInterface {
          onKeyDown={this.onKeydown}
        />
        {(this.clearInput && !this.readonly && !this.disabled) && <button
+          aria-label="reset"
          type="button"
          class="input-clear-icon"
          tabindex="-1"
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -14,6 +14,8 @@ import { createColorClasses } from '../../utils/theme';
 * @slot icon-only - Should be used on an icon in an option that has no text.
 * @slot bottom - Content is placed below the option text.
 * @slot end - Content is placed to the right of the option text in LTR, and to the left in RTL.
+ *
+ * @part native - The native HTML button or anchor element that wraps all child elements.
 */
@Component({
  tag: 'ion-item-option',
@@ -110,6 +112,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
        <TagType
          {...attrs}
          class="button-native"
+          part="native"
          disabled={disabled}
        >
          <span class="button-inner">
--- a/core/src/components/item-option/readme.md
+++ b/core/src/components/item-option/readme.md
@@ -34,6 +34,13 @@ action for the item.
 | `"top"`       | Content is placed above the option text.                                          |


+## Shadow Parts
+
+| Part       | Description                                                             |
+| ---------- | ----------------------------------------------------------------------- |
+| `"native"` | The native HTML button or anchor element that wraps all child elements. |
+
+
 ## CSS Custom Properties

 | Name           | Description                   |
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -860,7 +860,7 @@ Type: `Promise<number>`



-### `open(side: "start" | "end" | undefined) => Promise<void>`
+### `open(side: Side | undefined) => Promise<void>`

 Open the sliding item.

--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Host, Listen, Prop, State, forceUpdate, h } from '@stencil/core';

 import { getIonMode } from '../../global/ionic-global';
-import { Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface';
+import { AnimationBuilder, Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';

@@ -12,6 +12,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
 * @slot end - Content is placed to the right of the item text in LTR, and to the left in RTL.
 *
+ * @part native - The native HTML button, anchor or div element that wraps all child elements.
 * @part detail-icon - The chevron icon for the item. Only applies when `detail="true"`.
 */
@Component({
@@ -85,6 +86,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   */
  @Prop() lines?: 'full' | 'inset' | 'none';

+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
  /**
   * When using a router, it specifies the transition direction when navigating to
   * another page using `href`.
@@ -170,7 +177,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
  }

  render() {
-    const { detail, detailIcon, download, lines, disabled, href, rel, target, routerDirection } = this;
+    const { detail, detailIcon, download, lines, disabled, href, rel, target, routerAnimation, routerDirection } = this;
    const childStyles = {};
    const mode = getIonMode(this);
    const clickable = this.isClickable();
@@ -208,8 +215,9 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
          <TagType
            {...attrs}
            class="item-native"
+            part="native"
            disabled={disabled}
-            onClick={(ev: Event) => openURL(href, ev, routerDirection)}
+            onClick={(ev: Event) => openURL(href, ev, routerDirection, routerAnimation)}
          >
            <slot name="start"></slot>
            <div class="item-inner">
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -1783,21 +1783,22 @@ export class ItemExample {

 ## Properties

-| Property          | Attribute          | Description                                                                                                                                                                                                                                                                               | Type                                       | Default             |
-| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------- |
-| `button`          | `button`           | If `true`, a button tag will be rendered and the item 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`         |
-| `detail`          | `detail`           | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.                                                                                                                                          | `boolean \| undefined`                     | `undefined`         |
-| `detailIcon`      | `detail-icon`      | The icon to use when `detail` is set to `true`.                                                                                                                                                                                                                                           | `string`                                   | `'chevron-forward'` |
-| `disabled`        | `disabled`         | If `true`, the user cannot interact with the item.                                                                                                                                                                                                                                        | `boolean`                                  | `false`             |
-| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`                      | `undefined`         |
-| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`                      | `undefined`         |
-| `lines`           | `lines`            | How the bottom border should be displayed on the item.                                                                                                                                                                                                                                    | `"full" \| "inset" \| "none" \| undefined` | `undefined`         |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                            | `undefined`         |
-| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`                      | `undefined`         |
-| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`            | `'forward'`         |
-| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`                      | `undefined`         |
-| `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             |
+| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------- |
+| `button`          | `button`           | If `true`, a button tag will be rendered and the item 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`         |
+| `detail`          | `detail`           | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.                                                                                                                                          | `boolean \| undefined`                                  | `undefined`         |
+| `detailIcon`      | `detail-icon`      | The icon to use when `detail` is set to `true`.                                                                                                                                                                                                                                           | `string`                                                | `'chevron-forward'` |
+| `disabled`        | `disabled`         | If `true`, the user cannot interact with the item.                                                                                                                                                                                                                                        | `boolean`                                               | `false`             |
+| `download`        | `download`         | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined`                                   | `undefined`         |
+| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                                   | `string \| undefined`                                   | `undefined`         |
+| `lines`           | `lines`            | How the bottom border should be displayed on the item.                                                                                                                                                                                                                                    | `"full" \| "inset" \| "none" \| undefined`              | `undefined`         |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                                                                                                                                                                                         | `"ios" \| "md"`                                         | `undefined`         |
+| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                                    | `string \| undefined`                                   | `undefined`         |
+| `routerAnimation` | --                 | When using a router, it specifies the transition animation when navigating to another page using `href`.                                                                                                                                                                                  | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined`         |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                                                  | `"back" \| "forward" \| "root"`                         | `'forward'`         |
+| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`                                   | `undefined`         |
+| `type`            | `type`             | The type of the button. Only used when an `onclick` or `button` property is present.                                                                                                                                                                                                      | `"button" \| "reset" \| "submit"`                       | `'button'`          |


 ## Slots
@@ -1811,9 +1812,10 @@ export class ItemExample {

 ## Shadow Parts

-| Part            | Description                                                       |
-| --------------- | ----------------------------------------------------------------- |
-| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`. |
+| Part            | Description                                                                  |
+| --------------- | ---------------------------------------------------------------------------- |
+| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`.            |
+| `"native"`      | The native HTML button, anchor or div element that wraps all child elements. |


 ## CSS Custom Properties
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -194,7 +194,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
        }}
      >
        <ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss} />
-        <div class="loading-wrapper ion-wrapper" role="dialog">
+        <div class="loading-wrapper" role="dialog">
          {spinner && (
            <div class="loading-spinner">
              <ion-spinner name={spinner} aria-hidden="true" />
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -8,6 +8,12 @@ import { menuController } from '../../utils/menu-controller';
 import { createColorClasses, hostContext } from '../../utils/theme';
 import { updateVisibility } from '../menu-toggle/menu-toggle-util';

+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML button element that wraps all child elements.
+ * @part icon - The menu button icon (uses ion-icon).
+ */
@Component({
  tag: 'ion-menu-button',
  styleUrls: {
@@ -95,11 +101,12 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
          {...attrs}
          disabled={disabled}
          class="button-native"
+          part="native"
          aria-label="menu"
        >
          <span class="button-inner">
            <slot>
-              <ion-icon icon={menuIcon} mode={mode} lazy={false} aria-hidden="true"></ion-icon>
+              <ion-icon part="icon" icon={menuIcon} mode={mode} lazy={false} aria-hidden="true"></ion-icon>
            </slot>
          </span>
          {mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
--- a/core/src/components/menu-button/readme.md
+++ b/core/src/components/menu-button/readme.md
@@ -14,9 +14,18 @@ Menu Button is component that automatically creates the icon and functionality t
 | `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 menu button.                                                                                                                                                                                                              | `boolean`                         | `false`     |
 | `menu`     | `menu`      | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle                                                                                                                 | `string \| undefined`             | `undefined` |
+| `mode`     | `mode`      | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                   | `undefined` |
 | `type`     | `type`      | The type of the button.                                                                                                                                                                                                                                                | `"button" \| "reset" \| "submit"` | `'button'`  |


+## Shadow Parts
+
+| Part       | Description                                                   |
+| ---------- | ------------------------------------------------------------- |
+| `"icon"`   | The menu button icon (uses ion-icon).                         |
+| `"native"` | The native HTML button element that wraps all child elements. |
+
+
 ## CSS Custom Properties

 | Name                           | Description                                                                                               |
--- a/core/src/components/modal/modal.ios.scss
+++ b/core/src/components/modal/modal.ios.scss
@@ -21,14 +21,14 @@

@media screen and (max-width: 767px) {
  @supports (width: max(0px, 1px)) {
-    :host(.modal-card) .modal-wrapper {
-      height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
+    :host(.modal-card) {
+      --height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
    }
  }

  @supports not (width: max(0px, 1px)) {
-    :host(.modal-card) .modal-wrapper {
-      height: calc(100% - 40px);
+    :host(.modal-card) {
+      --height: calc(100% - 40px);
    }
  }

--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -291,7 +291,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
        {mode === 'ios' && <div class="modal-shadow"></div>}
        <div
          role="dialog"
-          class="modal-wrapper ion-wrapper"
+          class="modal-wrapper"
        >
        </div>
      </Host>
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -173,6 +173,8 @@ export class CalendarComponentModule {}

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.

 ```javascript
@@ -302,6 +304,8 @@ console.log(data);

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 ```javascript
 const modalElement = document.createElement('ion-modal');
 modalElement.component = 'modal-page';
@@ -346,6 +350,8 @@ export const ModalExample: React.FC = () => {

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 ```tsx
 <IonModal
  isOpen={showModal}
@@ -496,6 +502,8 @@ console.log(data);

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 ```tsx
 import { Component, Element, h } from '@stencil/core';

--- a/core/src/components/modal/usage/angular.md
+++ b/core/src/components/modal/usage/angular.md
@@ -130,6 +130,8 @@ export class CalendarComponentModule {}

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens.

 ```javascript
--- a/core/src/components/modal/usage/javascript.md
+++ b/core/src/components/modal/usage/javascript.md
@@ -84,6 +84,8 @@ console.log(data);

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 ```javascript
 const modalElement = document.createElement('ion-modal');
 modalElement.component = 'modal-page';
--- a/core/src/components/modal/usage/react.md
+++ b/core/src/components/modal/usage/react.md
@@ -21,6 +21,8 @@ export const ModalExample: React.FC = () => {

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 ```tsx
 <IonModal
  isOpen={showModal}
--- a/core/src/components/modal/usage/stencil.md
+++ b/core/src/components/modal/usage/stencil.md
@@ -109,6 +109,8 @@ console.log(data);

 Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped.

+> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect.
+
 ```tsx
 import { Component, Element, h } from '@stencil/core';

--- a/core/src/components/nav-link/nav-link-utils.ts
+++ b/core/src/components/nav-link/nav-link-utils.ts
@@ -1,19 +1,19 @@
-import { ComponentProps, NavComponent } from '../../interface';
+import { AnimationBuilder, ComponentProps, NavComponent } from '../../interface';
 import { RouterDirection } from '../router/utils/interface';

-export const navLink = (el: HTMLElement, routerDirection: RouterDirection, component?: NavComponent, componentProps?: ComponentProps) => {
+export const navLink = (el: HTMLElement, routerDirection: RouterDirection, component?: NavComponent, componentProps?: ComponentProps, routerAnimation?: AnimationBuilder) => {
  const nav = el.closest('ion-nav');
  if (nav) {
    if (routerDirection === 'forward') {
      if (component !== undefined) {
-        return nav.push(component, componentProps, { skipIfBusy: true });
+        return nav.push(component, componentProps, { skipIfBusy: true, animationBuilder: routerAnimation });
      }
    } else if (routerDirection === 'root') {
      if (component !== undefined) {
-        return nav.setRoot(component, componentProps, { skipIfBusy: true });
+        return nav.setRoot(component, componentProps, { skipIfBusy: true, animationBuilder: routerAnimation });
      }
    } else if (routerDirection === 'back') {
-      return nav.pop({ skipIfBusy: true });
+      return nav.pop({ skipIfBusy: true, animationBuilder: routerAnimation });
    }
  }
  return Promise.resolve(false);
--- a/core/src/components/nav-link/nav-link.tsx
+++ b/core/src/components/nav-link/nav-link.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';

-import { ComponentProps, NavComponent, RouterDirection } from '../../interface';
+import { AnimationBuilder, ComponentProps, NavComponent, RouterDirection } from '../../interface';

 import { navLink } from './nav-link-utils';

@@ -25,8 +25,13 @@ export class NavLink implements ComponentInterface {
   */
  @Prop() routerDirection: RouterDirection = 'forward';

+  /**
+   * The transition animation when navigating to another page.
+   */
+  @Prop() routerAnimation?: AnimationBuilder;
+
  private onClick = () => {
-    return navLink(this.el, this.routerDirection, this.component, this.componentProps);
+    return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
  }

  render() {
--- a/core/src/components/nav-link/readme.md
+++ b/core/src/components/nav-link/readme.md
@@ -14,6 +14,7 @@ It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods
 | ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
 | `component`       | `component`        | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.                          | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` |
 | `componentProps`  | --                 | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. | `undefined \| { [key: string]: any; }`                                     | `undefined` |
+| `routerAnimation` | --                 | The transition animation when navigating to another page.                                                         | `((baseEl: any, opts?: any) => Animation) \| undefined`                    | `undefined` |
 | `routerDirection` | `router-direction` | The transition direction when navigating to another page.                                                         | `"back" \| "forward" \| "root"`                                            | `'forward'` |


--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -372,7 +372,8 @@ export class Nav implements NavOutlet {
  setRouteId(
    id: string,
    params: ComponentProps | undefined,
-    direction: RouterDirection
+    direction: RouterDirection,
+    animation?: AnimationBuilder
  ): Promise<RouteWrite> {
    const active = this.getActiveSync();
    if (matches(active, id, params)) {
@@ -410,15 +411,20 @@ export class Nav implements NavOutlet {
      if (viewController) {
        finish = this.popTo(viewController, {
          ...commonOpts,
-          direction: 'back'
+          direction: 'back',
+          animationBuilder: animation
        });
      } else if (direction === 'forward') {
-        finish = this.push(id, params, commonOpts);
+        finish = this.push(id, params, {
+          ...commonOpts,
+          animationBuilder: animation
+        });
      } else if (direction === 'back') {
        finish = this.setRoot(id, params, {
          ...commonOpts,
          direction: 'back',
-          animated: true
+          animated: true,
+          animationBuilder: animation
        });
      }
    }
@@ -623,6 +629,19 @@ export class Nav implements NavOutlet {
      const requiresTransition =
        (ti.enteringRequiresTransition || ti.leavingRequiresTransition) &&
        enteringView !== leavingView;
+      if (requiresTransition && ti.opts && leavingView) {
+        const isBackDirection = ti.opts.direction === 'back';
+
+        /**
+         * If heading back, use the entering page's animation
+         * unless otherwise specified by the developer.
+         */
+        if (isBackDirection) {
+          ti.opts.animationBuilder = ti.opts.animationBuilder || (enteringView && enteringView.animationBuilder);
+        }
+
+        leavingView.animationBuilder = ti.opts.animationBuilder;
+      }
      const result = requiresTransition
        ? await this.transition(enteringView!, leavingView, ti)
        : {
--- a/core/src/components/nav/view-controller.ts
+++ b/core/src/components/nav/view-controller.ts
@@ -1,4 +1,4 @@
-import { ComponentProps, FrameworkDelegate } from '../../interface';
+import { AnimationBuilder, ComponentProps, FrameworkDelegate } from '../../interface';
 import { attachComponent } from '../../utils/framework-delegate';
 import { assert } from '../../utils/helpers';

@@ -12,6 +12,7 @@ export class ViewController {
  nav?: any;
  element?: HTMLElement;
  delegate?: FrameworkDelegate;
+  animationBuilder?: AnimationBuilder;

  constructor(
    public component: any,
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -236,7 +236,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
          tappable={this.backdropDismiss}
        >
        </ion-backdrop>
-        <div class="picker-wrapper ion-wrapper" role="dialog">
+        <div class="picker-wrapper" role="dialog">
          <div class="picker-toolbar">
            {this.buttons.map(b => (
              <div class={buttonWrapperClass(b)}>
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -219,7 +219,7 @@ export class Popover implements ComponentInterface, OverlayInterface {
        onIonBackdropTap={this.onBackdropTap}
      >
        <ion-backdrop tappable={this.backdropDismiss} visible={this.showBackdrop}/>
-        <div class="popover-wrapper ion-wrapper">
+        <div class="popover-wrapper">
          <div class="popover-arrow"></div>
          <div class="popover-content"></div>
        </div>
--- a/core/src/components/reorder/readme.md
+++ b/core/src/components/reorder/readme.md
@@ -315,9 +315,9 @@ export class ReorderExample {

 ## Shadow Parts

-| Part     | Description                     |
-| -------- | ------------------------------- |
-| `"icon"` | The icon of the reorder handle. |
+| Part     | Description                                     |
+| -------- | ----------------------------------------------- |
+| `"icon"` | The icon of the reorder handle (uses ion-icon). |


 ## Dependencies
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -3,7 +3,7 @@ import { Component, ComponentInterface, Host, Listen, h } from '@stencil/core';
 import { getIonMode } from '../../global/ionic-global';

 /**
- * @part icon - The icon of the reorder handle.
+ * @part icon - The icon of the reorder handle (uses ion-icon).
 */
@Component({
  tag: 'ion-reorder',
--- a/core/src/components/router-link/readme.md
+++ b/core/src/components/router-link/readme.md
@@ -9,13 +9,14 @@ The router link component is used for navigating to a specified link. Similar to

 ## Properties

-| Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type                            | Default     |
-| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
-| `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`           | `undefined` |
-| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string \| undefined`           | `undefined` |
-| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                 | `string \| undefined`           | `undefined` |
-| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                               | `"back" \| "forward" \| "root"` | `'forward'` |
-| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                    | `string \| undefined`           | `undefined` |
+| Property          | Attribute          | Description                                                                                                                                                                                                                                                            | Type                                                    | Default     |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- |
+| `color`           | `color`            | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                   | `undefined` |
+| `href`            | `href`             | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.                                                                                                                                                | `string \| undefined`                                   | `undefined` |
+| `rel`             | `rel`              | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).                                                                                 | `string \| undefined`                                   | `undefined` |
+| `routerAnimation` | --                 | When using a router, it specifies the transition animation when navigating to another page using `href`.                                                                                                                                                               | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
+| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`.                                                                                                                                                               | `"back" \| "forward" \| "root"`                         | `'forward'` |
+| `target`          | `target`           | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                    | `string \| undefined`                                   | `undefined` |


 ## CSS Custom Properties
--- a/core/src/components/router-link/router-link.tsx
+++ b/core/src/components/router-link/router-link.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';

 import { getIonMode } from '../../global/ionic-global';
-import { Color, RouterDirection } from '../../interface';
+import { AnimationBuilder, Color, RouterDirection } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';

@Component({
@@ -36,6 +36,12 @@ export class RouterLink implements ComponentInterface {
   */
  @Prop() routerDirection: RouterDirection = 'forward';

+  /**
+   * When using a router, it specifies the transition animation when navigating to
+   * another page using `href`.
+   */
+  @Prop() routerAnimation: AnimationBuilder | undefined;
+
  /**
   * Specifies where to display the linked URL.
   * Only applies when an `href` is provided.
@@ -44,7 +50,7 @@ export class RouterLink implements ComponentInterface {
  @Prop() target: string | undefined;

  private onClick = (ev: Event) => {
-    openURL(this.href, ev, this.routerDirection);
+    openURL(this.href, ev, this.routerDirection, this.routerAnimation);
  }

  render() {
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -131,10 +131,11 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {

  /** @internal */
  @Method()
-  async setRouteId(id: string, params: ComponentProps | undefined, direction: RouterDirection): Promise<RouteWrite> {
+  async setRouteId(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder): Promise<RouteWrite> {
    const changed = await this.setRoot(id, params, {
      duration: direction === 'root' ? 0 : undefined,
      direction: direction === 'back' ? 'back' : 'forward',
+      animationBuilder: animation
    });
    return {
      changed,
@@ -186,7 +187,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
    await transition({
      mode,
      animated,
-      animationBuilder,
      enteringEl,
      leavingEl,
      baseEl: el,
@@ -194,7 +194,8 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
        ? ani => this.ani = ani
        : undefined
      ),
-      ...opts
+      ...opts,
+      animationBuilder,
    });

    // emit nav changed event
--- a/core/src/components/router/readme.md
+++ b/core/src/components/router/readme.md
@@ -78,7 +78,7 @@ Type: `Promise<void>`



-### `push(url: string, direction?: RouterDirection) => Promise<boolean>`
+### `push(url: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise<boolean>`

 Navigate to the specified URL.

--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';

-import { BackButtonEvent, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
+import { AnimationBuilder, BackButtonEvent, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
 import { debounce } from '../../utils/helpers';

 import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from './utils/constants';
@@ -92,7 +92,7 @@ export class Router implements ComponentInterface {
   * @param direction The direction of the animation. Defaults to `"forward"`.
   */
  @Method()
-  push(url: string, direction: RouterDirection = 'forward') {
+  push(url: string, direction: RouterDirection = 'forward', animation?: AnimationBuilder) {
    if (url.startsWith('.')) {
      url = (new URL(url, window.location.href)).pathname;
    }
@@ -101,7 +101,7 @@ export class Router implements ComponentInterface {
    const path = parsePath(url);
    const queryString = url.split('?')[1];
    this.setPath(path, direction, queryString);
-    return this.writeNavStateRoot(path, direction);
+    return this.writeNavStateRoot(path, direction, animation);
  }

  /**
@@ -173,7 +173,7 @@ export class Router implements ComponentInterface {
    const lastState = this.lastState;
    this.lastState = state;

-    if (state > lastState) {
+    if (state > lastState || (state >= lastState && lastState > 0)) {
      return ROUTER_INTENT_FORWARD;
    } else if (state < lastState) {
      return ROUTER_INTENT_BACK;
@@ -182,7 +182,7 @@ export class Router implements ComponentInterface {
    }
  }

-  private async writeNavStateRoot(path: string[] | null, direction: RouterDirection): Promise<boolean> {
+  private async writeNavStateRoot(path: string[] | null, direction: RouterDirection, animation?: AnimationBuilder): Promise<boolean> {
    if (!path) {
      console.error('[ion-router] URL is not part of the routing set');
      return false;
@@ -207,18 +207,19 @@ export class Router implements ComponentInterface {
    }

    // write DOM give
-    return this.safeWriteNavState(document.body, chain, direction, path, redirectFrom);
+    return this.safeWriteNavState(document.body, chain, direction, path, redirectFrom, 0, animation);
  }

  private async safeWriteNavState(
    node: HTMLElement | undefined, chain: RouteChain, direction: RouterDirection,
    path: string[], redirectFrom: string[] | null,
-    index = 0
+    index = 0,
+    animation?: AnimationBuilder
  ): Promise<boolean> {
    const unlock = await this.lock();
    let changed = false;
    try {
-      changed = await this.writeNavState(node, chain, direction, path, redirectFrom, index);
+      changed = await this.writeNavState(node, chain, direction, path, redirectFrom, index, animation);
    } catch (e) {
      console.error(e);
    }
@@ -240,7 +241,7 @@ export class Router implements ComponentInterface {
  private async writeNavState(
    node: HTMLElement | undefined, chain: RouteChain, direction: RouterDirection,
    path: string[], redirectFrom: string[] | null,
-    index = 0
+    index = 0, animation?: AnimationBuilder
  ): Promise<boolean> {
    if (this.busy) {
      console.warn('[ion-router] router is busy, transition was cancelled');
@@ -254,7 +255,7 @@ export class Router implements ComponentInterface {
      this.ionRouteWillChange.emit(routeEvent);
    }

-    const changed = await writeNavState(node, chain, direction, index);
+    const changed = await writeNavState(node, chain, direction, index, false, animation);
    this.busy = false;

    if (changed) {
--- a/core/src/components/router/utils/dom.ts
+++ b/core/src/components/router/utils/dom.ts
@@ -1,4 +1,4 @@
-import { NavOutletElement, RouteChain, RouteID, RouterDirection } from '../../../interface';
+import { AnimationBuilder, NavOutletElement, RouteChain, RouteID, RouterDirection } from '../../../interface';

 import { ROUTER_INTENT_NONE } from './constants';

@@ -7,7 +7,8 @@ export const writeNavState = async (
  chain: RouteChain,
  direction: RouterDirection,
  index: number,
-  changed = false
+  changed = false,
+  animation?: AnimationBuilder
 ): Promise<boolean> => {
  try {
    // find next navigation outlet in the DOM
@@ -20,7 +21,7 @@ export const writeNavState = async (
    await outlet.componentOnReady();

    const route = chain[index];
-    const result = await outlet.setRouteId(route.id, route.params, direction);
+    const result = await outlet.setRouteId(route.id, route.params, direction, animation);

    // if the outlet changed the page, reset navigation to neutral (no direction)
    // this means nested outlets will not animate
@@ -30,7 +31,7 @@ export const writeNavState = async (
    }

    // recursively set nested outlets
-    changed = await writeNavState(result.element, chain, direction, index + 1, changed);
+    changed = await writeNavState(result.element, chain, direction, index + 1, changed, animation);

    // once all nested outlets are visible let's make the parent visible too,
    // using markVisible prevents flickering
--- a/core/src/components/router/utils/interface.ts
+++ b/core/src/components/router/utils/interface.ts
@@ -1,11 +1,11 @@
-import { ComponentProps } from '../../../interface';
+import { AnimationBuilder, ComponentProps } from '../../../interface';

 export interface HTMLStencilElement extends HTMLElement {
  componentOnReady(): Promise<this>;
 }

 export interface NavOutlet {
-  setRouteId(id: string, params: ComponentProps | undefined, direction: RouterDirection): Promise<RouteWrite>;
+  setRouteId(id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder): Promise<RouteWrite>;
  getRouteId(): Promise<RouteID | undefined>;
 }

--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -481,7 +481,7 @@ export class Searchbar implements ComponentInterface {
            value={this.getValue()}
            autoComplete={this.autocomplete}
            autoCorrect={this.autocorrect}
-            spellcheck={this.spellcheck ? 'true' : undefined}
+            spellcheck={this.spellcheck}
          />

          {mode === 'md' && cancelButton}
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -794,6 +794,14 @@ export class SegmentButtonExample {
 | `value`    | `value`    | The value of the segment button.                             | `string`                                                                                                | `'ion-sb-' + (ids++)` |


+## Shadow Parts
+
+| Part          | Description                                                   |
+| ------------- | ------------------------------------------------------------- |
+| `"indicator"` | The indicator displayed on the checked segment button.        |
+| `"native"`    | The native HTML button element that wraps all child elements. |
+
+
 ## CSS Custom Properties

 | Name                           | Description                                                                                                       |
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -9,6 +9,9 @@ let ids = 0;

 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML button element that wraps all child elements.
+ * @part indicator - The indicator displayed on the checked segment button.
 */
@Component({
  tag: 'ion-segment-button',
@@ -103,6 +106,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
          type={type}
          aria-pressed={checked ? 'true' : 'false'}
          class="button-native"
+          part="native"
          disabled={disabled}
        >
          <span class="button-inner">
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -213,6 +213,7 @@ export class Segment implements ComponentInterface {
    // If there are no checked buttons, set the current button to checked
    if (!checked) {
      this.value = clicked.value;
+      this.setCheckedClasses();
    }

    // If the gesture began on the clicked button with the indicator
@@ -375,8 +376,12 @@ export class Segment implements ComponentInterface {
    const previous = this.checked;
    this.value = current.value;

-    if (previous && this.scrollable) {
-      this.checkButton(previous, current);
+    if (this.scrollable) {
+      if (previous) {
+        this.checkButton(previous, current);
+      } else {
+        this.setCheckedClasses();
+      }
    }

    this.checked = current;
--- a/core/src/components/select-option/readme.md
+++ b/core/src/components/select-option/readme.md
@@ -654,10 +654,10 @@ To customize an individual option, set a class on the `ion-select-option`:

 ## Properties

-| Property   | Attribute  | Description                                                 | Type      | Default     |
-| ---------- | ---------- | ----------------------------------------------------------- | --------- | ----------- |
-| `disabled` | `disabled` | If `true`, the user cannot interact with the select option. | `boolean` | `false`     |
-| `value`    | `value`    | The text value of the option.                               | `any`     | `undefined` |
+| Property   | Attribute  | Description                                                                                                                                                                         | Type      | Default     |
+| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons. | `boolean` | `false`     |
+| `value`    | `value`    | The text value of the option.                                                                                                                                                       | `any`     | `undefined` |


 ----------------------------------------------
--- a/core/src/components/select-option/select-option.tsx
+++ b/core/src/components/select-option/select-option.tsx
@@ -14,7 +14,7 @@ export class SelectOption implements ComponentInterface {
  @Element() el!: HTMLElement;

  /**
-   * If `true`, the user cannot interact with the select option.
+   * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
   */
  @Prop() disabled = false;

--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -459,7 +459,7 @@ export class Select implements ComponentInterface {
    return (
      <Host
        onClick={this.onClick}
-        role="combobox"
+        role="listbox"
        aria-haspopup="dialog"
        aria-disabled={disabled ? 'true' : null}
        aria-expanded={`${isExpanded}`}
--- a/core/src/components/slides/swiper/swiper.bundle.js
+++ b/core/src/components/slides/swiper/swiper.bundle.js
@@ -4494,6 +4494,120 @@ var Observer$1 = {
  },
 };

+const Keyboard = {
+  handle(event) {
+    const swiper = this;
+    const { rtlTranslate: rtl } = swiper;
+    let e = event;
+    if (e.originalEvent) e = e.originalEvent; // jquery fix
+    const kc = e.keyCode || e.charCode;
+    // Directions locks
+    if (!swiper.allowSlideNext && ((swiper.isHorizontal() && kc === 39) || (swiper.isVertical() && kc === 40) || kc === 34)) {
+      return false;
+    }
+    if (!swiper.allowSlidePrev && ((swiper.isHorizontal() && kc === 37) || (swiper.isVertical() && kc === 38) || kc === 33)) {
+      return false;
+    }
+    if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
+      return undefined;
+    }
+    if (doc.activeElement && doc.activeElement.nodeName && (doc.activeElement.nodeName.toLowerCase() === 'input' || doc.activeElement.nodeName.toLowerCase() === 'textarea')) {
+      return undefined;
+    }
+    if (swiper.params.keyboard.onlyInViewport && (kc === 33 || kc === 34 || kc === 37 || kc === 39 || kc === 38 || kc === 40)) {
+      let inView = false;
+      // Check that swiper should be inside of visible area of window
+      if (swiper.$el.parents(`.${swiper.params.slideClass}`).length > 0 && swiper.$el.parents(`.${swiper.params.slideActiveClass}`).length === 0) {
+        return undefined;
+      }
+      const windowWidth = win.innerWidth;
+      const windowHeight = win.innerHeight;
+      const swiperOffset = swiper.$el.offset();
+      if (rtl) swiperOffset.left -= swiper.$el[0].scrollLeft;
+      const swiperCoord = [
+        [swiperOffset.left, swiperOffset.top],
+        [swiperOffset.left + swiper.width, swiperOffset.top],
+        [swiperOffset.left, swiperOffset.top + swiper.height],
+        [swiperOffset.left + swiper.width, swiperOffset.top + swiper.height],
+      ];
+      for (let i = 0; i < swiperCoord.length; i += 1) {
+        const point = swiperCoord[i];
+        if (
+          point[0] >= 0 && point[0] <= windowWidth
+          && point[1] >= 0 && point[1] <= windowHeight
+        ) {
+          inView = true;
+        }
+      }
+      if (!inView) return undefined;
+    }
+    if (swiper.isHorizontal()) {
+      if (kc === 33 || kc === 34 || kc === 37 || kc === 39) {
+        if (e.preventDefault) e.preventDefault();
+        else e.returnValue = false;
+      }
+      if (((kc === 34 || kc === 39) && !rtl) || ((kc === 33 || kc === 37) && rtl)) swiper.slideNext();
+      if (((kc === 33 || kc === 37) && !rtl) || ((kc === 34 || kc === 39) && rtl)) swiper.slidePrev();
+    } else {
+      if (kc === 33 || kc === 34 || kc === 38 || kc === 40) {
+        if (e.preventDefault) e.preventDefault();
+        else e.returnValue = false;
+      }
+      if (kc === 34 || kc === 40) swiper.slideNext();
+      if (kc === 33 || kc === 38) swiper.slidePrev();
+    }
+    swiper.emit('keyPress', kc);
+    return undefined;
+  },
+  enable() {
+    const swiper = this;
+    if (swiper.keyboard.enabled) return;
+    $(doc).on('keydown', swiper.keyboard.handle);
+    swiper.keyboard.enabled = true;
+  },
+  disable() {
+    const swiper = this;
+    if (!swiper.keyboard.enabled) return;
+    $(doc).off('keydown', swiper.keyboard.handle);
+    swiper.keyboard.enabled = false;
+  },
+};
+
+var keyboard = {
+  name: 'keyboard',
+  params: {
+    keyboard: {
+      enabled: false,
+      onlyInViewport: true,
+    },
+  },
+  create() {
+    const swiper = this;
+    Utils.extend(swiper, {
+      keyboard: {
+        enabled: false,
+        enable: Keyboard.enable.bind(swiper),
+        disable: Keyboard.disable.bind(swiper),
+        handle: Keyboard.handle.bind(swiper),
+      },
+    });
+  },
+  on: {
+    init() {
+      const swiper = this;
+      if (swiper.params.keyboard.enabled) {
+        swiper.keyboard.enable();
+      }
+    },
+    destroy() {
+      const swiper = this;
+      if (swiper.keyboard.enabled) {
+        swiper.keyboard.disable();
+      }
+    },
+  },
+};
+
 function isEventSupported() {
  const eventName = 'onwheel';
  let isSupported = eventName in doc;
@@ -6299,6 +6413,6 @@ if (typeof Swiper.use === 'undefined') {

 Swiper.use(components);

-Swiper.use([pagination, scrollbar, autoplay, zoom]);
+Swiper.use([pagination, scrollbar, autoplay, keyboard, zoom]);

 export { Swiper };
--- a/core/src/components/slides/swiper/swiper.js
+++ b/core/src/components/slides/swiper/swiper.js
@@ -1,4 +1,4 @@
-import { Autoplay, Pagination, Scrollbar, Swiper, Zoom } from 'swiper/js/swiper.esm';
+import { Autoplay, Pagination, Scrollbar, Swiper, Keyboard, Zoom } from 'swiper/js/swiper.esm';

-Swiper.use([Pagination, Scrollbar, Autoplay, Zoom]);
+Swiper.use([Pagination, Scrollbar, Autoplay, Keyboard, Zoom]);
 export { Swiper };
--- a/core/src/components/slides/test/basic/index.html
+++ b/core/src/components/slides/test/basic/index.html
@@ -56,7 +56,11 @@
    let slideCount = 4;
    const slides = document.getElementById('slides')
    slides.pager = false;
-    slides.options = {}
+    slides.options = {
+      keyboard: {
+        enabled: true
+      }
+    }

    async function addSlide() {
      const slide = document.createElement('ion-slide');
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -232,6 +232,13 @@ export class TabButtonExample {
 | `target`   | `target`   | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.                                                                                                                                       | `string \| undefined`                                                                                   | `undefined` |


+## Shadow Parts
+
+| Part       | Description                                                   |
+| ---------- | ------------------------------------------------------------- |
+| `"native"` | The native HTML anchor element that wraps all child elements. |
+
+
 ## CSS Custom Properties

 | Name                           | Description                                                                                                   |
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -7,6 +7,8 @@ import { AnchorInterface } from '../../utils/element-interface';

 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part native - The native HTML anchor element that wraps all child elements.
 */
@Component({
  tag: 'ion-tab-button',
@@ -161,7 +163,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
          'ion-focusable': true
        }}
      >
-        <a {...attrs} tabIndex={-1} class="button-native">
+        <a {...attrs} tabIndex={-1} class="button-native" part="native">
          <span class="button-inner">
            <slot></slot>
          </span>
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -333,6 +333,7 @@ export class Textarea implements ComponentInterface {
        >
          <textarea
            class="native-textarea"
+            aria-labelledby={labelId}
            ref={el => this.nativeInput = el}
            autoCapitalize={this.autocapitalize}
            autoFocus={this.autofocus}
@@ -345,7 +346,7 @@ export class Textarea implements ComponentInterface {
            placeholder={this.placeholder || ''}
            readOnly={this.readonly}
            required={this.required}
-            spellcheck={this.spellcheck ? 'true' : undefined}
+            spellcheck={this.spellcheck}
            cols={this.cols}
            rows={this.rows}
            wrap={this.wrap}
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -256,7 +256,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
    const mode = getIonMode(this);
    const wrapperClass = {
      'toast-wrapper': true,
-      'ion-wrapper': true,
      [`toast-${this.position}`]: true
    };

--- a/core/src/utils/gesture/button-active.ts
+++ b/core/src/utils/gesture/button-active.ts
@@ -8,7 +8,8 @@ export const createButtonActiveGesture = (
  el: HTMLElement,
  isButton: (refEl: HTMLElement) => boolean
 ): Gesture => {
-  let touchedButton: HTMLElement | undefined;
+  let currentTouchedButton: HTMLElement | undefined;
+  let initialTouchedButton: HTMLElement | undefined;

  const activateButtonAtPoint = (x: number, y: number, hapticFeedbackFn: () => void) => {
    if (typeof (document as any) === 'undefined') { return; }
@@ -18,30 +19,43 @@ export const createButtonActiveGesture = (
      return;
    }

-    if (target !== touchedButton) {
+    if (target !== currentTouchedButton) {
      clearActiveButton();
      setActiveButton(target, hapticFeedbackFn);
    }
  };

  const setActiveButton = (button: HTMLElement, hapticFeedbackFn: () => void) => {
-    touchedButton = button;
-    const buttonToModify = touchedButton;
+    currentTouchedButton = button;
+
+    if (!initialTouchedButton) {
+      initialTouchedButton = currentTouchedButton;
+    }
+
+    const buttonToModify = currentTouchedButton;
    writeTask(() => buttonToModify.classList.add('ion-activated'));
    hapticFeedbackFn();
  };

  const clearActiveButton = (dispatchClick = false) => {
-    if (!touchedButton) { return; }
+    if (!currentTouchedButton) { return; }

-    const buttonToModify = touchedButton;
+    const buttonToModify = currentTouchedButton;
    writeTask(() => buttonToModify.classList.remove('ion-activated'));

-    if (dispatchClick) {
-      touchedButton.click();
+    /**
+     * Clicking on one button, but releasing on another button
+     * does not dispatch a click event in browsers, so we
+     * need to do it manually here. Some browsers will
+     * dispatch a click if clicking on one button, dragging over
+     * another button, and releasing on the original button. In that
+     * case, we need to make sure we do not cause a double click there.
+     */
+    if (dispatchClick && initialTouchedButton !== currentTouchedButton) {
+      currentTouchedButton.click();
    }

-    touchedButton = undefined;
+    currentTouchedButton = undefined;
  };

  return createGesture({
@@ -53,6 +67,7 @@ export const createButtonActiveGesture = (
    onEnd: () => {
      clearActiveButton(true);
      hapticSelectionEnd();
+      initialTouchedButton = undefined;
    }
  });
 };
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -1,4 +1,4 @@
-import { Color, CssClassMap, RouterDirection } from '../interface';
+import { AnimationBuilder, Color, CssClassMap, RouterDirection } from '../interface';

 export const hostContext = (selector: string, el: HTMLElement): boolean => {
  return el.closest(selector) !== null;
@@ -33,14 +33,14 @@ export const getClassMap = (classes: string | string[] | undefined): CssClassMap

 const SCHEME = /^[a-z][a-z0-9+\-.]*:/;

-export const openURL = async (url: string | undefined | null, ev: Event | undefined | null, direction: RouterDirection): Promise<boolean> => {
+export const openURL = async (url: string | undefined | null, ev: Event | undefined | null, direction: RouterDirection, animation?: AnimationBuilder): Promise<boolean> => {
  if (url != null && url[0] !== '#' && !SCHEME.test(url)) {
    const router = document.querySelector('ion-router');
    if (router) {
      if (ev != null) {
        ev.preventDefault();
      }
-      return router.push(url, direction);
+      return router.push(url, direction, animation);
    }
  }
  return false;
--- a/core/src/utils/transition/ios.transition.ts
+++ b/core/src/utils/transition/ios.transition.ts
@@ -363,7 +363,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio

        const translucentHeader = parentHeader?.translucent;
        if (!translucentHeader) {
-          enteringToolBarBg.fromTo(OPACITY, 0.01, 1);
+          enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
        } else {
          enteringToolBarBg.fromTo('transform', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'), 'translateX(0px)');
        }
@@ -510,7 +510,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
          // should just slide out, no fading out
          const translucentHeader = parentHeader?.translucent;
          if (!translucentHeader) {
-            leavingToolBarBg.fromTo(OPACITY, 0.99, 0);
+            leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
          } else {
            leavingToolBarBg.fromTo('transform', 'translateX(0px)', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
          }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Liam DeBeasi	97123cd6c3	5.2.3	2020-07-01 13:28:43 -04:00
Brandy Carney	9413aa0bac	docs(coc): add Contributor Covenant Code of Conduct (#21550 )	2020-06-29 11:35:29 -04:00
Adam Bradley	ce6e637787	chore(deps): bump deps (#21632 )	2020-06-29 10:21:06 -05:00
Adam Bradley	7a29e0e3c7	chore(ionicons): bump to ionicons 5.1.2, add package-lock.json (#21629 )	2020-06-26 09:42:05 -05:00
Liam DeBeasi	8c79e2c5b5	fix(select): change role to listbox (#21609 ) fixes https://github.com/ionic-team/ionic/issues/21601	2020-06-25 11:46:52 -04:00
Liam DeBeasi	26674f1dfa	fix(slides): enable keyboard integration (#21608 ) resolves #21554	2020-06-23 16:31:22 -04:00
Liam DeBeasi	88f23b1626	fix(textarea): add aria-labelledby to native textarea (#21606 ) resolves #21600	2020-06-23 16:29:41 -04:00
Chris	a5b3750ee2	fix(angular): expose createAnimation in addition to AnimationController (#21616 ) closes #21615	2020-06-23 16:23:22 -04:00
Liam DeBeasi	fbcd3f8c08	docs(select-option): clarify that disabled does not apply for action sheets (#21584 ) resolves https://github.com/ionic-team/ionic/issues/21578	2020-06-19 13:45:49 -04:00
Liam DeBeasi	04ce642369	merge release-5.2.2 5.2.2	2020-06-17 12:46:28 -04:00
Liam DeBeasi	84c421a4b0	5.2.2	2020-06-17 12:03:58 -04:00
Liam DeBeasi	1decc13cb8	docs(modal): clarify backdrop usage for card modals (#21556 )	2020-06-17 11:25:07 -04:00
Liam DeBeasi	17308f247f	fix(segment): ensure checked classes get set after not having a value (#21547 )	2020-06-16 11:22:17 -04:00
Liam DeBeasi	d8b377ffeb	fix(input): add aria-label to clear button (#21538 )	2020-06-15 13:36:11 -04:00
Liam DeBeasi	24cfdc308f	fix(ios): respect toolbar opacity when doing nav transition (#21512 )	2020-06-15 09:39:06 -04:00
Liam DeBeasi	bcccc217b8	fix(action-sheet, alert): resolve double click issue when running in iOS mode on chrome (#21506 )	2020-06-12 10:36:09 -04:00
Liam DeBeasi	e968bd029a	fix(angular): fix issue where navAnimation was being incorrectly overridden (#21508 )	2020-06-11 13:30:58 -04:00
Masahiko Sakakibara	7c8f621536	chore(template): add v5.0 option to issue templates (#21498 )	2020-06-11 11:21:18 -04:00
Liam DeBeasi	edceac0745	merge release-5.2.1 Release 5.2.1	2020-06-11 11:20:23 -04:00
Liam DeBeasi	2969f9f9f2	5.2.1	2020-06-11 10:43:55 -04:00
Liam DeBeasi	9223abc1f8	fix(angular): resolve issue when not using ngModel on components	2020-06-11 10:43:49 -04:00
Liam DeBeasi	b37c158eea	merge release-5.2.0 Release 5.2.0	2020-06-10 13:26:16 -04:00
Liam DeBeasi	ce6448b068	chore(): add Silicon to version 5.2.0	2020-06-10 12:54:30 -04:00
Liam DeBeasi	fd65ceec84	5.2.0	2020-06-10 12:52:24 -04:00
Evgeniy	0bf9449ee1	fix(img): use setTimeout fallback on older versions of chrome (#21358 )	2020-06-10 12:03:37 -04:00
Brandy Carney	cf3035778c	chore(stencil): update to v1.14 (#21458 )	2020-06-10 11:36:02 -04:00
Brandy Carney	17375d2325	feat(all): add shadow parts to missing components (#21436 )	2020-06-10 09:58:33 -04:00
Stefanos Anagnostou	df408f91f1	feat(fab-button): add close icon font size css variable (#19628 ) Co-authored-by: Brandy Carney <brandy@ionic.io>	2020-06-10 09:34:48 -04:00
Liam DeBeasi	e95b481a53	fix(angular): patch FormControl methods to properly sync Ionic form classes (#21429 ) Co-authored-by: Mark Levy <MarkChrisLevy@users.noreply.github.com>	2020-06-09 11:54:40 -04:00
Stefanos Anagnostou	698e526b9f	feat(fab-button): add closeIcon property (#19626 )	2020-06-08 16:46:03 -04:00
Liam DeBeasi	f34d3752e3	feat(all): add support for configuring animations on a per-page basis (#21433 )	2020-06-08 15:49:14 -04:00
Matthias Max	c8db0d5eeb	fix(router): going back uses correct nav transition (#21301 )	2020-06-08 12:23:27 -04:00
Liam DeBeasi	a4f0bdb4c3	fix(modal): set card-style modal height using the --height css variable (#21453 )	2020-06-08 10:29:39 -04:00