@ionic/core 8.3.3-dev.11729027747.1d05ced8 → 8.3.3-dev.11729113140.194d2c73

package/dist/collection/components/picker-legacy/picker.js

@@ -185,11 +185,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '8a6fbaba4b5b1e1c25dc500c12279e8e6da7bc81', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '41c66813661ae02c59a8b795943b9282c24f61bd', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '18c21f02bc11f7036e128556c7625745fdd5fca5', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '848a54b270802ac8562a6e10ab16ccb64032e6f5', tabindex: "0" }), h("div", { key: 'ac70a708843f692920fa7152b15e60cdd43c9d3f', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '3e23b0b06e9e5cb35e92d54152af5da3675788df', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '9ed2e90944e13ce3f3def7d2633c624ba80c386f', class: "picker-columns" }, h("div", { key: '60469764c9ece9b807a407fc7f3bb1ec1a89feea', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '73f76b64b8dd8479624c8ea571b724a643e7dc86', class: "picker-below-highlight" }))), h("div", { key: 'dbf7f2f16f01d89bdae0446c1eaa76cb3d30907a', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '1ba78b0ef99deea852476e940964a75085fe45a4', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '3bc22eb55a9926f32c622b30f1c21275aa2ede54', tabindex: "0" }), h("div", { key: '3508962e9916d66587bc8647768a32d2d2db4b5d', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'f5a76c4a96a54005d47330555b65e78dec02e660', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '4c84d83b45049178f5b0dc637fdcb6465cc6c9bd', class: "picker-columns" }, h("div", { key: 'd60a97c7051f9384e145b7161d9f1d84eded461e', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'aec1e91002df5c9e938edebbfbacb24047b0396e', class: "picker-below-highlight" }))), h("div", { key: 'b0b4c9db4e2a6943c3192d62f19caae41bdfcb8a', tabindex: "0" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/picker-legacy-column/picker-column.js

@@ -336,9 +336,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '0d919e35ebc1d66b8548b180cc0d853e43c49cf0', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: 'e50365e8574492d32c3b4a8a0d816d9a2d5b4080', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '3c3b1fabf798fca9605f5d2fd0b921df2605b529', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '8f2f88a4db95dcea39dd050f70e85ed9a63ed148', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '943b3f0ebd9be83f508052cf5255a4155263c85e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: 'aa48f883c088203dd9dadcfe688f49cacd40f4f7', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '72545ed57bd4782d81df2cb0ea9c1edc08f23e88', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '0accccde44b8fa36b5f481ae98760e00ddb234a9', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

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

@@ -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: '3fb56a3f534f7f7c11148adea60d2a3e425e95b6', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '6c456ad62ea699fe70a542781802dcb8cb958a8a', "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: '64a58b057035e83fbe3fe3694b704dd235fa9dc9', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '50452b335a7e07597156dfef9e86fa0c9db59cf5', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '0f2b48c6f9966695839c0b79c7bddfd405ecae4d', class: "popover-arrow", part: "arrow" }), h("div", { key: 'acff2e5666ec92f710266096191c8a1fed8a4eb9', class: "popover-content", part: "content" }, h("slot", { key: '1c945e3ebfc268c4d45f56d6619fcee9e9d6b264' })))));
+            }, 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: 'bf5a1fd6f8ec553e21dea63d5afa0c48fbb12c52', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '0c50981b2ae878c0e02f0611f7e439fa936fd055', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '2bd0e1400d4513a263698b345e0eebcd61db6e27', class: "popover-arrow", part: "arrow" }), h("div", { key: '63f04983fde14a85418765d6141577c046104a31', class: "popover-content", part: "content" }, h("slot", { key: '867079efbdc26601bd5b315df21292fc3b4afd91' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,7 +28,7 @@ export class ProgressBar {
         const mode = getIonMode(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'ae7c5fd83c4eebdc69e1a3b161ea1818d2e2d0c8', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'a90c4be2c4de8c9046f090076181b804b1f069b4', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

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

@@ -118,7 +118,7 @@ export class Radio {
         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: '1f7619e05654988ff72423f98a809015393ce6d8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'e9fe7969b6700228a0214dd6a532bf0633fccaa7', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -129,10 +129,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, tabindex: buttonTabindex }, h("label", { key: '61fed6e73ad342a80e5667e83c8706826b957170', class: "radio-wrapper" }, h("div", { key: '1f9313920d8c02ca995a361407aa7431ffa695bd', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '5c6329195a622e2d478382d893904a50bf92852e', class: "radio-wrapper" }, h("div", { key: '3e9584758ad0121c846ad4142273debd7685e13d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '3bfaf80b494ef4c259d1b6c6960f0583ffa065b4' })), h("div", { key: '00c4aea6ca76fb080fd684b6877c8323ff9c80bd', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '59768ea8d56a347be1cef5afdec0f5c447cdc673' })), h("div", { key: 'd5b7e6cb933a7fd6b4ea32c2c0366cdf6cc524ab', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -153,7 +153,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: '61409ef532b6d027fb134ee548a7b696acd21063', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: 'c2e097642c00535aab791f7bb2672059211ca822', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {

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

@@ -564,7 +564,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: '2d286a82e73559f43493731b9c7581eb87b4a753', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '454a0ddaad56c5f59394ca55bcd9d8de0fd77247', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -573,10 +573,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '01ab29b6aee2c74f865e7e50aa735471decccb94', class: "range-wrapper", id: "range-label" }, h("div", { key: '4f7b15d46f197c8d0e8a7dc9e7919feda36ffd8e', class: {
+            }) }, h("label", { key: 'b8649fece7c94a9a41722a2960f070c6f4e7312a', class: "range-wrapper", id: "range-label" }, h("div", { key: 'df15bccc14bb6718a7f31b825a1ec50bf535d0e5', 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: 'd5f0e64c957b0c2d59f4305c6ba1c2bf4906b525', class: "native-wrapper" }, h("slot", { key: '8ae6c8cd4b93397c619076a15a4e76eb80f8d581', name: "start" }), this.renderRangeSlider(), h("slot", { key: '7234e46f2936c9865968fb33367508703849962b', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '2e5c7ab3cfc8665222d43e13834e69599a0f68a7', class: "native-wrapper" }, h("slot", { key: '472bc27d58ad3402ee71f6eccec3750f6932e72f', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'a8ce8714b235c510cf2aace2002c79234642dcfc', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -621,7 +621,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8c08a2d699b1613808af48e9c9e06f1a8d856f47', slot: "fixed", class: {
+        return (h(Host, { key: 'c209cf4d49269d517f9ace62d91879fe0492bd59', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -52,7 +52,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '2226ce5ae5effdaa14505bad9f1c883d2bd88db7', class: mode }, h("div", { key: '0392dcb820113dba17ea07eb8e385773f1a3c9b7', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '2d7a335cbc5edf20f448c554a373c9414b842cb1', class: "refresher-pulling-icon" }, h("div", { key: 'e5e4d42002d6e48ae1a4f0fee1ae7fc8f1487899', class: "spinner-arrow-container" }, h("ion-spinner", { key: '84a733d4d22327c533099546758e36325ec0c3d8', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '98f6c220fa089f134d3fbe3eec9778c5c298691f', class: "arrow-container" }, h("ion-icon", { key: '792d8fc6c977b73ac17548907498eb765842d70e', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '7979c4ed0926373c9c7d74eef53c48c5a7aa0f86', class: "refresher-pulling-icon" }, h("ion-icon", { key: '2b366f65d2f6813e9b0fc3a375d30cf705af117f', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'da2426dc081ea3e5750852c46616fee50403ed96', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '045144d6495002e1f33e697a74e06456cff9061f', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '653001cff51cfcae7e5a152fe7c227ebe9368072', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: '000cbb6ccd62e15244dbf35d0e2e3d870a8c66de', class: mode }, h("div", { key: '0564628fd4faea5f7b864f906da0dedafaf138b5', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '14f5cacad23759d382441fbf07838b93ea0abec3', class: "refresher-pulling-icon" }, h("div", { key: '597a02a7cad61fc48c540af66006c40df8188fdc', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'a64a0050b2577374fed29f93555aec33d9567814', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'cabdb67e34fa2445e54f74344dfcb9af8efcd960', class: "arrow-container" }, h("ion-icon", { key: '31288638000fe2fb96dde2ea7f84dc1861062c64', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '126d12b4f8daac9b371e7745ec3da81c4d103e49', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd595188d7d12707c34ce403a840c8065c71a2dae', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'df8feeebbf8792f0aac89ebb5f39ae285cd99235', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'ae358a91df46fdd564ab9052c7251d5d3dd52bc0', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '706558bac955c07c37795d5d6fd49835023f0cb7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

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

@@ -20,7 +20,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: 'e8018ca68cc5a9af1bbcaeb812e6a7b2ec207593', class: mode }, h("slot", { key: '6a573c2b8b720c34b8e63fdf308f49cb8dcca7c7' }, h("ion-icon", { key: '62ddc78fc1a698550c02a900c252806bb6e6741a', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '9a4abd6877909177380ba3ba52d2d9150c1e3c69', class: mode }, h("slot", { key: 'f7bea4ba8eeb7fa71a72297eeecda51974b635d3' }, h("ion-icon", { key: '28949301a195139ade44e7f2c5221ef78b39bb03', icon: reorderIcon, 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

@@ -238,7 +238,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '5b2613deecc26faa24e2a329cb76620d29517af6', class: {
+        return (h(Host, { key: '79108cff45d1221e90f5e5599554aa1a23e3d381', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

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

@@ -59,7 +59,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9aede04edeb34b2fb6abf0390f70ba671dff4ab5', role: "presentation", class: {
+        return (h(Host, { key: 'c4c55cb30434f211181ca790bbaf5a04575bc57e', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

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

@@ -23,10 +23,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '7b104b8b4d6d36394604342225a9cd3bcc232297', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '7792f1c67d128e9ae0d5194e0d74fa00b03c306a', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '689e38a58764eca01bc42448f8ec4d0cad66b7b6' }, attrs), h("slot", { key: 'c7c24a3b278f323efc18b842652104799bfe8887' }))));
+            }) }, h("a", Object.assign({ key: 'a6da6253ebe2fc62b1629b48381da5b6759d1bd9' }, attrs), h("slot", { key: '4509747252d25b96b863175baac5d6494e0b9074' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -177,7 +177,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: 'a1247f129b8870ff4f4183c79ab374f310a76352' });
+        return h("slot", { key: '67aa47a11d787944155e37f6388871b9f4fe880d' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Row {
     render() {
-        return (h(Host, { key: 'f9f4d3c89addc79724792514644c24525cc3e736', class: getIonMode(this) }, h("slot", { key: 'a1f5d3f68784e8624c95508daa021b90395d6a22' })));
+        return (h(Host, { key: 'fcf3fb836ae45d8ab16e50936a119bb31339d24f', class: getIonMode(this) }, h("slot", { key: 'ba0c95854c655143175f9661c09ac1d1ffc1daf1' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -378,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'cfa61e0089581dfa8eba471c87a81fabb4dfe3b3', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '930f1ad5533a182369c793ac5f9e8e534a97dfdc', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '645dcb19bb2acb42b4a0b8298416bd765dc312fa', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '6d3c4d6dbbc835e27024e99bdf502278b0420c21', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '272d81399afa83bd6f10119a2a5aa2bfdaad5a81', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'c2e4e81b3be4a7cfe3948f3582f6d726c9ec6787', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -389,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '650d6aa2a8bd3a560762bbe3b98cc549520ac93c', class: "searchbar-input-container" }, h("input", Object.assign({ key: '04eddba089d1082d9eb2da4ba4a0dc6878402a94', "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)), mode === 'md' && cancelButton, h("ion-icon", { key: '61f88b7a167eaf41748adfe40352dd5597efc4c4', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'a73f3387cd2335561fa521a091cb8ea8bc1b697e', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '51382b56c66d1183ea36133cc4c3191ffbb5dfa7', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'c278676b81a1546cca7949bc667ddbd9649aa347', "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)), mode === 'md' && cancelButton, h("ion-icon", { key: '37d47d4772dff9163f749fdcae568824dc92ed05', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'd02c98824d3a03e351d6d254d9e160a82569e5ba', "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: '43d5e1465f3cb8036d1ad3062f68419bae66cf20', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '5f171ea69e47155827f4908ed15329f71c8e5594', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -434,14 +434,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '227d2eb8dcabbffb66649d09d359d7ed41b3778c', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b89e584eb5a7ca26d81fb4d6c923e0f05aafda43', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: 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: '7c0ffd825839c4db82be984ec14406a50bfe2332', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '4e1faf860c3a38d343acd47aec911b202ab77578', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,7 +78,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: 'ddfb26e37b54b261faa70aee68691833aa56e81e', class: {
+        return (h(Host, { key: 'e5bdb21e33d4fd6cb262defa6935517b91cd0fed', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -94,10 +94,10 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'e59ed3e27467a98191c1c8f365a9c372898392ce', "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: '893481bc8f01bbf564c9ad4c04314f041eee8b7c', class: "button-inner" }, h("slot", { key: 'f234731ae1d4545b9e29c3575e67f6ead2c10532' })), mode === 'md' && h("ion-ripple-effect", { key: '72b531848eb64c7f95e2530d87f7ea99448ecfe3' })), h("div", { key: 'e2e13a354bf5d103c81ead27a23e238bc36c02b2', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '35a17acfb8aec10608f94453426584cea22b471e', "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: '7d05e9dd6fa14a5f385a079504fdc6307f98ae5a', class: "button-inner" }, h("slot", { key: '85ce4d7b84a9340bcd148e8011fa27d45e88925a' })), mode === 'md' && h("ion-ripple-effect", { key: '7dc32ed66fa06086c00e6a2e62638af1668d144b' })), h("div", { key: 'f7ff527107b35437446061410713b2b112bec702', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '51bce0f6af7cde2053351509391a2ac183b38a8e', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '9751739f6dd62b87b348c9827f8c6ba9b01857de', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -623,7 +623,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'd95e003059e8719cd19f6f9e23d8939b0cae9bd1', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '56f4438677932d676fe499dd4d8b818af2f5fc41', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -639,7 +639,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'e5d15665212e6f1eb9335c408e5dc5f12cccd3ae', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '53a0d64abaaa08a015aa8fb4c9c91669a179b203', class: "select-wrapper-inner" }, h("slot", { key: '686f830338a5587321433b96577d435c3809d707', name: "start" }), h("div", { key: 'd3852eac0551e155ce6ccc89ce6a3802d752b61e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '7bebc89c589be9ba15943a1aeb0f9847443b42e1', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'bccaa9661ae5185dd953ce40aa18dd1b762146de', class: "select-highlight" }))));
+            }) }, h("label", { key: 'e9d2d28c05a5440f4361b97fbc0f1447713b7762', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '1d89a78416517c9939073ced94e205397c8c18a7', class: "select-wrapper-inner" }, h("slot", { key: '60cedd5bd2e8af42267f81a5ebdc4aadca724351', name: "start" }), h("div", { key: 'fd9f4c8a45813daf4b18019a1a7870470b784a60', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '832b729746f9370302d39d5f45bf67ee185d85c9', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '3ad1d693486dc8b9e7020b46fd93e1a56c385125', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: '02cad3d160435828ab5e6a4d87d4d7af25e95da5', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: 'c88b3742344e692cb1b187fda6ae9ee30f548ea3', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: 'db591b42f550b4620ca45daa8290fab196ab760f', class: getIonMode(this) }, h("ion-list", { key: '795b22528ef751611e1d24138e719c77b30d87bb' }, header !== undefined && h("ion-list-header", { key: '168697c286bf28328d997675bb62ac55c62466b5' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '8ba867e77c502589db1475d50d661fbda868095a' }, h("ion-label", { key: '615b8114e8315a287592caa69c8d0764c07a3755', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '5bbb3a53b7eba7b10391c00cfc348b71b928e3fa' }, subHeader), message !== undefined && h("p", { key: 'a12814f22ba06fe799475c845a975c720c98bfaa' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: 'e4fd72a65c491c08c57ac226d8540f96fe0273ab', class: getIonMode(this) }, h("ion-list", { key: '7b464a5caf75eaf4e359d6ee918eacc5677b0d37' }, header !== undefined && h("ion-list-header", { key: 'd2fb1677c8fefc6bb03d3ee709bfe08ea1a4e302' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '4af383bb60fdd6ec8bbccabf7482fcfb1774d242' }, h("ion-label", { key: 'cbea36adb016cf6a8b9ff13055b4a9f190688625', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '8dd90d961bca6d383d776b2e41fda75e667da668' }, subHeader), message !== undefined && h("p", { key: 'a8c314c5d397a0a97ac551c66c013e8c879b60f0' }, 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

@@ -25,11 +25,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 mode = getIonMode(this);
-        return (h(Host, { key: '69ac5fabf02d9d42a4eb99b3499dce0864199cb0', class: {
+        return (h(Host, { key: '82de575f5e9b16e1b96b47fa08476f7b01ee4a0d', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '77887175c8147baecccc6258faa8181c9b2a449c' }, "\u00A0")));
+            } }, h("span", { key: '86d3f191fcad303f7b4e588d9df1b4a8babd3414' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'bc61b47a0bfc75efa3ef2a201fc9d573ceef5bc3', class: createColorClasses(self.color, {
+        return (h(Host, { key: '268dbc7e72d1a4566b01dfa9d808568607c264c1', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

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

@@ -118,12 +118,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '03371ed21b1fdd155ec12178d5b4fe42db58326c', class: {
+        return (h(Host, { key: 'bb55def50809ede14b43ea469a03c9fd8cb7961f', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '5c82033f0be9eeecf9cca79984e81c4b2e38cba0' })));
+            } }, h("slot", { key: '03e121f9fa52e635678887fcfc902b7ef645ed70' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,10 +48,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '0e2727610cfb92432ecbe731282dd0fc17f7801c', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '3c983c731117c65d1dd8892cd7cc9972c31700b7', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '6d024e3eeb310211ff0424e7cdc24f3cf39165f7' })));
+            } }, h("slot", { key: 'd325bc089ebd6819404daa445912e22541e5827b' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,11 +51,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '4a658d07ec24e6bf2383ff6b85dbfc63d12c8910', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '4ada6205120b6943f80ca00b0750210d55eed141', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '846f8ef4f9af7f3f5828b7302cba115562204f7b' })));
+            }) }, h("slot", { key: '2b61fdd8ebd4bd4170ee7be48653c77afcb2a44f' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class TabButton {
             rel,
             target,
         };
-        return (h(Host, { key: '9588586b1cd801140fb0e0cc42e91a2fd9b92d2e', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '54d5c03f2d0ea454342ac085702b1f33dcaa8589', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -82,7 +82,7 @@ export class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, h("a", Object.assign({ key: '9cdad3684c2e59873a4b1858ad6a899193084abf' }, 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: 'ed542d1d9b7f68542c829ee94d10fa6a417cc3ba', class: "button-inner" }, h("slot", { key: '181dffbbd8e91e23343049f9b64cc5454297f05e' })), mode === 'md' && h("ion-ripple-effect", { key: 'b3012617ce2a23d6fbadb0d1c2d05ddabb947f2c', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '222128c5af368ed52b0976d436f1d6f0356ca269' }, 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: 'fc8abca426d0d643c31034c34490e77365385f15', class: "button-inner" }, h("slot", { key: 'acae0036f691bc29ed537d1818030cf0dc37b883' })), mode === 'md' && h("ion-ripple-effect", { key: '8dbe060ae58a209953e748b5688b3d8504df87d8', type: "unbounded" }))));
     }
     static get is() { return "ion-tab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -145,7 +145,7 @@ export class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '549d895d74165267eb648d929e81d100b0db8ab4', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'f40633a1b2d38c56d6268a4f9554e255a9c9fd4f', name: "top" }), h("div", { key: 'e688d6c6299fb2551e4f4b1038128d02c71e9c09', class: "tabs-inner" }, h("slot", { key: '157805f56e4708d15f11d6093c9106abe18f2869' })), h("slot", { key: 'a7add9aed231853bb61797ad14ded5b6fe9f0015', name: "bottom" })));
+        return (h(Host, { key: '27f811ba897e7b7d5aff9708fd20ec1155fc3242', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '0038751d3aa5cc6b36d9f9cc64e60aa820ce8d72', name: "top" }), h("div", { key: 'c4860c66ac89bfdf81e14dbeab9d6d98f2fd9942', class: "tabs-inner" }, h("slot", { key: 'a1c28f9f0dbf49dc89b28d31951e406c94e181b1' })), h("slot", { key: '2cf9c616ad3708a37a14d347d14dd8b9942dddba', name: "bottom" })));
     }
     static get is() { return "ion-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,9 +13,9 @@ export class Text {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ab9a44c87ae1a8315ca07721f683fb439f2caff1', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c9fd187354e4b4cdbcea29d8205ed3f0445679e6', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '809b39d6b64195fdf9788ae121a4f241ba1cac6b' })));
+            }) }, h("slot", { key: '7ebe2562f6ff30749146a24df9ae17f92599ed69' })));
     }
     static get is() { return "ion-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -359,7 +359,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '2ac001eae0e1dcf5ec0a1cda381d8a1e8fbe0ddb', class: createColorClasses(this.color, {
+        return (h(Host, { key: '3057a0262aa5b10dd009255246b088a292cf2105', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -368,7 +368,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: '3f846e28f1e7127202b8be7148324080a424dc66', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'e221bf2c583cdf6019e05b3b499279216edeabf5', class: "textarea-wrapper-inner" }, h("div", { key: '94d7097f3f3a26aed37ed4bb77566e1ba5e40ece', class: "start-slot-wrapper" }, h("slot", { key: 'ecdb0f2bd3228edf9b6db1a63afd42cf2f48d3c9', name: "start" })), h("div", { key: 'dfbe9f1a7d21839d8b9f372a208c0c3e60af5f68', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '8232f346ad68093d72feff68e69b35bc3c5e0605', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'b06b270cdccdb6dad190ba5277c7893663539d7b', class: "end-slot-wrapper" }, h("slot", { key: '063e0c67ac54f2de7006de5cc91dddabcfd23e63', name: "end" }))), shouldRenderHighlight && h("div", { key: 'dc0376830bae4829bd83a0a98b2e51ab728a4a57', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '3cefc2946471e462d7e63de23453f73b86fd52a3', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'f58e07557457ef15db0ede22bb05eef14e926856', class: "textarea-wrapper-inner" }, h("div", { key: 'dd327f34c75825a130034e0599a54c76f5083f2f', class: "start-slot-wrapper" }, h("slot", { key: '1e08f37a467423e0d1cbd032e21e7d82390e0d7c', name: "start" })), h("div", { key: '0dc7c0317e0489e4e63573b2b3fa33dd8faa0e61', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'b351376fb2756af4c9e5745a3391b2952ed538a4', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'ea91b1656ddcbe7dfb0522618d4b5e179774f372', class: "end-slot-wrapper" }, h("slot", { key: 'af088c4e26d145d92631496cea1eddd2e54fdd22', name: "end" }))), shouldRenderHighlight && h("div", { key: 'c63ccb5e724c936f9d01eae561651064d80a843f', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: '7d0d0ecb46ea49d34da58724d546db9ffb768b4a', class: getIonMode(this) }, h("slot", { key: 'df6831c030f57b254ceeaf43bd0c90e06915b161' })));
+        return (h(Host, { key: '5e1a3fc154a6073e251c4ea99456363164f5f4ce', class: getIonMode(this) }, h("slot", { key: '090a67b630e20a6cb5a7c30e88b0e4bd2e819326' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '76a120f45fe6bedbe761e85e390b53c5dc8f30a2', class: createColorClasses(this.color, {
+        return (h(Host, { key: '89da5082d819e6e3dbc0ed455af8e4da0fe73a12', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'a7f3bd0a060f7ffc8aef7a150ed4d616d845fa74', class: "toolbar-title" }, h("slot", { key: '3d60b9f35d6a50f6508053bc354890c4f64fa6d5' }))));
+            }) }, h("div", { key: 'b6634f459c19137ac9dbff26be1027820037c09d', class: "toolbar-title" }, h("slot", { key: 'edfd2ff6413b052525f4a2f797b097065256cb19' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -391,9 +391,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: 'fd7f35a7fb769a46d1860f0d16d2a97f287b49d2', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '2a9a43662626837370415ffd9404c59685691641', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '0ebf71074b240fd63a7ec816855f16d327742d4e', class: wrapperClass }, h("div", { key: '364ed5cf8591d3ce8e159c4bd480a921a1163ced', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '9f57da73c79c747fd2b387900c67c7d6c871a910', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '58343c16377abd5d76b7b3ae928c2437da0259fb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'ff5df3d039ee6b7b9f096a51f6e4ead2d58d0e52', class: wrapperClass }, h("div", { key: 'c08cf224c941e82bc3d1055f3ee9f90b9b3321dc', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'bf88aee853cffecb21b4c90f8de6e87672e8559a', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'f99a8d2de9bda000ee03f021e84e6f12a410d231', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -157,7 +157,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '059639dd357e81134e9c5345b0c4ff0b501aa372', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '6c191cbb3e2a652474539dbc2135b22f86baba9e', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '9e06a613ed8fcfdca304ba62ed74feb6c7be2e2d', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'e667729528eeb3b21100d7f7e8aa3bf0111adc6c', 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: '7b95e7f346e84bac82606a2dec48f4ae02ce7854', class: {
+            }) }, h("label", { key: '4f9b2a802ede6286b0ffe2f55a7e93d14d93e8be', class: "toggle-wrapper" }, h("input", Object.assign({ key: '3404228bdb34b662f91c04e644b0addc76006906', 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: '7a629988fbfa52ccf73563e78834e56de8e657f4', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: 'c0a1ff31325e30eb433cf802c8193b1bb570a2f5' })), h("div", { key: '41b11a32669d8f1b7405dd64b8547ba81a683fe1', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '4a4f76889af86430d2347ae08be813e78984b11b' })), h("div", { key: 'df244aec6733371723b25fa05c151b1aaf895e16', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '7bcb85a3928cbce60c1731b526fa4a4dae7b3ac7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '625c5fc55b43ce88399386fed097a91f1bd7445a', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'cbcbec3b11975dc72ce6fdf11a4a3c6a0c645073', class: "toolbar-background" }), h("div", { key: '4716951b9736c933206284e1e34eebe1507f896c', class: "toolbar-container" }, h("slot", { key: '890a8d114ebb2b9a0c364d48425a2c82248c08f7', name: "start" }), h("slot", { key: 'dc856f55f7fb412274edeec64d1bbe6be109abd0', name: "secondary" }), h("div", { key: '5b67e95c3bbda910c94da2527465c6824d61a8a6', class: "toolbar-content" }, h("slot", { key: '5e19b792aa970797d08430666b14a2cd30af87e3' })), h("slot", { key: 'bc8795cfee8af3cc4923e5df6351bc7e1ddbb4e4', name: "primary" }), h("slot", { key: '33e6f54d4d6db6307a3b639a34e952bc00403620', name: "end" }))));
+            })) }, h("div", { key: 'd23ac18932f4c8fe2ee8c3b44c457d42cb1bb4c6', class: "toolbar-background" }), h("div", { key: '73275708f1a19dbbfba0c3152923355f9d334e5a', class: "toolbar-container" }, h("slot", { key: '9a8977e4e003806b812addb81304101df2e2194b', name: "start" }), h("slot", { key: '845997b78b414b3de270085a750b14382ebd54d6', name: "secondary" }), h("div", { key: 'f4d77326c6111781f24ad311a6ee2404985fc64b', class: "toolbar-content" }, h("slot", { key: '2843a6239598521589bb93d2b5f44fb5fb78e5de' })), h("slot", { key: '56d1825672dc51226a89fe4b549764b093d40a6e', name: "primary" }), h("slot", { key: '9985fb8cde38c887175057afceae8fe6dc81d00c', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }