@ionic/core 8.8.19-dev.11786730389.1a1927bf → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -1342,7 +1342,7 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, { key: 'ae61e0ce9f0e062f1f30a7dc2283add15ad71a14', "no-router": true,
+        return (h(Host, { key: 'a471c293319cb6ee5ffb7ffafec0b8413e4289de', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1, ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
@@ -1355,7 +1355,7 @@ export class Modal {
                 'overlay-hidden': true,
                 [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
                 ...getClassMap(this.cssClass),
-            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: '71298f3b3094e9935195af2591acf6c95ff4d7df', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '2580ffb95ec3470c77a66267ead4d57641d39473', class: "modal-shadow" }), h("div", { key: '652a7bf0ae78bde33b56d73bfc27a5bf6c910ac4',
+            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: 'f67934afd4ddad64623856fb641cb6db846df428', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a23f5cb6cf60c8f717c1dd556bce375829c80a43', class: "modal-shadow" }), h("div", { key: '51eb6cd1070e4b7e49840a78dc7437238c867a01',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1368,9 +1368,9 @@ export class Modal {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: '50d48904d16c7ac5b08b980b06b382a6a772b4ea', class: "modal-handle",
+            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: 'f49a144642b5c227c0c2b00b33f4c7e37a2bf088', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'f6159c78c19c79a1cc2d25254e9e9c0a7488ce37', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'e781c0d5881762c6b61aa432721a38b49580ff64', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav/nav.js

@@ -757,7 +757,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '598ac877d56c6430b658b23f0275bdef12c50cd3' });
+        return h("slot", { key: '1886154d3c2fa8511af4d641d269aaa4c0f45c05' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class NavLink {
         return navLink(this.el, this.routerDirection, this.component, this.componentProps, this.routerAnimation);
     };
     render() {
-        return h(Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
+        return h(Host, { key: '4bcaa74015462824b3f19253b04a77ce83389ca0', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

package/dist/collection/components/note/note.js

@@ -16,9 +16,9 @@ export class Note {
     color;
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b86a6acc9274df6528d224d4c11ab826a0f84dbc', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ffe9b4de8bbd89b1ef427f6cd5dbcd354d715e6b', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '5de76567ed7713827cd277a42db102faf34190c8' })));
+            }) }, h("slot", { key: '42fa3ca3f98208ea2a5057da25b7f9d371c5ba1f' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,10 +94,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '98109dc9aeced749a3e879394d9a24de24204433', class: createColorClasses(color, {
+        return (h(Host, { key: '81f1938e0114392a6e035442b8bc9fcdf73fda84', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: '42cb75738ea6925a7780b3ec9c1ff6823e340a24', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '1f1b3862cdfb2b432016014e2e56330c0247d0b5' }))));
+            }) }, h("div", { key: 'b0bb84fd39ea38ea3037ad43c6be8e8dfca2e7d1', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'e0305b721618aef05823032ccd58214b0f184ca9' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -575,7 +575,7 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, { key: 'd7f3aa2c2fa93a93585e3eda9e4a6d0daaa541be', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (h(Host, { key: '52ffc7116969ae1b8b927e67f2acbfe5f5434f70', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -586,7 +586,7 @@ export class Popover {
                 [`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: 'b87be2ef14219997b9c47dcbaf904eb770d0e057', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'e6243572faf1b871ae2b34923410b2a6638469f0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '3d4938c9d0764a644398e0e7a4361106da1bd926', class: "popover-arrow", part: "arrow" }), h("div", { key: '24ad6d777828aad2881d56595693e6022fc9cb8e', class: "popover-content", part: "content" }, h("slot", { key: '79f83df74a5c5e3dd7650f15c1aa50795b90a345' })))));
+            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && h("ion-backdrop", { key: '79a8e851dbd22119e21ffb2f4709c555251045c8', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'c46c9f62c3ef3f902e23f27404eaa446a5d8cf88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '9fdcbbc4ea6c7bde74f646d48eb77296b2c9dd83', class: "popover-arrow", part: "arrow" }), h("div", { key: '138e56bb83462ebb0908edb522b45ecf94b82aeb', class: "popover-content", part: "content" }, h("slot", { key: 'daeefcf002e8d89e91d6e0faf7f63f75b68a2dbe' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,7 +47,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: 'd7476268ce53b6a4f425b7bc9f01d6935eb411c3', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: 'd53d39a3e2c0198164a9face62d3775f357b6914', 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

@@ -178,7 +178,7 @@ export class Radio {
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
         const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
-        return (h(Host, { key: '093884548134579b1d1ea6ee4b318185543cf8d6', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'ad7ac0bdc4d3216ecc19402e5b8d6f9e4d09334b', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -191,10 +191,10 @@ export class Radio {
                 // styling stays suppressed either way.
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem || inMultipleInputsItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'c263300816ee9b91401bb0b4c99a007465d31e2a', class: "radio-wrapper" }, h("div", { key: 'e78d45f2878e560eed64a2ad88e297cdba8d5426', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '59c09125633120e2000447b8a3bc24c54490aa85', class: "radio-wrapper" }, h("div", { key: '1a98f3e0027deeac52647ba37aa9a99be0231966', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '6c5df964e3dcc64796cebd8500a68bd8a14d05cd' })), h("div", { key: '3af5cd21f7e41510f9a8eaef104d6d01a5c00679', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '6a48e76ac8793d2aacebd3a8f193e3537272e5c2' })), h("div", { key: '68e4350bac8dad29c6b7a180560de2bb4dfc8c41', 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

@@ -285,7 +285,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: '377e4aa3a656cc84b742f9d7a7d4be65d20c69f5', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: 'c3187a2497773b4f15cea3b413b036502bcec8c0' })));
+        return (h(Host, { key: '8d926a17e800adf0184274215c9689c96a8d6dfd', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: '2ff891123d5971a581b70d0886d23a074358c2dc' })));
     }
     static get is() { return "ion-radio-group"; }
     static get originalStyleUrls() {

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

@@ -833,7 +833,7 @@ export class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'cd26f0187c0d37c7eb9df923f75c8a0f57c19ab6', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c9e2fd903e9a4dc8fc6c6d11695c830010d04705', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -847,10 +847,10 @@ export class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: '90224fd24b0e625a17e7972feff73a0ac31e093d', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e07b9fa10983249c425eec26b741f0f628daf2b2', class: {
+            }) }, h("label", { key: '034b9fdf0cfb8574f0deaa082da0d09d49416a69', class: "range-wrapper", id: "range-label" }, h("div", { key: 'a47912d48e1a71746aeb506e14a59ff84af43682', 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: '9e252f1190838fbae46e724bf665f9b1943600a4', class: "native-wrapper" }, h("slot", { key: '950697dd9636da340de659812daa91fff50e5345', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'd3fce46b29db275af71e6149e725967839ec12b0', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '4eeea5baa3f1c9cb365385910b53bde578cae119', class: "native-wrapper" }, h("slot", { key: '6a62a106648d301b9fdb20e89f359317e4f552fa', name: "start" }), this.renderRangeSlider(), h("slot", { key: '03c8bd01a7465ba78f6e45405facd243c1aaf526', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -85,7 +85,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ec378d6a302be697c12c4f973a57c6ad2ada070f', class: mode }, h("div", { key: '0055f98f8c5a1ed7979dc8146ec1f82a575860c7', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4f88468e26370df6889e72aa54ebb395ebf3757d', class: "refresher-pulling-icon" }, h("div", { key: '05b3f8679576aaa6c2d84d60df6629a392df29e2', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0bf6ceea416ce1140c0f10a5bede063cae7054f4', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'b71ede8455837968218edae28504e5e14bbc1f5c', class: "arrow-container" }, h("ion-icon", { key: '30b808288d23d3eac681b1225cd8392fdacfefe1', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'fee1ae7e57ef8a02f5654808dff9dca3002b6702', class: "refresher-pulling-icon" }, h("ion-icon", { key: '55b34a98028adb497fbc2ac66bdb3d5ae5b1705b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'ef8f987daa8060cb6f8fd83c0864095042b9eecf', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'cd6fe0e81b34eeae11478fcc8a42044bff6f7a52', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '9cd778229582b538d54589c4d8e4d470efb64aad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: 'a1546008813bbcfa70f97e9b9025846ee0aed722', class: mode }, h("div", { key: '5422771d67fe201e22d4f9d7db6b685f3db5d99d', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '5c2b6dfc3f01b42586ea83380548d454b220a7ca', class: "refresher-pulling-icon" }, h("div", { key: '2c3799ca3f66960d7081c63c5a0840951f694baf', class: "spinner-arrow-container" }, h("ion-spinner", { key: '03f766a9b9354dcb8f6975757a9b882c2eb5cf4a', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'e5f4ba7c6a70adb71f8985af0e23aca07d7b005a', class: "arrow-container" }, h("ion-icon", { key: 'ddccbd9164ae8daa97178fc53b52f74f1fd298ef', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '6fb742f47f9149fa6dc3daefe5aaa77f925da4bd', class: "refresher-pulling-icon" }, h("ion-icon", { key: '907657135eeac4c394be1eae4a659664a7bfacb0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'fb3094b3ed7e100ab9641c3221770889088e27f3', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'bc8078f94e7cea3cb6f03a09e98540f0e0b38721', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '8f39524f073aa828e941bcdd4d48e4d5dfc759c6', 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

@@ -21,7 +21,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '4d35db30b5b3df2020d2212abb3cfac94f9bc2b8', class: mode }, h("slot", { key: '68a565ae4a47f6a9f5d6ba845b596fdfa629ece8' }, h("ion-icon", { key: '168fb0f8eb9c02329274488900fcdb05d44cb895', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: 'f278c473b4695a6a93565100e4fcaa7f9e3e9ff5', class: mode }, h("slot", { key: 'cc26b5ed297f68a0bea82e27e34a7fe945186f4e' }, h("ion-icon", { key: '696f5e4c2b09e64bd08abf0d0818b1554cd29737', 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

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

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

@@ -67,7 +67,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '5e88b5225414e29883256c86f111ded5bdf2ef91', role: "presentation", class: {
+        return (h(Host, { key: '371350cb76e98338ef7467191aaaf817b1298b3f', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

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

@@ -47,10 +47,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8aaf732d8f5cc4ced351e2b3164605c10bd90cad', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", { key: '85796b7b48581fe9830ba1102dad7d1069de4e17', ...attrs }, h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
+            }) }, h("a", { key: '8f291ffbbce5b08dd10720d855eb020880bf1be1', ...attrs }, h("slot", { key: '24dc388a49204011e1c1f0a1131c9a1b0a4ae4da' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -220,7 +220,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
+        return h("slot", { key: '249e7d8a063c781db52fa535e42d648c7bf2909a' });
     }
     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: 'a9066661fff12baaf3e80b2e8c08591af72fe5b8', class: getIonMode(this) }, h("slot", { key: '62b103af46d3a5ec9c146019ae300b68a4ae867a' })));
+        return (h(Host, { key: '12b7419dd67ff18dd00e1bf5093299bd94c75503', class: getIonMode(this) }, h("slot", { key: '43fc76a289ecaf398a77a90034ee576003a826fd' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -549,8 +549,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: '73964da43dbd099fc7f3d30cbc4da11087701ac5', "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: '27335a0e35f6c253c074685fa0b088404927bcbb', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '1b4f6c4e7dffb02e092f0026ce3875822d98a631', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '47ee586db12684db8b2d16a790976bd247cbbc62', "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: '55e6b556a46e7bba14c2cfe1b58542499d2334ab', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '468d524b52a0d29d840e2c3cdafba46152716b15', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -560,14 +560,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '587e1950e329cfb9d3658be5b2a6491e7af9321a', class: "searchbar-input-container" }, h("input", { key: '7f78a3d22cce03af277a538b4d9f85faddf1fa80', "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 ? 'on' : 'off', spellcheck: this.spellcheck, ...this.inheritedAttributes }), mode === 'md' && cancelButton, h("ion-icon", { key: '9fd3e458978b64e9e3358bcbb26471753f6ff2a6', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'c7864c85923668dfa25f5fc4a70c7dbf6da191b7', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '94378bdfdf883c28941ef770d64347705d6f8345', class: "searchbar-input-container" }, h("input", { key: 'deea2190823bf8652703148d308aa21473605930', "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 ? 'on' : 'off', spellcheck: this.spellcheck, ...this.inheritedAttributes }), mode === 'md' && cancelButton, h("ion-icon", { key: '0ecc28496ab545f2064b71b994b4cbf0968c2108', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '1bcc77d70eaa08f2ae7fc6173642f114fe387fb7', "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: '47e7a15c6c6d4df4c54c62b042842e499627da05', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'bbf8d05eb1070a0d34a22236dfaaf11d8dcc06af', "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

@@ -582,14 +582,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'bb626072e73f09c3433e1a769e09789a00822d8f', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f74bd72f10f966129528497aa47b2c683a62d59e', 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: '652d5037c2c2dee4d47a5710b1d150e691202d25', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '79b0c6cce9d83d147b190ae5d77df7de29a6b42d', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,7 +117,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => segmentEl?.color !== undefined;
-        return (h(Host, { key: '792f621c36260b1fceff2b4ec4fa95d98d51d46b', class: {
+        return (h(Host, { key: '2b4b7ad8b981d2ee39aba5b9c734de8a5bd045ba', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -133,7 +133,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", { key: '860698be6ceb8f08c0ce3d16ba82d4bb56adf030', "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: 'e903a2642ff46797878a941887b5c596d52fd3a3', class: "button-inner" }, h("slot", { key: '5fc6b842ecb7f0ab8df23b344bf6714f38dda89a' })), mode === 'md' && h("ion-ripple-effect", { key: '710aaf6e4fa2b6cb15897a883e88dec17ef3829f' })), h("div", { key: 'a7b036cba32420e9eb3f2d16487df0519ecc5289', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'a0a5f49ea7f2ecab8014f4f9ca473a27db8348b6', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", { key: '9cc58cfbe70844a0f5e1a307002e0d04e044be99', "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: '6443551951ce589efdb2d0e1fd1a14e35b82ed19', class: "button-inner" }, h("slot", { key: 'c3548b469ae6e5477d8372cb28bc70dff3a24d18' })), mode === 'md' && h("ion-ripple-effect", { key: 'fb176415ca1702766c4d7a5964ec0bb467bdcb55' })), h("div", { key: 'aa22b4752f8336d0e232a1e0894e87023b284a08', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '61e29ea52048fa0583fce6c20c81614a4d0199cb', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 export class SegmentContent {
     render() {
-        return (h(Host, { key: 'ef39f29c444177c3b083cd35680ba891e4bb6a2a' }, h("slot", { key: '51f9dd9ca084ddd928b376aa9d716509669c32b2' })));
+        return (h(Host, { key: 'b03079d7cfd78724828a4f42d7a7030457682b25' }, h("slot", { key: 'c4c86280e5e577ee31a181758fea27a788fd87fa' })));
     }
     static get is() { return "ion-segment-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -113,11 +113,11 @@ export class SegmentView {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (h(Host, { key: 'a6c6ac0232c4bb6f2a954b3de7993019d71f423a', class: {
+        return (h(Host, { key: 'b3cd48fead5d2877ead68cf6d81955fc31530c7a', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, h("slot", { key: '386305be2a75069c79def12005d9f6b49276763f' })));
+            } }, h("slot", { key: 'ad5aa8b79790c490e13438afa0cbb2c241eab0a1' })));
     }
     static get is() { return "ion-segment-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -202,33 +202,6 @@ button {
   color: inherit;
 }
 
-/**
- * The select icon should be centered with
- * the entire container not just the control
- * with floating/stacked labels.
- */
-:host(.select-label-placement-stacked) .select-icon,
-:host(.select-label-placement-floating) .select-icon {
-  position: absolute;
-  height: 100%;
-}
-
-/**
- * This positions the icon at the correct
- * edge of the component with LTR and RTL
- * text directions. The position mixin cannot be
- * used here because the icon is in the Shadow DOM.
- */
-:host(.select-ltr.select-label-placement-stacked) .select-icon,
-:host(.select-ltr.select-label-placement-floating) .select-icon {
-  right: var(--padding-end, 0);
-}
-
-:host(.select-rtl.select-label-placement-stacked) .select-icon,
-:host(.select-rtl.select-label-placement-floating) .select-icon {
-  left: var(--padding-start, 0);
-}
-
 .select-text {
   flex: 1;
   min-width: 16px;
@@ -271,7 +244,7 @@ button {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
+  align-items: stretch;
   justify-content: space-between;
   height: inherit;
   /**
@@ -297,21 +270,24 @@ button {
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.select-wrapper-inner {
+/**
+ * The control must inherit specific flex properties
+ * so that it will be placed properly when justify
+ * or label-placement are set on the host.
+ */
+.select-control {
   display: flex;
+  flex: 1;
+  flex-direction: inherit;
   align-items: center;
-  overflow: hidden;
-}
-
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
+  justify-content: inherit;
   /**
-   * When using a stacked/floating label, the inner wrapper is
-   * stacked vertically under the label container. This line
-   * ensures that the inner wrapper fills all the remaining height
-   * of the component.
+   * The min-width is set to 0 to allow flex items to shrink below
+   * their content size. This enables the select text to collapse
+   * in width. We avoid overflow: hidden here because it will clip
+   * the floating label.
    */
-  flex-grow: 1;
+  min-width: 0;
 }
 
 :host(.ion-touched.ion-invalid) {
@@ -399,6 +375,12 @@ button {
    */
   display: flex;
   align-items: center;
+  /**
+   * Allows the label to shrink below its intrinsic content width.
+   * Without this the label keeps its full width and can push the
+   * select and end slot outside the wrapper.
+   */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the select.
@@ -417,6 +399,18 @@ button {
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -449,6 +443,13 @@ button {
 
 .native-wrapper {
   display: flex;
+  /**
+   * Give up space before the label does. Flexbox would otherwise take
+   * from both in proportion to their size and truncate the shorter
+   * label first. The factor is this large because the label truncates
+   * as soon as it loses any width at all, even a fraction of a pixel.
+   */
+  flex-shrink: 100000;
   align-items: center;
   /**
    * When the floating label appears on top of the
@@ -552,9 +553,16 @@ button {
  * down when the select is focused or has a value.
  *
  */
-:host(.select-label-placement-stacked) .select-wrapper,
-:host(.select-label-placement-floating) .select-wrapper {
+:host(.select-label-placement-stacked) .select-control,
+:host(.select-label-placement-floating) .select-control {
   flex-direction: column;
+  /**
+   * When using a stacked/floating label, the control is
+   * stacked vertically under the label container. This line
+   * ensures that the control fills all the remaining height
+   * of the component.
+   */
+  flex-grow: 1;
   align-items: start;
 }
 
@@ -579,17 +587,11 @@ button {
 }
 
 /**
- * Ensures the select does not
- * overlap the label.
- * Also ensure that the native wrapper
- * takes up the remaining available height and width.
+ * Ensures that the native wrapper takes up the
+ * remaining available height and width.
  */
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
   flex-grow: 1;
   width: 100%;
 }
@@ -613,27 +615,16 @@ button {
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
  * from overlapping any placeholder value.
- *
- * TODO(FW-5592): Remove :not(.label-floating) piece
  */
-:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder {
+:host(.select-label-placement-floating) .native-wrapper .select-placeholder {
   opacity: 0;
 }
 
 /**
- * We don't use .label-floating here because that would
- * also include the case where the label is floating due
- * to content in the start/end slot. We want the opacity
- * to remain at the default in this case, since the select
- * isn't being actively interacted with.
- *
- * TODO(FW-5592): Change entire selector to:
- * :host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder
+ * Show the placeholder when the label is floating.
  */
-:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,
-:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder {
-  opacity: 1;
+:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder {
+  opacity: var(--placeholder-opacity);
 }
 
 /**
@@ -648,6 +639,14 @@ button {
   max-width: calc(100% / 0.75);
 }
 
+.select-start,
+.select-end {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+}
+
 ::slotted([slot=start]), ::slotted([slot=end]) {
   /**
    * Prevent the slots from shrinking when the label and/or
@@ -789,11 +788,6 @@ button {
   color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
 }
 
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
-  width: calc(100% - 1.125rem - 4px);
-}
-
 :host(.select-disabled) {
   opacity: 0.3;
 }