@ionic/core 8.4.4-dev.11741357957.1558bd4c → 8.4.4-dev.11741376313.1cb1887d

package/dist/collection/components/radio/radio.js

@@ -14,15 +14,10 @@ import { getIonMode } from "../../global/ionic-global";
  * @part container - The container for the radio mark.
  * @part label - The label text describing the radio.
  * @part mark - The checkmark or dot used to indicate the checked state.
- * @part supporting-text - Supporting text displayed beneath the radio label.
- * @part helper-text - Supporting text displayed beneath the radio label when the radio is valid.
- * @part error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched.
  */
 export class Radio {
     constructor() {
         this.inputId = `ion-rb-${radioButtonIds++}`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
         this.radioGroup = null;
         this.updateState = () => {
             if (this.radioGroup) {
@@ -62,8 +57,6 @@ export class Radio {
         this.color = undefined;
         this.name = this.inputId;
         this.disabled = false;
-        this.errorText = undefined;
-        this.helperText = undefined;
         this.value = undefined;
         this.labelPlacement = 'start';
         this.justify = undefined;
@@ -123,37 +116,11 @@ export class Radio {
     renderRadioControl() {
         return (h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })));
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
-            return errorTextId;
-        }
-        if (helperText) {
-            return helperTextId;
-        }
-        return undefined;
-    }
-    /**
-     * Responsible for rendering helper text and error text.
-     * This element should only be rendered if hint text is set.
-     */
-    renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
-        /**
-         * undefined and empty string values should
-         * be treated as not having helper/error text.
-         */
-        const hasHintText = !!helperText || !!errorText;
-        if (!hasHintText) {
-            return;
-        }
-        return (h("div", { class: "radio-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 { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '4f01024a74c1846438372c40519df1044f5b12b9', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '5a0adab55ad009305de4856fa1b9f93f2279a734', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -164,10 +131,10 @@ export class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, tabindex: buttonTabindex }, h("label", { key: '59dc0343534e626692f3b71b32204c1b2b25d40a', class: "radio-wrapper" }, h("div", { key: '26d7d3faf1b02bb138fb2c46f83e824962b6b92e', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'f5673a798e6d87868339f046445f707e1d93b7b6', class: "radio-wrapper" }, h("div", { key: 'e9190c06f75a171cab63e3f74ccf771c3ed87005', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '9c3d8bb0c5cd3ce94d1e661d89587cf67c522bc0' }), this.renderHintText()), h("div", { key: '3183f79e2977ee001e69c23f73073555744281d8', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '6cedf4e7b3bd03e4a635727dd7b6094bab64af64' })), h("div", { key: '26dd48d9d2848b7f100b732abdc4a3171adde483', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -244,40 +211,6 @@ export class Radio {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "errorText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text that is placed under the radio label and displayed when an error is detected."
-                },
-                "attribute": "error-text",
-                "reflect": false
-            },
-            "helperText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text that is placed under the radio label and displayed when no error is detected."
-                },
-                "attribute": "helper-text",
-                "reflect": false
-            },
             "value": {
                 "type": "any",
                 "mutable": false,

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

@@ -175,39 +175,32 @@ input {
   align-items: center;
 }
 
-.radio-bottom {
-  padding-top: 4px;
-  display: flex;
+:host(.radio-justify-space-between) .radio-wrapper {
   justify-content: space-between;
-  font-size: 0.75rem;
-  white-space: normal;
 }
 
-:host(.radio-label-placement-stacked) .radio-bottom {
-  font-size: 1rem;
+:host(.radio-justify-start) .radio-wrapper {
+  justify-content: start;
 }
 
-/**
- * Error text should only be shown when .ion-invalid is
- * present on the radio. Otherwise the helper text should
- * be shown.
- */
-.radio-bottom .error-text {
-  display: none;
-  color: var(--ion-color-danger, #c5000f);
+:host(.radio-justify-end) .radio-wrapper {
+  justify-content: end;
 }
 
-.radio-bottom .helper-text {
-  display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+:host(.radio-alignment-start) .radio-wrapper {
+  align-items: start;
 }
 
-:host(.ion-touched.ion-invalid) .radio-bottom .error-text {
-  display: block;
+:host(.radio-alignment-center) .radio-wrapper {
+  align-items: center;
 }
 
-:host(.ion-touched.ion-invalid) .radio-bottom .helper-text {
-  display: none;
+:host(.radio-justify-space-between),
+:host(.radio-justify-start),
+:host(.radio-justify-end),
+:host(.radio-alignment-start),
+:host(.radio-alignment-center) {
+  display: block;
 }
 
 /**
@@ -236,7 +229,6 @@ input {
  */
 :host(.radio-label-placement-end) .radio-wrapper {
   flex-direction: row-reverse;
-  justify-content: start;
 }
 
 /**
@@ -278,7 +270,6 @@ input {
  */
 :host(.radio-label-placement-stacked) .radio-wrapper {
   flex-direction: column;
-  text-align: center;
 }
 
 :host(.radio-label-placement-stacked) .label-text-wrapper {
@@ -324,34 +315,6 @@ input {
   }
 }
 
-:host(.radio-justify-space-between) .radio-wrapper {
-  justify-content: space-between;
-}
-
-:host(.radio-justify-start) .radio-wrapper {
-  justify-content: start;
-}
-
-:host(.radio-justify-end) .radio-wrapper {
-  justify-content: end;
-}
-
-:host(.radio-alignment-start) .radio-wrapper {
-  align-items: start;
-}
-
-:host(.radio-alignment-center) .radio-wrapper {
-  align-items: center;
-}
-
-:host(.radio-justify-space-between),
-:host(.radio-justify-start),
-:host(.radio-justify-end),
-:host(.radio-alignment-start),
-:host(.radio-alignment-center) {
-  display: block;
-}
-
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -3,7 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
-import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput } from "../../utils/helpers";
+import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeNumber } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -129,11 +129,17 @@ export class Range {
         this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
     minChanged() {
+        if (!isSafeNumber(this.min)) {
+            this.min = 0;
+        }
         if (!this.noUpdate) {
             this.updateRatio();
         }
     }
     maxChanged() {
+        if (!isSafeNumber(this.max)) {
+            this.max = 100;
+        }
         if (!this.noUpdate) {
             this.updateRatio();
         }
@@ -564,7 +570,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: '05c699caaead7cc74deaae2a958c4632191473a8', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '37f1c8a1f2952dcfc900d200884b3ac7a76a349c', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -573,10 +579,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '959837bcc48c4bda33ae1f62b66ef444329a2961', class: "range-wrapper", id: "range-label" }, h("div", { key: 'a434c6b5c26f57f52b3af98d881e7e6a179c89fc', class: {
+            }) }, h("label", { key: '2833c43f2f36b95ac21ca7700d85d28527c78936', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e73b0c070244ae7e1b97b4dab05e6a9da4f559a7', 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: '87df1037b6b3337bd1fab05d33a26bf658c57914', class: "native-wrapper" }, h("slot", { key: '2cb88f101da49b70aeae29b0bf5445fac241bb2f', name: "start" }), this.renderRangeSlider(), h("slot", { key: '17b835cfb2bd9b8e1957afd425543ff02b913d83', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '1a93a9e6cc9ff5b03c4d7318f36debe462ffd7ef', class: "native-wrapper" }, h("slot", { key: '976d52d2ae6d91fc872dfe0fd6a35716693af172', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'bad89f6db73b136313ed3a195e598c2c220181c0', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,6 @@ export class Select {
         this.expandedIcon = undefined;
         this.shape = undefined;
         this.value = undefined;
-        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -656,8 +655,8 @@ export class Select {
         return renderedLabel;
     }
     renderListbox() {
-        const { disabled, inputId, isExpanded, required } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        const { disabled, inputId, isExpanded } = this;
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -688,7 +687,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'f7cf03de773cd85da42978e274d65cc1eb6ed8a3', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b2dca9ae25d88e4d9fdb55003041a66be5668fcf', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -704,7 +703,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '91674f8f5cce37c87a7096d09b3f1d351cba1527', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '2229333833047db13ed2a01cb10bb6e6f774031d', class: "select-wrapper-inner" }, h("slot", { key: 'f2766bdf8bff261efa5711f72d9edef407e45189', name: "start" }), h("div", { key: '84fec020ecaaac41298a01dbffdbb2f3744170b4', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '9b91237d7a1621bce1e15546abcb4f6b74cccc5f', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e02aea3e8f344376013257f5261a29408e62b359', class: "select-highlight" }))));
+            }) }, h("label", { key: 'c22fe9aee8cd448223497ef143e89529fcef8af6', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '601972df4579f4fa6a9c2c12865593e807decb72', class: "select-wrapper-inner" }, h("slot", { key: '5f7b1261862f74b978b26f026533e3fd1cc666ba', name: "start" }), h("div", { key: '39616da89f4b4b78432f6da85116a7de2ca589e7', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '1d7b3601b73af7c05b3627cfc8e5147ea379bb03', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'b0344f0ac15003e22fee66d3d7ed03a07da7e8b7', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1070,24 +1069,6 @@ export class Select {
                 },
                 "attribute": "value",
                 "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
-                },
-                "attribute": "required",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

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

@@ -373,7 +373,6 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
-  white-space: normal;
 }
 
 /**
@@ -397,7 +396,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -416,7 +415,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }

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

@@ -373,7 +373,6 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
-  white-space: normal;
 }
 
 /**
@@ -397,7 +396,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -416,7 +415,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -929,10 +928,6 @@
   --border-color: var(--highlight-color);
 }
 
-/**
- * The bottom content should never have
- * a border with the solid style.
- */
 :host(.textarea-fill-solid) .textarea-bottom {
   border-top: none;
 }

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

@@ -71,7 +71,6 @@ export class Toggle {
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
-        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -153,12 +152,12 @@ export class Toggle {
         return this.el.textContent !== '';
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = 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: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -168,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '484860e2a33f4d123904edb96159f0e1972d3add', class: "toggle-wrapper" }, h("input", Object.assign({ key: '360b53080aacfd99a9ff60ffb5219816bd4163ee', 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: 'f7239fa668fe11257239ea30cf0198e4f3274f6b', class: {
+            }) }, h("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', 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: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), h("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), h("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -353,24 +352,6 @@ export class Toggle {
                 },
                 "attribute": "alignment",
                 "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
-                },
-                "attribute": "required",
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/toolbar/toolbar.js

@@ -12,10 +12,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @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.
- *
- * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
- * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
- * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 export class Toolbar {
     constructor() {
@@ -66,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '4fdc9ae82a93237cc28ceb95b0ebd8069b62839d', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '443a216362bbbf1c149ed12140d52b0f0ea2d664', class: "toolbar-background", part: "background" }), h("div", { key: '1df87f4027d605e42757a13d4828df45b90a4fdc', class: "toolbar-container", part: "container" }, h("slot", { key: 'f66f34972be8e3f4915b9c6f5808600dbaedb1ea', name: "start" }), h("slot", { key: '14f38b0975e956f404c4eb3ee56f2055c6615276', name: "secondary" }), h("div", { key: '75ba5953a25c7544793484d2b245792cb0a5af75', class: "toolbar-content", part: "content" }, h("slot", { key: '149dfa58ff7106f318fecb4134e7c69edf8bc231' })), h("slot", { key: '807ab9ad21d7f1d9d427a4086460bcb9e5e8c019', name: "primary" }), h("slot", { key: 'bd2f9da95d2fa8e74dc6e0666587ceecbba99d9f', name: "end" }))));
+            })) }, h("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), h("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, h("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), h("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), h("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, h("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), h("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), h("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/floating-point/index.js

@@ -1,7 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { isSafeNumber } from "../helpers";
 export function getDecimalPlaces(n) {
+    if (!isSafeNumber(n))
+        return 0;
     if (n % 1 === 0)
         return 0;
     return n.toString().split('.')[1].length;
@@ -39,6 +42,8 @@ export function getDecimalPlaces(n) {
  * be used as a reference for the desired specificity.
  */
 export function roundToMaxDecimalPlaces(n, ...references) {
+    if (!isSafeNumber(n))
+        return 0;
     const maxPlaces = Math.max(...references.map((r) => getDecimalPlaces(r)));
     return Number(n.toFixed(maxPlaces));
 }

package/dist/collection/utils/helpers.js

@@ -374,3 +374,9 @@ export const getNextSiblingOfType = (element) => {
     }
     return null;
 };
+/**
+ * Checks input for usable number. Not NaN and not Infinite.
+ */
+export const isSafeNumber = (input) => {
+    return typeof input === 'number' && !isNaN(input) && isFinite(input);
+};

package/dist/collection/utils/logging/index.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { config } from "../../global/config";
 /**
  * Logs a warning to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
@@ -9,12 +8,9 @@ import { config } from "../../global/config";
  * @param message - The string message to be logged to the console.
  */
 export const printIonWarning = (message, ...params) => {
-    const logLevel = config.get('logLevel', "WARN" /* LogLevel.WARN */);
-    if (["WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.warn(`[Ionic Warning]: ${message}`, ...params);
-    }
+    return console.warn(`[Ionic Warning]: ${message}`, ...params);
 };
-/**
+/*
  * Logs an error to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
  *
@@ -22,10 +18,7 @@ export const printIonWarning = (message, ...params) => {
  * @param params - Additional arguments to supply to the console.error.
  */
 export const printIonError = (message, ...params) => {
-    const logLevel = config.get('logLevel', "ERROR" /* LogLevel.ERROR */);
-    if (["ERROR" /* LogLevel.ERROR */, "WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.error(`[Ionic Error]: ${message}`, ...params);
-    }
+    return console.error(`[Ionic Error]: ${message}`, ...params);
 };
 /**
  * Prints an error informing developers that an implementation requires an element to be used

package/dist/collection/utils/platform.js

@@ -67,7 +67,8 @@ const isHybrid = (win) => isCordova(win) || isCapacitorNative(win);
 const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
 const isCapacitorNative = (win) => {
     const capacitor = win['Capacitor'];
-    return !!(capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative);
+    // TODO(ROU-11693): Remove when we no longer support Capacitor 2, which does not have isNativePlatform
+    return !!((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative) || ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNativePlatform) && !!capacitor.isNativePlatform()));
 };
 const isElectron = (win) => testUserAgent(win, /electron/i);
 const isPWA = (win) => { var _a; return !!(((_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, '(display-mode: standalone)').matches) || win.navigator.standalone); };

package/dist/collection/utils/test/platform.utils.js

@@ -28,7 +28,7 @@ export const PlatformConfiguration = {
     },
     Capacitor: {
         Capacitor: {
-            isNative: true,
+            isNativePlatform: () => true,
         },
     },
     PWA: {