@ionic/core 9.0.11-dev.11793890855.1bf6a6e5 → 9.0.11-dev.11793906456.1ea7a0a7

package/dist/collection/components/col/col.js

@@ -2,15 +2,12 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { printIonWarning } from "../../utils/logging/index";
 import { matchBreakpoint } from "../../utils/media";
-import { getIonTheme } from "../../global/ionic-global";
-// TODO(FW-7285): Replace with global breakpoints
+import { isRTL } from "../../utils/rtl/index";
+import { getIonMode } from "../../global/ionic-global";
+const win = typeof window !== 'undefined' ? window : undefined;
+const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export class Col {
     onResize() {
         forceUpdate(this);
@@ -32,60 +29,70 @@ export class Col {
         // increase in size and we want to return the largest match
         return matched;
     }
-    getStyleClass(property, className, acceptsAuto = false) {
-        const colPropertyValue = this.getColumns(property);
+    calculateSize() {
+        const columns = this.getColumns('size');
         // If size wasn't set for any breakpoint
         // or if the user set the size without a value
         // it means we need to stick with the default and return
         // e.g. <ion-col size-md>
-        if (!colPropertyValue || colPropertyValue === '') {
+        if (!columns || columns === '') {
             return;
         }
-        if (acceptsAuto && colPropertyValue === 'auto') {
-            return 'ion-grid-col-auto';
-        }
-        const valueNumber = parseInt(colPropertyValue);
-        if (isNaN(valueNumber)) {
+        // If the size is set to auto then don't calculate a size
+        const colSize = columns === 'auto'
+            ? 'auto'
+            : // If CSS supports variables we should use the grid columns var
+                SUPPORTS_VARS
+                    ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+                    : // Convert the columns to a percentage by dividing by the total number
+                        // of columns (12) and then multiplying by 100
+                        (columns / 12) * 100 + '%';
+        return {
+            flex: `0 0 ${colSize}`,
+            width: `${colSize}`,
+            'max-width': `${colSize}`,
+        };
+    }
+    // Called by push, pull, and offset since they use the same calculations
+    calculatePosition(property, modifier) {
+        const columns = this.getColumns(property);
+        if (!columns) {
             return;
         }
-        return `${className}-col--${valueNumber}`;
+        // If the number of columns passed are greater than 0 and less than
+        // 12 we can position the column, else default to auto
+        const amount = SUPPORTS_VARS
+            ? // If CSS supports variables we should use the grid columns var
+                `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+            : // Convert the columns to a percentage by dividing by the total number
+                // of columns (12) and then multiplying by 100
+                columns > 0 && columns < 12
+                    ? (columns / 12) * 100 + '%'
+                    : 'auto';
+        return {
+            [modifier]: amount,
+        };
     }
-    getSizeClass() {
-        return this.getStyleClass('size', 'ion-grid', true);
+    calculateOffset(rtl) {
+        return this.calculatePosition('offset', rtl ? 'margin-right' : 'margin-left');
     }
-    getOrderClass() {
-        return this.getStyleClass('order', 'ion-grid-order');
+    calculatePull(rtl) {
+        return this.calculatePosition('pull', rtl ? 'left' : 'right');
     }
-    getOffsetClass() {
-        return this.getStyleClass('offset', 'ion-grid-offset');
-    }
-    componentDidLoad() {
-        if (this.pull ||
-            this.pullLg ||
-            this.pullMd ||
-            this.pullSm ||
-            this.pullXl ||
-            this.pullXs ||
-            this.push ||
-            this.pushLg ||
-            this.pushMd ||
-            this.pushSm ||
-            this.pushXl ||
-            this.pushXs) {
-            printIonWarning('[ion-col] - The pull and push properties are deprecated and no longer work, in favor of the order and size properties.', this.el);
-        }
+    calculatePush(rtl) {
+        return this.calculatePosition('push', rtl ? 'right' : 'left');
     }
     render() {
-        const theme = getIonTheme(this);
-        const colSize = this.getSizeClass();
-        const colOrder = this.getOrderClass();
-        const colOffset = this.getOffsetClass();
-        return (h(Host, { key: 'a7f3c75c02d39def487697bab9315bda53d15248', class: {
-                [theme]: true,
-                [`${colSize}`]: colSize !== undefined,
-                [`${colOrder}`]: colOrder !== undefined,
-                [`${colOffset}`]: colOffset !== undefined,
-            } }, h("slot", { key: '37f494a03257dbf2e4fa89641c346178963725ae' })));
+        const rtl = isRTL(this.el);
+        const mode = getIonMode(this);
+        return (h(Host, { key: '98f3c88ee5408120539e3daf097982dea1b4842a', class: {
+                [mode]: true,
+            }, style: {
+                ...this.calculateOffset(rtl),
+                ...this.calculatePull(rtl),
+                ...this.calculatePush(rtl),
+                ...this.calculateSize(),
+            } }, h("slot", { key: '14e2f0c30bc3fea9aa9683e3bd4ed5dd4a3be05c' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }
@@ -215,120 +222,6 @@ export class Col {
                 "reflect": false,
                 "attribute": "offset-xl"
             },
-            "order": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The order of the column, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "order"
-            },
-            "orderXs": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The order of the column for xs screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "order-xs"
-            },
-            "orderSm": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The order of the column for sm screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "order-sm"
-            },
-            "orderMd": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The order of the column for md screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "order-md"
-            },
-            "orderLg": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The order of the column for lg screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "order-lg"
-            },
-            "orderXl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The order of the column for xl screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "order-xl"
-            },
             "pull": {
                 "type": "string",
                 "mutable": false,
@@ -340,10 +233,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available."
                 },
                 "getter": false,
@@ -362,10 +252,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available."
                 },
                 "getter": false,
@@ -384,10 +271,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available."
                 },
                 "getter": false,
@@ -406,10 +290,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available."
                 },
                 "getter": false,
@@ -428,10 +309,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available."
                 },
                 "getter": false,
@@ -450,10 +328,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available."
                 },
                 "getter": false,
@@ -472,10 +347,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available."
                 },
                 "getter": false,
@@ -494,10 +366,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available."
                 },
                 "getter": false,
@@ -516,10 +385,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available."
                 },
                 "getter": false,
@@ -538,10 +404,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available."
                 },
                 "getter": false,
@@ -560,10 +423,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available."
                 },
                 "getter": false,
@@ -582,10 +442,7 @@ export class Col {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
-                        }],
+                    "tags": [],
                     "text": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available."
                 },
                 "getter": false,

package/dist/collection/components/content/{content.ios.css → content.css}

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -36,6 +69,8 @@
    * @prop --offset-top: Offset top of the content
    * @prop --offset-bottom: Offset bottom of the content
    */
+  --background: var(--ion-background-color, #fff);
+  --color: var(--ion-text-color, #000);
   --padding-top: 0px;
   --padding-bottom: 0px;
   --padding-start: 0px;
@@ -63,8 +98,8 @@
 }
 
 #background-content {
-  right: 0px;
   left: 0px;
+  right: 0px;
   top: calc(var(--offset-top) * -1);
   bottom: calc(var(--offset-bottom) * -1);
   position: absolute;
@@ -72,8 +107,8 @@
 }
 
 .inner-scroll {
-  right: 0px;
   left: 0px;
+  right: 0px;
   top: calc(var(--offset-top) * -1);
   bottom: calc(var(--offset-bottom) * -1);
   -webkit-padding-start: var(--padding-start);
@@ -240,108 +275,4 @@
    * still allow the fixed content to appear under the scroll content if specified.
    */
   transform: translateZ(0);
-}
-
-:host(.content-header-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll {
-  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), height 300ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-:host(.content-header-hide-scroll-partner:not(.content-fullscreen).content-header-hide-scroll-hidden) .inner-scroll {
-  height: calc(100% + var(--internal-header-hide-height, 0px));
-  transform: translateY(calc(-1 * var(--internal-header-hide-height, 0px)));
-  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), height 200ms cubic-bezier(0.4, 0, 1, 1);
-}
-
-:host(.content-footer-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll {
-  transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-:host(.content-footer-hide-scroll-partner:not(.content-fullscreen).content-footer-hide-scroll-hidden) .inner-scroll {
-  height: calc(100% + var(--internal-footer-hide-height, 0px));
-  transition: height 350ms cubic-bezier(0.4, 0, 1, 1);
-}
-
-:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll {
-  transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-:host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen).content-tab-bar-hide-scroll-hidden) .inner-scroll {
-  height: calc(100% + var(--internal-tab-bar-hide-height, 0px));
-  transition: height 350ms cubic-bezier(0.4, 0, 1, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :host(.content-header-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,
-  :host(.content-header-hide-scroll-partner:not(.content-fullscreen).content-header-hide-scroll-hidden) .inner-scroll,
-  :host(.content-footer-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,
-  :host(.content-footer-hide-scroll-partner:not(.content-fullscreen).content-footer-hide-scroll-hidden) .inner-scroll,
-  :host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen)) .inner-scroll,
-  :host(.content-tab-bar-hide-scroll-partner:not(.content-fullscreen).content-tab-bar-hide-scroll-hidden) .inner-scroll {
-    transition: none;
-  }
-}
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  --background: var(--ion-background-color, #fff);
-  --color: var(--ion-text-color, #000);
 }

package/dist/collection/components/content/content.js

@@ -7,12 +7,8 @@ import { getOverlaySizeType } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @slot - Content is placed in the scrollable area if provided without a slot.
  * @slot fixed - Should be used for fixed content that should not scroll.
  *
@@ -237,8 +233,9 @@ export class Content {
             this.resize();
         }, 100);
     }
-    shouldForceOverscroll(mode) {
+    shouldForceOverscroll() {
         const { forceOverscroll } = this;
+        const mode = getIonMode(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
     /**
@@ -466,13 +463,12 @@ export class Content {
     render() {
         const { fixedSlotPlacement, inheritedAttributes, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
-        const forceOverscroll = this.shouldForceOverscroll(mode);
-        const transitionShadow = theme === 'ios';
+        const mode = getIonMode(this);
+        const forceOverscroll = this.shouldForceOverscroll();
+        const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '6cdef99e2396f9b451240ee739800b6d4a0df9fa', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: 'e1013621096729354ef92915af52dd823e69fdff', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+                [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': this.sizeToContent,
                 overscroll: forceOverscroll,
@@ -480,27 +476,23 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            }, ...inheritedAttributes }, h("div", { key: 'bbd9b4bf3fc97404cd42bb7824fc20e031f77922', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '4d4747e2495645da20a0718275a77f44fdbdd82d', class: {
+            }, ...inheritedAttributes }, h("div", { key: '3d8649b164d6324beaa1bc50e1d204ad06c2ec1a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'dd2d3bed8690b4f5027a43f5ec60e7e7df18106d', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'fbafdcfd579732945a3f375fb6cc9777651f41f5' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'dc3d4584d9e9afd43699525a619b8e873078fbbf' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["content.ios.scss"],
-            "md": ["content.md.scss"],
-            "ionic": ["content.ionic.scss"]
+            "$": ["content.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["content.ios.css"],
-            "md": ["content.md.css"],
-            "ionic": ["content.ionic.css"]
+            "$": ["content.css"]
         };
     }
     static get properties() {
@@ -957,8 +949,7 @@ const getPageElement = (el) => {
      * between the popover and the edges of the screen. But if the popover contains
      * its own page element, we should use that instead.
      */
-    const appRootSelector = config.get('appRootSelector', 'ion-app');
-    const page = el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner, .popover-content`);
+    const page = el.closest('ion-app, ion-page, .ion-page, page-inner, .popover-content');
     if (page) {
         return page;
     }