@ionic/core 8.4.1-dev.11732561669.1ff93af7 → 8.4.1-dev.11732646949.1aaebad5

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

@@ -5,12 +5,10 @@ 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 { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, } from "./header.utils";
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Header {
     constructor() {
@@ -27,7 +25,6 @@ export class Header {
             handleHeaderFade(this.scrollEl, this.el, condenseHeader);
         };
         this.collapse = undefined;
-        this.divider = false;
         this.translucent = false;
     }
     componentWillLoad() {
@@ -43,17 +40,16 @@ export class Header {
         this.destroyCollapsibleHeader();
     }
     async checkCollapsibleHeader() {
-        const theme = getIonTheme(this);
-        if (theme !== 'ios') {
+        const mode = getIonMode(this);
+        if (mode !== '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(`${appRootSelector},ion-page,.ion-page,page-inner`);
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             // Cloned elements are always needed in iOS transition
             writeTask(() => {
@@ -64,7 +60,7 @@ export class Header {
             await this.setupCondenseHeader(contentEl, pageEl);
         }
         else if (hasFade) {
-            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
+            const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
             const contentEl = pageEl ? findIonContent(pageEl) : null;
             if (!contentEl) {
                 printIonContentErrorMsg(this.el);
@@ -139,34 +135,31 @@ export class Header {
         });
     }
     render() {
-        const { translucent, inheritedAttributes, divider } = this;
-        const theme = getIonTheme(this);
+        const { translucent, inheritedAttributes } = this;
+        const mode = getIonMode(this);
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: '2b8adbae18480acf564d2b16b2f741066fc18ae5', role: roleType, class: {
-                [theme]: true,
+        return (h(Host, Object.assign({ key: 'b6cc27f0b08afc9fcc889683525da765d80ba672', role: roleType, class: {
+                [mode]: true,
                 // Used internally for styling
-                [`header-${theme}`]: true,
+                [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
-                [`header-translucent-${theme}`]: this.translucent,
-                ['header-divider']: divider,
-            } }, inheritedAttributes), theme === 'ios' && translucent && h("div", { key: 'c42ffce2d92eababd3f8d521c110359a05e0e83f', class: "header-background" }), h("slot", { key: '721bdded45ab3a8478f139f369a08af7cf8cbbf1' })));
+                [`header-translucent-${mode}`]: this.translucent,
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '395766d4dcee3398bc91960db21f922095292f14', class: "header-background" }), h("slot", { key: '09a67ece27b258ff1248805d43d92a49b2c6859a' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
         return {
             "ios": ["header.ios.scss"],
-            "md": ["header.md.scss"],
-            "ionic": ["header.ionic.scss"]
+            "md": ["header.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["header.ios.css"],
-            "md": ["header.md.css"],
-            "ionic": ["header.ionic.css"]
+            "md": ["header.md.css"]
         };
     }
     static get properties() {
@@ -183,29 +176,11 @@ export class Header {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "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)"
+                    "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)"
                 },
                 "attribute": "collapse",
                 "reflect": false
             },
-            "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"
-                },
-                "attribute": "divider",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "translucent": {
                 "type": "boolean",
                 "mutable": false,
@@ -218,7 +193,7 @@ export class Header {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the header 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 header, the `fullscreen`\nattribute needs to be set on the content."
+                    "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."
                 },
                 "attribute": "translucent",
                 "reflect": false,

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

@@ -1,20 +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);
-}
-
-/**
- * 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
@@ -71,15 +54,17 @@ ion-header ion-toolbar:first-of-type {
  * }
  */
 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

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

@@ -127,13 +127,32 @@ mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
 };
 export const setHeaderActive = (headerIndex, active = true) => {
     const headerEl = headerIndex.el;
+    const toolbars = headerIndex.toolbars;
+    const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
     if (active) {
         headerEl.classList.remove('header-collapse-condense-inactive');
-        headerEl.removeAttribute('aria-hidden');
+        ionTitles.forEach((ionTitle) => {
+            if (ionTitle) {
+                ionTitle.removeAttribute('aria-hidden');
+            }
+        });
     }
     else {
         headerEl.classList.add('header-collapse-condense-inactive');
-        headerEl.setAttribute('aria-hidden', 'true');
+        /**
+         * The small title should only be accessed by screen readers
+         * when the large title collapses into the small title due
+         * to scrolling.
+         *
+         * Originally, the header was given `aria-hidden="true"`
+         * but this caused issues with screen readers not being
+         * able to access any focusable elements within the header.
+         */
+        ionTitles.forEach((ionTitle) => {
+            if (ionTitle) {
+                ionTitle.setAttribute('aria-hidden', 'true');
+            }
+        });
     }
 };
 export const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {

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

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

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

@@ -3,11 +3,7 @@
  */
 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;
@@ -169,10 +165,10 @@ export class InfiniteScroll {
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '3971866ac11e0f69f190fd5bb5480a95df15cb87', class: {
-                [theme]: true,
+        return (h(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
+                [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
             } }));

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,11 +5,7 @@ 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);
@@ -18,8 +14,8 @@ export class InfiniteScrollContent {
     }
     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() {
@@ -30,26 +26,24 @@ export class InfiniteScrollContent {
         return h("div", { class: "infinite-loading-text" }, this.loadingText);
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '20ca28daa34f09e95b1699f9481569020ad55411', 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: '029201e011c29bc3ee0519d00a966f9310c9d477', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'f861f13fdef284dda58e8cfe31cca7433fea5836', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '75a2520c449372eb6398a35bf9fa6e21eb073fcd', 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

package/dist/collection/components/input/input.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
@@ -79,7 +73,6 @@
    * @prop --highlight-color-focused: The color of the highlight on the input when focused
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
-   * @prop --text-color-invalid: The color of the error text on the input when invalid. Only applies to ionic theme.
    *
    * @prop --border-color: Color of the border below the input when using helper text, error text, or counter
    * @prop --border-radius: Radius of the input. A large radius may display unevenly when using fill="outline"; if needed, use shape="round" instead or increase --padding-start.
@@ -142,18 +135,18 @@
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
   display: inline-block;
   position: relative;
   flex: 1;
@@ -613,12 +606,6 @@
   display: 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
@@ -674,12 +661,6 @@
  *   }
  * }
  */
-/**
- * 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