voyager-ionic-core 8.5.3 → 8.5.5

package/dist/collection/components/popover/popover.js

@@ -59,7 +59,7 @@ export class Popover {
             }
             const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
             if (!triggerEl) {
-                printIonWarning(`A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
+                printIonWarning(`[ion-popover] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
                 return;
             }
             this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
@@ -338,9 +338,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '48f108a9b74f121559626889dd5a1fcccf38fc3d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'ff24e8d9677711248a36994cce568e74ba151499', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '580c14ab48472534f59eedc5ba7fa486df25ed4e', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '9bcf47893e8d3053e2baa40511785d84feb4038c', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '4d47f2bdc01a546a88190c07f8f4700f21de6715', class: "popover-arrow", part: "arrow" }), h("div", { key: '70018c088654c1996e305b7b6b114419e97824ef', class: "popover-content", part: "content" }, h("slot", { key: '3de8e1959b8facba2fbe694947704832200d8276' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'aca68b4002a08b0e563a976a867141162c20f8b4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '62d21d1eab5c6d675d49932559ffb161747e5fec', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '1b46cc77d5302637fc979353483bb5fd780fd1d3', class: "popover-arrow", part: "arrow" }), h("div", { key: 'a5657bff26e46d1959b71eb0992e7dc8fcae86f1', class: "popover-content", part: "content" }, h("slot", { key: 'e1a98007226a46b51109e7004c4d338ca1bc0f9e' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/range/range.js

@@ -166,11 +166,11 @@ export class Range {
         const { activeBarStart } = this;
         if (activeBarStart !== undefined) {
             if (activeBarStart > this.max) {
-                printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
+                printIonWarning(`[ion-range] - The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
                 this.activeBarStart = this.max;
             }
             else if (activeBarStart < this.min) {
-                printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
+                printIonWarning(`[ion-range] - The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
                 this.activeBarStart = this.min;
             }
         }
@@ -596,7 +596,7 @@ export class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'e97cb7eab877eb1624429b4a79107130c6809cf5', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '3e065039ee048f1f70d97dba5dae98fa1315d867', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -605,10 +605,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: 'a43e9859f74f83460439efefccb5fbb9f387c9ee', class: "range-wrapper", id: "range-label" }, h("div", { key: '75352a30f30dbd0228c6138eb4324a5c021dbb48', class: {
+            }) }, h("label", { key: '27ff22842c9ea79a1b9495302b926f70c9080a95', class: "range-wrapper", id: "range-label" }, h("div", { key: 'da1f9784be02dfe87d2fef34931d8b7f2148189e', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '6a3e147c3e5d938bb2b50522a290f6fdfcf40f05', class: "native-wrapper" }, h("slot", { key: '6627236eac9f711fa9c27879a017dd994e65811e', name: "start" }), this.renderRangeSlider(), h("slot", { key: '6af3bbadacd036bc7cd30732227f76d7c64117fb', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '4389bf30b08214f5b5917fc30976b38f7bcdd29b', class: "native-wrapper" }, h("slot", { key: 'ad1b2745f8b061ee189617bb5c567e4f1d02250c', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'c6dec9e843e232af2a5f16a0f8ee56439c545d7a', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,6 +5,7 @@ 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";
@@ -289,7 +290,7 @@ export class Refresher {
     }
     async connectedCallback() {
         if (this.el.getAttribute('slot') !== 'fixed') {
-            console.error('Make sure you use: <ion-refresher slot="fixed">');
+            printIonError('[ion-refresher] - Make sure you use: <ion-refresher slot="fixed">');
             return;
         }
         const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
@@ -621,7 +622,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '4c36bffbfa32ef1bd28a60f4455c125842880659', slot: "fixed", class: {
+        return (h(Host, { key: 'c717c16f2ca3e42351848cc8ad37918dec28961d', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -1,4 +1,5 @@
 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";
@@ -106,19 +107,19 @@ export class Router {
     /** @internal */
     async navChanged(direction) {
         if (this.busy) {
-            console.warn('[ion-router] router is busy, navChanged was cancelled');
+            printIonWarning('[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) {
-            console.warn('[ion-router] no matching URL for ', ids.map((i) => i.id));
+            printIonWarning('[ion-router] - No matching URL for', ids.map((i) => i.id));
             return false;
         }
         const segments = chainToSegments(chain);
         if (!segments) {
-            console.warn('[ion-router] router could not match path because some required param is missing');
+            printIonWarning('[ion-router] - Router could not match path because some required param is missing.');
             return false;
         }
         this.setSegments(segments, direction);
@@ -156,7 +157,7 @@ export class Router {
     }
     async writeNavStateRoot(segments, direction, animation) {
         if (!segments) {
-            console.error('[ion-router] URL is not part of the routing set');
+            printIonError('[ion-router] - URL is not part of the routing set.');
             return false;
         }
         // lookup redirect rule
@@ -173,7 +174,7 @@ export class Router {
         const routes = readRoutes(this.el);
         const chain = findChainForSegments(segments, routes);
         if (!chain) {
-            console.error('[ion-router] the path does not match any route');
+            printIonError('[ion-router] - The path does not match any route.');
             return false;
         }
         // write DOM give
@@ -186,7 +187,7 @@ export class Router {
             changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index, animation);
         }
         catch (e) {
-            console.error(e);
+            printIonError('[ion-router] - Exception in safeWriteNavState:', e);
         }
         unlock();
         return changed;
@@ -228,7 +229,7 @@ export class Router {
     }
     async writeNavState(node, chain, direction, segments, redirectFrom, index = 0, animation) {
         if (this.busy) {
-            console.warn('[ion-router] router is busy, transition was cancelled');
+            printIonWarning('[ion-router] - Router is busy, transition was cancelled.');
             return false;
         }
         this.busy = true;

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

@@ -2,6 +2,7 @@
  * (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.
@@ -38,7 +39,7 @@ export const writeNavState = async (root, chain, direction, index, changed = fal
         return changed;
     }
     catch (e) {
-        console.error(e);
+        printIonError('[ion-router] - Exception in writeNavState:', e);
         return false;
     }
 };

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

@@ -6,6 +6,7 @@ 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 +83,7 @@ export class RouterOutlet {
             changed = await this.transition(enteringEl, leavingEl, opts);
         }
         catch (e) {
-            console.error(e);
+            printIonError('[ion-router-outlet] - Exception in commit:', e);
         }
         unlock();
         return changed;
@@ -178,7 +179,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '7e0a94834af9cb73ee47759fa5b2588dab3d1345' });
+        return h("slot", { key: 'df4fa3e07f10157d53129661d48282e8feec13a1' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@
  */
 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;
@@ -48,7 +49,7 @@ export class SegmentButton {
         }
         // Prevent buttons from being disabled when associated with segment content
         if (this.contentId && this.disabled) {
-            console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
             this.disabled = false;
         }
     }
@@ -69,12 +70,12 @@ export class SegmentButton {
         const segmentContent = document.getElementById(this.contentId);
         // If no associated Segment Content exists, log an error and return
         if (!segmentContent) {
-            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+            printIonError(`[ion-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') {
-            console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+            printIonError(`[ion-segment-button] - Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
             return;
         }
     }
@@ -99,7 +100,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: 'f2f679a08b131cd35d63f649b9d1f1907df30a89', class: {
+        return (h(Host, { key: 'd79dad80db69123510c6d52bbf4424558600c14a', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -115,7 +116,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, 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" }))));
+            } }, h("button", Object.assign({ key: '781fd7fef443a2fbd404b8a399d1203794759a69', "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: '64df08f60ea17481183f8ad284884b9979eaeb24', class: "button-inner" }, h("slot", { key: '2b7ef328023ab5ccc0adc6f865e5e7121467eeb8' })), mode === 'md' && h("ion-ripple-effect", { key: '1fd5e6179227925a03b6c3b5258bbf4ea99bfef1' })), h("div", { key: 'dbcedad6988b0eadeebe02bdafdedb8eb37af19c', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'f4f1789f66bdfa2de5445bc0d292116a93bad7cc', 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.ios.css

@@ -126,7 +126,7 @@
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
+:host(.has-focus) button {
   border: 2px solid #5e9ed6;
 }
 
@@ -329,7 +329,9 @@ button {
  * highlight when the select is blurred.
  */
 :host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
+:host(.select-expanded.ion-valid),
+:host(.ion-touched.ion-invalid),
+:host(.select-expanded.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 
@@ -596,7 +598,7 @@ button {
  * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
  */
 :host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,
+:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,
 :host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 1;
 }

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

@@ -4,6 +4,7 @@
 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";
@@ -71,12 +72,15 @@ export class Select {
             }
         };
         this.onFocus = () => {
+            this.hasFocus = true;
             this.ionFocus.emit();
         };
         this.onBlur = () => {
+            this.hasFocus = false;
             this.ionBlur.emit();
         };
         this.isExpanded = false;
+        this.hasFocus = false;
         this.cancelText = 'Cancel';
         this.color = undefined;
         this.compareWith = undefined;
@@ -243,11 +247,11 @@ export class Select {
     createOverlay(ev) {
         let selectInterface = this.interface;
         if (selectInterface === 'action-sheet' && this.multiple) {
-            console.warn(`Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
+            printIonWarning(`[ion-select] - Interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
             selectInterface = 'alert';
         }
         if (selectInterface === 'popover' && !ev) {
-            console.warn(`Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
+            printIonWarning(`[ion-select] - Interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
             selectInterface = 'alert';
         }
         if (selectInterface === 'action-sheet') {
@@ -703,7 +707,7 @@ export class Select {
         return h("div", { class: "select-bottom" }, this.renderHintText());
     }
     render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
+        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
         const mode = getIonMode(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
         const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
@@ -731,7 +735,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'aa7bd7fbb6479c7805486990650a406e5470fd13', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e6c0498d6c275f89344f4b5146752a047058ad88', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -741,13 +745,15 @@ export class Select {
                 'has-value': hasValue,
                 'label-floating': labelShouldFloat,
                 'has-placeholder': placeholder !== undefined,
+                'has-focus': hasFocus,
+                // TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
                 'ion-focusable': true,
                 [`select-${rtl}`]: true,
                 [`select-fill-${fill}`]: fill !== undefined,
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, 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()));
+            }) }, h("label", { key: 'f030b6bd329f8014c7227f5e5f1aeb7efa0e641a', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '7480e1b40d09e53a2942295d6c9dae474c9de810', class: "select-wrapper-inner" }, h("slot", { key: '250fd2ff08b3e6ed04c7062455a044863481fe1c', name: "start" }), h("div", { key: '11b73ad5b7decfe2d307f9d54293c21c0df3ddb8', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ddedafc89061372567bd46354ef972f08c60e19d', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '792ce27aea18a0020c17dceb0f0e293171ded3a3', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1170,7 +1176,8 @@ export class Select {
     }
     static get states() {
         return {
-            "isExpanded": {}
+            "isExpanded": {},
+            "hasFocus": {}
         };
     }
     static get events() {

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

@@ -126,7 +126,7 @@
   pointer-events: none;
 }
 
-:host(.ion-focused) button {
+:host(.has-focus) button {
   border: 2px solid #5e9ed6;
 }
 
@@ -329,7 +329,9 @@ button {
  * highlight when the select is blurred.
  */
 :host(.has-focus.ion-valid),
-:host(.ion-touched.ion-invalid) {
+:host(.select-expanded.ion-valid),
+:host(.ion-touched.ion-invalid),
+:host(.select-expanded.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
 
@@ -596,7 +598,7 @@ button {
  * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
  */
 :host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,
+:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,
 :host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 1;
 }
@@ -820,6 +822,7 @@ button {
  * If the select has a validity state, the
  * border should reflect that as a color.
  */
+:host(.select-expanded.select-fill-solid.ion-valid),
 :host(.has-focus.select-fill-solid.ion-valid),
 :host(.select-fill-solid.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
@@ -848,9 +851,9 @@ button {
  * much darker on focus.
  */
 :host(.select-fill-solid.select-expanded),
-:host(.select-fill-solid.ion-focused) {
+:host(.select-fill-solid.has-focus) {
   --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
-  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+  --border-color: var(--highlight-color);
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -872,6 +875,18 @@ button {
   max-width: calc(100% / 0.75);
 }
 
+/**
+ * When the select has a solid fill and
+ * in an item, then the icon should
+ * take on the highlight color.
+ */
+:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -965,7 +980,7 @@ button {
  * the select is focused.
  */
 :host(.select-fill-outline.select-expanded),
-:host(.select-fill-outline.ion-focused) {
+:host(.select-fill-outline.has-focus) {
   --border-width: var(--highlight-height);
   --border-color: var(--highlight-color);
 }
@@ -1167,27 +1182,33 @@ button {
   border-top: none;
 }
 
+/**
+ * When the select has an outline fill and
+ * in an item, then the icon should
+ * take on the highlight color.
+ */
+:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}
+
 :host {
   --border-width: 1px;
   --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
   --highlight-height: 2px;
 }
 
-.select-icon {
-  width: 0.8125rem;
-  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
-}
-
 /**
  * When the select is focused the label should
  * take on the highlight color. This should
  * only apply to floating or stacked labels.
  */
 :host(.select-label-placement-floating.select-expanded) .label-text-wrapper,
-:host(.select-label-placement-floating.ion-focused) .label-text-wrapper,
+:host(.select-label-placement-floating.has-focus) .label-text-wrapper,
 :host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,
-:host(.select-label-placement-stacked.ion-focused) .label-text-wrapper {
+:host(.select-label-placement-stacked.has-focus) .label-text-wrapper {
   color: var(--highlight-color);
 }
 
@@ -1212,7 +1233,7 @@ button {
 }
 
 :host(.select-expanded) .select-highlight,
-:host(.ion-focused) .select-highlight {
+:host(.has-focus) .select-highlight {
   transform: scale(1);
 }
 
@@ -1228,6 +1249,12 @@ button {
   inset-inline-start: 0;
 }
 
+.select-icon {
+  width: 0.8125rem;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+}
+
 /**
  * This rotates the chevron icon
  * when the select is activated.
@@ -1237,6 +1264,18 @@ button {
   transform: rotate(180deg);
 }
 
+/**
+ * When the select has no fill and
+ * in an item, then the icon should
+ * be the same color as the text color.
+ */
+:host(.in-item.select-expanded) .select-wrapper .select-icon,
+:host(.in-item.has-focus) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,
+:host(.in-item.ion-touched.ion-invalid) .select-wrapper .select-icon {
+  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+}
+
 /**
  * When the select is focused the icon should
  * take on the highlight color.
@@ -1246,7 +1285,7 @@ button {
 :host(.select-expanded) .select-wrapper .select-icon,
 :host(.has-focus.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
-:host(.ion-focused) .select-wrapper .select-icon {
+:host(.has-focus) .select-wrapper .select-icon {
   color: var(--highlight-color);
 }
 

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

@@ -2,6 +2,7 @@
  * (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';
@@ -103,7 +104,7 @@ export class SplitPane {
             const isMain = contentId !== undefined && child.id === contentId;
             if (isMain) {
                 if (foundMain) {
-                    console.warn('split pane cannot have more than one main node');
+                    printIonWarning('[ion-split-pane] - Cannot have more than one main node.');
                     return;
                 }
                 else {
@@ -113,17 +114,17 @@ export class SplitPane {
             }
         }
         if (!foundMain) {
-            console.warn('split pane does not have a specified main node');
+            printIonWarning('[ion-split-pane] - Does not have a specified main node.');
         }
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '76be70d7fbebc52646a5851f47accc1006615b85', class: {
+        return (h(Host, { key: '098801b5a318e2fc6913fb0d9079b1552927b99b', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '9a859530f4fb18aff43255bc3940feb9aca625d7' })));
+            } }, h("slot", { key: '8cbc6a942ecba54fc3c62027d46917db067b65c8' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@
  */
 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;
@@ -14,7 +15,7 @@ export class Tab {
     async componentWillLoad() {
         if (Build.isDev) {
             if (this.component !== undefined && this.el.childElementCount > 0) {
-                console.error('You can not use a lazy-loaded component in a tab and inlined content at the same time.' +
+                printIonError('[ion-tab] - 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>`);
@@ -41,17 +42,17 @@ export class Tab {
                 return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
             }
             catch (e) {
-                console.error(e);
+                printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
             }
         }
         return Promise.resolve(undefined);
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '2107ece2f1ebdf748bac8adb78a9ad67e7fc9057', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'c36c113e74e12b58459df9e3b546ad4856187e90', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'b4a1bc1aa79f6b82b8f77b544bcb74e65229b541' })));
+            } }, h("slot", { key: '0d7821dac70ba7a12edfb3331988f3df1566cc1a' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,6 +2,7 @@
  * (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.
@@ -145,7 +146,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        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" })));
+        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" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -376,7 +377,7 @@ export class Tabs {
 const getTab = (tabs, tab) => {
     const tabEl = typeof tab === 'string' ? tabs.find((t) => t.tab === tab) : tab;
     if (!tabEl) {
-        console.error(`tab with id: "${tabEl}" does not exist`);
+        printIonError(`[ion-tabs] - Tab with id: "${tabEl}" does not exist`);
     }
     return tabEl;
 };