@ionic/core 8.7.12-dev.11764783037.19423064 → 8.7.12-dev.11764844107.1b9ced55

package/dist/collection/components/radio-group/radio-group.ionic.css

@@ -59,7 +59,7 @@
  * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
  * convert to a unit other than $baselineUnit.
  */
-:host {
+ion-radio-group {
   vertical-align: top;
 }
 
@@ -75,19 +75,19 @@
   display: block;
 }
 
-:host(.ion-touched.ion-invalid) .radio-group-top .error-text {
+.ion-touched.ion-invalid .radio-group-top .error-text {
   display: block;
 }
 
-:host(.ion-touched.ion-invalid) .radio-group-top .helper-text {
+.ion-touched.ion-invalid .radio-group-top .helper-text {
   display: none;
 }
 
 .radio-group-top {
-  font-size: var(--token-font-size-350, 14px);
-  font-weight: var(--token-font-weight-regular, 400);
+  font-size: var(--token-font-size-300, 12px);
+  font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
   text-decoration: none;
   text-transform: none;
   margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
@@ -101,16 +101,25 @@
   color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
 }
 
-/* stylelint-disable */
-:host-context(ion-list) .radio-group-top {
+ion-list .radio-group-top {
+  /* stylelint-disable */
   padding-right: var(--token-space-400, var(--token-scale-400, 16px));
   padding-left: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0px));
+  /* stylelint-enable */
+}
+:host-context([dir=rtl]) ion-list .radio-group-top {
+  padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
+  padding-left: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
-:host-context([dir=rtl] ion-list) .radio-group-top,
-:host-context(ion-list) .radio-group-top:dir(rtl) {
+[dir=rtl] ion-list .radio-group-top {
   padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
   padding-left: var(--token-space-400, var(--token-scale-400, 16px));
 }
 
-/* stylelint-enable */
+@supports selector(:dir(rtl)) {
+  ion-list .radio-group-top:dir(rtl) {
+    padding-right: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--token-space-400, var(--token-scale-400, 16px));
+  }
+}

package/dist/collection/components/radio-group/radio-group.ios.css

@@ -59,7 +59,7 @@
  *   }
  * }
  */
-:host {
+ion-radio-group {
   vertical-align: top;
 }
 
@@ -75,11 +75,11 @@
   display: block;
 }
 
-:host(.ion-touched.ion-invalid) .radio-group-top .error-text {
+.ion-touched.ion-invalid .radio-group-top .error-text {
   display: block;
 }
 
-:host(.ion-touched.ion-invalid) .radio-group-top .helper-text {
+.ion-touched.ion-invalid .radio-group-top .helper-text {
   display: none;
 }
 
@@ -144,6 +144,10 @@
  *   }
  * }
  */
+.radio-group-wrapper {
+  display: inline;
+}
+
 .radio-group-top {
   line-height: 1.5;
 }
@@ -217,7 +221,7 @@
  *   }
  * }
  */
-:host-context(ion-list) .radio-group-top {
+ion-list .radio-group-top {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;

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

@@ -226,7 +226,7 @@ export class RadioGroup {
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "radio-group-top", part: "top" }, h("div", { id: helperTextId, class: "helper-text", part: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "error-text", role: "alert" }, isInvalid ? errorText : null)));
+        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
@@ -242,12 +242,11 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const theme = getIonTheme(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '70aaac0d9192cd73d549b8a2b71dc6c1d9847436', class: {
+        return (h(Host, { key: '61befc92b686c561be1a4cc350cd02bab9c802e4', class: {
                 [theme]: true,
-            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), h("slot", { key: 'de85a24d06f348e0d7fb9fb802c7254e6658e422' })));
+            }, role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick }, this.renderHintText(), h("div", { key: '4f09341fb3d8d3ac14e1ab82841f099a9dab9435', class: "radio-group-wrapper" }, h("slot", { key: '4317ba35d152faa7ddabd7770a6cd3592dee4514' }))));
     }
     static get is() { return "ion-radio-group"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["radio-group.ios.scss"],

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

@@ -59,7 +59,7 @@
  *   }
  * }
  */
-:host {
+ion-radio-group {
   vertical-align: top;
 }
 
@@ -75,11 +75,11 @@
   display: block;
 }
 
-:host(.ion-touched.ion-invalid) .radio-group-top .error-text {
+.ion-touched.ion-invalid .radio-group-top .error-text {
   display: block;
 }
 
-:host(.ion-touched.ion-invalid) .radio-group-top .helper-text {
+.ion-touched.ion-invalid .radio-group-top .helper-text {
   display: none;
 }
 
@@ -144,6 +144,10 @@
  *   }
  * }
  */
+.radio-group-wrapper {
+  display: inline;
+}
+
 .radio-group-top {
   line-height: 1.5;
 }
@@ -217,7 +221,7 @@
  *   }
  * }
  */
-:host-context(ion-list) .radio-group-top {
+ion-list .radio-group-top {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;

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

@@ -682,7 +682,7 @@ export class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const theme = getIonTheme(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '9cca7c3c2af026ec3f002f2a2816e9604caf5eac', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'abffed8811679954ae1ccded14b09c1070aec868', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -691,10 +691,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: 'c26c87b4b7897e7dfe17c2838e85359c2639614c', class: "range-wrapper", id: "range-label" }, h("div", { key: '7f0b72f40c9e6737f15b6f3eb9933ee9c8e26e44', class: {
+            }) }, h("label", { key: '4296d7310d335ba9783d96e982159e8563a3ea35', class: "range-wrapper", id: "range-label" }, h("div", { key: '8087acc009ee1287f0ddd483669cd6284ff84004', 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: 'd0cabe21050b1cbca40d43074a198b5c488839f2', class: "native-wrapper" }, h("slot", { key: '61b055f7b19e84b900bc003dd9033707ac7c9b54', name: "start" }), this.renderRangeSlider(), h("slot", { key: '50f9cd92015d4c24a3a1a58361a716f00943829c', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: 'fa1207cbb99ccb9a9cc60c2409977c1b925476b0', class: "native-wrapper" }, h("slot", { key: 'fdbe6f0c142f3511e1b526f6d4df195c105660c5', name: "start" }), this.renderRangeSlider(), h("slot", { key: '3f03f148fbd461a7a87c8f2da5e5cba37213ef30', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -690,7 +690,7 @@ export class Refresher {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '13723330779934646621e76579049496116ef197', slot: "fixed", class: {
+        return (h(Host, { key: 'fdf580e687c1cd7c507a7357ea87a03270ff9f0b', slot: "fixed", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`refresher-${theme}`]: true,

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

@@ -53,9 +53,9 @@ export class RefresherContent {
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const theme = getIonTheme(this);
         const arrowIcon = theme === 'ionic' ? caretLeftFill : caretBackSharp;
-        return (h(Host, { key: '99eb28dbd0a72adf54c76066bf0ee91533cb8940', class: {
+        return (h(Host, { key: '3a3a3fb44f8397bb8e5019b51254ada8c26ae371', class: {
                 [theme]: true,
-            } }, h("div", { key: 'b77c81e7e222983d026e053143e55391b09a054d', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '6e21168c8aaf7185f369236406dc702d302e02ae', class: "refresher-pulling-icon" }, h("div", { key: 'f5f591937aa1249059974adc4ff197e1ec0e31d7', class: "spinner-arrow-container" }, h("ion-spinner", { key: '18c220c982f951e218777506967a82f8b55a70c0', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: '21abdd0e39a7077688b50b4f71644f9dd959509a', class: "arrow-container" }, h("ion-icon", { key: '70224906446a48bf5d8fb312b16257ca5ebce20d', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'e8af99677f773f33e1e9b49e4d854f5dd937c88a', class: "refresher-pulling-icon" }, h("ion-icon", { key: '557bd69b056d2c43d10a9a97403b4dfaaa5624dc', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'b88562e251525218f1e94ac427732632e181dd52', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '9e3ac78eb28a29ba302a5ba27c3be116e3f28688', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'b10a1f2bb18ba728b6b581fbcc522c69bc9d397c', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+            } }, h("div", { key: '3e63966e8c2b262b1f9d4a5545dbdd00e97a4c68', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'd4c8fa7151cee666520a40050c58f6e8201b14a5', class: "refresher-pulling-icon" }, h("div", { key: '2f45a17fe5fe51e81e2d7bd580fd60ce754c5989', class: "spinner-arrow-container" }, h("ion-spinner", { key: '210cd5f152453a283dbc579f545c683e3af84ea3', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: '060c8d531e90478121113f59989ac29809f48947', class: "arrow-container" }, h("ion-icon", { key: '7c30ddd2c1a6e2274e7d57f792733017c663197b', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '3dee253d56c871195dcd59eaedc2b867ac578319', class: "refresher-pulling-icon" }, h("ion-icon", { key: '46b859328da272449f316ea8f68f3c3dd545c2e7', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '56660f9f6cff1006c5552df3a9430124689d42cb', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'e8232281f251e5d0d22972fa8e38176edc3d9e5d', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '70f42df444c4669f393137f218ba9d635f76a26c', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/reorder/reorder.js

@@ -43,9 +43,9 @@ export class Reorder {
     render() {
         const { reorderHandleIcon } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'e42645240aa9a32cc6768289eb1af656ed15482d', class: {
+        return (h(Host, { key: 'ba59a095c200b70c6d847dc7362d52b315dc853a', class: {
                 [theme]: true,
-            } }, h("slot", { key: '9e6d2fb09480e7e0ef6bb84524bfc2a23fa1d9cb' }, h("ion-icon", { key: '411e5791ce7575383c54c05ba305c1c83acaacde', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+            } }, h("slot", { key: '79be263f78cc21c9c4f91326e557e65849ab1e51' }, h("ion-icon", { key: '6e5c47c8bbd33f5cd405a5fd531831cb87c8e57e', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/reorder-group/reorder-group.js

@@ -257,7 +257,7 @@ export class ReorderGroup {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5b543cb56208112bda355b3cbfeaf3bc4202c203', class: {
+        return (h(Host, { key: 'df12858536c409c76552fe79b88827b3c4a5d9c5', class: {
                 [theme]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -72,7 +72,7 @@ export class RippleEffect {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'a06d781599e14357c3acc2537059543ae3f1a1f4', role: "presentation", class: {
+        return (h(Host, { key: '502ce1841747f255dfab542914bebd0d0f4ae9bd', role: "presentation", class: {
                 [theme]: true,
                 unbounded: this.unbounded,
             } }));

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

@@ -26,10 +26,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '16797ccb67b51f90262d2ea0d6032cf0ebf1fc39', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '518b86cf40eb95e03f75a20ff44fff804ac8ec4d', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '75ef998f2acc33dd80a31233486176b770c1b26e' }, attrs), h("slot", { key: '14732a08293d1f77d87aa903dd5da07e0cff59c7' }))));
+            }) }, h("a", Object.assign({ key: 'dbf3cc12752b4fa2d3873723a8ea5a30b053d261' }, attrs), h("slot", { key: '9614e46a8d35201937f1f9a39b88f71b78efa7a0' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -184,7 +184,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '3bd64be4bba02446bf9086d9381d67dff31b5077' });
+        return h("slot", { key: '3f107f085a977b4d27c7266771a9564e3219f736' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -10,9 +10,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Row {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'd1816dec9a51e6ec6c7ddecc6968a89ae526d447', class: {
+        return (h(Host, { key: '6f5dd5032485a69ddf9510e2e539a7ba90afda47', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'f8d0c70fc77f5be3791251e0f03208ece6af517f' })));
+            } }, h("slot", { key: '994dcbbc871d606b61ff5993fb29aa1fa349c483' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchbar/searchbar.js

@@ -531,8 +531,8 @@ export class Searchbar {
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const shape = this.getShape();
         const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '82b60fcbb7bdfa4b64f64c0caf451c1ee9265efe', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '1f3d09cb5f6224e709197a2d9fe6e1e5e40a724d', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '56c1807bc9bf3a00bb065ece946ce85edce545f8', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '3f7daa2a4ec57132e8baf591542569338e7ec9c8', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'f214142fec5644d91eae82644558e6b817094957', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '47e075305f28373fffab3e006ab4014da6dfb0c8', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -546,14 +546,14 @@ export class Searchbar {
                 [`searchbar-shape-${shape}`]: shape !== undefined,
                 [`searchbar-size-${size}`]: size !== undefined,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            }) }, h("div", { key: '8b757c604bf3a4d82aabccd2522750e4f2dbcd01', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'c6b96039495f6727ea2cb7ebf51d53fef5780d74', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: 'f25d87e4f2a357df7a09f1f60db862294d8525b8', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: '1b5e1428ca6d272b329007e48481e15d4694eec2', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '14b271ab3eebf1b651a8cfd758c7880b548bb98d', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'f84a9435002eba2084ce0269fa3c926b7c03209d', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: 'e1c7a66dba99591b0e3df5966acd027a561ee0ca', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: 'bf55ac02128e22f9d303e75b9289c251bd582cdd', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '7be87313952d6fa1363d137097cc40a15edf6939', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '1ce87193499ccb682ad115a64cc5579e9bb586c9', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -544,14 +544,14 @@ export class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8ae3804f14971f29efd2541e3f8b67090ca1a329', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '578d4eb20a89742c8c3cb3109fe62a5fdf87b089', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '3688f023388c60c6e4801c94e1906c8751f076cf', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '4b9999c95622773aea0c1bf3d1ab9dc650efb5eb', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -112,7 +112,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const theme = getIonTheme(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: '5cc85aa4e25bc1ab6283ac398ccc2d342c9376bf', class: {
+        return (h(Host, { key: '75eeffd15e3581c15f48a0b12cbf5a4229b087d6', class: {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -128,7 +128,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '7edb5c84c5b04bcbaceceaa206ff859b42218102', "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: '9e8345b33328c07dd8606383f50cd97e3bd86aee', class: "button-inner" }, h("slot", { key: '0d1f9a341ee93cc654e895e874be8800c04155e8' })), theme === 'md' && h("ion-ripple-effect", { key: '468547dbcc5f778215f8a07d2a66245551048a0c' })), h("div", { key: '3d5a3020e90d6fa605b40e4cd0366052050cefd0', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '53424fb6081c608068df4bb8d9d2bb46399bafd1', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '701fd86647377f744d91eb92427c73583d229253', "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: '63634d3e500312c847194551996a2897610e0cc7', class: "button-inner" }, h("slot", { key: '89963e233c9a7ea84b7262ab84db6edbe76ee95e' })), theme === 'md' && h("ion-ripple-effect", { key: '9d766c3d48c0b2ba50ab03f2279ccf710973bbba' })), h("div", { key: 'a70f2d1a57cca4e04b00b36a6b47eb93ef4cb26e', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'aff9931755a1f643147bf0e7d2be29b35d8f9d41', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 export class SegmentContent {
     render() {
-        return (h(Host, { key: '544c24634aa3232a4df75a357a8d7f0cbff644e5' }, h("slot", { key: '7e4696d1143b5015760a92130cc977df10748cdc' })));
+        return (h(Host, { key: '81cc29460a17c32592fbf9fca6242f4bb1738aa6' }, h("slot", { key: '4f718420caf11c6672642fcf1a1bdb7f48d6cdfc' })));
     }
     static get is() { return "ion-segment-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,10 +99,10 @@ export class SegmentView {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (h(Host, { key: '8bc68146befc3d3932330785251bb981ebe2e1d7', class: {
+        return (h(Host, { key: 'caf57037127fff688f45edd7c27018fc1d8cc689', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, h("slot", { key: '90a5c5e294b875e0b26bd496f050776df3c66984' })));
+            } }, h("slot", { key: 'f93d19747ed3f04ee5a966412f62f2900ee45480' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -899,7 +899,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '99fad4183f43fb174d54ed5326eae49f79eedaf9', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f7cd507ad8d9a480ed2f48237a63def44fb5cfbe', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -918,7 +918,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: 'bbc1780390ebd45db608ac698065e6909f2331be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '7859cd07b2f5bb46f0ea9dba72805302fd32b835', class: "select-wrapper-inner" }, 
+            }) }, h("label", { key: '773c355e02fad6946eb0515b517c7e33308d9d36', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'ff3d179c5e2944c61a3096214f1530317571623f', class: "select-wrapper-inner" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -928,7 +928,7 @@ export class Select {
          * <label> element, ensuring that clicking the label text
          * focuses the select.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '678234860c82cb83caabaf657c029a03d1aa6d17', class: "select-outline" }), h("slot", { key: '671c8d98d784093d9718a9ec14a758e643e186ac', name: "start" }), h("div", { key: '1f35b6a8ebc055abd988c747d758972fc5ed4c34', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'fbff0ecc4960af326cdbbe0dc20207ac2d9154ab', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '09ff7ce8e3b6804329daeeced8bc156582aabcd9', class: "select-highlight" })), this.renderBottomContent()));
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '7830f405008ed239d439fa2cdb631c956b94b09f', class: "select-outline" }), h("slot", { key: '9bb2454c635cff619fde5cd09a87fc3bc279e063', name: "start" }), h("div", { key: '8238a804b15f9a14152aed0296ede7340ebcb293', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'f69bcdea9ffb8047f8833d08eaf4fc5f4647fcbf', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'cea830f2652a7d26b60be500caf89a11dcba5fbc', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,7 +82,7 @@ export class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: 'dc377d9dc34389b1755dc0c86a3fb145d1c24bcb', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: 'ee5b06c52d79b92a172b8d347b977264adc879e0' }, h("ion-toolbar", { key: 'a67603902b5fef8cb9931c0b3a47095dcc44ebfc' }, this.header !== undefined && h("ion-title", { key: 'aad40c470d3e29f90ff6187b593f5d00e0e83017' }, this.header), h("ion-buttons", { key: '91961a528b08b0bcb7078ee783c523c1aa9cd4e4', slot: "end" }, h("ion-button", { key: 'd891eadde7a5f3803dcade9ef161058bec62c2aa', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '55522714075a0959a10bb8501dc40fa99fed52d5' }, h("ion-list", { key: '24d68ca271dacc295a619581aa42a7a1f9327101' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '2ceb196accee272559c43225a859befa68027333', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: 'b0176847bd9ce94e28d72766d6a035a93ff6f10a' }, h("ion-toolbar", { key: '49c2b1cf8e82b1d975cca67b154b149823b47b1f' }, this.header !== undefined && h("ion-title", { key: 'fdc881fd94c07ca38d60e85170d176c7cf4139fb' }, this.header), h("ion-buttons", { key: '8dfc972aa974909ecf2e5782e972b959a900f8c5', slot: "end" }, h("ion-button", { key: 'b862896118bd4da0afc17925eab9dc9ed5269220', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'a7f5bf8f88377d978d2c7bdba3abefcc332296a3' }, h("ion-list", { key: '23529677979b9ac63e2cba8d55f7f965489b74c5' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }

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

@@ -17,7 +17,7 @@ export class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5b4a79f7d8443348023f865f46a5e898a6bdddbf', class: {
+        return (h(Host, { key: '39af595655b3645c923617fe4d4fa64112008273', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }

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

@@ -105,9 +105,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f6082eeccf950e96a7752a12593971f32e50d785', class: {
+        return (h(Host, { key: '9b5160e6657620038fb4167ab7d08e2687be554b', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: 'e6089be41ea94a6a31096ee56b7563f386c210ab' }, header !== undefined && h("ion-list-header", { key: 'd6ea5d7e0b24d0f748ee17430a49ac55bf400b68' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '408e2edd5281fa5e334f85ebdc2f609dd215df0d' }, h("ion-label", { key: '097097fd1618b4f21286e9b26102082e5e942351', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '144ce0f0f323ed6b9044e4329b690ecbdf13fbe6' }, subHeader), message !== undefined && h("p", { key: 'a9bd9f14f9aeba86041363662df1a8dff6f4d565' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: '5f015bcc53bf96de3da98f05a73c6e1e7bc3250c' }, header !== undefined && h("ion-list-header", { key: 'e7275a4b3b0b8706b6a89ed9fd4bf1bb6cf274a8' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ca5750144abaf01d613f7ff4923939e6d6f4c0c8' }, h("ion-label", { key: '299735684f529e05f08405b6587dec23fb8d2851', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'af85ac2c17050eca4902811a886e7001b92701fe' }, subHeader), message !== undefined && h("p", { key: 'f64006af8f2ffaf41d6d21701efa2d40580796e0' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -32,11 +32,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'fba9d20aad31958d6902ac95a5983ea7503452f1', class: {
+        return (h(Host, { key: '5014563646b6c5213750d503babce3013b66ec96', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'b9adb4511497d2add4a1403d548f880b2ad4f9f8' }, "\u00A0")));
+            } }, h("span", { key: '4b816883b1c71bb1db66d8b2b084559f7cb489bd' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -56,7 +56,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '09db378858cf93fb45207a8ebbce7d8694c1146e', class: createColorClasses(self.color, {
+        return (h(Host, { key: '0b3ce4b99c2c828d05b507c4f073811ebbe17d0f', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

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

@@ -130,12 +130,12 @@ export class SplitPane {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '96e6f7921d5e322f6d0e63d7a091c186672113fe', class: {
+        return (h(Host, { key: '9d0c67f1f81b09bb9a6f14a66053e5cc7431a286', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`split-pane-${theme}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '276c53411f85df47f8900d9641e49b7dde2a1d97' })));
+            } }, h("slot", { key: 'ab7b3050d3c5484bd00949cf57efa4396b4d5bc3' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,10 +51,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '8da1165ec5d467d52d85231140b552c7e192dfb1', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'b249545a5adfcef4616afe79aa0f215bab464d0a', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'a104f6b69b54ee7f6b079e1da0ee7f8ac0c83dfa' })));
+            } }, h("slot", { key: '19e2a406d96d20d8d4af8c3ff900e975d06021f6' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,13 +91,13 @@ export class TabBar {
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '690eeb0fdb21367c58f510abae55206e264c8174', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'c659f0d907c52602880822351d21c78339d2b6d3', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: '94fb104e5cd0d91500fe04cdf25751b0441db361' })));
+            }) }, h("slot", { key: '34000fa9365e40f29a7aaf9669b523292b304af8' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -93,7 +93,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: 'bbd96f928c0a3c592a9fa95cd49c1274b9f9e3eb', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '5a32785eaf0570cdc3444d52ce8bba8174c3e0b9', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [theme]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -106,7 +106,7 @@ export class TabButton {
                 'ion-selectable': true,
                 [`tab-button-shape-${shape}`]: shape !== undefined,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: 'fcfd5c5be379451d709a1e7ae907558a68fc4bf4' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '6152ebde73654019209447585a4f4a94e3dc545c', class: "button-inner" }, h("slot", { key: 'e3e4f09a6540beff64175146d9238e2d6a81fe2a' })), theme === 'md' && h("ion-ripple-effect", { key: '48ad9c1690c42e7ffef0a6a5f6a2606bc4139abc', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '1441f409b4a60823a57f27b90f6840b557b7d65a' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), h("span", { key: '1566ca0af66b6e51068aca221a89133d2af061ed', class: "button-inner" }, h("slot", { key: '757878091cfe3768107eb0a53b8d1c895ce43399' })), theme === 'md' && h("ion-ripple-effect", { key: '28dde3e7127bdc9d5e1477b47458a5a4ab71328e', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -165,7 +165,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '2d9bb0241c3351b816e6c80fe2b2278d42121772', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'd7fccd9ac7e51584ddb95e317e0b4f45824673f8', name: "top" }), h("div", { key: '462be1fbbf3d1ae1d2fee73f800262df37dae318', class: "tabs-inner" }, h("slot", { key: '1e179d234415a3b7c9d06854733d30d386418d44' })), h("slot", { key: '1f8af243c87a26a21fb82916450aad018d091dc6', name: "bottom" })));
+        return (h(Host, { key: '9c05f69a72ab24897f1febab0928783d08224734', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '56407c9562bfd095e0259e430879151b824287fd', name: "top" }), h("div", { key: '6a86ceff372b8a60342040d9361ad31bf05e80ec', class: "tabs-inner" }, h("slot", { key: 'a554d3e835236a87686a0a53bd16d3124e77c0c5' })), h("slot", { key: 'd241d4cfba26a7ce3a3f93703dae18b8857bd9ee', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.js

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Text {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '9a5adf32d207dd4bc5e8c3a24d985a37d432ee36', class: createColorClasses(this.color, {
+        return (h(Host, { key: '7a3f31d6e219207a1ff98ac441357caa512012e5', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: '6155082d13b727b54c15909cf96c2f8e7c920fac' })));
+            }) }, h("slot", { key: '392d48d6a5e0e5d1b44e762ec96fb8b53b3ebd49' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }