@ionic/core 8.7.10 → 8.7.11-dev.11763677588.1682e25d

package/dist/collection/components/fab-list/fab-list.js

@@ -2,7 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } 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.
+ */
 export class FabList {
     constructor() {
         /**
@@ -23,12 +27,12 @@ export class FabList {
         });
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '64b33366447f66c7f979cfac56307fbb1a6fac1c', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'b0e984c110ea8bf4aa0daeca5f66253c9e0666fd', class: {
+                [theme]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: 'd9f474f7f20fd7e813db358fddc720534ca05bb6' })));
+            } }, h("slot", { key: '7bedbb010e89d1304d86c4261f5378e90741611e' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.ios.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -65,6 +71,12 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
+/**
+ * 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
@@ -126,15 +138,15 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
 
 @supports (backdrop-filter: blur(0)) {
   .footer-background {
-    left: 0;
     right: 0;
+    left: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
   .footer-translucent-ios ion-toolbar {
-    --opacity: .8;
+    --opacity: 0.8;
   }
 }
 .footer-ios.ion-no-border ion-toolbar:first-of-type {

package/dist/collection/components/footer/footer.js

@@ -4,10 +4,12 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
-import { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonTheme } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.utils";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 Footer {
     constructor() {
@@ -15,7 +17,7 @@ export class Footer {
         this.keyboardVisible = false;
         /**
          * If `true`, the footer will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          *
          * Note: In order to scroll content behind the footer, the `fullscreen`
@@ -23,15 +25,16 @@ export class Footer {
          */
         this.translucent = false;
         this.checkCollapsibleFooter = () => {
-            const mode = getIonMode(this);
-            if (mode !== 'ios') {
+            const theme = getIonTheme(this);
+            if (theme !== 'ios') {
                 return;
             }
             const { collapse } = this;
             const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
             if (hasFade) {
-                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+                const appRootSelector = config.get('appRootSelector', 'ion-app');
+                const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
                 const contentEl = pageEl ? findIonContent(pageEl) : null;
                 if (!contentEl) {
                     printIonContentErrorMsg(this.el);
@@ -84,30 +87,32 @@ export class Footer {
     }
     render() {
         const { translucent, collapse } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: 'ddc228f1a1e7fa4f707dccf74db2490ca3241137', role: "contentinfo", class: {
-                [mode]: true,
+        return (h(Host, { key: 'e70e2616f69a6205a1c2045bf13a792c9a6bc27c', role: "contentinfo", class: {
+                [theme]: true,
                 // Used internally for styling
-                [`footer-${mode}`]: true,
+                [`footer-${theme}`]: true,
                 [`footer-translucent`]: translucent,
-                [`footer-translucent-${mode}`]: translucent,
+                [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { key: 'e16ed4963ff94e06de77eb8038201820af73937c', class: "footer-background" }), h("slot", { key: 'f186934febf85d37133d9351a96c1a64b0a4b203' })));
+            } }, theme === 'ios' && translucent && h("div", { key: '72803059c1d82a766a0ce69e5a8a6a3b7e576700', class: "footer-background" }), h("slot", { key: 'de450e4eb8f5c63b11f548061f29d957ef308539' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {
         return {
             "ios": ["footer.ios.scss"],
-            "md": ["footer.md.scss"]
+            "md": ["footer.md.scss"],
+            "ionic": ["footer.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["footer.ios.css"],
-            "md": ["footer.md.css"]
+            "md": ["footer.md.css"],
+            "ionic": ["footer.md.css"]
         };
     }
     static get properties() {
@@ -124,7 +129,7 @@ export class Footer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode."
+                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -143,7 +148,7 @@ export class Footer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
+                    "text": "If `true`, the footer will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/footer/footer.md.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -65,6 +71,12 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
+/**
+ * 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

package/dist/collection/components/grid/grid.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * 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

package/dist/collection/components/grid/grid.js

@@ -2,7 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } 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.
+ */
 export class Grid {
     constructor() {
         /**
@@ -11,11 +15,11 @@ export class Grid {
         this.fixed = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '617127ecfabf9bf615bef1dda1be3fed5a065949', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'f439594e1c4186e30d5b57bf3ca95c220df954fa', class: {
+                [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'c781fff853b093d8f44bdb7943bbc4f17c903803' })));
+            } }, h("slot", { key: 'e8e01f0b46a05fb3220837fbfa9f161b086c06ad' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.ionic.css

@@ -0,0 +1,98 @@
+ion-header {
+  display: block;
+  position: relative;
+  order: -1;
+  width: 100%;
+}
+
+ion-header ion-toolbar:first-of-type {
+  padding-top: var(--ion-safe-area-top, 0);
+}
+
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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.
+ */
+ion-header {
+  box-shadow: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
+  z-index: 10;
+}
+ion-header.header-divider {
+  border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-primitives-neutral-300, #e0e0e0);
+}
+
+ion-toolbar + ion-toolbar {
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+@supports (backdrop-filter: blur(0)) {
+  .header-background {
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    backdrop-filter: saturate(180%) blur(var(--token-scale-100, 4px));
+  }
+  .header-translucent-ionic ion-toolbar {
+    --opacity: 0.7;
+  }
+}

package/dist/collection/components/header/header.ios.css

@@ -1,3 +1,20 @@
+ion-header {
+  display: block;
+  position: relative;
+  order: -1;
+  width: 100%;
+}
+
+ion-header ion-toolbar:first-of-type {
+  padding-top: var(--ion-safe-area-top, 0);
+}
+
+/**
+ * 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
@@ -54,17 +71,15 @@
  * }
  */
 ion-header {
-  display: block;
-  position: relative;
-  order: -1;
-  width: 100%;
   z-index: 10;
 }
 
-ion-header ion-toolbar:first-of-type {
-  padding-top: var(--ion-safe-area-top, 0);
-}
-
+/**
+ * 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
@@ -126,15 +141,15 @@ ion-header ion-toolbar:first-of-type {
 
 @supports (backdrop-filter: blur(0)) {
   .header-background {
-    left: 0;
     right: 0;
+    left: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     backdrop-filter: saturate(180%) blur(20px);
   }
   .header-translucent-ios ion-toolbar {
-    --opacity: .8;
+    --opacity: 0.8;
   }
   /**
    * Disable the saturation otherwise it distorts the content

package/dist/collection/components/header/header.js

@@ -5,17 +5,24 @@ import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonTheme } from "../../global/ionic-global";
 import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, getRoleType, } from "./header.utils";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 Header {
     constructor() {
         this.inheritedAttributes = {};
+        /**
+         * If `true`, the header will have a line at the bottom.
+         * TODO(ROU-10855): add support for this prop on ios/md themes
+         */
+        this.divider = false;
         /**
          * If `true`, the header will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          *
          * Note: In order to scroll content behind the header, the `fullscreen`
@@ -47,16 +54,17 @@ export class Header {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const mode = getIonMode(this);
-        if (mode !== 'ios') {
+        const theme = getIonTheme(this);
+        if (theme !== 'ios') {
             return;
         }
         const { collapse } = this;
         const hasCondense = collapse === 'condense';
         const hasFade = collapse === 'fade';
         this.destroyCollapsibleHeader();
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
         if (hasCondense) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
             writeTask(() => {
@@ -67,7 +75,7 @@ export class Header {
             await this.setupCondenseHeader(contentEl, pageEl);
         }
         else if (hasFade) {
-            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
                 printIonContentErrorMsg(this.el);
@@ -142,32 +150,35 @@ export class Header {
         });
     }
     render() {
-        const { translucent, inheritedAttributes } = this;
-        const mode = getIonMode(this);
+        const { translucent, inheritedAttributes, divider } = this;
+        const theme = getIonTheme(this);
         const collapse = this.collapse || 'none';
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
-        const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
-        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
-                [mode]: true,
+        const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
+        return (h(Host, Object.assign({ key: 'dd5bc73851ffb7850bed6666ba0b87cc7502b6ad', role: roleType, class: {
+                [theme]: true,
                 // Used internally for styling
-                [`header-${mode}`]: true,
+                [`header-${theme}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
+                [`header-translucent-${theme}`]: this.translucent,
+                ['header-divider']: divider,
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'b33dd723c05955bf214e0fd529d62cb977cd10ff', class: "header-background" }), h("slot", { key: '059997b1faef689561af377da348c04316288ff4' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
         return {
             "ios": ["header.ios.scss"],
-            "md": ["header.md.scss"]
+            "md": ["header.md.scss"],
+            "ionic": ["header.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["header.ios.css"],
-            "md": ["header.md.css"]
+            "md": ["header.md.css"],
+            "ionic": ["header.ionic.css"]
         };
     }
     static get properties() {
@@ -184,13 +195,33 @@ export class Header {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
+                    "text": "Describes the scroll effect that will be applied to the header.\nOnly applies when the theme is `\"ios\"`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "collapse"
             },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the header will have a line at the bottom.\nTODO(ROU-10855): add support for this prop on ios/md themes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider",
+                "defaultValue": "false"
+            },
             "translucent": {
                 "type": "boolean",
                 "mutable": false,
@@ -203,7 +234,7 @@ export class Header {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
+                    "text": "If `true`, the header will be translucent.\nOnly applies when the theme is `\"ios\"` or `\"ionic\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/header/header.md.css

@@ -1,3 +1,20 @@
+ion-header {
+  display: block;
+  position: relative;
+  order: -1;
+  width: 100%;
+}
+
+ion-header ion-toolbar:first-of-type {
+  padding-top: var(--ion-safe-area-top, 0);
+}
+
+/**
+ * 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
@@ -54,17 +71,15 @@
  * }
  */
 ion-header {
-  display: block;
-  position: relative;
-  order: -1;
-  width: 100%;
   z-index: 10;
 }
 
-ion-header ion-toolbar:first-of-type {
-  padding-top: var(--ion-safe-area-top, 0);
-}
-
+/**
+ * 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

package/dist/collection/components/header/header.utils.js

@@ -215,20 +215,20 @@ export const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
  * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
+ * @param theme The current theme.
  * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
+ * theme, otherwise 'banner'.
  */
-export const getRoleType = (isInsideMenu, isCondensed, mode) => {
+export const getRoleType = (isInsideMenu, isCondensed, theme) => {
     // If the header is inside a menu, it should not have the banner role.
     if (isInsideMenu) {
         return ROLE_NONE;
     }
     /**
-     * Only apply role="none" to `md` mode condensed headers
+     * Only apply role="none" to `md` & `ionic` theme condensed headers
      * since the large header is never shown.
      */
-    if (isCondensed && mode === 'md') {
+    if (isCondensed && theme !== 'ios') {
         return ROLE_NONE;
     }
     // Default to banner role.

package/dist/collection/components/img/img.js

@@ -3,8 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } 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.
+ *
  * @part image - The inner `img` element.
  */
 export class Img {
@@ -67,7 +70,10 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: 'da600442894427dee1974a28e545613afac69fca', class: getIonMode(this) }, h("img", { key: '16df0c7069af86c0fa7ce5af598bc0f63b4eb71a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '70377d0128ad109580598f5c0a19cdee1d1f8f2a', class: {
+                [theme]: true,
+            } }, h("img", { key: '022467667337d04384d19d78378b5cf499e1b6c9', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }