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

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

@@ -1,173 +1,3 @@
-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);
-}
-
-.header-collapse-fade ion-toolbar {
-  --opacity-scale: inherit;
-}
-
-/**
- * Override styles applied during the page transition to prevent
- * header flickering.
- */
-.header-collapse-fade.header-transitioning ion-toolbar {
-  --background: transparent;
-  --border-style: none;
-}
-
-.header-collapse-condense {
-  z-index: 9;
-}
-
-.header-collapse-condense ion-toolbar {
-  position: sticky;
-  top: 0;
-}
-
-.header-collapse-condense ion-toolbar:first-of-type {
-  /**
-   * The toolbar that contains the collapsible
-   * large title should not have safe area padding applied.
-   */
-  padding-top: 0px;
-  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 {
-  z-index: 0;
-}
-
-.header-collapse-condense ion-toolbar:last-of-type {
-  --border-width: 0px;
-}
-
-.header-collapse-condense ion-toolbar ion-searchbar {
-  padding-top: 0px;
-  padding-bottom: 13px;
-}
-
-.header-collapse-main {
-  --opacity-scale: 1;
-}
-
-.header-collapse-main ion-toolbar {
-  --opacity-scale: inherit;
-}
-
-.header-collapse-main ion-toolbar.in-toolbar ion-title,
-.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
-  transition: all 0.2s ease-in-out;
-}
-
-/**
- * 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,
-.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
-  --background: var(--ion-background-color, #fff);
-}
-
-/**
- * Override styles applied during the page transition to prevent
- * header flickering.
- */
-.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
-  --border-style: none;
-  --opacity-scale: 1;
-}
-
-.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
-.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
-  opacity: 0;
-  pointer-events: none;
-}
-
-/**
- * There is a bug in Safari where changing
- * the opacity of an element in a scrollable container
- * while rubber-banding causes the scroll position
- * to jump to the top
- */
-.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;
-}
-
-/**
- * The main header is only hidden once the collapsible large
- * title is configured. As a result, if the main header loads
- * before the collapsible large title is configured then the
- * main header will be visible briefly before being hidden
- * by the collapsible large title.
- *
- * The following selector ensures that any main header
- * on a page with a collapsible large title is hidden
- * before the collapsible large title is configured.
- * Once the collapsible large title is configured the main
- * header will have the ".header-collapse-main" class, and
- * this selector will no longer apply.
- *
- * The :has(...) part of the selector ensures a couple things:
- * 1. This will only apply within a page view since the content
- * must be a subsequent-sibling of the header (~ ion-content).
- * 2. This will only apply when that content has an active condense
- *    header (the .header-collapse-condense class).
- *
- * We use opacity: 0 to avoid a layout shift.
- * We use the class (not the attribute) because the class is only
- * added when the condense effect is valid (large title present).
- * The attribute alone is not sufficient since it would match even
- * when the effect is guarded (e.g. no large title).
- */
-ion-header:not(.header-collapse-main):has(~ ion-content ion-header.header-collapse-condense) {
-  opacity: 0;
-}
-
-/**
- * The deprecated collapse="condense" prop is iOS-only.
- * On non-iOS themes, the condense header should be hidden since
- * the JS won't activate it. Uses a class instead of an attribute
- * selector because collapse is not a reflected prop, and framework
- * proxies (Angular/Vue) bind it as a property.
- */
-.header-collapse-condense-hidden {
-  display: none;
-}
-
-ion-header.header-scroll-effect-hide {
-  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-ion-header.header-scroll-effect-hide.header-scroll-hidden {
-  transform: translateY(-100%);
-  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ion-header.header-scroll-effect-hide,
-  ion-header.header-scroll-effect-hide.header-scroll-hidden {
-    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
@@ -224,15 +54,17 @@ ion-header.header-scroll-effect-hide.header-scroll-hidden {
  * }
  */
 ion-header {
+  display: block;
+  position: relative;
+  order: -1;
+  width: 100%;
   z-index: 10;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
+ion-header ion-toolbar:first-of-type {
+  padding-top: var(--ion-safe-area-top, 0);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -292,30 +124,8 @@ ion-header {
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-/**
- * The condense header should blend seamlessly with the
- * main header above it, so remove the box-shadow.
- */
 .header-md.header-collapse-condense {
-  box-shadow: none;
-}
-
-/**
- * When the condense header is active (large title visible),
- * the main header's box-shadow should be hidden so it blends
- * with the condense header below it.
- */
-.header-md.header-collapse-condense-inactive:not(.header-collapse-condense) {
-  box-shadow: none;
-}
-
-/**
- * The fade effect fades the toolbar background via --opacity-scale,
- * but box-shadow is not affected by that variable. Remove it so
- * the shadow doesn't persist when the background is faded out.
- */
-.header-md.header-collapse-fade {
-  box-shadow: none;
+  display: none;
 }
 
 .header-md.ion-no-border {

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

@@ -56,7 +56,7 @@ export const setToolbarBackgroundOpacity = (headerEl, opacity) => {
      * has collapsed, so it is handled
      * by handleHeaderFade()
      */
-    if ((headerEl.scrollEffect ?? headerEl.collapse) === 'fade') {
+    if (headerEl.collapse === 'fade') {
         return;
     }
     if (opacity === undefined) {
@@ -214,15 +214,23 @@ export const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
  * Get the role type for the ion-header.
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
- * @returns 'none' if inside ion-menu, otherwise 'banner'.
- * Condensed headers start as 'banner' and have their role
- * toggled dynamically by setHeaderActive() on scroll.
+ * @param isCondensed If ion-header has collapse="condense".
+ * @param mode The current mode.
+ * @returns 'none' if inside ion-menu or if condensed in md
+ * mode, otherwise 'banner'.
  */
-export const getRoleType = (isInsideMenu) => {
+export const getRoleType = (isInsideMenu, isCondensed, mode) => {
     // 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
+     * since the large header is never shown.
+     */
+    if (isCondensed && mode === 'md') {
+        return ROLE_NONE;
+    }
     // Default to banner role.
     return ROLE_BANNER;
 };

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

@@ -4,10 +4,8 @@
 import { Host, h } from "@stencil/core";
 import { inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
-import { 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.
  * @deprecated
  *
  * @part image - The inner `img` element.
@@ -83,10 +81,7 @@ export class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '4daddf764c49e3659b06f0998014026b5606fefd', class: {
-                [theme]: true,
-            } }, h("img", { key: 'b0438aa69baf5942b48580a79baeb9a44a9a1dd1', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '57bfb44d9850381fe7b6fcf0c9019b03f7ef86ec', class: getIonMode(this) }, h("img", { key: '888ec06a266fa2751fc0147ede6a567f4e2b29a6', 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"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -3,16 +3,11 @@
  */
 import { Host, h, readTask, writeTask } from "@stencil/core";
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
-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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class InfiniteScroll {
     constructor() {
         this.thrPx = 0;
         this.thrPc = 0;
-        this.minHeightLocked = false;
         /**
          * didFire exists so that ionInfinite
          * does not fire multiple times if
@@ -48,12 +43,6 @@ export class InfiniteScroll {
          * The value can be either `top` or `bottom`.
          */
         this.position = 'bottom';
-        /**
-         * If `true`, the infinite scroll will preserve the scroll position
-         * when the content is re-rendered. This is useful when the content is
-         * re-rendered with new keys, and the scroll position should be preserved.
-         */
-        this.preserveRerenderScrollPosition = false;
         this.onScroll = () => {
             const scrollEl = this.scrollEl;
             if (!scrollEl || !this.canStart()) {
@@ -75,16 +64,7 @@ export class InfiniteScroll {
                 if (!this.didFire) {
                     this.isLoading = true;
                     this.didFire = true;
-                    if (this.preserveRerenderScrollPosition) {
-                        // Lock the min height of the siblings of the infinite scroll
-                        // if we are preserving the rerender scroll position
-                        this.lockSiblingMinHeight(true).then(() => {
-                            this.ionInfinite.emit();
-                        });
-                    }
-                    else {
-                        this.ionInfinite.emit();
-                    }
+                    this.ionInfinite.emit();
                     return 3;
                 }
             }
@@ -131,53 +111,6 @@ export class InfiniteScroll {
         this.enableScrollEvents(false);
         this.scrollEl = undefined;
     }
-    /**
-     * Loop through our sibling elements and lock or unlock their min height.
-     * This keeps our siblings, for example `ion-list`, the same height as their
-     * content currently is, so when it loads new data and the DOM removes the old
-     * data, the height of the container doesn't change and we don't lose our scroll position.
-     *
-     * We preserve existing min-height values, if they're set, so we don't erase what
-     * has been previously set by the user when we restore after complete is called.
-     */
-    lockSiblingMinHeight(lock) {
-        return new Promise((resolve) => {
-            const siblings = this.el.parentElement?.children || [];
-            const writes = [];
-            for (const sibling of siblings) {
-                // Loop through all the siblings of the infinite scroll, but ignore ourself
-                if (sibling !== this.el && sibling instanceof HTMLElement) {
-                    if (lock) {
-                        const elementHeight = sibling.getBoundingClientRect().height;
-                        writes.push(() => {
-                            if (this.minHeightLocked) {
-                                // The previous min height is from us locking it before, so we can disregard it
-                                // We still need to lock the min height if we're already locked, though, because
-                                // the user could have triggered a new load before we've finished the previous one.
-                                const previousMinHeight = sibling.style.minHeight;
-                                if (previousMinHeight) {
-                                    sibling.style.setProperty('--ion-previous-min-height', previousMinHeight);
-                                }
-                            }
-                            sibling.style.minHeight = `${elementHeight}px`;
-                        });
-                    }
-                    else {
-                        writes.push(() => {
-                            const previousMinHeight = sibling.style.getPropertyValue('--ion-previous-min-height');
-                            sibling.style.minHeight = previousMinHeight || 'auto';
-                            sibling.style.removeProperty('--ion-previous-min-height');
-                        });
-                    }
-                }
-            }
-            writeTask(() => {
-                writes.forEach((w) => w());
-                this.minHeightLocked = lock;
-                resolve();
-            });
-        });
-    }
     /**
      * Call `complete()` within the `ionInfinite` output event handler when
      * your async operation has completed. For example, the `loading`
@@ -239,13 +172,6 @@ export class InfiniteScroll {
         else {
             this.didFire = false;
         }
-        // Unlock the min height of the siblings of the infinite scroll
-        // if we are preserving the rerender scroll position
-        if (this.preserveRerenderScrollPosition) {
-            setTimeout(async () => {
-                await this.lockSiblingMinHeight(false);
-            }, 100);
-        }
     }
     canStart() {
         return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
@@ -261,10 +187,10 @@ export class InfiniteScroll {
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '472373c70ceeb916912025d122865ec0bdd8dea2', class: {
-                [theme]: true,
+        return (h(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
+                [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
             } }));
@@ -341,26 +267,6 @@ export class InfiniteScroll {
                 "reflect": false,
                 "attribute": "position",
                 "defaultValue": "'bottom'"
-            },
-            "preserveRerenderScrollPosition": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the infinite scroll will preserve the scroll position\nwhen the content is re-rendered. This is useful when the content is\nre-rendered with new keys, and the scroll position should be preserved."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "preserve-rerender-scroll-position",
-                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -90,12 +84,6 @@ ion-infinite-scroll-content {
   display: block;
 }
 
-/**
- * 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/infinite-scroll-content/infinite-scroll-content.js

@@ -5,19 +5,15 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { config } from "../../global/config";
-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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class InfiniteScrollContent {
     constructor() {
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
-            const theme = getIonTheme(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'crescent'));
+            const mode = getIonMode(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
     }
     renderLoadingText() {
@@ -28,26 +24,24 @@ export class InfiniteScrollContent {
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '8862ba3855da134e72a07948337bd98f1650e6b3', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '7c16060dcfe2a0b0fb3e2f8f4c449589a76f1baa', class: {
+                [mode]: true,
                 // Used internally for styling
-                [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: '30ff29c1b79af534c027ca60a4f108e06be95d3b', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'b986cd6396dc2cfca6c6bdf035b133d0c8bf0150', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '1ab2391ab7fecf4c5fbbe4d4227615be2bcab02c', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+                [`infinite-scroll-content-${mode}`]: true,
+            } }, h("div", { key: 'a94f4d8746e053dc718f97520bd7e48cb316443a', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '10143d5d2a50a2a2bc5de1cee8e7ab51263bcf23', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '8846e88191690d9c61a0b462889ed56fbfed8b0d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.scss"],
-            "md": ["infinite-scroll-content.md.scss"],
-            "ionic": ["infinite-scroll-content.md.scss"]
+            "md": ["infinite-scroll-content.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["infinite-scroll-content.ios.css"],
-            "md": ["infinite-scroll-content.md.css"],
-            "ionic": ["infinite-scroll-content.md.css"]
+            "md": ["infinite-scroll-content.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -90,12 +84,6 @@ ion-infinite-scroll-content {
   display: block;
 }
 
-/**
- * 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