merge release-5.0.5

Release 5.0.5

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [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)
 
 

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.0.4",
+  "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.4",
+    "@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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -30,7 +30,7 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "^5.0.0",
+    "ionicons": "^5.0.1",
     "tslib": "^1.10.0"
   },
   "devDependencies": {

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/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;

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/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;
 }
 

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/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% - 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/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.4",
+  "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.4",
+  "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.4",
+    "@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.4",
+  "version": "5.0.5",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -39,16 +39,16 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "@ionic/core": "5.0.4",
+    "@ionic/core": "5.0.5",
-    "@ionic/react": "5.0.4",
+    "@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.4",
+    "@ionic/core": "5.0.5",
-    "@ionic/react": "5.0.4",
+    "@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.4",
+  "version": "5.0.5",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,8 +39,8 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "5.0.4",
+    "@ionic/core": "5.0.5",
-    "ionicons": "^5.0.0",
+    "ionicons": "^5.0.1",
     "tslib": "*"
   },
   "peerDependencies": {

vue/package-lock.json

@@ -571,9 +571,9 @@
       "dev": true
     },
     "ionicons": {
-      "version": "5.0.0-13",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.0.0-13.tgz",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.0.1.tgz",
-      "integrity": "sha512-CG9tZRWm4S3abz8ie7JsoO4ZvY5JeNYG6UEIHjCNNns0m/XVNhEK50CTVSAkc+ybPmSnbMh3r0ELVRyordshpg=="
+      "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",