@ionic/core 8.3.3-dev.11729187220.1993dcca → 8.3.3-dev.11729190894.1b16c045

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: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '0712fa8732141848e50ad2e08e2ba66ef2a48991', "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: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', 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: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'c997632ef0488698739664012de5a6494de438b6', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '1ee02c9925b0d9ecd7440108a8c055344ad21276', tabindex: "0" }), h("div", { key: '42f06b3660a20f8428f52c7a4b06b04e56811649', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '9c79ecb7e35bc41d47ea73af79ca9f17b8fa3f1f', 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: '19978c0d0c95de8bb912895c4c17cfa7f504a5e2', class: "picker-columns" }, h("div", { key: '38238d3e385196a3b0b62b0443d4d8754fb9d07b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '4f23740141e65c69bb1bb7959fcf2f5d0e292c73', class: "picker-below-highlight" }))), h("div", { key: '07fc3a1d5e025cb82d4049e0a2b48108ef8dc7be', 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: '56289a294e5c580f3e7fe5fc12777aa7f80ad19b', 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: 'c015eb8bc01b3287cbd1d71af0aa311b6be89d36', 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: 'd21f44667b5df567d6879723fe643ea7c2c60bef', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'bb427e5f24fd832703926e0e847ad05567597262', 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: '0413f7c074b6534b8967387ecb9957a79a267aff', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: 'f9de3fe2f5c7ad3256d6e5f44b6d03a2b1f96ffb', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '10f9c12aa174f96c7cf9adc30efbb26695c0aa64', 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: '1d9c0892ce56e0da9044c79eb953827166f5190b', 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: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'ffe8b37c9ffb5cac210a7307e6cdfcf78712905b', "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: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), h("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, h("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
+            }, 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: '12b3ffa3928b4d56a4f09c3d2f5d493d47b45255', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '2c2862d5c7e75b637973c712b4982bf4978c0cdf', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '0cfacc52afaa7abc28c1b7742889d7a1c23a37ad', class: "popover-arrow", part: "arrow" }), h("div", { key: '3ef570c44d4fe7f063dd419008c92c8c40d3cd22', class: "popover-content", part: "content" }, h("slot", { key: '6fc5dfdce20fee1642bc1f05d41b5bf7d1034457' })))));
     }
     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: 'b293f4475bcdaa7851b41ebfda659037f0365120', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: '8d8ddf0b26fe33803d3a6168cbedd523d1a888e7', 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: 'd6d9525eea9dadc3ea7060eb9b8cbb919e1d7091', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'b84de66e4ed2462af93321c9fc48543c39ba46fa', 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: '3ec73512bac8feb651c66e544899c6a4330d504c', class: "radio-wrapper" }, h("div", { key: '9ae7ecb19c7bafe0ce3d0f717af0338251964ebf', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '9fdcbb6c5809e60a5d301b07befc73c281a3d7ec', class: "radio-wrapper" }, h("div", { key: '85812d2047f7aabc4fcc99cb0e5d23ddeb173f20', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '2950f1579a22d4a06f9c903fd462c2b46f43bfd7' })), h("div", { key: '8b19ce30b39066744108a6de2da42a7ce8ffdbec', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '39e0adf2c866d48d5054b24ca2174f84f57e69a0' })), h("div", { key: '803766890c65aadcb5ffecf1a056005bfde30e62', 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: '7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: '672d1df4a5d2fd22415e8772b054313907aba8f6', 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: '877c9f15e62fadb184f9da82dc19898227521e07', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '05c699caaead7cc74deaae2a958c4632191473a8', 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: '2ae9088349a65e09b0e33c53442190ef563b2345', class: "range-wrapper", id: "range-label" }, h("div", { key: 'c3d0ca96ceb1e57fbd383e9c7e4da14d931771b8', class: {
+            }) }, h("label", { key: '959837bcc48c4bda33ae1f62b66ef444329a2961', class: "range-wrapper", id: "range-label" }, h("div", { key: 'a434c6b5c26f57f52b3af98d881e7e6a179c89fc', 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: '25d20fd5e015931f60a8ecc5374a1c84d167af9c', class: "native-wrapper" }, h("slot", { key: 'ae9f9fd92eed35b81ca97a81caa56332d8b6b2b2', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74b7dede566a959c9b05a6de68426c7e339d18c8', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '87df1037b6b3337bd1fab05d33a26bf658c57914', class: "native-wrapper" }, h("slot", { key: '2cb88f101da49b70aeae29b0bf5445fac241bb2f', name: "start" }), this.renderRangeSlider(), h("slot", { key: '17b835cfb2bd9b8e1957afd425543ff02b913d83', name: "end" })))));
     }
     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: '3270f181a5141e7d886ec554a3e892974446b90e', slot: "fixed", class: {
+        return (h(Host, { key: '9d4ac22988aec2c6af0b0c90934c52f62f0e4ce3', 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: '1bec5b4da221c69d856f3f5ddf40f2e03ebf2a4c', class: mode }, h("div", { key: '4fcc526c4f1881e9368d9cd16bd7030919bd3841', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'a4e9e2e12c2d7faefc8303ec8c021f999ddf308e', class: "refresher-pulling-icon" }, h("div", { key: '5a2d215feb7fb4b64d540d3a65c0f24b415a2433', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'abef2621d671ac6ff0abac43a702cbd825b7f127', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '30087d672c3780672a05874cd93cd099b2855462', class: "arrow-container" }, h("ion-icon", { key: '5e30333dee469aec0d8efc8c4e6dabb619c6f363', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '48fe72b5ce8ded633c6ee799cebb520b9c8be528', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd8dfd5d42056b1c0a436c5006affb255407816c0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'c2cbfb94f157c82601ffe7bb815ff82ebc7c0a49', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '17f3ebe6a31768d5e389f45a2c12f68600185db9', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'e8e61f8d7189c9939bba184201c9509d1d5b0fad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, h("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, h("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, h("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', 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: '663d74e231e3af56b6298ee2539fdac9c8465839', class: mode }, h("slot", { key: 'c7c384ab8c9ca8abdc89cd984a39dfde70e342ca' }, h("ion-icon", { key: 'c8b6052db03d4b9e33a90e600c20861c73ee73ce', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, h("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, h("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', 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: '491f3e5843cf728ff4589e58bd86b8ce6709b293', class: {
+        return (h(Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', 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: '2302f087ab1c6755355736e4ca77309c5fdcf185', role: "presentation", class: {
+        return (h(Host, { key: '7ae559bda5d2c1856a45bfa150c2cb4f83373f8e', 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: 'f876442cab5b14b7e83c6d6ad2c2d878a9c57439', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: 'c44b78ec1fd10a40c23bfe548860ac2b346646a8' }, attrs), h("slot", { key: 'd32180a567613f79f89885135bd0d776ffc1eb8e' }))));
+            }) }, h("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), h("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
     }
     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: '8279a453c66a766e6e383ff59842b4ae070c13a9' });
+        return h("slot", { key: 'a70341f58d19df55de1dad00e3464388e446aa2a' });
     }
     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: '813c9a7f6782d2cf8eb27f30d3ab28e6f3122868', class: getIonMode(this) }, h("slot", { key: '356bec4d4d408ea63d6b431b06465d5b7bcbff71' })));
+        return (h(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode(this) }, h("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
     }
     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: '20b2d0f2e3425eede725dbe3323c7c29cdb66f4e', "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: '3a516c3fdd35256eb79639fd340afcdd92cfd7aa', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '34878db21f63a9bdffca0446d8ad5619ff04cac3', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '0ef595eb1628928d4c7fdb166b8e41768700fa6e', "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: 'ea2c9b36d991acf5af7662059cb6b045f683ca94', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '17d57ece5852d03047e4d53ddad6c9d88a432a00', 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: 'faa7b011206a8359b1963368c65988e506b260cb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '732d3e5a2b258da6f136a14472ac872816a9853b', "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: '767dca971849f221dde220deae728b41bf764b98', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9941b5de1ed9ebcf3e81de8e0731c09dea5a89d9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'f67c2124e70c24eef0a271516e9c4bdaf7e98ceb', class: "searchbar-input-container" }, h("input", Object.assign({ key: '8c7f7ccc6809cca30ccc8c4e98e349d3f916321d', "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: 'f06524d3163b3883bbde937862aa1e0e8f49f6e1', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '9f7ba2bec93412ecb674b197be13db1de308bb57', "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: 'cb2b543d286373a84e2c6c2a959f92b045bbd7dd', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '19fc3dbc722acc47ff7eb3c94ad4de8aed38dff4', "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: 'f1f7103b4c298e037df850ac809a1a7c6e9987a7', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '1f50689291d24812e33145272f9a73c01e085383', 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: '6efdb318b13da8d21687084aa0761728fdf12579', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: 'd3b90e1adabf0b923e41a36cd856dc0a5a3d041e', 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: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
+        return (h(Host, { key: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', 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: 'a53c9f1e360934e8d2e90476642ba4507fc38ebd', "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: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, h("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && h("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), h("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: 'b97b964b5f3f1bf53e41ad2a1ad4853d5f956fe5', "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: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, h("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && h("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), h("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', 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: '73c571c1f8468e1c3f4fe02fbbb33ba9cbc8e989', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '757a61078e17b17841a4d4f235b13a4bb83cb91d', 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: '2b08538cba0b9f747541d57ac18fb6a1ea658878', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '33f54373bcb02c72a9d0af2efffebc27ee2c69fe', class: "select-wrapper-inner" }, h("slot", { key: 'd1c93aec99dc1cd6410f93309cef615fe04b541b', name: "start" }), h("div", { key: '493d1a3cad9565516f855bef75685b020785ffd3', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '353a3ee5635f8a8f3be411efd6caef6c2ad74a89', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'fd5f85555db02affe954f9f4f2876ac8fe676234', class: "select-highlight" }))));
+            }) }, h("label", { key: '7a78127e5c50bbc6af4ec76d022097d4fa866f83', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '191d51a1e1aacd11148c45c71f2e106a49d84829', class: "select-wrapper-inner" }, h("slot", { key: '29d9a0aabaa2bfbc49cca0649ae14dcb9c435181', name: "start" }), h("div", { key: '8ced49dd29e4942513784dadfab868c7436dd467', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '120ecfb966d47618b15bc82944ef0201d8d0d44a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '6548cec350bab3db11e94fd3d5326a694bcef0d5', 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: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '6fa504ac5597098086050c0f517a03be8b8032c9', 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: '302553a2eec4d1442751b8af28b7c9bd3487fd5d', class: getIonMode(this) }, h("ion-list", { key: '39ae8579e6fe3bae2c7504147268ad5c82fd27e6' }, header !== undefined && h("ion-list-header", { key: 'e0e6686380d188f46c593e1bb25287dcf08c75c2' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '8a2d8652db269593c0ba7d767277e12c2b06144d' }, h("ion-label", { key: 'a30cc0ecf95d5bdd6421ee1683922c1b853e98ea', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'c298459ca450123808a08d65660825b2c26d00e5' }, subHeader), message !== undefined && h("p", { key: 'ed895fbaec020e809021138401341b6fd7675035' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '2ed838c17d47198c697164a0a750aafb6ca61a95', class: getIonMode(this) }, h("ion-list", { key: '24fe7a6e9e45458c201b178ca236645d0f49ea8a' }, header !== undefined && h("ion-list-header", { key: 'ebe64853dcd59c14a8f4dc9c2dc9e66d1e9767f6' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'ed7c6f2d7e1282b3048df0af8f1e3fd3b08297c6' }, h("ion-label", { key: 'a81f6c4011a0dce47b80c98a45d80b1368d84a1e', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '4fd72c62da896092d535580917bb8a5ad6609c05' }, subHeader), message !== undefined && h("p", { key: '88aead29b35d69743abe4015f96a6fa9f199a0ff' }, 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: '1a3e78e9a6f740d609d1f0b7a16cb6eff4a2d617', class: {
+        return (h(Host, { key: '8a1b489e35564056b3babce548982e58fec74119', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: 'be3eabe196ec6e8ec19857375ba30f4c8aa58e7f' }, "\u00A0")));
+            } }, h("span", { key: '71df251a41967dc4dab241f6fa906fa4d568dd9e' }, "\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: '50cbaed55eeab15292447d106a80b93db4cb40de', class: createColorClasses(self.color, {
+        return (h(Host, { key: '9422c25aadfdf08861e26bb1aa336c94391d10a3', 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: 'd54c356cd4bff7e55325160882dea8249f47f388', class: {
+        return (h(Host, { key: 'd04ff97717268184725f25b39bb1416b2b423260', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: 'af62690d0fd686cfbd29d888c79eda9001f13e2f' })));
+            } }, h("slot", { key: '4d355509ab6fcdac415184068ffe1241a5078db3' })));
     }
     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: '46d5498418f5379861c3d7465e8021dec45f1200', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'f341d086cc626834d2ac83a9b6366fcaf71a72d5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'b45045dccb87dfe75e3f5a5a474bb48b6c98e922' })));
+            } }, h("slot", { key: 'b665bb7a388f1a032685c9e7fe9b412ca742689e' })));
     }
     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: '3a8595dd83f89e8319471a7a7f9f64b2565b384c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '77fe8ff42b083bfdb5e01a9873ef45b6f3ce3744', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: '8b65eceb922f6abfa15f41046261586fb94b981f' })));
+            }) }, h("slot", { key: 'd479c80ff66f4cfc12ab4a583bd292ef8392895e' })));
     }
     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: '4b528ce31f67e10ad849e0c99bd034bba675c227', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (h(Host, { key: '092250aa4c247411c4717bf3871bdd7a47b7177f', 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: '0da8784b1b243ffaaaf04dd7adb55d6881ed0c08' }, 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: '2c628e8f1ebc129f84876c01530468cb97d8bf3a', class: "button-inner" }, h("slot", { key: '8052a171d197a7de1a7eb12b091c35f73ae1ee21' })), mode === 'md' && h("ion-ripple-effect", { key: '4186bdb5ed045ec16f495a14fa30ac864c576227', type: "unbounded" }))));
+            } }, h("a", Object.assign({ key: '0414e9284005ce34ad69c4858f1b30aff00beb86' }, 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: 'df97b6b56fb86507d40e68caa49f888ee29f8da4', class: "button-inner" }, h("slot", { key: '715c209dd0cd61ac37b2813815014c685b7a92bc' })), mode === 'md' && h("ion-ripple-effect", { key: 'e6894153a563f63f4f7d84f2703cef0f7522d435', 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: 'eb094c9bd15b7777c53bd0bd6d225784fa472849', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'a516ca6915bf26e77eeeb0ff684c4fcc7d4420a7', name: "top" }), h("div", { key: 'dd2a32a072d77afe216abc4958c1d686405fb780', class: "tabs-inner" }, h("slot", { key: '222c20ba862068f5c78e7bbef4fa213499fb2fa5' })), h("slot", { key: '3e76dcb1b21873aa137d095c56131514054ead3a', name: "bottom" })));
+        return (h(Host, { key: '18676063259ba2f3bb4e07558966196f233ff2ac', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '2a03f4be256ca8bc39db7b4f52b7c48222c8b04a', name: "top" }), h("div", { key: '41b3b4ca4a0b47a52c6087ff4f7ba6f10704c79f', class: "tabs-inner" }, h("slot", { key: 'e521a765cdb3f4ca28df069e4e075ed7345a3ca1' })), h("slot", { key: '63c77711cc55116a77b492ac34d5ebfaddfa0d71', 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: '4b76333b1ea5cab134b9dc1f5670c0d5a253fc32', class: createColorClasses(this.color, {
+        return (h(Host, { key: '096d8ca01301500d61d9e92299e0cc78c2ad86e3', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '3dee5f16bc58b3d92547d910bd4f441a00ce2039' })));
+            }) }, h("slot", { key: '9399d939ec4f134c24c29bda8857cd348259c666' })));
     }
     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: '37595a18d77dea1a337ac1c672e5f08a4128111d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '16eeb87ea5dbac1b37f1a376cd74e6f41af1b5f6', 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: '67342758743e5a40448a32ff695876d39778621f', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'a994be8264bf5652811cf816d79a04178954e83f', class: "textarea-wrapper-inner" }, h("div", { key: 'e09c93ebcd5b3d227d51e682ca23dfc7fd7027ad', class: "start-slot-wrapper" }, h("slot", { key: 'd39758f21f19ae70aea21e9a9a7b7c20991fe593', name: "start" })), h("div", { key: '6a4e10e53de4bb235ee30def4c9ae5bdee888816', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '9e254e551f124d972e9bc6b09ef0f2bb55890be5', 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: 'a66aa2d2bc4778a0bec56a8b9ec9052a832eb3b2', class: "end-slot-wrapper" }, h("slot", { key: '8e6a90b4475de32e23afc593da4108610dcca663', name: "end" }))), shouldRenderHighlight && h("div", { key: '6da03205a8daff45581b20f0af3938634a9d5f8c', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '5f7946957517614b937eb37533a87c124cf3eabb', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '4e950025447d83f3ec77b515a2c5cd6511819b7e', class: "textarea-wrapper-inner" }, h("div", { key: 'a508e5879a9f7b3f2a91d5b1851ab990302044fe', class: "start-slot-wrapper" }, h("slot", { key: 'a2b18078c602896be5ae2da71519f534aa24bbc4', name: "start" })), h("div", { key: '5a4d07c72794548d7f0945aebc5bc2c65118cac3', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'f13d0e8b96a798d3cec017b2b618e4979555c5ee', 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: '10b8792a1506b41928869a4460b6f780c39947b6', class: "end-slot-wrapper" }, h("slot", { key: '26362017095ffdda6749a19e0152ef4da8759fba', name: "end" }))), shouldRenderHighlight && h("div", { key: '06a6135b05848b3855192f162ec293d9eae6e171', 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: 'ea55000055f941b0c79561e8934be6242ec8e114', class: getIonMode(this) }, h("slot", { key: 'a4f934f442797f5c66a77e0ef8920fdd07c204f2' })));
+        return (h(Host, { key: '29ed7678be93e55afad58bd37a61db3a289a5d76', class: getIonMode(this) }, h("slot", { key: 'da1eb174d2544b9d452c98076f6e0abcda60099d' })));
     }
     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: '5a58dc437a6f4257244bbdd7e9a682a17d8c9a6b', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5cb49f3642fb3c937cdba729ab7d561213d9bce5', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '58682ea7b8f47a08adfad419b5c76b34784c6501', class: "toolbar-title" }, h("slot", { key: '8a9248534e4c3076f5e2dfda38ef86069796851c' }))));
+            }) }, h("div", { key: 'f089bf6cff17ab109fec7de8b1bf96bf33bede1f', class: "toolbar-title" }, h("slot", { key: 'ed74c4e77126a309970ff719baa6ebaebb00d2e6' }))));
     }
     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: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '01a520ceedcbcb0070bd36d02357f63b714bf41b', 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: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, h("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', 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: 'aabab848db9f3f64cbd3d6ef210441870c77cae1', class: wrapperClass }, h("div", { key: '524db06620b3ac73277223e2e2117044ff7abbca', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '586611dacbc61e859a6132d16ac875fb241c12fe', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '30759724fe05bd165eacb2e31344d28f5a186754', 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: '8f024fb0fbc2d4442be0574b03450426e8e4fc9e', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '8767777e6953822bceeb35dfa558bb751b173846', 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: '0492f009cd89755adf41f60925028002df0e67b1', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'fd98b23e8adfa2630878eddc30607a0b1bf9e798', 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: 'bcbde055ad9450319ae41e8956a1e8cc0a7796a4', class: {
+            }) }, h("label", { key: '67ee0f439460dd35a72f8f574ca4c9ce6417c32a', class: "toggle-wrapper" }, h("input", Object.assign({ key: '002e368a38487a19da3ce2698eb53a0d7aadb543', 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: '33cd000489b3985b651d3d065a640378093ebe7b', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '7a6ea9515d454d80615f0622f361c5f91b41345c' })), h("div", { key: '6d3670b81b8f809092c98b3f3b8e483ddf6a7cac', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '9838515dee657676ac05db2d6aa9b8cf2d23e6ad' })), h("div", { key: '0c554b998906d74b189e87779dc6958432ed54ad', 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: '4bb3a55001408a3bdf033af76b9196cb96c07c09', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'af016bf9981a2d6182783c6643e2d460245ecc2f', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '0891db157d6e028c6d03696f13fb510ea91b0296', class: "toolbar-background" }), h("div", { key: '95fbc870d808f74af4bb18cd8f8ec8c7828a9e0b', class: "toolbar-container" }, h("slot", { key: '84d4a9644660fe00ca085055ca8d12f3647531ad', name: "start" }), h("slot", { key: 'fd361dc9c9979f59aed2fedcf94629506fae62b0', name: "secondary" }), h("div", { key: '54d2b28616a4627c55766f66dc453707752758a6', class: "toolbar-content" }, h("slot", { key: '8f65e0830cce7135640b90eb694e282cb7e5efd2' })), h("slot", { key: 'c78be11a207c8674f222543646398636956087e6', name: "primary" }), h("slot", { key: 'ab25e1601ccaa8cb0d81921b849bcb7402aa7826', name: "end" }))));
+            })) }, h("div", { key: '437debb5b7c561b315d887ae8d47186cba5521ce', class: "toolbar-background" }), h("div", { key: '4c2429fa3e8526fedf456e4658be92d5dce8ca34', class: "toolbar-container" }, h("slot", { key: '4c07db12cfc48b4836b566449b854c24db308e3a', name: "start" }), h("slot", { key: '12855ec04622c09cc404f9b4f07f57a73e5770a0', name: "secondary" }), h("div", { key: '56f37d52c91de2b76910defbc9e5b7c1def3861c', class: "toolbar-content" }, h("slot", { key: 'c10ec3fdbea10a6388f4f510d45188f7fda1a371' })), h("slot", { key: 'c8ed49c6888faf35e71f2a8f4f6bf98fb0c34a25', name: "primary" }), h("slot", { key: '0251f3980082a092304f95cbc002bc8c633c5739', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }