@ionic/core 8.5.5-dev.11744378002.17d575c2 → 8.5.5-dev.11744665184.1ec1e7e9

package/dist/collection/components/menu/menu.js

@@ -7,7 +7,6 @@ import { focusFirstDescendant, focusLastDescendant } from "../../utils/focus-tra
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
-import { printIonError } from "../../utils/logging/index";
 import { menuController } from "../../utils/menu-controller/index";
 import { BACKDROP, GESTURE, getPresentedOverlay } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
@@ -109,11 +108,11 @@ export class Menu {
         }
         const content = this.contentId !== undefined ? document.getElementById(this.contentId) : null;
         if (content === null) {
-            printIonError('Menu: must have a "content" element to listen for drag events on.');
+            console.error('Menu: must have a "content" element to listen for drag events on.');
             return;
         }
         if (this.el.contains(content)) {
-            printIonError(`Menu: "contentId" should refer to the main view's ion-content, not the ion-content inside of the ion-menu.`);
+            console.error(`Menu: "contentId" should refer to the main view's ion-content, not the ion-content inside of the ion-menu.`);
         }
         this.contentEl = content;
         // add menu's content classes
@@ -615,14 +614,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'f4f9b8291a26330f0cdfcd8821939f032ff5f1d6', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '342db8551d26604128b29b21d2d8c37593972ed9', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '8cfa5496b2b65f94b264dfbe8530ea320f97d435', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '8fd05691cb460c18aac1f7fea81bea35c2d85a53' })), h("ion-backdrop", { key: '6a157383fba333deb8e98d817320d17bf2259214', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '3c9bec2862b7fb9d88de66b1600be01f6735e3dd', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '76283b4b2a65c78646f92c3b273eea021eda499c' })), h("ion-backdrop", { key: '121c395bc4873542a1b6ae2c9e23f2e881e75d93', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav/nav.js

@@ -608,7 +608,7 @@ export class Nav {
         const finalNumViews = this.views.length + ((_b = insertViews === null || insertViews === void 0 ? void 0 : insertViews.length) !== null && _b !== void 0 ? _b : 0) - (removeCount !== null && removeCount !== void 0 ? removeCount : 0);
         assert(finalNumViews >= 0, 'final balance can not be negative');
         if (finalNumViews === 0) {
-            printIonWarning(`You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, this, this.el);
+            console.warn(`You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`, this, this.el);
             throw new Error('navigation stack needs at least one root page');
         }
         // At this point the transition can not be rejected, any throw should be an error
@@ -830,7 +830,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: 'deb28f86691b9698ca7600559d232b1a6be23e48' });
+        return h("slot", { key: '71e9b5d07fc90ca5534197a63a003a4154aabd59' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/refresher/refresher.js

@@ -5,7 +5,6 @@ import { Host, h, readTask, writeTask } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { getScrollElement, ION_CONTENT_CLASS_SELECTOR, ION_CONTENT_ELEMENT_SELECTOR, printIonContentErrorMsg, } from "../../utils/content/index";
 import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from "../../utils/helpers";
-import { printIonError } from "../../utils/logging/index";
 import { ImpactStyle, hapticImpact } from "../../utils/native/haptic";
 import { getIonMode } from "../../global/ionic-global";
 import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, translateElement, } from "./refresher.utils";
@@ -290,7 +289,7 @@ export class Refresher {
     }
     async connectedCallback() {
         if (this.el.getAttribute('slot') !== 'fixed') {
-            printIonError('Make sure you use: <ion-refresher slot="fixed">');
+            console.error('Make sure you use: <ion-refresher slot="fixed">');
             return;
         }
         const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
@@ -622,7 +621,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9784c5b59143812612d9eca4bb13351f0faa1425', slot: "fixed", class: {
+        return (h(Host, { key: '4c36bffbfa32ef1bd28a60f4455c125842880659', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/collection/components/router/router.js

@@ -1,5 +1,4 @@
 import { debounce } from "../../utils/helpers";
-import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from "./utils/constants";
 import { printRedirects, printRoutes } from "./utils/debug";
 import { readNavState, waitUntilNavNode, writeNavState } from "./utils/dom";
@@ -107,19 +106,19 @@ export class Router {
     /** @internal */
     async navChanged(direction) {
         if (this.busy) {
-            printIonWarning('[ion-router] router is busy, navChanged was cancelled');
+            console.warn('[ion-router] router is busy, navChanged was cancelled');
             return false;
         }
         const { ids, outlet } = await readNavState(window.document.body);
         const routes = readRoutes(this.el);
         const chain = findChainForIDs(ids, routes);
         if (!chain) {
-            printIonWarning('[ion-router] no matching URL for ', ids.map((i) => i.id));
+            console.warn('[ion-router] no matching URL for ', ids.map((i) => i.id));
             return false;
         }
         const segments = chainToSegments(chain);
         if (!segments) {
-            printIonWarning('[ion-router] router could not match path because some required param is missing');
+            console.warn('[ion-router] router could not match path because some required param is missing');
             return false;
         }
         this.setSegments(segments, direction);
@@ -157,7 +156,7 @@ export class Router {
     }
     async writeNavStateRoot(segments, direction, animation) {
         if (!segments) {
-            printIonError('[ion-router] URL is not part of the routing set');
+            console.error('[ion-router] URL is not part of the routing set');
             return false;
         }
         // lookup redirect rule
@@ -174,7 +173,7 @@ export class Router {
         const routes = readRoutes(this.el);
         const chain = findChainForSegments(segments, routes);
         if (!chain) {
-            printIonError('[ion-router] the path does not match any route');
+            console.error('[ion-router] the path does not match any route');
             return false;
         }
         // write DOM give
@@ -187,7 +186,7 @@ export class Router {
             changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index, animation);
         }
         catch (e) {
-            printIonError('[ion-router]', e);
+            console.error(e);
         }
         unlock();
         return changed;
@@ -229,7 +228,7 @@ export class Router {
     }
     async writeNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
         if (this.busy) {
-            printIonWarning('[ion-router] router is busy, transition was cancelled');
+            console.warn('[ion-router] router is busy, transition was cancelled');
             return false;
         }
         this.busy = true;

package/dist/collection/components/router/utils/dom.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { componentOnReady } from "../../../utils/helpers";
-import { printIonError } from "../../../utils/logging/index";
 import { ROUTER_INTENT_NONE } from "./constants";
 /**
  * Activates the passed route chain.
@@ -39,7 +38,7 @@ export const writeNavState = async (root, chain, direction, index, changed = fal
         return changed;
     }
     catch (e) {
-        printIonError('[ion-router]', e);
+        console.error(e);
         return false;
     }
 };

package/dist/collection/components/router-outlet/router-outlet.js

@@ -6,7 +6,6 @@ import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { shallowEqualStringMap, hasLazyBuild } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { printIonError } from "../../utils/logging/index";
 import { transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
@@ -82,7 +81,7 @@ export class RouterOutlet {
             changed = await this.transition(enteringEl, leavingEl, opts);
         }
         catch (e) {
-            printIonError('[ion-router-outlet]', e);
+            console.error(e);
         }
         unlock();
         return changed;
@@ -178,7 +177,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '22294f2468afd7cd1ce32639876b3807b46d0778' });
+        return h("slot", { key: '8d0c163c5f63158e16ef2db7cc3c756cf597461d' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment-button/segment-button.js

@@ -3,7 +3,6 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import { addEventListener, removeEventListener, inheritAttributes } from "../../utils/helpers";
-import { printIonError, printIonWarning } from "../../utils/logging/index";
 import { hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 let ids = 0;
@@ -49,7 +48,7 @@ export class SegmentButton {
         }
         // Prevent buttons from being disabled when associated with segment content
         if (this.contentId && this.disabled) {
-            printIonWarning(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
             this.disabled = false;
         }
     }
@@ -70,12 +69,12 @@ export class SegmentButton {
         const segmentContent = document.getElementById(this.contentId);
         // If no associated Segment Content exists, log an error and return
         if (!segmentContent) {
-            printIonError(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
             return;
         }
         // Ensure the found element is a valid ION-SEGMENT-CONTENT
         if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
-            printIonError(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+            console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
             return;
         }
     }
@@ -100,7 +99,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '1c389e3078e3bff28d673421034a2e51182acb48', class: {
+        return (h(Host, { key: 'f2f679a08b131cd35d63f649b9d1f1907df30a89', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -116,7 +115,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'cdda2e8fedc6b0d6c7699bfd924972d36de549de', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '5d76922d1b4857e49786fb9a788b800dd66c6bad', class: "button-inner" }, h("slot", { key: '813b7ca326c76e90111e89ff5ea364aa2febc8cd' })), mode === 'md' && h("ion-ripple-effect", { key: 'e782f3045e0e17e6037322d1eba2e031d036643d' })), h("div", { key: 'a7a90c898905ac5a54a0fe980ffe9455a8483a75', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '4834c567e597b05e9dcc9eeaac7c77e9b01e4849', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '8e887b5031da705a3695c0870be08696d66188de', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '73b795c39cb09438e50922abf6b3a010e31fa2b6', class: "button-inner" }, h("slot", { key: '9769ddc917d7e459bd80dcd81c10c379e73d1b3e' })), mode === 'md' && h("ion-ripple-effect", { key: '8e4c06d6bae1034af8cc5db86fcca0ae72d042b1' })), h("div", { key: 'ae73ee0e429e54a43269f99b6d3d7e1c6e8f60cc', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'd38eabe8161403799cfbad73dd6bf912d965442c', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -4,7 +4,6 @@
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -244,11 +243,11 @@ export class Select {
     createOverlay(ev) {
         let selectInterface = this.interface;
         if (selectInterface === 'action-sheet' && this.multiple) {
-            printIonWarning(`Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
+            console.warn(`Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
             selectInterface = 'alert';
         }
         if (selectInterface === 'popover' && !ev) {
-            printIonWarning(`Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
+            console.warn(`Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
             selectInterface = 'alert';
         }
         if (selectInterface === 'action-sheet') {
@@ -732,7 +731,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '03f157a6ba7453306e45228b41be0b6e71f699f3', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'aa7bd7fbb6479c7805486990650a406e5470fd13', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -748,7 +747,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '6f171e003ab60c2ef9f36be6e0c34f1bdc883d40', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'b060e7bf4f8d516d77cdd0ca2de9cb38186759ff', class: "select-wrapper-inner" }, h("slot", { key: '8e26c73e43dfa00251d211809483c8d20d676228', name: "start" }), h("div", { key: 'dd1a97120815e641de19120d20afe1bc1127c17e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '8e4999ced46bba4b3a62adeaf522f39f04c48208', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '19a7468758cac09cb6c12b8af291e3a1627230ac', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'fde3cdfd0ef7d1a20263e35ff4358ee7f61a789f', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '6fb8deedc827b6be2f19f9e57a62efefaaba200f', class: "select-wrapper-inner" }, h("slot", { key: 'a57a204ea1cbd9c4bac338f14e196e780dab0a10', name: "start" }), h("div", { key: '78b83e1484a446537e038527d539d997e330cd69', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '9fc660134e5247c4e5243c7d9d71ac6cec08705d', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '7f143285efa7fd7756dfdc5517ca33e84c8a027e', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/split-pane/split-pane.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
-import { printIonWarning } from "../../utils/logging/index";
 import { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 const SPLIT_PANE_MAIN = 'split-pane-main';
@@ -104,7 +103,7 @@ export class SplitPane {
             const isMain = contentId !== undefined && child.id === contentId;
             if (isMain) {
                 if (foundMain) {
-                    printIonWarning('split pane cannot have more than one main node');
+                    console.warn('split pane cannot have more than one main node');
                     return;
                 }
                 else {
@@ -114,17 +113,17 @@ export class SplitPane {
             }
         }
         if (!foundMain) {
-            printIonWarning('split pane does not have a specified main node');
+            console.warn('split pane does not have a specified main node');
         }
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '52cad6413ba48644e647b951d72b038469f7c07e', class: {
+        return (h(Host, { key: '76be70d7fbebc52646a5851f47accc1006615b85', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'd019e1e92a3b6faf55a7baab1ebfbfe1563873eb' })));
+            } }, h("slot", { key: '9a859530f4fb18aff43255bc3940feb9aca625d7' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -3,7 +3,6 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { attachComponent } from "../../utils/framework-delegate";
-import { printIonError } from "../../utils/logging/index";
 export class Tab {
     constructor() {
         this.loaded = false;
@@ -15,7 +14,7 @@ export class Tab {
     async componentWillLoad() {
         if (Build.isDev) {
             if (this.component !== undefined && this.el.childElementCount > 0) {
-                printIonError('You can not use a lazy-loaded component in a tab and inlined content at the same time.' +
+                console.error('You can not use a lazy-loaded component in a tab and inlined content at the same time.' +
                     `- Remove the component attribute in: <ion-tab component="${this.component}">` +
                     ` or` +
                     `- Remove the embedded content inside the ion-tab: <ion-tab></ion-tab>`);
@@ -42,17 +41,17 @@ export class Tab {
                 return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
             }
             catch (e) {
-                printIonError('[ion-tab]', e);
+                console.error(e);
             }
         }
         return Promise.resolve(undefined);
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '2eb12b019e92c5ea1922c31fdd4ac16deb1079e3', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '2107ece2f1ebdf748bac8adb78a9ad67e7fc9057', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '9619fe62aac5ae64a08f29c4933fab84fe410a3a' })));
+            } }, h("slot", { key: 'b4a1bc1aa79f6b82b8f77b544bcb74e65229b541' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { printIonError } from "../../utils/logging/index";
 /**
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot top - Content is placed at the top of the screen.
@@ -146,7 +145,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '20b97196d78c1b3f3faf31618a8a2347e087f06b', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'b0823fbae6e47743cfd12c376b365ad7e32cec7c', name: "top" }), h("div", { key: 'eaffd7e4d69ab9489a387e3bbb36e3bab72203a0', class: "tabs-inner" }, h("slot", { key: '20bb66a2937e3ec473aa59c4075ce581b5411677' })), h("slot", { key: '1529dd361f050f52074f51c73b3982ba827dc3a5', name: "bottom" })));
+        return (h(Host, { key: 'd357c4607cfc89fb88404fe12ea7ef5b397fe6bf', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '18661896589a4ab3c74164f448b928abec9b4db0', name: "top" }), h("div", { key: '3bf30ea2540a196e868a78a861824b4b5d933afd', class: "tabs-inner" }, h("slot", { key: '7cfc154d4d6c1642188ab6508a6be72c8234585e' })), h("slot", { key: '8057679c959195cbdfae156b8ae0cbfd978c5037', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -377,7 +376,7 @@ export class Tabs {
 const getTab = (tabs, tab) => {
     const tabEl = typeof tab === 'string' ? tabs.find((t) => t.tab === tab) : tab;
     if (!tabEl) {
-        printIonError(`tab with id: "${tabEl}" does not exist`);
+        console.error(`tab with id: "${tabEl}" does not exist`);
     }
     return tabEl;
 };

package/dist/collection/components/toast/toast.js

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { printIonError, printIonWarning } from "../../utils/logging/index";
+import { printIonWarning } from "../../utils/logging/index";
 import { GESTURE, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
@@ -337,7 +337,7 @@ export class Toast {
                 }
             }
             catch (e) {
-                printIonError('Toast button handler error', e);
+                console.error(e);
             }
         }
         return true;
@@ -391,9 +391,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '3eab64b719765b2992bbe9d19769f96fcde00887', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '34036afc0701173d51c9c11ea4a2e1d65685ba41', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '603f1fa61ac0f2577086cc82dfd4683d4bc77fe3', class: wrapperClass }, h("div", { key: '3b7fecbd843bd77aa4ec8d40e82827af005a9d6a', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '3abef9dfd0af960a5d6f0d17219d3f56f5e68915', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '0a7884ee2e2189e8bdd458c147e91ecd34b1c6a8', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'd927e43957f47888ce4e64f1e99c935d55757af7', class: wrapperClass }, h("div", { key: 'ca43bc42478181acdf8cdea6601a85fa95d12216', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'fdd6fb8f6e947ed002bd2e63fdc8ec7e764f4a7d', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '37c16c81ee3e4304379dfbcabdffe73db73e4653', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,6 @@
   display: inline-block;
   position: relative;
   max-width: 100%;
-  outline: none;
   cursor: pointer;
   user-select: none;
   z-index: 2;
@@ -107,23 +106,12 @@
   pointer-events: none;
 }
 
+/**
+ * The native input must be hidden with display instead of visibility or
+ * aria-hidden to avoid accessibility issues with nested interactive elements.
+ */
 input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  clip: rect(0 0 0 0);
-  opacity: 0;
-  overflow: hidden;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  display: none;
 }
 
 .toggle-wrapper {

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

@@ -24,6 +24,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class Toggle {
     constructor() {
         this.inputId = `ion-tg-${toggleIds++}`;
+        this.inputLabelId = `${this.inputId}-lbl`;
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.lastDrag = 0;
@@ -45,6 +46,14 @@ export class Toggle {
                 this.disabledChanged();
             }
         };
+        this.onKeyDown = (ev) => {
+            if (ev.key === ' ') {
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.toggleChecked();
+                }
+            }
+        };
         this.onClick = (ev) => {
             if (this.disabled) {
                 return;
@@ -187,12 +196,12 @@ export class Toggle {
         return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
+        const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = 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: 'c6db7f5bc0b358944c0d79e24aeb4d319793422f', "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '63c67d52dc47661c5758049f6278e873ab867a22', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -202,10 +211,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'f49531391f4513d084061c27ebc4c4eb1dcd02ab', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f4ab2dc29eae053f54613d1304f755e151037f47', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), h("div", { key: '85674bfab5ec1e422c787d025c4f9f5b3aadd4f2', class: {
+            }) }, h("label", { key: '723cfac071ee5ec5c75984fc64762209452e9eea', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '8fa79f49348afbce5e083d454b751f7f9cc04d3f', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '00a4415539ef677be9f6981afddcec61f7fe9487', class: {
                 'label-text-wrapper': true,
-                'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '9bdf7e85c95dc7373f18894ebfe6ad022f098107' }), this.renderHintText()), h("div", { key: '33883642b38421a82001e37db3dd5e5c643785b0', class: "native-wrapper" }, this.renderToggleControl()))));
+                'label-text-wrapper-hidden': !hasLabel,
+            }, part: "label", id: inputLabelId }, h("slot", { key: '7ce338bd5116337c9ea90805fdee7285ef7c5811' }), this.renderHintText()), h("div", { key: 'ecb5dfd2c7b534e357cba272dd4f189728555b3a', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,7 +75,6 @@
   display: inline-block;
   position: relative;
   max-width: 100%;
-  outline: none;
   cursor: pointer;
   user-select: none;
   z-index: 2;
@@ -107,23 +106,12 @@
   pointer-events: none;
 }
 
+/**
+ * The native input must be hidden with display instead of visibility or
+ * aria-hidden to avoid accessibility issues with nested interactive elements.
+ */
 input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  clip: rect(0 0 0 0);
-  opacity: 0;
-  overflow: hidden;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  display: none;
 }
 
 .toggle-wrapper {

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

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { getMode, setMode } from "@stencil/core";
-import { printIonWarning } from "../utils/logging/index";
 import { isPlatform, setupPlatforms } from "../utils/platform";
 import { config, configFromSession, configFromURL, saveConfig } from "./config";
 // TODO(FW-2832): types
@@ -47,7 +46,7 @@ export const initialize = (userConfig = {}) => {
                     return elmMode;
                 }
                 else if (isIonicElement(elm)) {
-                    printIonWarning('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+                    console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
                 }
             }
             elm = elm.parentElement;

package/dist/collection/index.js

@@ -10,7 +10,7 @@ export { getTimeGivenProgression } from './utils/animation/cubic-bezier';
 export { createGesture } from './utils/gesture';
 export { initialize } from './global/ionic-global';
 export { componentOnReady } from './utils/helpers';
-export { LogLevel, printIonError, printIonWarning } from './utils/logging';
+export { printIonError, printIonWarning } from './utils/logging';
 export { isPlatform, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
 export { getMode, setupConfig } from './utils/config';

package/dist/collection/utils/animation/animation.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonError } from "../logging/index";
 import { win } from "../browser";
 import { addClassToArray, setStyleProperty } from "./animation-utils";
 export const createAnimation = (animationId) => {
@@ -346,7 +345,7 @@ export const createAnimation = (animationId) => {
                 }
             }
             else {
-                printIonError('Invalid addElement value');
+                console.error('Invalid addElement value');
             }
         }
         return ani;

package/dist/collection/utils/hardware-back-button.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { win } from "./browser/index";
-import { printIonError } from "./logging/index";
 import { config } from "../global/config";
 /**
  * CloseWatcher is a newer API that lets
@@ -58,7 +57,7 @@ export const startHardwareBackButton = () => {
                 }
             }
             catch (e) {
-                printIonError('[ion-app]', e);
+                console.error(e);
             }
         };
         const processHandlers = () => {