voyager-ionic-core 8.8.10 → 8.8.17

package/dist/collection/components/item/item.js

@@ -1,11 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, forceUpdate, h } from "@stencil/core";
+import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForward } from "ionicons/icons";
 import { getIonMode } from "../../global/ionic-global";
+const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -23,9 +24,11 @@ export class Item {
         this.labelColorStyles = {};
         this.itemStyles = new Map();
         this.inheritedAriaAttributes = {};
+        this.didLoad = false;
         this.multipleInputs = false;
         this.focusable = true;
         this.isInteractive = false;
+        this.hasSlottedIndicatorControl = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -51,6 +54,7 @@ export class Item {
         this.updateInteractivityOnSlotChange = () => {
             this.setIsInteractive();
             this.setMultipleInputs();
+            this.setHasSlottedIndicatorControl();
         };
     }
     buttonChanged() {
@@ -92,6 +96,14 @@ export class Item {
     }
     connectedCallback() {
         this.hasStartEl();
+        /**
+         * `componentDidLoad` doesn't run again when the item is moved, so re-arm the
+         * observer and re-read the light DOM, which may have changed while detached.
+         */
+        if (this.didLoad) {
+            this.watchForIndicatorControls();
+            this.updateInteractivityOnSlotChange();
+        }
     }
     componentWillLoad() {
         this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
@@ -100,8 +112,17 @@ export class Item {
         raf(() => {
             this.setMultipleInputs();
             this.setIsInteractive();
+            this.setHasSlottedIndicatorControl();
             this.focusable = this.isFocusable();
         });
+        this.watchForIndicatorControls();
+        this.didLoad = true;
+    }
+    disconnectedCallback() {
+        if (this.indicatorControlObserver) {
+            this.indicatorControlObserver.disconnect();
+            this.indicatorControlObserver = undefined;
+        }
     }
     totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
@@ -135,6 +156,50 @@ export class Item {
         const { covers, inputs, clickables } = this.totalNestedInputs();
         this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
     }
+    /**
+     * `slotchange` only fires for nodes assigned directly to a slot, so a control
+     * inside a slotted wrapper (`<div><ion-toggle>`) never reaches
+     * `updateInteractivityOnSlotChange`. The light DOM is observed instead.
+     *
+     * The callback runs the whole handler because a control below a wrapper can also
+     * make the item multi-input, which is what decides whether the controls draw
+     * their own indicator at all.
+     *
+     * `:host(:has())` would avoid the observer, but the `:has()` fallback in
+     * `core.scss` is still open as FW-6106 and it's unreliable for slotted content
+     * in Android WebView. Worth revisiting when FW-6106 closes.
+     */
+    watchForIndicatorControls() {
+        var _a;
+        if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // `Node.moveBefore` relocates the item without either callback firing, so
+        // never leave a previous observer behind
+        (_a = this.indicatorControlObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.indicatorControlObserver = new MutationObserver((records) => {
+            // The subtree observer also fires for text and hidden input churn, so only
+            // re-read the DOM when a control was added or removed
+            if (records.some(touchesIndicatorControl)) {
+                this.updateInteractivityOnSlotChange();
+            }
+        });
+        this.indicatorControlObserver.observe(this.el, { childList: true, subtree: true });
+    }
+    // These controls paint a focus indicator that overhangs their own bounds, and
+    // only the default slot is clipped, so only a control there needs extra room.
+    setHasSlottedIndicatorControl() {
+        const controls = this.el.querySelectorAll(INDICATOR_CONTROL_SELECTOR);
+        this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
+            // The control isn't always a direct child, so walk up to the element the item
+            // slots, which is the one carrying the slot name.
+            let slotted = control;
+            while (slotted !== null && slotted.parentElement !== this.el) {
+                slotted = slotted.parentElement;
+            }
+            return slotted !== null && !slotted.getAttribute('slot');
+        });
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -236,7 +301,13 @@ export class Item {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '3977491399280a2aa3f796f0549235f3dc8b5681', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        /**
+         * A control in a single-input item defers its indicator to the item, so there's
+         * nothing to clip and nothing to make room for. It draws its own indicator in a
+         * multi-input item, and in a clickable item, which is a second tab stop.
+         */
+        const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
+        return (h(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -245,10 +316,11 @@ export class Item {
                 'item-disabled': disabled,
                 'in-list': inList,
                 'item-multiple-inputs': this.multipleInputs,
+                'item-focus-indicator-room': slottedIndicatorNeedsRoom,
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '8aff72457004553e83d74a4dda2f9a6b8cf523d7' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'aba9a0f2ad101be6598f364c83236ca3de437a04', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '5e7851e49959e4ed114fcd51cb167db9bd8c0f00', class: "item-inner", part: "inner" }, h("div", { key: 'eee6511845d8459450ca856819839d83cd507c0c', class: "input-wrapper", part: "container" }, h("slot", { key: '76e13f86cd144951b1999eb333a2027b42cdf6e2', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'b264f7b4c367e7700a9a05343177abf7b17045d8', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '66b930bdfebb55ea0b2e784a1c902eb6c64b2370', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '06ab8e87917b545f3c221602b9b6d8004a1895ad' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'd42583cf62133b2553de2e7a5357168640bb1834' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, h("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, h("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -543,7 +615,8 @@ export class Item {
         return {
             "multipleInputs": {},
             "focusable": {},
-            "isInteractive": {}
+            "isInteractive": {},
+            "hasSlottedIndicatorControl": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -569,3 +642,11 @@ export class Item {
             }];
     }
 }
+const isIndicatorControl = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+    }
+    const el = node;
+    return el.matches(INDICATOR_CONTROL_SELECTOR) || el.querySelector(INDICATOR_CONTROL_SELECTOR) !== null;
+};
+const touchesIndicatorControl = (record) => Array.from(record.addedNodes).some(isIndicatorControl) || Array.from(record.removedNodes).some(isIndicatorControl);

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

@@ -387,6 +387,17 @@ a {
   flex-direction: column;
 }
 
+:host(.item-focus-indicator-room) .input-wrapper {
+  -webkit-margin-start: -12px;
+  margin-inline-start: -12px;
+  -webkit-margin-end: -12px;
+  margin-inline-end: -12px;
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+}
+
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
 :host(.item-multiple-inputs) ::slotted(ion-radio) {

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

@@ -224,6 +224,13 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         return true;
     };
     const onStart = (detail) => {
+        var _a;
+        /**
+         * Firefox automatically selects the header text during drag
+         * due to the focusable wrapper (tabindex="-1"). Remove any
+         * selection that may have occurred.
+         */
+        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
         /**
          * If canDismiss is anything other than `true`
          * then users should be able to swipe down

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -96,7 +96,14 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
         return false;
     };
     const onStart = (detail) => {
+        var _a;
         const { deltaY } = detail;
+        /**
+         * Firefox automatically selects the header text during drag
+         * due to the focusable wrapper (tabindex="-1"). Remove any
+         * selection that may have occurred.
+         */
+        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
         /**
          * Get the initial scrollY value so
          * that we can correctly reset the scrollY

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

@@ -126,6 +126,14 @@ ion-backdrop {
   z-index: 10;
 }
 
+/**
+ * The wrapper receives programmatic focus for screen readers but should not
+ * show a visible focus ring, which is meant only for keyboard navigation.
+ */
+.modal-wrapper {
+  outline: none;
+}
+
 .modal-shadow {
   position: absolute;
   background: transparent;

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

@@ -191,9 +191,15 @@ export class Modal {
          * if it exists and is focusable, otherwise let the focus trap handle it.
          */
         this.onModalFocus = (ev) => {
+            var _a;
             const { dragHandleEl, el } = this;
-            // Only handle focus if the modal itself was focused (not a child element)
-            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+            /**
+             * Shadow DOM focus is retargeted to the host, so `ev.target === el` is also
+             * true when a shadow child (the dialog wrapper present() focuses) is focused.
+             * shadowRoot's activeElement is null only when the host was focused directly,
+             * so redirect to the handle only then and leave present()'s wrapper focus intact.
+             */
+            if (ev.target === el && ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
                 dragHandleEl.focus();
             }
         };
@@ -1162,20 +1168,26 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: 'ab93657f4a5b4c97168d292b398d975e4b5b4af4', "no-router": true,
+        return (h(Host, Object.assign({ key: 'bad33199a939bd1e289b3b3f936c676ba403224f', "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}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, '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: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: '3f6c61ba60b063592784d76a9594073b3bf210a9',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, '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: 'd098688a65fb2d1befb255f0e59fd4c00b401092', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '96cd2e59a7d1c0de7c9afb8f8d366367b09fbc93', class: "modal-shadow" }), h("div", Object.assign({ key: '882ccc39ce344a2c51d6508c11c3f40b26eaf2a7',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
+  
+              tabIndex={-1} is required so present() can move focus to this
+              element (which carries the dialog role) instead of the role-less
+              host. role="dialog" alone does not make an element focusable, so
+              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", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '7f66b4fdb3dec61a2b9aec4e9dbacf5d013d637c', 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: '714d9904fcc8105b21e2bb66cdc032bffd685d72', 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: '2dfaaebe3d0b2a46be1224c25f9ab89bf1744332', 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: '79dfbeb3fe5eee7dc3a243ad880d3f63184f3ab7', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -126,6 +126,14 @@ ion-backdrop {
   z-index: 10;
 }
 
+/**
+ * The wrapper receives programmatic focus for screen readers but should not
+ * show a visible focus ring, which is meant only for keyboard navigation.
+ */
+.modal-wrapper {
+  outline: none;
+}
+
 .modal-shadow {
   position: absolute;
   background: transparent;

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

@@ -130,6 +130,17 @@ input {
   width: auto;
 }
 
+:host(.ion-focused) .radio-icon::after {
+  border-radius: var(--inner-border-radius);
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: var(--ion-color-primary-tint, #1a65eb);
+  content: "";
+  opacity: 0.2;
+}
+
 .radio-wrapper {
   display: flex;
   position: relative;
@@ -456,21 +467,6 @@ input {
   opacity: 0.3;
 }
 
-:host(.ion-focused) .radio-icon::after {
-  border-radius: var(--inner-border-radius);
-  top: -8px;
-  display: block;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
-  content: "";
-  opacity: 0.2;
-}
-:host(.ion-focused) .radio-icon::after {
-  inset-inline-start: -9px;
-}
-
 .native-wrapper .radio-icon {
   width: 0.9375rem;
   height: 1.5rem;

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from "@stencil/core";
-import { isOptionSelected } from "../../utils/forms/index";
+import { Host, forceUpdate, h } from "@stencil/core";
+import { createItemMultipleInputsObserver, isOptionSelected } from "../../utils/forms/index";
 import { addEventListener, removeEventListener } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -118,6 +118,7 @@ export class Radio {
             this.updateState();
             addEventListener(radioGroup, 'ionValueChange', this.updateState);
         }
+        this.itemFocusObserver = createItemMultipleInputsObserver(this.el, () => forceUpdate(this));
     }
     disconnectedCallback() {
         const radioGroup = this.radioGroup;
@@ -125,6 +126,10 @@ export class Radio {
             removeEventListener(radioGroup, 'ionValueChange', this.updateState);
             this.radioGroup = null;
         }
+        if (this.itemFocusObserver) {
+            this.itemFocusObserver.disconnect();
+            this.itemFocusObserver = undefined;
+        }
     }
     get hasLabel() {
         return this.el.textContent !== '';
@@ -136,7 +141,8 @@ 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, {
+        const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
+        return (h(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -144,13 +150,15 @@ export class Radio {
                 [`radio-justify-${justify}`]: justify !== undefined,
                 [`radio-alignment-${alignment}`]: alignment !== undefined,
                 [`radio-label-placement-${labelPlacement}`]: true,
-                // Focus and active styling should not apply when the radio is in an item
+                // A single-input item has the input cover and draws the indicator itself.
+                // A multi-input item has no cover, so each control draws its own. Active
+                // styling stays suppressed either way.
                 '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: {
+                'ion-focusable': !inItem || inMultipleInputsItem,
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'fb358e14faf37142ccad169adb729f3129371406', class: "radio-wrapper" }, h("div", { key: '844ab615aadf6eef46368ad060afaca9c4222cc1', 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: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), h("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -130,6 +130,17 @@ input {
   width: auto;
 }
 
+:host(.ion-focused) .radio-icon::after {
+  border-radius: var(--inner-border-radius);
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: var(--ion-color-primary-tint, #1a65eb);
+  content: "";
+  opacity: 0.2;
+}
+
 .radio-wrapper {
   display: flex;
   position: relative;
@@ -477,17 +488,6 @@ input {
   opacity: 0.63;
 }
 
-:host(.ion-focused) .radio-icon::after {
-  border-radius: var(--inner-border-radius);
-  display: block;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
-  content: "";
-  opacity: 0.2;
-}
-
 .native-wrapper .radio-icon {
   width: 1.25rem;
   height: 1.25rem;

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

@@ -203,7 +203,16 @@ export class Refresher {
             });
         };
         this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-        this.gesture = (await import('../../utils/gesture')).createGesture({
+        const { createGesture } = await import('../../utils/gesture');
+        /**
+         * Awaiting the dynamic import yields to the event loop, so the component can
+         * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+         * missing scrollEl here means there is nothing left to attach a gesture to.
+         */
+        if (!this.scrollEl) {
+            return;
+        }
+        this.gesture = createGesture({
             el: this.scrollEl,
             gestureName: 'refresher',
             gesturePriority: 31,
@@ -263,7 +272,16 @@ export class Refresher {
                 refreshingCircle.style.setProperty('animation-delay', '-655ms');
             });
         }
-        this.gesture = (await import('../../utils/gesture')).createGesture({
+        const { createGesture } = await import('../../utils/gesture');
+        /**
+         * Awaiting the dynamic import yields to the event loop, so the component can
+         * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+         * missing scrollEl here means there is nothing left to attach a gesture to.
+         */
+        if (!this.scrollEl) {
+            return;
+        }
+        this.gesture = createGesture({
             el: this.scrollEl,
             gestureName: 'refresher',
             gesturePriority: 31,
@@ -397,7 +415,16 @@ export class Refresher {
                 this.setupNativeRefresher(contentEl);
             }
             else {
-                this.gesture = (await import('../../utils/gesture')).createGesture({
+                const { createGesture } = await import('../../utils/gesture');
+                /**
+                 * Awaiting the dynamic import yields to the event loop, so the component can
+                 * disconnect before it resolves. A disconnected contentEl means there is
+                 * nothing left to attach a gesture to.
+                 */
+                if (!contentEl.isConnected) {
+                    return;
+                }
+                this.gesture = createGesture({
                     el: contentEl,
                     gestureName: 'refresher',
                     gesturePriority: 31,
@@ -716,7 +743,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '80fa313b0d77161680836bdd6aa334d02c549b41', slot: "fixed", class: {
+        return (h(Host, { key: '2eaca7f85b3d40418f213077434e519dfacd9d42', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -243,12 +243,14 @@ export class Searchbar {
         }, 300);
     }
     disconnectedCallback() {
+        var _a;
         if (this.loadTimeout) {
             clearTimeout(this.loadTimeout);
         }
         if (this.clearTimeout) {
             clearTimeout(this.clearTimeout);
         }
+        (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     emitStyle() {
         this.ionStyle.emit({
@@ -346,6 +348,7 @@ export class Searchbar {
             doc.body.appendChild(tempSpan);
             // Get the width of the span then remove it
             raf(() => {
+                var _a, _b;
                 const textWidth = tempSpan.offsetWidth;
                 tempSpan.remove();
                 // Calculate the input padding
@@ -357,7 +360,25 @@ export class Searchbar {
                  * such as Dynamic Type on iOS as well as 8px
                  * of padding.
                  */
-                const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconEl.clientWidth + 8) + 'px)';
+                const iconWidth = iconEl.clientWidth;
+                /**
+                 * Fix for https://github.com/ionic-team/ionic-framework/issues/30434:
+                 * iconEl.clientWidth can very briefly be 0 when this is called from componentDidLoad.
+                 * If it is zero, set up a ResizeObserver and call this function when it observes a width greater than 0.
+                 */
+                if (iconWidth === 0) {
+                    (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                    this.searchIconResizeObserver = new ResizeObserver((entries) => {
+                        var _a;
+                        if (entries[0].contentRect.width > 0) {
+                            (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                            this.positionPlaceholder();
+                        }
+                    });
+                    (_b = this.searchIconResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(iconEl);
+                    return;
+                }
+                const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconWidth + 8) + 'px)';
                 // Set the input padding start and icon margin start
                 if (rtl) {
                     inputEl.style.paddingRight = inputLeft;
@@ -438,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: '9e9f3a7f6ee66140181f8c3cfa42bbeee75adafc', "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: '5f83fbcc0708830637815e8c0b69356cad381870', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '219c263c1f3cc63e18bc2d2ba5d672b7806eddd0', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        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, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -449,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: '3f1c25442d6d87c0df67f79482a925b80dcc403d', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'a386fecafda0fab449ea1488906ba6cfc55e2b5c', "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: '5f81642628335def39a14f0726e0fafdc7203776', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'da3073646f2d7f639261b556517fbadabc3c10e9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '065cd6c707ae462c0767df1bab04ce8045f340a4', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, 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));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -836,8 +836,9 @@ export class Select {
          *
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '5f4ee901b65554eacc9fa52230d06b1a5ff1247c', onClick: this.onClick, class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' ||
+            (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
+        return (h(Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -855,7 +856,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'd56d89b5b58da2b5eaebada9d1be58ca45c67806', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'bc8bf089c693781ad5b3a5db76a12223867d748e', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'e1c12b96f1573eb192608c458ed1f3463174cd89', name: "start" }), h("div", { key: '6ee5e3900d8e462f175649b502ac6faa2f2b9909', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'faeaea34aad412e1458beab95d4b1b9ca7b87c41', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'aeff51e51c990844869eff9940575ce6b2223135', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'db13f76b384a7a7461c1ad752108eadf9c0213be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '2fb0e57bd596c0f525be79293b7da4aca55a9385', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'cd694c36242789a89461ed3412af9891ad68411b', name: "start" }), h("div", { key: 'fdf62911be54f4ab29eb3c2eb153f082e76a8f49', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'a32f5c4b101d4d6ad45870f4c4446960009377f5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '61f792024a5f221ef4f28a3c249bd3a0de5edeab', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }