5.0.5

fixes #17087

CHANGELOG.md

@@ -1,3 +1,43 @@
+## [5.0.5](https://github.com/ionic-team/ionic/compare/v5.0.4...v5.0.5) (2020-03-11)
+
+
+### Bug Fixes
+
+* **button:** allow overflow to be overridden by the CSS variable ([#20738](https://github.com/ionic-team/ionic/issues/20738)) ([7ecde36](https://github.com/ionic-team/ionic/commit/7ecde36f9d31327a45f7b5023ed533edbb9cc709)), closes [#20726](https://github.com/ionic-team/ionic/issues/20726)
+* **datetime:** account for max property when hour, minute, or second is set to 0 ([#20665](https://github.com/ionic-team/ionic/issues/20665)) ([2177461](https://github.com/ionic-team/ionic/commit/21774612d8d70ab7eda3eab0e6e9ac039b5c87d8)), closes [#20652](https://github.com/ionic-team/ionic/issues/20652)
+* **header:** collapsable header should default to using content background ([#20736](https://github.com/ionic-team/ionic/issues/20736)) ([f6c3ba7](https://github.com/ionic-team/ionic/commit/f6c3ba7e5af2af9e32f75306cde7704509e82263)), closes [#20691](https://github.com/ionic-team/ionic/issues/20691)
+* **header:** resolve undefined error on collapsible header when navigating quickly ([#20728](https://github.com/ionic-team/ionic/issues/20728)) ([87a2721](https://github.com/ionic-team/ionic/commit/87a27216d011f1d02ac0fc0aeb3ae0400ecfbd8c)), closes [#20725](https://github.com/ionic-team/ionic/issues/20725)
+* **ios:** large title animation now works properly in a modal ([#20703](https://github.com/ionic-team/ionic/issues/20703)) ([ec4878a](https://github.com/ionic-team/ionic/commit/ec4878ac085d8ff92cb8b2ea0852523f174ab01b)), closes [#20696](https://github.com/ionic-team/ionic/issues/20696)
+* **item:** apply proper margin left for slotted icon in RTL ([#20684](https://github.com/ionic-team/ionic/issues/20684)) ([d53595e](https://github.com/ionic-team/ionic/commit/d53595eb1629e0d60f7e832414e84c544e184346)), closes [#20653](https://github.com/ionic-team/ionic/issues/20653)
+* **label:** text overflow for slotted headings ([#20690](https://github.com/ionic-team/ionic/issues/20690)) ([4d34ce6](https://github.com/ionic-team/ionic/commit/4d34ce6a31eaa19859699646cc614f5be6239e10)), closes [#17087](https://github.com/ionic-team/ionic/issues/17087)
+* **modal:** leave animation transitions modal completely out of viewport on ipad ([#20702](https://github.com/ionic-team/ionic/issues/20702)) ([22d5256](https://github.com/ionic-team/ionic/commit/22d52568100d8096ee36e3a61a19614f0d63d45f)), closes [#20697](https://github.com/ionic-team/ionic/issues/20697)
+* **angular** exclude components from ssr ([#20674](https://github.com/ionic-team/ionic/issues/20674)) ([f64b142](https://github.com/ionic-team/ionic/commit/f64b1420aead39b9056dc25cfdbcf95bc4f6f621))
+* **modal:** swipeable modal now works in firefox ([#20714](https://github.com/ionic-team/ionic/issues/20714)) ([7d260b9](https://github.com/ionic-team/ionic/commit/7d260b96a73958709fa93a4fe58f816a445471ee)), closes [#20706](https://github.com/ionic-team/ionic/issues/20706)
+* **overlays:** prevent accidental dismiss of overlays when tapping screen twice ([#20683](https://github.com/ionic-team/ionic/issues/20683)) ([b6c2a77](https://github.com/ionic-team/ionic/commit/b6c2a77deb1c09eb1fd414f7737794e208ab5081)), closes [#20608](https://github.com/ionic-team/ionic/issues/20608)
+* **segment:** allow routerLink to work on segment buttons ([#20682](https://github.com/ionic-team/ionic/issues/20682)) ([314dbb1](https://github.com/ionic-team/ionic/commit/314dbb1a4d970327fcbb2f3fbdec0627c626fe4d)), closes [#20678](https://github.com/ionic-team/ionic/issues/20678)
+* **segment:** iOS mode segment now works on older Android devices ([#20673](https://github.com/ionic-team/ionic/issues/20673)) ([44993b7](https://github.com/ionic-team/ionic/commit/44993b7987031b6618409675fdbb1f15ec4ea343)), closes [#20648](https://github.com/ionic-team/ionic/issues/20648)
+
+
+
+## [5.0.4](https://github.com/ionic-team/ionic/compare/v5.0.3...v5.0.4) (2020-02-27)
+
+
+### Bug Fixes
+
+* **animation:** reset all temporary flags when interrupting an animation ([#20627](https://github.com/ionic-team/ionic/issues/20627)) ([0e0e401](https://github.com/ionic-team/ionic/commit/0e0e401d86dabaa1dc804656e4d384154d6fdd05)), closes [#20602](https://github.com/ionic-team/ionic/issues/20602)
+* **buttons:** use proper button colors based on CSS variables when inside of a toolbar ([#20633](https://github.com/ionic-team/ionic/issues/20633)) ([c1d7bf2](https://github.com/ionic-team/ionic/commit/c1d7bf229d10d0a12f90b6d2730d6d8ac78b48cd))
+
+
+
+## [5.0.3](https://github.com/ionic-team/ionic/compare/v5.0.2...v5.0.3) (2020-02-26)
+
+
+### Bug Fixes
+
+* **menu:** allow ssr to work properly with hardware back button updates ([#20629](https://github.com/ionic-team/ionic/issues/20629)) ([fe8d74d](https://github.com/ionic-team/ionic/commit/fe8d74d08cb919ed1c685262f0aed4a544c3a7e1))
+
+
+
 ## [5.0.2](https://github.com/ionic-team/ionic/compare/v5.0.1...v5.0.2) (2020-02-26)
 
 

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "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.0.2",
+    "@ionic/core": "5.0.5",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

angular/test/test-app/package.json

@@ -41,7 +41,7 @@
     "@angular/cli": "^9.0.0-rc.2",
     "@angular/compiler-cli": "^9.0.0-rc.2",
     "@angular/language-service": "^9.0.0-rc.2",
-    "@nguniversal/builders": "^9.0.0-next.9",
+    "@nguniversal/builders": "9.0.0-next.9",
     "@types/express": "^4.17.0",
     "@types/jasmine": "3.4.1",
     "@types/node": "^12.11.1",

core/README.md

@@ -23,9 +23,9 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/dist/ionic/ionic.esm.js"></script>
-<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/dist/ionic/ionic.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/@ionic/core@4.6.2/css/ionic.bundle.css" rel="stylesheet">
+<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet">
 ```
 
 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -30,11 +30,11 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "^5.0.0",
+    "ionicons": "^5.0.1",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.8.3",
+    "@stencil/core": "1.8.11",
     "@stencil/sass": "1.0.1",
     "@types/jest": "24.0.21",
     "@types/node": "12.12.3",

core/src/components/action-sheet/animations/ios.enter.ts

@@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)

core/src/components/action-sheet/animations/md.enter.ts

@@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.action-sheet-wrapper')!)

core/src/components/alert/animations/ios.enter.ts

@@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.alert-wrapper')!)

core/src/components/alert/animations/md.enter.ts

@@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.alert-wrapper')!)

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

@@ -239,6 +239,6 @@ ion-icon {
 // Back Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host(.in-toolbar) {
+:host(.in-toolbar:not(.in-toolbar-color)) {
   color: #{var(--ion-toolbar-color, var(--color))};
 }

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

@@ -114,6 +114,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'back-button-disabled': disabled,
           'back-button-has-icon-only': hasIconOnly,
           'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'ion-activatable': true,
           'ion-focusable': true,
           'show-back-button': showBackButton

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

@@ -175,4 +175,12 @@
   :host(.button-solid.ion-color:hover) .button-native::after {
     background: #{current-color(tint)};
   }
+
+  // Solid buttons inside of a toolbar should use a tint of the current
+  // background so use white to tint it
+  :host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native::after {
+    background: #fff;
+
+    opacity: 0.10;
+  }
 }

core/src/components/button/button.scss

@@ -179,13 +179,13 @@
   line-height: 1;
 
   box-shadow: var(--box-shadow);
+
   contain: layout style;
   cursor: pointer;
+
   opacity: var(--opacity);
   overflow: var(--overflow);
 
-  overflow: hidden;
-
   z-index: 0;
   box-sizing: border-box;
   appearance: none;
@@ -305,3 +305,19 @@ ion-ripple-effect {
   background: transparent;
   color: current-color(base);
 }
+
+// Button in Toolbar
+// --------------------------------------------------
+
+:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  color: #{var(--ion-toolbar-color, var(--color))};
+}
+
+:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  border-color: #{var(--ion-toolbar-color, var(--color, var(--border-color)))};
+}
+
+:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+  background: #{var(--ion-toolbar-color, var(--background))};
+  color: #{var(--ion-toolbar-background, var(--color))};
+}

core/src/components/button/button.tsx

@@ -4,7 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
 import { Color, RouterDirection } from '../../interface';
 import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
 import { hasShadowDom } from '../../utils/helpers';
-import { createColorClasses, openURL } from '../../utils/theme';
+import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -208,7 +208,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-${shape}`]: shape !== undefined,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
-
+          'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'button-has-icon-only': hasIconOnly,
           'button-disabled': disabled,
           'ion-activatable': true,

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

@@ -23,7 +23,7 @@
         <ion-button fill="clear">Clear</ion-button>
         <ion-button color="secondary">Default</ion-button>
         <ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-        <ion-button color="danger" shape="round">Round</ion-button>
+        <ion-button color="danger" shape="round" fill="outline">Round</ion-button>
         <ion-button color="warning" fill="outline">Outline</ion-button>
         <ion-button color="dark" fill="clear">Clear</ion-button>
       </p>
@@ -37,7 +37,7 @@
         <ion-button class="ion-focused" fill="clear">Clear</ion-button>
         <ion-button class="ion-focused" color="secondary">Default</ion-button>
         <ion-button class="ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-        <ion-button class="ion-focused" color="danger" shape="round">Round</ion-button>
+        <ion-button class="ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
         <ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
         <ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
       </p>
@@ -51,7 +51,7 @@
         <ion-button class="ion-activated" fill="clear">Clear</ion-button>
         <ion-button class="ion-activated" color="secondary">Default</ion-button>
         <ion-button class="ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-        <ion-button class="ion-activated" color="danger" shape="round">Round</ion-button>
+        <ion-button class="ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
         <ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
         <ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
       </p>
@@ -65,7 +65,7 @@
         <ion-button class="custom" fill="clear">Clear</ion-button>
         <ion-button class="custom" color="secondary">Default</ion-button>
         <ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-        <ion-button class="custom" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom" color="danger" shape="round" fill="outline">Round</ion-button>
         <ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
         <ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
         <ion-button class="custom ion-focused">Default</ion-button>
@@ -75,7 +75,7 @@
         <ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
         <ion-button class="custom ion-focused" color="secondary">Default</ion-button>
         <ion-button class="custom ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-        <ion-button class="custom ion-focused" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
         <ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
         <ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
         <ion-button class="custom ion-activated">Default</ion-button>
@@ -85,7 +85,7 @@
         <ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
         <ion-button class="custom ion-activated" color="secondary">Default</ion-button>
         <ion-button class="custom ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-        <ion-button class="custom ion-activated" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
         <ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
         <ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
       </p>

core/src/components/buttons/buttons.ios.scss

@@ -17,12 +17,11 @@
   font-weight: 400;
 }
 
-
-
 ::slotted(*) ion-button:not(.button-round) {
   --border-radius: #{$toolbar-ios-button-border-radius};
 }
 
+
 // iOS Toolbar with Color: Default Buttons
 // --------------------------------------------------
 
@@ -38,6 +37,8 @@
   --background-focused-opacity: .12;
   --background-activated: #000;
   --background-activated-opacity: .12;
+  --background-hover: #{current-color(base)};
+  --background-hover-opacity: 0.45;
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
 }
@@ -53,38 +54,21 @@
 }
 
 
-// iOS Toolbar Button Clear
+// iOS Toolbar Button Clear / Outline
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
-  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-}
-
-
-// iOS Toolbar Button Outline
-// --------------------------------------------------
-
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
-  --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
-  --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+::slotted(*) .button-clear,
+::slotted(*) .button-outline {
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: transparent;
 }
 
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
-  --color: #{$toolbar-ios-background};
-  --color-activated: #{$toolbar-ios-background};
-  --color-focused: #{$toolbar-ios-background};
-  --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
-  --background-hover-opacity: 0.1;
+::slotted(*) .button-solid:not(.ion-color) {
   --background-focused: #000;
   --background-focused-opacity: .12;
   --background-activated: #000;
@@ -121,25 +105,3 @@
 
   line-height: .67;
 }
-
-
-// iOS Toolbar Menu Toggle
-// --------------------------------------------------
-
-// .button-menutoggle-ios {
-//   order: map-get($toolbar-order-ios, menu-toggle-start);
-
-//   min-width: 36px;
-
-//   --padding-top: 0;
-//   --padding-bottom: 0;
-//   --padding-start: 0;
-//   --padding-end: 0;
-
-//   ion-icon {
-//     @include padding(0, 6px);
-
-//     font-size: 28px;
-//   }
-// }
-

core/src/components/buttons/buttons.md.scss

@@ -77,7 +77,6 @@
 
 ::slotted(*) .button-solid {
   --color: #{$toolbar-md-background};
-  --color-activated: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
   --background-activated: transparent;
   --background-focused: currentColor;
@@ -89,13 +88,11 @@
 
 ::slotted(*) .button-outline {
   --color: initial;
-  --color-activated: currentColor;
-  --color-focused: #{$toolbar-md-color};
   --background: transparent;
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
-  --border-color: #{$toolbar-md-color};
+  --border-color: currentColor;
 }
 
 
@@ -104,8 +101,6 @@
 
 ::slotted(*) .button-clear {
   --color: initial;
-  --color-focused: #{$toolbar-md-color};
-  --color-activated: currentColor;
   --background: transparent;
   --background-activated: transparent;
   --background-focused: currentColor;

core/src/components/datetime/datetime.tsx

@@ -501,11 +501,11 @@ export class Datetime implements ComponentInterface {
     min.day = min.day || 1;
     max.day = max.day || 31;
     min.hour = min.hour || 0;
-    max.hour = max.hour || 23;
+    max.hour = max.hour === undefined ? 23 : max.hour;
     min.minute = min.minute || 0;
-    max.minute = max.minute || 59;
+    max.minute = max.minute === undefined ? 59 : max.minute;
     min.second = min.second || 0;
-    max.second = max.second || 59;
+    max.second = max.second === undefined ? 59 : max.second;
 
     // Ensure min/max constraints
     if (min.year > max.year) {

core/src/components/header/header.ios.scss

@@ -50,7 +50,13 @@
   z-index: 1;
 }
 
+/**
+ * Large title toolbar should just use the content background
+ * since it needs to blend in with the header above it.
+ */
 .header-collapse-condense ion-toolbar {
+  --background: var(--ion-background-color, #fff);
+  
   z-index: 0;
 }
 
@@ -81,4 +87,4 @@
 .header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
 .header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
   visibility: hidden;
-}
+}

core/src/components/header/header.tsx

@@ -129,7 +129,9 @@ export class Header implements ComponentInterface {
       cloneElement('ion-title');
       cloneElement('ion-back-button');
 
-      this.collapsibleMainHeader!.classList.add('header-collapse-main');
+      if (this.collapsibleMainHeader !== undefined) {
+        this.collapsibleMainHeader.classList.add('header-collapse-main');
+      }
     });
 
     this.collapsibleHeaderInitialized = true;

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

@@ -113,7 +113,7 @@ $item-ios-icon-slot-margin-end:              null !default;
 $item-ios-icon-slot-margin-bottom:           7px !default;
 
 /// @prop - Margin start for an icon in the start/end slot
-$item-ios-icon-slot-margin-start:            0 !default;
+$item-ios-icon-slot-margin-start:            null !default;
 
 /// @prop - Margin top for the end slot inside of a floating/stacked label
 $item-ios-label-slot-end-margin-top:         7px !default;

core/src/components/label/label.scss

@@ -79,3 +79,17 @@
 :host(.label-no-animate.label-floating) {
   transition: none;
 }
+
+// Headings
+// --------------------------------------------------
+
+::slotted(*) h1,
+::slotted(*) h2,
+::slotted(*) h3,
+::slotted(*) h4,
+::slotted(*) h5,
+::slotted(*) h6 {
+  text-overflow: inherit;
+
+  overflow: inherit;
+}

core/src/components/label/test/headings/e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('label: headings', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/label/test/headings?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/label/test/headings/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Label - Headings</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Label - Headings</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item>
+          <ion-label>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h1>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <h2>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h2>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label class="ion-text-wrap">
+            <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum, voluptatum corporis reprehenderit ipsa nostrum aperiam optio porro?</h3>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>

core/src/components/loading/animations/ios.enter.ts

@@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.loading-wrapper')!)

core/src/components/loading/animations/md.enter.ts

@@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.loading-wrapper')!)

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

@@ -158,6 +158,6 @@ ion-icon {
 // Menu Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host(.in-toolbar) {
+:host(.in-toolbar:not(.in-toolbar-color)) {
   color: #{var(--ion-toolbar-color, var(--color))};
-}
+}

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

@@ -86,6 +86,7 @@ export class MenuButton implements ComponentInterface, ButtonInterface {
           'menu-button-hidden': hidden,
           'menu-button-disabled': disabled,
           'in-toolbar': hostContext('ion-toolbar', this.el),
+          'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
           'ion-activatable': true,
           'ion-focusable': true
         }}

core/src/components/modal/animations/ios.enter.ts

@@ -12,12 +12,16 @@ export const iosEnterAnimation = (
   // The top translate Y for the presenting element
   const backdropAnimation = createAnimation()
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   const wrapperAnimation = createAnimation()
     .addElement(baseEl.querySelector('.modal-wrapper')!)
     .beforeStyles({ 'opacity': 1 })
-    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+    .fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
 
   const baseAnimation = createAnimation()
     .addElement(baseEl)
@@ -27,7 +31,13 @@ export const iosEnterAnimation = (
     .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (presentingEl) {
-    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
+    /**
+     * Fallback for browsers that does not support `max()` (ex: Firefox)
+     * No need to wrry about statusbar padding since engines like Gecko
+     * are not used as the engine for standlone Cordova/Capacitor apps
+     */
+    const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset;
     const bodyEl = document.body;
     const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`;

core/src/components/modal/animations/ios.leave.ts

@@ -18,7 +18,7 @@ export const iosLeaveAnimation = (
   const wrapperAnimation = createAnimation()
     .addElement(baseEl.querySelector('.modal-wrapper')!)
     .beforeStyles({ 'opacity': 1 })
-    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+    .fromTo('transform', 'translateY(0vh)', 'translateY(100vh)');
 
   const baseAnimation = createAnimation()
     .addElement(baseEl)
@@ -27,7 +27,8 @@ export const iosLeaveAnimation = (
     .addAnimation([backdropAnimation, wrapperAnimation]);
 
   if (presentingEl) {
-    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : 'max(30px, var(--ion-safe-area-top))';
+    const transformOffset = (!CSS.supports('width', 'max(0px, 1px)')) ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+    const modalTransform = (presentingEl.tagName === 'ION-MODAL' && (presentingEl as HTMLIonModalElement).presentingElement !== undefined) ? '-10px' : transformOffset;
     const bodyEl = document.body;
     const currentPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
     const presentingAnimation = createAnimation()

core/src/components/modal/animations/md.enter.ts

@@ -11,7 +11,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.modal-wrapper')!)

core/src/components/modal/modal.ios.scss

@@ -28,5 +28,11 @@
 
 :host(.modal-card) .modal-wrapper {
   @include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
-  height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
+  height: calc(100% - 40px);
+}
+
+@supports (width: max(0px, 1px)) {
+  :host(.modal-card) .modal-wrapper {
+    height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
+  }
 }

core/src/components/picker/animations/ios.enter.ts

@@ -11,7 +11,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement): Animation => {
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.picker-wrapper')!)

core/src/components/popover/animations/ios.enter.ts

@@ -104,7 +104,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation =>
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.popover-wrapper')!)

core/src/components/popover/animations/md.enter.ts

@@ -86,7 +86,11 @@ export const mdEnterAnimation = (baseEl: HTMLElement, ev?: Event): Animation =>
 
   backdropAnimation
     .addElement(baseEl.querySelector('ion-backdrop')!)
-    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)');
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none'
+    })
+    .afterClearStyles(['pointer-events']);
 
   wrapperAnimation
     .addElement(baseEl.querySelector('.popover-wrapper')!)

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

@@ -271,6 +271,8 @@ ion-ripple-effect {
   box-sizing: border-box;
 
   will-change: transform, opacity;
+
+  pointer-events: none;
 }
 
 .segment-button-indicator-background {
@@ -280,6 +282,8 @@ ion-ripple-effect {
   transform: var(--indicator-transform);
 
   box-shadow: var(--indicator-box-shadow);
+
+  pointer-events: none;
 }
 
 .segment-button-indicator-animated {

core/src/components/segment/segment.tsx

@@ -143,7 +143,6 @@ export class Segment implements ComponentInterface {
 
     const checkedValidButton = this.setNextIndex(detail, true);
 
-    detail.event.preventDefault();
     detail.event.stopImmediatePropagation();
 
     if (checkedValidButton) {

core/src/components/toolbar/test/custom/e2e.ts

@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toolbar: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/custom?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('toolbar:rtl: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/custom?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/toolbar/test/custom/index.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toolbar - Custom</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content id="content">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary" class="themed-colors component-colors">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color: Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary" class="themed-colors component-colors">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Color: Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="start">
+          <ion-back-button color="danger" default-href="/" text=""></ion-back-button>
+          <ion-menu-button color="danger" auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed w / Color Buttons</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed-colors">
+        <ion-buttons slot="secondary">
+          <ion-button color="danger" fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button color="danger">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="danger" fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="danger" fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Themed w / Color Buttons</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/" text=""></ion-back-button>
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="secondary">
+          <ion-button fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="start">
+          <ion-back-button color="secondary" default-href="/" text=""></ion-back-button>
+          <ion-menu-button color="secondary" auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars w/ Color Buttons</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="component-colors">
+        <ion-buttons slot="secondary">
+          <ion-button color="secondary" fill="clear">
+            <ion-icon slot="icon-only" ios="list-outline" md="list"></ion-icon>
+          </ion-button>
+          <ion-button color="secondary">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button color="secondary" fill="solid">
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+          <ion-button color="secondary" fill="outline">
+            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Component Level Vars w/ Color Buttons</ion-title>
+      </ion-toolbar>
+    </ion-content>
+  </ion-app>
+
+  <style>
+    .themed-colors {
+      --ion-toolbar-background: #d9fae0;
+      --ion-toolbar-color: #b68928;
+    }
+
+    .component-colors {
+      --background: #fff4f5;
+    }
+
+    .component-colors,
+    .component-colors ion-back-button,
+    .component-colors ion-menu-button,
+    .component-colors ion-button {
+      --color: #aa3723;
+    }
+
+    .component-colors ion-button[fill="solid"] {
+      --background: #aa3723;
+      --color: #fff;
+    }
+
+  </style>
+</body>
+
+</html>

core/src/utils/animation/animation.ts

@@ -102,6 +102,18 @@ export const createAnimation = (animationId?: string): Animation => {
     cleanUpStyleSheets();
   };
 
+  const resetFlags = () => {
+    shouldForceLinearEasing = false;
+    shouldForceSyncPlayback = false;
+    shouldCalculateNumAnimations = true;
+    forceDirectionValue = undefined;
+    forceDurationValue = undefined;
+    forceDelayValue = undefined;
+    numAnimationsRunning = 0;
+    finished = false;
+    willComplete = true;
+  };
+
   const onFinish = (callback: AnimationLifecycle, opts?: AnimationCallbackOptions) => {
     const callbacks = (opts && opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
     callbacks.push({ c: callback, o: opts });
@@ -886,6 +898,8 @@ export const createAnimation = (animationId?: string): Animation => {
       cleanUpElements();
       initialized = false;
     }
+
+    resetFlags();
   };
 
   const from = (property: string, value: any) => {

core/src/utils/menu-controller/index.ts

@@ -207,15 +207,17 @@ const createMenuController = () => {
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
 
-  const doc: Document = document;
-  doc.addEventListener('ionBackButton', (ev: any) => {
-    const openMenu = _getOpenSync();
-    if (openMenu) {
-      (ev as BackButtonEvent).detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
-        return openMenu.close();
-      });
-    }
-  });
+  /* tslint:disable-next-line */
+  if (typeof document !== 'undefined') {
+    document.addEventListener('ionBackButton', (ev: any) => {
+      const openMenu = _getOpenSync();
+      if (openMenu) {
+        (ev as BackButtonEvent).detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+          return openMenu.close();
+        });
+      }
+    });
+  }
 
   return {
     registerAnimation,

core/src/utils/transition/ios.transition.ts

@@ -157,7 +157,7 @@ const animateBackButton = (rootAnimation: Animation, rtl: boolean, backDirection
 };
 
 const animateLargeTitle = (rootAnimation: Animation, rtl: boolean, backDirection: boolean, largeTitleEl: any, largeTitleBox: DOMRect, backButtonBox: DOMRect) => {
-  const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleEl.right}px)` : `${largeTitleEl.left}px`;
+  const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
   const START_TRANSLATE = (rtl) ? '-18px' : '18px';
   const ORIGIN_X = (rtl) ? 'right' : 'left';
 

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -49,7 +49,7 @@
     "@angular/core": "8.2.13",
     "@angular/platform-browser": "8.2.13",
     "@angular/platform-server": "8.2.13",
-    "@ionic/core": "5.0.2",
+    "@ionic/core": "5.0.5",
     "ng-packagr": "5.7.1",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",

packages/angular-server/src/ionic-server-module.ts

@@ -21,7 +21,33 @@ export class IonicServerModule {}
 export function hydrateIonicComponents(doc: any, appId: any) {
   return () => {
     return hydrateDocument(doc, {
-      clientHydrateAnnotations: false
+      clientHydrateAnnotations: false,
+      excludeComponents: [
+        // overlays
+        'ion-action-sheet',
+        'ion-alert',
+        'ion-loading',
+        'ion-modal',
+        'ion-picker',
+        'ion-popover',
+        'ion-toast',
+        'ion-toast',
+
+        // navigation
+        'ion-router',
+        'ion-route',
+        'ion-route-redirect',
+        'ion-router-link',
+        'ion-router-outlet',
+
+        // tabs
+        'ion-tabs',
+        'ion-tab',
+
+        // auxiliar
+        'ion-picker-column',
+        'ion-virtual-scroll'
+      ]
     })
     .then(hydrateResults => {
       hydrateResults.diagnostics.forEach(d => {

packages/react-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -39,16 +39,16 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "@ionic/core": "5.0.2",
-    "@ionic/react": "5.0.2",
+    "@ionic/core": "5.0.5",
+    "@ionic/react": "5.0.5",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
-    "@ionic/core": "5.0.2",
-    "@ionic/react": "5.0.2",
+    "@ionic/core": "5.0.5",
+    "@ionic/react": "5.0.5",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,8 +39,8 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "5.0.2",
-    "ionicons": "^5.0.0",
+    "@ionic/core": "5.0.5",
+    "ionicons": "^5.0.1",
     "tslib": "*"
   },
   "peerDependencies": {

vue/package-lock.json

@@ -571,9 +571,9 @@
       "dev": true
     },
     "ionicons": {
-      "version": "5.0.0-13",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.0.0-13.tgz",
-      "integrity": "sha512-CG9tZRWm4S3abz8ie7JsoO4ZvY5JeNYG6UEIHjCNNns0m/XVNhEK50CTVSAkc+ybPmSnbMh3r0ELVRyordshpg=="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.0.1.tgz",
+      "integrity": "sha512-P9GHr7pgCJcG211W0wute49NZ9AvJZvFJf4OwYybakjX6j7tu0q5t5HNWn9bcb9YjI7SxBblJg8iqQ1Yb59DXw=="
     },
     "is-buffer": {
       "version": "1.1.6",

vue/package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@ionic/core": "^4.6.0",
-    "ionicons": "^5.0.0-13"
+    "ionicons": "^5.0.1"
   },
   "devDependencies": {
     "rollup": "^0.62.0",