@ionic/core 8.2.2-dev.11717796763.1aa87d5c → 8.2.2-nightly.20240607

package/dist/collection/components/toggle/toggle.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
@@ -116,18 +110,18 @@
 input {
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
+  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -378,12 +372,6 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 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
@@ -439,12 +427,6 @@ input {
  *   }
  * }
  */
-/**
- * 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
@@ -580,9 +562,6 @@ input {
   position: absolute;
   width: 15px;
   height: 15px;
-}
-
-.toggle-switch-icon-checked-default {
   transform: translateY(-50%) rotate(90deg);
 }
 

package/dist/collection/components/toggle/toggle.js

@@ -8,10 +8,9 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { checkmarkOutline, removeOutline, ellipseOutline } from "ionicons/icons";
 import { config } from "../../global/config";
-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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -56,8 +55,11 @@ export class Toggle {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.getSwitchLabelIcon = (checked) => {
-            return checked ? this.toggleCheckedIcon : this.toggleUncheckedIcon;
+        this.getSwitchLabelIcon = (mode, checked) => {
+            if (mode === 'md') {
+                return checked ? checkmarkOutline : removeOutline;
+            }
+            return checked ? removeOutline : ellipseOutline;
         };
         this.activated = false;
         this.color = undefined;
@@ -133,67 +135,30 @@ export class Toggle {
             this.focusEl.focus();
         }
     }
-    get toggleDefaultCheckedIcon() {
-        const theme = getIonTheme(this);
-        return theme === 'md' ? checkmarkOutline : removeOutline;
-    }
-    /**
-     * Get the icon to use for the checked icon.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     *
-     * @returns {string} The icon to use for the checked icon.
-     */
-    get toggleCheckedIcon() {
-        return config.get('toggleCheckedIcon', this.toggleDefaultCheckedIcon);
-    }
-    /**
-     * Get the icon to use for the unchecked icon.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     *
-     * @returns {string} The icon to use for the unchecked icon.
-     */
-    get toggleUncheckedIcon() {
-        const theme = getIonTheme(this);
-        const defaultIcon = theme === 'md' ? removeOutline : ellipseOutline;
-        return config.get('toggleUncheckedIcon', defaultIcon);
-    }
-    renderOnOffSwitchLabels(checked) {
-        const icon = this.getSwitchLabelIcon(checked);
+    renderOnOffSwitchLabels(mode, checked) {
+        const icon = this.getSwitchLabelIcon(mode, checked);
         return (h("ion-icon", { class: {
                 'toggle-switch-icon': true,
                 'toggle-switch-icon-checked': checked,
-                /**
-                 * The default checked icon is being modified with
-                 * styling that causes it to rotate by 90 degrees
-                 * when the theme is `ios`.
-                 *
-                 * To prevent any rotation on a custom icon that is
-                 * set through the config, we need to apply a class
-                 * that handles the styling only when the default
-                 * checked icon is being used.
-                 */
-                'toggle-switch-icon-checked-default': checked && icon === this.toggleDefaultCheckedIcon,
             }, icon: icon, "aria-hidden": "true" }));
     }
     renderToggleControl() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const { enableOnOffLabels, checked } = this;
         return (h("div", { class: "toggle-icon", part: "track", ref: (el) => (this.toggleTrack = el) }, enableOnOffLabels &&
-            theme === 'ios' && [this.renderOnOffSwitchLabels(true), this.renderOnOffSwitchLabels(false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && theme === 'md' && this.renderOnOffSwitchLabels(checked)))));
+            mode === 'ios' && [this.renderOnOffSwitchLabels(mode, true), this.renderOnOffSwitchLabels(mode, false)], h("div", { class: "toggle-icon-wrapper" }, h("div", { class: "toggle-inner", part: "handle" }, enableOnOffLabels && mode === 'md' && this.renderOnOffSwitchLabels(mode, checked)))));
     }
     get hasLabel() {
         return this.el.textContent !== '';
     }
     render() {
         const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '673ca5b84a64fe95a1fdb6db2ea8d83e07727049', onClick: this.onClick, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: 'b0d648e071bc8095998b519ce4dcdd0ea91575c0', onClick: this.onClick, class: createColorClasses(color, {
+                [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
                 'toggle-checked': checked,
@@ -202,25 +167,23 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '08a82b8dac263adf4574cfdec8643bd3c6b28e97', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f910b50abdefa78645b5b18ec47b418c2057d474', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '1d35cff3e28c69cbd49c33c62e4555a61c811f74', class: {
+            }) }, h("label", { key: '9a2fe1d16dba66a9dfef450efebf2e5cbe3dcd00', class: "toggle-wrapper" }, h("input", Object.assign({ key: '4358d18cb86da768155c17f9da3aac641296c256', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '0ec99e452164d7059cc4f93d09e5b918f82c022a', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '338ec071aa8db10dbd8839640a8ff6516f2f3734' })), h("div", { key: '7aa74ff055525617668500f46612bc03e73a7230', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '1c5cbc99905a79e842e9487eb3ca654e1bab3c66' })), h("div", { key: 'ca8196423b429899febd11c7337d768ff05df6f4', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toggle.ios.scss"],
-            "md": ["toggle.md.scss"],
-            "ionic": ["toggle.md.scss"]
+            "md": ["toggle.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toggle.ios.css"],
-            "md": ["toggle.md.css"],
-            "ionic": ["toggle.md.css"]
+            "md": ["toggle.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/toggle/toggle.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
@@ -116,18 +110,18 @@
 input {
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
+  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -378,12 +372,6 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 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
@@ -439,12 +427,6 @@ input {
  *   }
  * }
  */
-/**
- * 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/toolbar/toolbar.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
@@ -125,8 +119,8 @@
 }
 
 .toolbar-background {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -142,18 +136,12 @@
 }
 
 ::slotted(ion-progress-bar) {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   position: absolute;
 }
 
-/**
- * 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/toolbar/toolbar.js

@@ -3,15 +3,14 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
- * @slot secondary - Content is placed to the left of the toolbar text in the `"ios"` theme, and directly to the right in the `"md"` theme.
- * @slot primary - Content is placed to the right of the toolbar text in the `"ios"` theme, and to the far right in the `"md"` theme.
+ * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
+ * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
  */
 export class Toolbar {
@@ -58,30 +57,28 @@ export class Toolbar {
         }
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const childStyles = {};
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'c9f11ae0421cf4f9cae4e1abd939c325fd2d2e5e', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '4bb3a55001408a3bdf033af76b9196cb96c07c09', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '43a695fd567085bbd0aa57f800348c9bf63bd4d3', class: "toolbar-background" }), h("div", { key: '2d6a8337447c8372cdb24ed0b40deffba24d1e5a', class: "toolbar-container" }, h("slot", { key: '1ab1c4e1d92c3aea3569d8351305c360d8729f6d', name: "start" }), h("slot", { key: '8ed80710494ce7c7ea6b926f45108e09d4525d92', name: "secondary" }), h("div", { key: '42db9b97f1bddcec771dc3d24849891980ceef0a', class: "toolbar-content" }, h("slot", { key: '24969adfabc7a16283ef0f5de4dbe2f1804b9326' })), h("slot", { key: '692c4e4ef377170664da5815a66ed59361b1222e', name: "primary" }), h("slot", { key: '880abf04839952984e4053be77fe1c1a7b71981a', name: "end" }))));
+            })) }, h("div", { key: '0891db157d6e028c6d03696f13fb510ea91b0296', class: "toolbar-background" }), h("div", { key: '95fbc870d808f74af4bb18cd8f8ec8c7828a9e0b', class: "toolbar-container" }, h("slot", { key: '84d4a9644660fe00ca085055ca8d12f3647531ad', name: "start" }), h("slot", { key: 'fd361dc9c9979f59aed2fedcf94629506fae62b0', name: "secondary" }), h("div", { key: '54d2b28616a4627c55766f66dc453707752758a6', class: "toolbar-content" }, h("slot", { key: '8f65e0830cce7135640b90eb694e282cb7e5efd2' })), h("slot", { key: 'c78be11a207c8674f222543646398636956087e6', name: "primary" }), h("slot", { key: 'ab25e1601ccaa8cb0d81921b849bcb7402aa7826', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toolbar.ios.scss"],
-            "md": ["toolbar.md.scss"],
-            "ionic": ["toolbar.md.scss"]
+            "md": ["toolbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toolbar.ios.css"],
-            "md": ["toolbar.md.css"],
-            "ionic": ["toolbar.md.css"]
+            "md": ["toolbar.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/toolbar/toolbar.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
@@ -125,8 +119,8 @@
 }
 
 .toolbar-background {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -142,18 +136,12 @@
 }
 
 ::slotted(ion-progress-bar) {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   position: absolute;
 }
 
-/**
- * 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/css/test/{typography/a11y → a11y}/typography.e2e.js

@@ -3,7 +3,7 @@
  */
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
+import { configs, test } from "../../../utils/test/playwright/index";
 configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('typography: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {

package/dist/collection/global/ionic-global.js

@@ -1,120 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getMode, setMode, setPlatformHelpers, getElement } from "@stencil/core";
-import { printIonWarning } from "../utils/logging/index";
+import { getMode, setMode, setPlatformHelpers } from "@stencil/core";
 import { isPlatform, setupPlatforms } from "../utils/platform";
 import { config, configFromSession, configFromURL, saveConfig } from "./config";
+// TODO(FW-2832): types
 let defaultMode;
-let defaultTheme = 'md';
-/**
- * Prints a warning message to the developer to inform them of
- * an invalid configuration of mode and theme.
- * @param mode The invalid mode configuration.
- * @param theme The invalid theme configuration.
- */
-const printInvalidModeWarning = (mode, theme, ref) => {
-    printIonWarning(`Invalid mode and theme combination provided: mode: ${mode}, theme: ${theme}. Fallback mode ${getDefaultModeForTheme(theme)} will be used.`, ref);
-};
-/**
- * Validates if a mode is accepted for a theme configuration.
- * @param mode The mode to validate.
- * @param theme The theme the mode is being used with.
- * @returns `true` if the mode is valid for the theme, `false` if invalid.
- */
-export const isModeValidForTheme = (mode, theme) => {
-    if (mode === 'md') {
-        return theme === 'md' || theme === 'ionic';
-    }
-    else if (mode === 'ios') {
-        return theme === 'ios' || theme === 'ionic';
-    }
-    return false;
-};
-/**
- * Returns the default mode for a specified theme.
- * @param theme The theme to return a default mode for.
- * @returns The default mode, either `ios` or `md`.
- */
-const getDefaultModeForTheme = (theme) => {
-    if (theme === 'ios') {
-        return 'ios';
-    }
-    return 'md';
-};
-/**
- * Returns the default theme for a specified mode.
- * @param mode The mode to return a default theme for.
- * @returns The default theme.
- */
-const getDefaultThemeForMode = (mode) => {
-    if (mode === 'ios') {
-        return 'ios';
-    }
-    return 'md';
-};
-const isModeSupported = (elmMode) => ['ios', 'md'].includes(elmMode);
-const isThemeSupported = (theme) => ['ios', 'md', 'ionic'].includes(theme);
-const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
-/**
- * Returns the mode value of the element reference or the closest
- * parent with a valid mode.
- * @param ref The element reference to look up the mode for.
- * @param theme Optionally can provide the theme to avoid an additional look-up.
- * @returns The mode value for the element reference.
- */
-export const getIonMode = (ref, theme = getIonTheme(ref)) => {
-    var _a;
-    if ((ref === null || ref === void 0 ? void 0 : ref.mode) && isModeValidForTheme(ref === null || ref === void 0 ? void 0 : ref.mode, theme)) {
-        /**
-         * If the reference already has a mode configuration,
-         * use it instead of performing a look-up.
-         */
-        return ref.mode;
-    }
-    else {
-        const el = getElement(ref);
-        const mode = ((_a = el.closest('[mode]')) === null || _a === void 0 ? void 0 : _a.getAttribute('mode')) || defaultMode;
-        if (isModeValidForTheme(mode, theme)) {
-            /**
-             * The mode configuration is supported for the configured theme.
-             */
-            return mode;
-        }
-        else {
-            printInvalidModeWarning(mode, theme, ref);
-        }
-    }
-    return getDefaultModeForTheme(theme);
-};
-/**
- * Returns the theme value of the element reference or the closest
- * parent with a valid theme.
- *
- * @param ref The element reference to look up the theme for.
- * @returns The theme value for the element reference, defaults to
- * the default theme if it cannot be determined.
- */
-export const getIonTheme = (ref) => {
-    var _a, _b;
-    const theme = ref && getMode(ref);
-    if (theme) {
-        return theme;
-    }
-    /**
-     * If the theme cannot be detected, then fallback to using
-     * the `mode` attribute to determine the style sheets to use.
-     */
-    const el = getElement(ref);
-    const mode = (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : (_b = el.closest('[mode]')) === null || _b === void 0 ? void 0 : _b.getAttribute('mode');
-    if (mode) {
-        return getDefaultThemeForMode(mode);
-    }
-    /**
-     * If a mode is not detected, then fallback to using the
-     * default theme.
-     */
-    return defaultTheme;
+export const getIonMode = (ref) => {
+    return (ref && getMode(ref)) || defaultMode;
 };
 export const initialize = (userConfig = {}) => {
     if (typeof window === 'undefined') {
@@ -143,74 +36,33 @@ export const initialize = (userConfig = {}) => {
     }
     // Setup platforms
     setupPlatforms(win);
+    // first see if the mode was set as an attribute on <html>
+    // which could have been set by the user, or by pre-rendering
+    // otherwise get the mode via config settings, and fallback to md
     Ionic.config = config;
-    /**
-     * Check if the mode was set as an attribute on <html>
-     * which could have been set by the user, or by pre-rendering
-     * otherwise get the mode via config settings, and fallback to md.
-     */
     Ionic.mode = defaultMode = config.get('mode', doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md'));
-    /**
-     * Check if the theme was set as an attribute on <html>
-     * which could have been set by the user, or by pre-rendering
-     * otherwise get the theme via config settings, and fallback to md.
-     */
-    Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || getDefaultThemeForMode(defaultMode));
-    if (!isModeValidForTheme(defaultMode, defaultTheme)) {
-        printInvalidModeWarning(defaultMode, defaultTheme, configObj);
-        defaultMode = getDefaultModeForTheme(defaultTheme);
-    }
     config.set('mode', defaultMode);
     doc.documentElement.setAttribute('mode', defaultMode);
     doc.documentElement.classList.add(defaultMode);
-    config.set('theme', defaultTheme);
-    doc.documentElement.setAttribute('theme', defaultTheme);
-    doc.documentElement.classList.add(defaultTheme);
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }
+    const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
+    const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
     setMode((elm) => {
-        /**
-         * Iterate over all the element nodes, to both validate and
-         * set the "mode" that is used for determining the styles to
-         * apply to the element.
-         *
-         * setMode refers to Stencil's internal metadata for "mode",
-         * which is used to set the correct styleUrl for the component.
-         *
-         * If the "theme" attribute or property is set, then use it
-         * to determine the style sheets to use.
-         *
-         * If the "mode" attribute or property is set, then use it
-         * to determine the style sheets to use. This is fallback
-         * behavior for applications that are not setting the "theme".
-         */
         while (elm) {
-            const theme = elm.getAttribute('theme');
-            if (theme) {
-                if (isThemeSupported(theme)) {
-                    return theme;
-                }
-                else if (isIonicElement(elm)) {
-                    printIonWarning(`Invalid theme: "${theme}". Supported themes include: "ios" or "md".`);
-                }
-            }
-            /**
-             * If a theme is not detected, then fallback to using the
-             * `mode` attribute to determine the style sheets to use.
-             */
-            const elmMode = elm.getAttribute('mode');
+            const elmMode = elm.mode || elm.getAttribute('mode');
             if (elmMode) {
-                if (isModeSupported(elmMode)) {
+                if (isAllowedIonicModeValue(elmMode)) {
                     return elmMode;
                 }
                 else if (isIonicElement(elm)) {
-                    printIonWarning(`Invalid mode: "${elmMode}". Ionic modes can be only "ios" or "md"`);
+                    console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
                 }
             }
             elm = elm.parentElement;
         }
-        return defaultTheme;
+        return defaultMode;
     });
 };
 export default initialize;

package/dist/collection/index.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import "ionicons";
-import "@phosphor-icons/core";
 export { createAnimation } from './utils/animation/animation';
 export { getIonPageElement } from './utils/transition';
 export { iosTransitionAnimation } from './utils/transition/ios.transition';

package/dist/collection/themes/{native/test → test}/colors/theme.e2e.js

@@ -3,7 +3,7 @@
  */
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
+import { configs, test } from "../../../utils/test/playwright/index";
 /**
  * Small text is defined as 14pt (~18.5px)
  * when computing color contrast: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

package/dist/collection/utils/menu-controller/animations/overlay.js

@@ -27,8 +27,8 @@ export const menuOverlayAnimation = (menu) => {
     }
     menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
     const mode = getIonMode(menu);
-    const isIOS = mode === 'ios';
-    const opacity = isIOS ? 0.2 : 0.25;
+    const isIos = mode === 'ios';
+    const opacity = isIos ? 0.2 : 0.25;
     backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
-    return baseAnimation(isIOS).addAnimation([menuAnimation, backdropAnimation]);
+    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/push.js

@@ -14,7 +14,6 @@ export const menuPushAnimation = (menu) => {
     let menuClosedX;
     const mode = getIonMode(menu);
     const width = menu.width;
-    const isIOS = mode === 'ios';
     if (menu.isEndSide) {
         contentOpenedX = -width + 'px';
         menuClosedX = width + 'px';
@@ -30,5 +29,5 @@ export const menuPushAnimation = (menu) => {
         .addElement(menu.contentEl)
         .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
     const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
-    return baseAnimation(isIOS).addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };