@ionic/core 9.0.1-nightly.20260820 → 9.0.1-nightly.20260821

package/dist/cjs/ion-refresher_2.cjs.entry.js

@@ -11,7 +11,7 @@ var haptic = require('./haptic-Ch-X4gRx.js');
 var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
 var animation = require('./animation-D-OqR4a4.js');
 var config = require('./config-CjUbvdPW.js');
-var index$3 = require('./index-EJLjthTK.js');
+var index$3 = require('./index-D4T0SA6Q.js');
 var index$2 = require('./index-wOmugbdg.js');
 var spinnerConfigs = require('./spinner-configs-DxHKnd3-.js');
 require('./dir-zwDPRE5K.js');
@@ -582,11 +582,18 @@ const Refresher = class {
     componentDidUpdate() {
         this.checkNativeRefresher();
     }
-    async connectedCallback() {
+    /**
+     * Validate the slot attribute before rendering, while the host still reflects the
+     * developer's original markup. `connectedCallback` is too early: in the custom
+     * elements build it runs during insertion, before frameworks such as React assign
+     * the slot.
+     */
+    componentWillLoad() {
         if (this.el.getAttribute('slot') !== 'fixed') {
             index.printIonError('[ion-refresher] - Make sure you use: <ion-refresher slot="fixed">');
-            return;
         }
+    }
+    async connectedCallback() {
         const contentEl = this.el.closest(index$1.ION_CONTENT_ELEMENT_SELECTOR);
         if (!contentEl) {
             index$1.printIonContentErrorMsg(this.el);
@@ -946,7 +953,7 @@ const Refresher = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'b76e9fb79121799717063137135e448a3c784d82', slot: "fixed", class: {
+        return (index.h(index.Host, { key: 'fd9c8e51155d56f12148e8eb547e45c05807b4b5', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/cjs/ion-segment_2.cjs.entry.js

@@ -631,11 +631,6 @@ const SegmentButton = class {
             helpers.addEventListener(segmentEl, 'ionSelect', this.updateState);
             helpers.addEventListener(segmentEl, 'ionStyle', this.updateStyle);
         }
-        // Prevent buttons from being disabled when associated with segment content
-        if (this.contentId && this.disabled) {
-            index.printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
-            this.disabled = false;
-        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -652,6 +647,15 @@ const SegmentButton = class {
         // 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) {
+            index.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
@@ -686,7 +690,7 @@ const SegmentButton = class {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = ionicGlobal.getIonMode(this);
         const hasSegmentColor = () => segmentEl?.color !== undefined;
-        return (index.h(index.Host, { key: '2b4b7ad8b981d2ee39aba5b9c734de8a5bd045ba', class: {
+        return (index.h(index.Host, { key: 'd8acc71d87e26b32f20b2d0f9a6acc9f0dab0dee', class: {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
@@ -702,7 +706,7 @@ const SegmentButton = class {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, index.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 }, index.h("span", { key: '6443551951ce589efdb2d0e1fd1a14e35b82ed19', class: "button-inner" }, index.h("slot", { key: 'c3548b469ae6e5477d8372cb28bc70dff3a24d18' })), mode === 'md' && index.h("ion-ripple-effect", { key: 'fb176415ca1702766c4d7a5964ec0bb467bdcb55' })), index.h("div", { key: 'aa22b4752f8336d0e232a1e0894e87023b284a08', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: '61e29ea52048fa0583fce6c20c81614a4d0199cb', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, index.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 }, index.h("span", { key: '6c4b4dcd20e407e5dc31674bea23633d8a09187a', class: "button-inner" }, index.h("slot", { key: '817145ae77a3c5ada88ab95723d881f1bde96b2a' })), mode === 'md' && index.h("ion-ripple-effect", { key: '054d7e5e2a13013914fac6bbde8efdb28d9b459e' })), index.h("div", { key: 'c48074881a302510ad4752eeb9383222cd3a54cb', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, index.h("div", { key: '7672a6b10ee18ad026b798fbd8207dc3cd5683f9', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-BrVMoqUk.js');
 var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
 var overlayControlLabel = require('./overlay-control-label-D2sdL2O8.js');
 var overlays = require('./overlays-Bg0auTQa.js');
-var selectOptionRender = require('./select-option-render-7m1WdFzF.js');
+var selectOptionRender = require('./select-option-render-CgnqHkpg.js');
 var theme = require('./theme-Bw0rpaNN.js');
 require('./index-DkNv4J_i.js');
 require('./helpers-Dj5o76mq.js');
@@ -15,7 +15,7 @@ require('./dir-zwDPRE5K.js');
 require('./hardware-back-button-JOAEFSzc.js');
 require('./framework-delegate-BZUx4TnE.js');
 require('./gesture-controller-CeJslptU.js');
-require('./index-EJLjthTK.js');
+require('./index-D4T0SA6Q.js');
 
 const ionicSelectModalMdCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ionic,.alert-radio-label-has-rich-content.sc-ion-select-modal-ionic,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ionic,.select-option-label-has-rich-content.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ionic,.alert-radio-label-has-rich-content.sc-ion-select-modal-ionic,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ionic,.select-option-content.sc-ion-select-modal-ionic{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-modal-ionic,.alert-checkbox-label-text.sc-ion-select-modal-ionic,.alert-radio-label-text.sc-ion-select-modal-ionic,.select-option-label-text.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-modal-ionic{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-modal-ionic:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-modal-ionic::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-modal-ionic [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ionic::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ionic [part~="label"],.select-option-content.sc-ion-select-modal-ionic{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-modal-ionic>ion-avatar.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-avatar.sc-ion-select-modal-ionic{width:40px;height:40px}.select-option-start.sc-ion-select-modal-ionic>ion-icon.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-icon.sc-ion-select-modal-ionic{font-size:24px}.select-option-start.sc-ion-select-modal-ionic>ion-img.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>img.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>svg.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>ion-thumbnail.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-img.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>img.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>svg.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-thumbnail.sc-ion-select-modal-ionic{width:56px;height:56px}.select-option-start.sc-ion-select-modal-ionic>video.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>video.sc-ion-select-modal-ionic{width:114px;height:56px}.sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="container"]{display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
 

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -11,13 +11,13 @@ var validity = require('./validity-BpS37YFM.js');
 var helpers = require('./helpers-Dj5o76mq.js');
 var overlays = require('./overlays-Bg0auTQa.js');
 var dir = require('./dir-zwDPRE5K.js');
-var index$2 = require('./index-EJLjthTK.js');
+var index$2 = require('./index-D4T0SA6Q.js');
 var theme = require('./theme-Bw0rpaNN.js');
 var watchOptions = require('./watch-options-CviOsrTS.js');
 var index$1 = require('./index-wOmugbdg.js');
 var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
 var overlayControlLabel = require('./overlay-control-label-D2sdL2O8.js');
-var selectOptionRender = require('./select-option-render-7m1WdFzF.js');
+var selectOptionRender = require('./select-option-render-CgnqHkpg.js');
 require('./index-DkNv4J_i.js');
 require('./hardware-back-button-JOAEFSzc.js');
 require('./framework-delegate-BZUx4TnE.js');
@@ -906,7 +906,7 @@ const Select = class {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         helpers.renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (index.h(index.Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': theme.hostContext('ion-item.ion-color', el),
@@ -924,7 +924,7 @@ const Select = class {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, index.h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), index.h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, index.h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), index.h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), index.h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), index.h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), index.h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && index.h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, index.h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), index.h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, index.h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), index.h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), index.h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), index.h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), index.h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && index.h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -993,29 +993,14 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
         return getOptionContent(selectOpt, undefined, true);
     }
     /**
-     * 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.
+     * 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.
      */
-    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);
+    return getDefaultSlotPlainText(selectOpt) || null;
 };
 /**
  * Trims whitespace from all text nodes within a DOM tree.
@@ -1071,9 +1056,13 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     if (nodes.length === 0) {
         return null;
     }
-    // Return plain text if no elements are found
+    /**
+     * 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.
+     */
     if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
+        return getDefaultSlotPlainText(option) || null;
     }
     /**
      * Mirror known custom-element properties (e.g. ion-icon's `icon`)
@@ -1129,22 +1118,43 @@ 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 (index$2.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).
+ * 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.
  */
 const getDefaultSlotPlainText = (option) => {
-    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(' ');
+    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, '');
 };
 /**
  * Extracts the rich content from an `ion-select-option`.

package/dist/cjs/ion-toast.cjs.entry.js

@@ -8,7 +8,7 @@ var config = require('./config-CjUbvdPW.js');
 var helpers = require('./helpers-Dj5o76mq.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
 var overlays = require('./overlays-Bg0auTQa.js');
-var index$3 = require('./index-EJLjthTK.js');
+var index$3 = require('./index-D4T0SA6Q.js');
 var theme = require('./theme-Bw0rpaNN.js');
 var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
 var animation = require('./animation-D-OqR4a4.js');

package/dist/cjs/{select-option-render-7m1WdFzF.js → select-option-render-CgnqHkpg.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-BrVMoqUk.js');
-var index$1 = require('./index-EJLjthTK.js');
+var index$1 = require('./index-D4T0SA6Q.js');
 
 /**
  * Converts a DOM node into a Stencil VNode (or text string) so the

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

@@ -3,7 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
-import { isEndSide } from "../../utils/helpers";
+import { componentOnReady, isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { watchForOptions } from "../../utils/watch-options";
 import { getIonMode } from "../../global/ionic-global";
@@ -178,19 +178,17 @@ export class ItemSliding {
         }
     }
     async updateOptions() {
-        const options = this.el.querySelectorAll('ion-item-options');
+        const options = Array.from(this.el.querySelectorAll('ion-item-options'));
+        /**
+         * Frameworks that assign element props after inserting the element haven't set
+         * `side` while `connectedCallback` runs, so reading it any earlier reports every
+         * option as `end`.
+         */
+        await Promise.all(options.map((option) => new Promise((resolve) => componentOnReady(option, resolve))));
         let sides = 0;
         // Reset left and right options in case they were removed
         this.leftOptions = this.rightOptions = undefined;
-        for (let i = 0; i < options.length; i++) {
-            const item = options.item(i);
-            /**
-             * We cannot use the componentOnReady helper
-             * util here since we need to wait for all of these items
-             * to be ready before we set `this.sides` and `this.optsDirty`.
-             */
-            // eslint-disable-next-line custom-rules/no-component-on-ready-method
-            const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
+        for (const option of options) {
             const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
@@ -389,7 +387,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '15f6a98f8c888e86c29827cdf55d98ace08699dd', class: {
+        return (h(Host, { key: '02174ca963753d3a51a4249068f3d436f8acb03d', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

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

@@ -378,11 +378,18 @@ export class Refresher {
     componentDidUpdate() {
         this.checkNativeRefresher();
     }
-    async connectedCallback() {
+    /**
+     * Validate the slot attribute before rendering, while the host still reflects the
+     * developer's original markup. `connectedCallback` is too early: in the custom
+     * elements build it runs during insertion, before frameworks such as React assign
+     * the slot.
+     */
+    componentWillLoad() {
         if (this.el.getAttribute('slot') !== 'fixed') {
             printIonError('[ion-refresher] - Make sure you use: <ion-refresher slot="fixed">');
-            return;
         }
+    }
+    async connectedCallback() {
         const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
         if (!contentEl) {
             printIonContentErrorMsg(this.el);
@@ -742,7 +749,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b76e9fb79121799717063137135e448a3c784d82', slot: "fixed", class: {
+        return (h(Host, { key: 'fd9c8e51155d56f12148e8eb547e45c05807b4b5', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

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

@@ -58,11 +58,6 @@ 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;
@@ -79,6 +74,15 @@ 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
@@ -113,7 +117,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => segmentEl?.color !== undefined;
-        return (h(Host, { key: '2b4b7ad8b981d2ee39aba5b9c734de8a5bd045ba', class: {
+        return (h(Host, { key: 'd8acc71d87e26b32f20b2d0f9a6acc9f0dab0dee', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -129,7 +133,7 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, 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" }))));
+            } }, 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" }))));
     }
     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 { reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
+import { blockedTags, 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: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', 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: '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()));
+            }) }, 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()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1663,29 +1663,14 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
         return getOptionContent(selectOpt, undefined, true);
     }
     /**
-     * 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.
+     * 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.
      */
-    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);
+    return getDefaultSlotPlainText(selectOpt) || null;
 };
 /**
  * Trims whitespace from all text nodes within a DOM tree.
@@ -1741,9 +1726,13 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     if (nodes.length === 0) {
         return null;
     }
-    // Return plain text if no elements are found
+    /**
+     * 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.
+     */
     if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
+        return getDefaultSlotPlainText(option) || null;
     }
     /**
      * Mirror known custom-element properties (e.g. ion-icon's `icon`)
@@ -1799,22 +1788,43 @@ 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).
+ * 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.
  */
 const getDefaultSlotPlainText = (option) => {
-    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(' ');
+    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, '');
 };
 /**
  * Extracts the rich content from an `ion-select-option`.

package/dist/collection/utils/test/late-props/late-props.js

@@ -0,0 +1,69 @@
+/**
+ * Test helpers for the custom elements build, where `connectedCallback` runs
+ * synchronously as the element is inserted. Frameworks that assign element props after
+ * inserting the element leave a window where a component can't read its own props or
+ * its children's, and it still has to work.
+ */
+
+import { initialize } from '/components/index.js';
+
+/**
+ * Initializes Ionic in the mode the test asked for.
+ */
+export const initializeIonic = () => {
+  initialize({ mode: new URLSearchParams(location.search).get('ionic:mode') ?? 'ios' });
+};
+
+/**
+ * Defines the given tags. Safe to call again for tags that are already defined, so each
+ * test can ask for whatever it needs.
+ */
+export const defineTags = async (tags) => {
+  await Promise.all(
+    tags.map(async (tag) => {
+      const mod = await import(`/components/${tag}.js`);
+      mod.defineCustomElement();
+    })
+  );
+};
+
+/**
+ * Builds the tree described by `spec` and appends it to `root`. A spec node is
+ * `{ tag, props, attrs, children }`, where `children` holds specs or strings. The
+ * `attrs` are always set before the element connects, and the `props` are set before
+ * connecting when `lateProps` is false, or after the whole tree connects when it is true.
+ */
+export const mount = (root, spec, lateProps) => {
+  const pending = [];
+
+  const build = (node) => {
+    if (typeof node === 'string') {
+      return document.createTextNode(node);
+    }
+
+    const el = document.createElement(node.tag);
+
+    if (node.attrs) {
+      Object.entries(node.attrs).forEach(([key, value]) => el.setAttribute(key, String(value)));
+    }
+
+    if (node.props) {
+      if (lateProps) {
+        pending.push([el, node.props]);
+      } else {
+        Object.assign(el, node.props);
+      }
+    }
+
+    (node.children || []).forEach((child) => el.appendChild(build(child)));
+
+    return el;
+  };
+
+  const tree = build(spec);
+
+  root.appendChild(tree);
+
+  // Descendants before ancestors, matching the order framework effects run in.
+  pending.reverse().forEach(([el, props]) => Object.assign(el, props));
+};

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-20T06:11:28",
+  "timestamp": "2026-08-21T06:11:59",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",

package/dist/esm/{index-elneMH8y.js → index-D3o-MD4_.js}

@@ -420,4 +420,4 @@ class IonicSafeString {
     }
 }
 
-export { IonicSafeString as I, sanitizeDOMTree as a, reflectPropertiesToAttributes as r, sanitizeDOMString as s };
+export { IonicSafeString as I, sanitizeDOMTree as a, blockedTags as b, reflectPropertiesToAttributes as r, sanitizeDOMString as s };

package/dist/esm/index.js

@@ -10,7 +10,7 @@ export { createGesture } from './index-BmLuEdV7.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-lrowsHfi.js';
 export { c as componentOnReady } from './helpers-BIgoInJU.js';
 export { L as LogLevel } from './index-CKYcsw8f.js';
-export { I as IonicSafeString } from './index-elneMH8y.js';
+export { I as IonicSafeString } from './index-D3o-MD4_.js';
 export { g as getMode, s as setupConfig } from './config-DWCzVL3Y.js';
 export { o as openURL } from './theme-byZM6qHV.js';
 export { m as menuController } from './index-C5ZdL0qp.js';