@ionic/core 8.8.14-dev.11784222473.142aed23 → 8.8.14-dev.11784243422.11f0110c

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

@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId, FOCUS_TRAP_DISABLE_CLASS, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
@@ -229,6 +229,10 @@ export class Popover {
             this.headerResizeObserver.disconnect();
             this.headerResizeObserver = undefined;
         }
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -467,9 +471,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: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'd7f3aa2c2fa93a93585e3eda9e4a6d0daaa541be', "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: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
+            }, 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: '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' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -177,6 +177,21 @@
   }
 }
 
+:host(.select-popover-rich-content) {
+  /**
+   * Rich content options (start/end slots, descriptions) need
+   * more horizontal space than the default fixed width provides,
+   * otherwise content gets cut off.
+   *
+   * A viewport-relative value is used instead of `auto` or
+   * `max-content` because the enter animation reads `--width`
+   * via getBoundingClientRect() before the first layout pass
+   * completes. Intrinsic values return 0 at that point and
+   * cause the popover to be positioned off-screen on first open.
+   */
+  --width: clamp(250px, calc(100vw - 40px), 400px);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

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

@@ -136,7 +136,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: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'd9425b252ed38086420d91d5c680421d121c99f4', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -147,10 +147,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: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'de391fca2aa0b681af5c1d089121596c46e68271', class: "radio-wrapper" }, h("div", { key: '44e4c71645f86a9e73ad58c0e8b41c0558b920f6', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '589d7c1b45a1918b5811663daa8f30788e7729f8' })), h("div", { key: '0f61a17b195582d6c9a0c597cd40e6629256e479', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -250,7 +250,7 @@ export class Radio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             },
             "labelPlacement": {

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

@@ -769,7 +769,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: 'f8063d1234fb113fe55a7902845dd4b4da8b1edb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'cd26f0187c0d37c7eb9df923f75c8a0f57c19ab6', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -783,10 +783,10 @@ export class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: 'beead65ab01e3b18e4be59c0ee8ac6ebf32aad7c', class: "range-wrapper", id: "range-label" }, h("div", { key: '03633c689d9d2e4c50a2131bcd560329df49e314', class: {
+            }) }, h("label", { key: '90224fd24b0e625a17e7972feff73a0ac31e093d', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e07b9fa10983249c425eec26b741f0f628daf2b2', 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: 'c066804263ab6ae7393f8dcc51184b7198844ffa', class: "native-wrapper" }, h("slot", { key: '7e8ea224d72b3e965dd948bee7e45c1a096b6899', name: "start" }), this.renderRangeSlider(), h("slot", { key: '21f242f6f60ff3adce6a2d90b2d4dac1ceaf6624', name: "end" })))));
+            }, 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" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -48,7 +48,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '4add42b9fdfded359d1b054d04c2c6ff48e028c8', class: mode }, h("div", { key: '45d4e4e0adfed7f96dd1849767aa2cde947de044', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '6bd6c8ef5bf6e10699eec3bd8646431bfe1077a0', class: "refresher-pulling-icon" }, h("div", { key: '852d20414da53352c8e58bc627e0fda38eff97cb', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0dde3578a80cc4b77a07c4d1db1af80c7eb10c27', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'c71dbfcf416a19c30fed38f722ebf0358c2181dd', class: "arrow-container" }, h("ion-icon", { key: 'fa7c2cf624e7a9c41964e66cabc88c594da6d1fd', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '3dd68c9968b421c379d1c4349ba619ee0a189c6d', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'f83bceceae4fa8245f91939fb6db589a595e975b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '98e22ceb0f7883e871f815f6199f5cb313e2e086', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'faabe8a9b61c02a00994ef978bb82b9ba4537214', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '029a0c073ee1a07f01211e12ba2abc985cf21ed7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        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())));
     }
     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: 'b869db61ca6393cf1476f2111a66b387b567c6d1', class: mode }, h("slot", { key: 'a78edd1776835282b8b5c841377018f36c83296c' }, h("ion-icon", { key: '7fb067c47bbb9a7258e5063f028282cc097d0f94', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        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" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

@@ -22,10 +22,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), h("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
+            }) }, h("a", Object.assign({ key: '85796b7b48581fe9830ba1102dad7d1069de4e17' }, attrs), h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,10 +23,11 @@ export class RouterOutlet {
          */
         this.animated = true;
     }
+    swipeGestureChanged() {
+        this.updateGestureEnabled();
+    }
     swipeHandlerChanged() {
-        if (this.gesture) {
-            this.gesture.enable(this.swipeHandler !== undefined);
-        }
+        this.updateGestureEnabled();
     }
     async connectedCallback() {
         const onStart = () => {
@@ -66,11 +67,21 @@ export class RouterOutlet {
                 this.gestureOrAnimationInProgress = false;
             }
         });
-        this.swipeHandlerChanged();
+        if (this.swipeGesture === undefined) {
+            this.swipeGesture = config.getBoolean('swipeBackEnabled', this.mode === 'ios');
+        }
+        else {
+            this.updateGestureEnabled();
+        }
     }
     componentWillLoad() {
         this.ionNavWillLoad.emit();
     }
+    updateGestureEnabled() {
+        if (this.gesture) {
+            this.gesture.enable(this.swipeHandler !== undefined && this.swipeGesture === true);
+        }
+    }
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -181,7 +192,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
+        return h("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }
@@ -293,6 +304,25 @@ export class RouterOutlet {
                 "getter": false,
                 "setter": false
             },
+            "swipeGesture": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture.\nDefaults to `true` for `\"ios\"` mode and `false` for `\"md\"` mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe-gesture"
+            },
             "swipeHandler": {
                 "type": "unknown",
                 "mutable": false,
@@ -514,6 +544,9 @@ export class RouterOutlet {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "swipeGesture",
+                "methodName": "swipeGestureChanged"
+            }, {
                 "propName": "swipeHandler",
                 "methodName": "swipeHandlerChanged"
             }];

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: '8ba906a8cbea060a79ed658c9bf34906f0c11d38', class: getIonMode(this) }, h("slot", { key: 'd1009176f45b588fa52c7d9eb336f3c6d3214bb8' })));
+        return (h(Host, { key: 'a9066661fff12baaf3e80b2e8c08591af72fe5b8', class: getIonMode(this) }, h("slot", { key: '62b103af46d3a5ec9c146019ae300b68a4ae867a' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class Searchbar {
         /**
          * Set the input's autocorrect property.
          */
-        this.autocorrect = 'off';
+        this.autocorrect = false;
         /**
          * Set the cancel button icon. Only applies to `md` mode.
          * Defaults to `arrow-back-sharp`.
@@ -459,8 +459,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: '226b7a676b4819cda4062b8334fa8d4c4cee6f1a', "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: '89adb4efa17a78c973bbd5527cfac91d99ceb9bb', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '237dd767403dba3cb3d7de8905996e275669da3b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        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, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -470,14 +470,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '5b4bdf7280bea710304b6975e76390fe6ceb7417', class: "searchbar-input-container" }, h("input", Object.assign({ key: '01a0820a2cf904aec1c7d84b542ab7918d435632', "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: 'cd64973206b1cc59d221112861733b7ee25f0323', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '2061fa8449bbc576cf8c5130ea613378ea492944', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '587e1950e329cfb9d3658be5b2a6491e7af9321a', class: "searchbar-input-container" }, h("input", Object.assign({ 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '00df6f7742bff70b1b088d544b8c00e962e7216c', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, 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));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -589,11 +589,11 @@ export class Searchbar {
                 "defaultValue": "'off'"
             },
             "autocorrect": {
-                "type": "string",
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'on' | 'off'",
-                    "resolved": "\"off\" | \"on\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
@@ -606,7 +606,7 @@ export class Searchbar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "autocorrect",
-                "defaultValue": "'off'"
+                "defaultValue": "false"
             },
             "cancelButtonIcon": {
                 "type": "string",

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

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

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

@@ -111,7 +111,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: 'f69e2a24198a7c57543dbe66902da039a6569c64', class: {
+        return (h(Host, { key: '792f621c36260b1fceff2b4ec4fa95d98d51d46b', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -127,7 +127,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d', "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: '991018a38c59a6f3d76b2e952e5569c874d2c13e', class: "button-inner" }, h("slot", { key: '23c547c80108025027b913c7fcbec189286627a3' })), mode === 'md' && h("ion-ripple-effect", { key: '7faa9d06ab6aa7346d16b0b6808979759a79650c' })), h("div", { key: '0d61badf2c227dc38e20185b2b2bb590a5efa434', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'a84035752b78491c344179d1e61d109fb4bd1cf1', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ 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" }))));
     }
     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: '665f41a854621f898eaf7ba9a49e77cc9326501e' }, h("slot", { key: '635aa57fbf6167dcd36fe8dc5dfc1c313637ac04' })));
+        return (h(Host, { key: 'ef39f29c444177c3b083cd35680ba891e4bb6a2a' }, h("slot", { key: '51f9dd9ca084ddd928b376aa9d716509669c32b2' })));
     }
     static get is() { return "ion-segment-content"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -75,6 +75,14 @@
    * @prop --border-width: Width of the select border
    *
    * @prop --ripple-color: The color of the ripple effect on MD mode.
+   *
+   * @prop --select-text-media-width: The width of media (icons/images) in the select text.
+   * @prop --select-text-media-height: The height of media (icons/images) in the select text.
+   * @prop --select-text-media-border-width: The border width of media (icons/images) in the select text.
+   * @prop --select-text-media-border-color: The border color of media (icons/images) in the select text.
+   * @prop --select-text-media-border-radius: The border radius of media (icons/images) in the select text.
+   * @prop --select-text-media-border-style: The border style of media (icons/images) in the select text.
+   * @prop --select-text-gap: The gap between elements in the select text.
    */
   --padding-top: 0px;
   --padding-end: 0px;
@@ -87,6 +95,9 @@
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
   --highlight-color-valid: var(--ion-color-success, #2dd55b);
   --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --select-text-media-height: 1.5em;
+  --select-text-media-width: 1.5em;
+  --select-text-gap: 12px;
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -227,6 +238,28 @@ button {
   overflow: hidden;
 }
 
+/**
+ * If the select text contains rich content, we want to add some
+ * spacing between the elements without changing the display to
+ * prevent losing the ellipses behavior.
+ */
+.select-text > * + * {
+  margin-inline-start: var(--select-text-gap);
+}
+
+.select-text img,
+.select-text ion-img,
+.select-text ion-icon,
+.select-text ion-thumbnail,
+.select-text ion-avatar {
+  border-radius: var(--select-text-media-border-radius);
+  width: var(--select-text-media-width);
+  height: var(--select-text-media-height);
+  border-width: var(--select-text-media-border-width);
+  border-style: var(--select-text-media-border-style);
+  border-color: var(--select-text-media-border-color);
+}
+
 .select-wrapper {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);