@ionic/core 9.0.1-dev.11787949960.1e63841c → 9.0.1-dev.11788285010.17561004

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

@@ -20,12 +20,6 @@ export class PickerColumn {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
-        this.isUserScroll = false;
-        /**
-         * The haptics for the wheel picker are an iOS-only feature. As a result,
-         * they should be disabled on Android.
-         */
-        this.enableHaptics = false;
         this.ariaLabel = null;
         this.isActive = false;
         /**
@@ -57,12 +51,6 @@ export class PickerColumn {
                      */
                     this.canExitInputMode = canExitInputMode;
                     this.updateValueTextOnScroll = false;
-                    /**
-                     * This scroll takes over from whatever the user was doing, so an outside
-                     * press must not commit an option the column is only passing through.
-                     */
-                    this.isUserScroll = false;
-                    this.stopWatchingForOutsidePress();
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -117,117 +105,6 @@ export class PickerColumn {
             }
             this.isActive = state;
         };
-        this.clearScrollEndTimeout = () => {
-            if (this.scrollEndTimeout) {
-                clearTimeout(this.scrollEndTimeout);
-                this.scrollEndTimeout = undefined;
-            }
-        };
-        /**
-         * Resets the idle timer that commits the centered option.
-         */
-        this.resetScrollEndTimeout = () => {
-            this.clearScrollEndTimeout();
-            this.scrollEndTimeout = setTimeout(this.settle, SCROLL_END_DELAY);
-        };
-        /**
-         * Capture so the column still commits if an application's own pointerdown
-         * handler stops the event before it reaches the document.
-         */
-        this.watchForOutsidePress = () => {
-            doc?.addEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
-        };
-        this.stopWatchingForOutsidePress = () => {
-            doc?.removeEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
-        };
-        /**
-         * Resets everything the current scroll interaction is holding, so nothing
-         * pending on it can commit later.
-         */
-        this.discardScroll = () => {
-            this.stopWatchingForOutsidePress();
-            this.clearScrollEndTimeout();
-            this.scrollEndCallback = undefined;
-            this.centeredOption = undefined;
-            this.haltedAtScrollTop = undefined;
-            this.isScrolling = false;
-            this.isUserScroll = false;
-            this.canExitInputMode = true;
-        };
-        /**
-         * Commits the option that is currently centered under the highlight and ends
-         * the scroll interaction.
-         */
-        this.settle = () => {
-            const { centeredOption } = this;
-            this.clearScrollEndTimeout();
-            this.stopWatchingForOutsidePress();
-            this.isUserScroll = false;
-            this.isScrolling = false;
-            this.updateValueTextOnScroll = true;
-            this.enableHaptics && hapticSelectionEnd();
-            /**
-             * Certain tasks (such as those that
-             * cause re-renders) should only be done
-             * once scrolling has finished, otherwise
-             * flickering may occur.
-             */
-            const { scrollEndCallback } = this;
-            if (scrollEndCallback) {
-                scrollEndCallback();
-                this.scrollEndCallback = undefined;
-            }
-            /**
-             * Reset this flag as the
-             * next scroll interaction could
-             * be a scroll from the user. In this
-             * case, we should exit input mode.
-             */
-            this.canExitInputMode = true;
-            if (centeredOption !== undefined) {
-                // Cleared here so a later scroll that centers nothing cannot fall back on it.
-                this.centeredOption = undefined;
-                if (centeredOption.isConnected) {
-                    this.setValue(centeredOption.value);
-                }
-            }
-        };
-        /**
-         * Commits the option the user can see when they press anything outside of the
-         * column during a scroll they started. This runs on pointerdown rather than
-         * click so the value is up to date by the time an application's own click
-         * handler (a Save button, for example) reads it.
-         */
-        this.onPointerDownOutside = (ev) => {
-            const { centeredOption, parentEl, scrollEl } = this;
-            if (!this.isScrolling) {
-                return;
-            }
-            /**
-             * The column can live in another component's Shadow DOM, where a document
-             * listener sees the target retargeted to the outer host. The composed path
-             * is the only reliable way to tell a press on the column apart.
-             */
-            const path = ev.composedPath();
-            /**
-             * A press anywhere in the parent picker counts as inside, so reaching for a
-             * sibling wheel leaves this column coasting.
-             */
-            if (path.includes(this.el) || (parentEl != null && path.includes(parentEl))) {
-                return;
-            }
-            /**
-             * Landing on the centered option halts the in-flight momentum scroll, so the
-             * committed value and the option the user is left looking at agree. The
-             * option list can be replaced mid-scroll, and a detached option has no
-             * offset to center on.
-             */
-            if (centeredOption !== undefined && centeredOption.isConnected) {
-                this.centerPickerItemInView(centeredOption, false, false);
-                this.haltedAtScrollTop = scrollEl?.scrollTop;
-            }
-            this.settle();
-        };
         /**
          * When the column scrolls, the component
          * needs to determine which item is centered
@@ -235,42 +112,27 @@ export class PickerColumn {
          * the item object.
          */
         this.initializeScrollListener = () => {
-            this.enableHaptics = isPlatform('ios');
+            /**
+             * The haptics for the wheel picker are
+             * an iOS-only feature. As a result, they should
+             * be disabled on Android.
+             */
+            const enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
+            let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
-                    /**
-                     * This frame cannot be cancelled, and moving the column disconnects it
-                     * without the observer reporting a change, so this checks live state.
-                     */
-                    if (!this.el.isConnected || !this.isColumnVisible || !scrollEl)
+                    if (!scrollEl)
                         return;
-                    const { haltedAtScrollTop } = this;
-                    if (haltedAtScrollTop !== undefined) {
-                        /**
-                         * Still at the halted position, so this frame is the halt landing
-                         * rather than the wheel moving, and re-arming would start a second
-                         * commit cycle.
-                         */
-                        if (Math.abs(scrollEl.scrollTop - haltedAtScrollTop) <= HALT_TOLERANCE)
-                            return;
-                        this.haltedAtScrollTop = undefined;
+                    if (timeout) {
+                        clearTimeout(timeout);
+                        timeout = undefined;
                     }
-                    // Armed before the early returns below, so a scroll never ends uncommitted.
-                    this.resetScrollEndTimeout();
                     if (!this.isScrolling) {
-                        this.enableHaptics && hapticSelectionStart();
+                        enableHaptics && hapticSelectionStart();
                         this.isScrolling = true;
                     }
-                    /**
-                     * Only a user-driven scroll holds an uncommitted selection. Checked every
-                     * frame because the user can take hold of the wheel mid-scroll, and
-                     * re-adding the same listener is a no-op.
-                     */
-                    if (this.isUserScroll) {
-                        this.watchForOutsidePress();
-                    }
                     /**
                      * Select item in the center of the column
                      * which is the month/year that we want to select
@@ -330,23 +192,18 @@ export class PickerColumn {
                             newActiveElement = fallbackActiveElement;
                         }
                     }
-                    /**
-                     * A scroll can land with no selectable option centered, such as an
-                     * overscroll bounce briefly centering the empty padding rows. Keep the
-                     * current selection until an option is centered again.
-                     */
-                    if (newActiveElement === undefined || newActiveElement.disabled) {
-                        return;
-                    }
                     if (activeEl !== undefined) {
                         this.setPickerItemActiveState(activeEl, false);
                     }
+                    if (newActiveElement === undefined || newActiveElement.disabled) {
+                        return;
+                    }
                     /**
                      * If we are selecting a new value,
                      * we need to run haptics again.
                      */
                     if (newActiveElement !== activeEl) {
-                        this.enableHaptics && hapticSelectionChanged();
+                        enableHaptics && hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
                              * The native iOS wheel picker
@@ -378,14 +235,32 @@ export class PickerColumn {
                     if (this.updateValueTextOnScroll) {
                         this.assistiveFocusable?.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
                     }
-                    this.centeredOption = newActiveElement;
+                    timeout = setTimeout(() => {
+                        this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
+                        enableHaptics && hapticSelectionEnd();
+                        /**
+                         * Certain tasks (such as those that
+                         * cause re-renders) should only be done
+                         * once scrolling has finished, otherwise
+                         * flickering may occur.
+                         */
+                        const { scrollEndCallback } = this;
+                        if (scrollEndCallback) {
+                            scrollEndCallback();
+                            this.scrollEndCallback = undefined;
+                        }
+                        /**
+                         * Reset this flag as the
+                         * next scroll interaction could
+                         * be a scroll from the user. In this
+                         * case, we should exit input mode.
+                         */
+                        this.canExitInputMode = true;
+                        this.setValue(newActiveElement.value);
+                    }, 250);
                 });
             };
-            const userScrollCallback = () => {
-                this.isUserScroll = true;
-                // Taking hold of the wheel ends the halt even if it has not moved yet.
-                this.haltedAtScrollTop = undefined;
-            };
             /**
              * Wrap this in an raf so that the scroll callback
              * does not fire when component is initially shown.
@@ -394,19 +269,8 @@ export class PickerColumn {
                 if (!scrollEl)
                     return;
                 scrollEl.addEventListener('scroll', scrollCallback);
-                scrollEl.addEventListener('pointerdown', userScrollCallback);
-                scrollEl.addEventListener('wheel', userScrollCallback, { passive: true });
-                /**
-                 * A `pointerdown` fires once per touch, so a drag that pauses long enough
-                 * to commit would look like a scroll the column started. A `touchmove`
-                 * keeps arriving while the finger moves.
-                 */
-                scrollEl.addEventListener('touchmove', userScrollCallback, { passive: true });
                 this.destroyScrollListener = () => {
                     scrollEl.removeEventListener('scroll', scrollCallback);
-                    scrollEl.removeEventListener('pointerdown', userScrollCallback);
-                    scrollEl.removeEventListener('wheel', userScrollCallback);
-                    scrollEl.removeEventListener('touchmove', userScrollCallback);
                 };
             });
         };
@@ -591,14 +455,6 @@ export class PickerColumn {
             }
             else {
                 this.isColumnVisible = false;
-                /**
-                 * The pending timer still runs so it resets the scroll state, but the
-                 * option it would have committed is dropped. A column the user cannot
-                 * see should not change its value.
-                 */
-                this.stopWatchingForOutsidePress();
-                this.centeredOption = undefined;
-                this.haltedAtScrollTop = undefined;
                 if (this.destroyScrollListener) {
                     this.destroyScrollListener();
                     this.destroyScrollListener = undefined;
@@ -669,13 +525,6 @@ export class PickerColumn {
     connectedCallback() {
         this.ariaLabel = this.el.getAttribute('aria-label') ?? 'Select a value';
     }
-    disconnectedCallback() {
-        /**
-         * A pending settle would otherwise commit a value on a column that is no
-         * longer in the DOM.
-         */
-        this.discardScroll();
-    }
     get activeItem() {
         const { value } = this;
         const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
@@ -693,14 +542,14 @@ export class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '60a893619d0b01fba53fbccef67a10d533a22657', class: createColorClasses(color, {
+        return (h(Host, { key: '78b46ad10d88ea1bb43ca8c36748767912f03224', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: '79f1e047f89c5ec916ed02efaac56ef3f73b8969', name: "prefix" }), h("div", { key: 'c45c86e88353a196ff38159f40f390bc27852c9e', class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: '761e501df77f7de896ffb3ebb99ebf88c5c3bf70', name: "prefix" }), h("div", { key: '9f4caaeef8ab704522a85f30876d371712f47c5c', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e02d76752f5d3dd4cd2846fbc28645f1508a4b49', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'd577bcbadc530970b2781692b050811633625c5a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c89e78c3a896bc1f55b922d01df16fdbb1259bdd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6c597ff899692597432ee2aa0b42de53b86deed4' }), h("div", { key: '91686ed94f14c47647836ed4d63e54b5c54ee3b9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2ff058c6d0e8cef4e143c2d848f9a52684579af1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bc7386bec6fced36e44084a7a137b3fe6506c996', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '8835fd3f4e025bce964e6f05984c9aaadc20d7fb', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: '9d3533436aba6c61c93f65f84a077fba832194a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3f18d3a47361f06f55321b65fdf5742a61722b26', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'eac0d20ab8c533ef829875e323e93e1ee2067d6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '92e25989ef41cf6f910c73238e1a0a5ac03f1c1f' }), h("div", { key: '33a84644ebdc84108b44a8e3a129b54e824939c8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '128ad61a3a68c7ff2d2e44a6e968424fcc608a15', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6e4d59a4f75befcbbf47279a263f28a69b12dbbd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '3c6621b64438792a3024c90e3d9916a0a3614506', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }
@@ -924,16 +773,3 @@ export class PickerColumn {
     }
 }
 const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
-/**
- * How long the column must be idle before the centered option is treated as
- * the user's selection. Replaceable by the `scrollend` event once that is
- * supported everywhere (https://caniuse.com/?search=scrollend).
- */
-const SCROLL_END_DELAY = 250;
-/**
- * How far, in pixels, the column may report from where it was halted and still
- * count as having stayed there. Centering targets a position between two snap
- * points, so mandatory snapping corrects it by half the column height less
- * three option heights: 2px at the default sizes.
- */
-const HALT_TOLERANCE = 2;

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, cleanupRootFocusTrapAccessibility, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } 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";
@@ -219,13 +219,6 @@ export class Popover {
         const { configureTriggerInteraction, el } = this;
         prepareOverlay(el);
         configureTriggerInteraction();
-        // Re-apply the root lock if moved without dismiss() being called
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(el);
-            // The disconnect tore down the header observer, and `present()` is its
-            // only other caller, so a move mid-layout would lose the recalculation.
-            this.recalculateContentOnHeaderReady();
-        }
     }
     disconnectedCallback() {
         const { destroyTriggerInteraction } = this;
@@ -403,12 +396,6 @@ export class Popover {
         if (!header || contentElements.length === 0) {
             return;
         }
-        // Both `present()` and a reconnect call this, so drop any existing
-        // observer. Below the guards, so a call that bails cannot leave none.
-        if (this.headerResizeObserver) {
-            this.headerResizeObserver.disconnect();
-            this.headerResizeObserver = undefined;
-        }
         this.headerResizeObserver = new ResizeObserver(async () => {
             if (header.offsetHeight > 0) {
                 this.headerResizeObserver?.disconnect();
@@ -481,7 +468,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: 'b5e9c788f58397203976d5f8302dfb89e916efe1', "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),
@@ -492,7 +479,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: 'f3977833c5b2c0087c286ee54363b478d69eb115', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1059893d6fd2932ca8adcdf8d45a5d66f4794727', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '24d7988bdd95882ad77fcaa7112aeda55878bee4', class: "popover-arrow", part: "arrow" }), h("div", { key: '4d6992e0a9d629f11763045f9199f9a77fa521ab', class: "popover-content", part: "content" }, h("slot", { key: 'b29747419620a01a6c34e9e846cd529b0b210145' })))));
+            }, 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/segment-button/segment-button.js

@@ -58,6 +58,11 @@ export class SegmentButton {
             addEventListener(segmentEl, 'ionSelect', this.updateState);
             addEventListener(segmentEl, 'ionStyle', this.updateStyle);
         }
+        // Prevent buttons from being disabled when associated with segment content
+        if (this.contentId && this.disabled) {
+            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            this.disabled = false;
+        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -74,15 +79,6 @@ export class SegmentButton {
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        /**
-         * Checked here rather than in `connectedCallback` so frameworks that assign element
-         * props after inserting the element have set `disabled` by now. A disabled ion-segment
-         * pushes that onto its buttons too, which this guard should not undo.
-         */
-        if (this.disabled && this.segmentEl?.disabled !== true) {
-            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
-            this.disabled = false;
-        }
         // Attempt to find the Segment Content by its contentId
         const segmentContent = document.getElementById(this.contentId);
         // If no associated Segment Content exists, log an error and return
@@ -117,7 +113,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: 'd8acc71d87e26b32f20b2d0f9a6acc9f0dab0dee', 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 +129,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", { key: 'ce65da07b1a012bce353b3c6c24eecfbd4071d54', "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: '6c4b4dcd20e407e5dc31674bea23633d8a09187a', class: "button-inner" }, h("slot", { key: '817145ae77a3c5ada88ab95723d881f1bde96b2a' })), mode === 'md' && h("ion-ripple-effect", { key: '054d7e5e2a13013914fac6bbde8efdb28d9b459e' })), h("div", { key: 'c48074881a302510ad4752eeb9383222cd3a54cb', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '7672a6b10ee18ad026b798fbd8207dc3cd5683f9', 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/select/select.js

@@ -8,7 +8,7 @@ import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../..
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
-import { blockedTags, reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
+import { reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
@@ -947,7 +947,7 @@ export class Select {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -965,7 +965,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1663,14 +1663,29 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
         return getOptionContent(selectOpt, undefined, true);
     }
     /**
-     * Every text-only context reads only the default slot, so the start
-     * and end slots stay out of the `aria-label` and the overlay labels.
-     * Both config paths derive that text through the same helper, so they
-     * cannot disagree about what an option's text is. `null` marks an
-     * option with no text, which is dropped from the joined text of a
-     * `multiple` select rather than joined in as an empty entry.
+     * When custom HTML is enabled, extract only the default slot content.
+     * This ensures aria-label and other text-only contexts read only
+     * the relevant option text.
      */
-    return getDefaultSlotPlainText(selectOpt) || null;
+    if (customHTMLEnabled) {
+        const content = getOptionContent(selectOpt);
+        if (typeof content === 'string') {
+            return content;
+        }
+        /**
+         * Elements were found in the default slot, extract and concatenate
+         * their text content while trimming whitespace.
+         */
+        if (content) {
+            const texts = Array.from(content.childNodes)
+                .map((n) => n.textContent?.trim())
+                .filter((t) => t);
+            return texts.join(' ') || null;
+        }
+        // Empty option
+        return null;
+    }
+    return getDefaultSlotPlainText(selectOpt);
 };
 /**
  * Trims whitespace from all text nodes within a DOM tree.
@@ -1726,13 +1741,9 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     if (nodes.length === 0) {
         return null;
     }
-    /**
-     * Return plain text if no elements are found. This reads the option the
-     * same way the non-custom-HTML path does, so the two do not disagree
-     * about what an option's text is.
-     */
+    // Return plain text if no elements are found
     if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return getDefaultSlotPlainText(option) || null;
+        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
     }
     /**
      * Mirror known custom-element properties (e.g. ion-icon's `icon`)
@@ -1788,43 +1799,22 @@ const getOptionDefaultSlot = (option) => {
     }
     return defaultSlotNodes;
 };
-/**
- * Concatenates the text a node renders, skipping the subtrees of tags
- * whose contents the browser never paints (`script`, `style`, and the
- * rest of `blockedTags`). `textContent` includes those, so reading it
- * directly would put stylesheet or script source into the select text
- * and the `aria-label`.
- *
- * @param node - The node to read text from.
- * @returns The node's rendered text.
- */
-const getRenderedTextContent = (node) => {
-    if (node.nodeType === Node.TEXT_NODE) {
-        return node.textContent ?? '';
-    }
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-        return '';
-    }
-    if (blockedTags.includes(node.tagName.toLowerCase())) {
-        return '';
-    }
-    return Array.from(node.childNodes)
-        .map((child) => getRenderedTextContent(child))
-        .join('');
-};
 /**
  * Extracts plain text from only the default slot of an option,
- * excluding content assigned to named slots (start/end). Text is
- * concatenated with no separator and collapsible whitespace is
- * collapsed, approximating how the browser renders the option.
- * NBSP is not collapsible, so it is preserved.
- *
- * @param option - The `ion-select-option` element to read text from.
- * @returns The option's default slot text.
+ * excluding content assigned to named slots (start/end).
  */
 const getDefaultSlotPlainText = (option) => {
-    const text = (getOptionDefaultSlot(option) ?? []).map((node) => getRenderedTextContent(node)).join('');
-    return text.replace(/[ \t\n\r\f]+/g, ' ').replace(/^[ \t\n\r\f]+|[ \t\n\r\f]+$/g, '');
+    const texts = Array.from(option.childNodes)
+        .filter((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return !node.hasAttribute('slot');
+        }
+        return node.nodeType === Node.TEXT_NODE;
+    })
+        .filter((node) => node.nodeType === Node.TEXT_NODE)
+        .map((n) => n.textContent?.trim())
+        .filter((t) => t);
+    return texts.join(' ');
 };
 /**
  * Extracts the rich content from an `ion-select-option`.