voyager-ionic-core 8.7.9 → 8.7.13

package/hydrate/index.mjs

@@ -4449,7 +4449,7 @@ class Accordion {
             "value": [1],
             "disabled": [4],
             "readonly": [4],
-            "toggleIcon": [8, "toggle-icon"],
+            "toggleIcon": [1, "toggle-icon"],
             "toggleIconSlot": [1, "toggle-icon-slot"],
             "state": [32],
             "isNext": [32],
@@ -5849,6 +5849,14 @@ const CoreDelegate = () => {
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
+/**
+ * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns false if showBackdrop=false or backdropBreakpoint > 0.
+ */
+const isBackdropAlwaysBlocking = (el) => {
+    var _a;
+    return el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+};
 const createController = (tagName) => {
     return {
         create(options) {
@@ -6286,9 +6294,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      */
     const overlayEl = overlay.el;
     const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-    // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
-    // expect background interaction to remain enabled.
-    const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
+    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
@@ -6404,10 +6410,10 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      */
     const overlaysLockingRoot = presentedOverlays.filter((o) => {
         const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
     });
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
@@ -7611,6 +7617,7 @@ class ActionSheet {
         this.delegateController = createDelegateController(this);
         this.lockController = createLockController();
         this.triggerController = createTriggerController();
+        this.hasRadioButtons = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -7655,6 +7662,19 @@ class ActionSheet {
             }
         };
     }
+    buttonsChanged() {
+        const radioButtons = this.getRadioButtons();
+        this.hasRadioButtons = radioButtons.length > 0;
+        // Initialize activeRadioId when buttons change
+        if (this.hasRadioButtons) {
+            const checkedButton = radioButtons.find((b) => { var _a; return ((_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a['aria-checked']) === 'true'; });
+            if (checkedButton) {
+                const allButtons = this.getButtons();
+                const checkedIndex = allButtons.indexOf(checkedButton);
+                this.activeRadioId = this.getButtonId(checkedButton, checkedIndex);
+            }
+        }
+    }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -7735,11 +7755,122 @@ class ActionSheet {
         }
         return true;
     }
+    /**
+     * Get all buttons regardless of role.
+     */
     getButtons() {
         return this.buttons.map((b) => {
             return typeof b === 'string' ? { text: b } : b;
         });
     }
+    /**
+     * Get all radio buttons (buttons with role="radio").
+     */
+    getRadioButtons() {
+        return this.getButtons().filter((b) => {
+            var _a;
+            const role = (_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a.role;
+            return role === 'radio' && !isCancel(role);
+        });
+    }
+    /**
+     * Handle radio button selection and update aria-checked state.
+     *
+     * @param button The radio button that was selected.
+     */
+    selectRadioButton(button) {
+        const buttonId = this.getButtonId(button);
+        // Set the active radio ID (this will trigger a re-render and update aria-checked)
+        this.activeRadioId = buttonId;
+    }
+    /**
+     * Get or generate an ID for a button.
+     *
+     * @param button The button for which to get the ID.
+     * @param index Optional index of the button in the buttons array.
+     * @returns The ID of the button.
+     */
+    getButtonId(button, index) {
+        if (button.id) {
+            return button.id;
+        }
+        const allButtons = this.getButtons();
+        const buttonIndex = index !== undefined ? index : allButtons.indexOf(button);
+        return `action-sheet-button-${this.overlayIndex}-${buttonIndex}`;
+    }
+    /**
+     * When the action sheet has radio buttons, we want to follow the
+     * keyboard navigation pattern for radio groups:
+     * - Arrow Down/Right: Move to the next radio button (wrap to first if at end)
+     * - Arrow Up/Left: Move to the previous radio button (wrap to last if at start)
+     * - Space/Enter: Select the focused radio button and trigger its handler
+     */
+    onKeydown(ev) {
+        // Only handle keyboard navigation if we have radio buttons
+        if (!this.hasRadioButtons || !this.presented) {
+            return;
+        }
+        const target = ev.target;
+        // Ignore if the target element is not within the action sheet or not a radio button
+        if (!this.el.contains(target) ||
+            !target.classList.contains('action-sheet-button') ||
+            target.getAttribute('role') !== 'radio') {
+            return;
+        }
+        // Get all radio button elements and filter out disabled ones
+        const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter((el) => !el.disabled);
+        const currentIndex = radios.findIndex((radio) => radio.id === target.id);
+        if (currentIndex === -1) {
+            return;
+        }
+        const allButtons = this.getButtons();
+        const radioButtons = this.getRadioButtons();
+        /**
+         * Build a map of button element IDs to their ActionSheetButton
+         * config objects.
+         * This allows us to quickly look up which button config corresponds
+         * to a DOM element when handling keyboard navigation
+         * (e.g., whenuser presses Space/Enter or arrow keys).
+         * The key is the ID that was set on the DOM element during render,
+         * and the value is the ActionSheetButton config that contains the
+         * handler and other properties.
+         */
+        const buttonIdMap = new Map();
+        radioButtons.forEach((b) => {
+            const allIndex = allButtons.indexOf(b);
+            const buttonId = this.getButtonId(b, allIndex);
+            buttonIdMap.set(buttonId, b);
+        });
+        let nextEl;
+        if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];
+        }
+        else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];
+        }
+        else if (ev.key === ' ' || ev.key === 'Enter') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            const button = buttonIdMap.get(target.id);
+            if (button) {
+                this.selectRadioButton(button);
+                this.buttonClick(button);
+            }
+            return;
+        }
+        // Focus the next radio button
+        if (nextEl) {
+            const button = buttonIdMap.get(nextEl.id);
+            if (button) {
+                this.selectRadioButton(button);
+                nextEl.focus();
+            }
+        }
+    }
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
@@ -7756,6 +7887,8 @@ class ActionSheet {
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             setOverlayId(this.el);
         }
+        // Initialize activeRadioId for radio buttons
+        this.buttonsChanged();
     }
     componentDidLoad() {
         /**
@@ -7793,22 +7926,74 @@ class ActionSheet {
          */
         this.triggerChanged();
     }
+    renderActionSheetButtons(filteredButtons) {
+        const mode = getIonMode$1(this);
+        const { activeRadioId } = this;
+        return filteredButtons.map((b, index) => {
+            var _a;
+            const isRadio = ((_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a.role) === 'radio';
+            const buttonId = this.getButtonId(b, index);
+            const radioButtons = this.getRadioButtons();
+            const isActiveRadio = isRadio && buttonId === activeRadioId;
+            const isFirstRadio = isRadio && b === radioButtons[0];
+            // For radio buttons, set tabindex: 0 for the active one, -1 for others
+            // For non-radio buttons, use default tabindex (undefined, which means 0)
+            /**
+             * For radio buttons, set tabindex based on activeRadioId
+             * - If the button is the active radio, tabindex is 0
+             * - If no radio is active, the first radio button should have tabindex 0
+             * - All other radio buttons have tabindex -1
+             * For non-radio buttons, use default tabindex (undefined, which means 0)
+             */
+            let tabIndex;
+            if (isRadio) {
+                // Focus on the active radio button
+                if (isActiveRadio) {
+                    tabIndex = 0;
+                }
+                else if (!activeRadioId && isFirstRadio) {
+                    // No active radio, first radio gets focus
+                    tabIndex = 0;
+                }
+                else {
+                    // All other radios are not focusable
+                    tabIndex = -1;
+                }
+            }
+            else {
+                tabIndex = undefined;
+            }
+            // For radio buttons, set aria-checked based on activeRadioId
+            // Otherwise, use the value from htmlAttributes if provided
+            const htmlAttrs = Object.assign({}, b.htmlAttributes);
+            if (isRadio) {
+                htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
+            }
+            return (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$3(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
+                    if (isRadio) {
+                        this.selectRadioButton(b);
+                    }
+                    this.buttonClick(b);
+                }, disabled: b.disabled, tabIndex: tabIndex }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null)));
+        });
+    }
     render() {
-        const { header, htmlAttributes, overlayIndex } = this;
+        const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
         const mode = getIonMode$1(this);
         const allButtons = this.getButtons();
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (hAsync(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '173fcff5b1da7c33c267de4667591c946b8c8d03', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), hAsync("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, hAsync("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '521ede659f747864f6c974e09016436eceb7158c', tappable: this.backdropDismiss }), hAsync("div", { key: '7a7946fc434bc444f16a70638f5e948c69d33fcd', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'bcff39a580489dbafa255842e57aa8602c6d0f18', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '84bba13ce14261f0f0daa3f9c77648c9e7f36e0e', class: "action-sheet-container" }, hAsync("div", { key: 'd9c8ac404fd6719a7adf8cb36549f67616f9a0c4', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '180433a8ad03ef5c54728a1a8f34715b6921d658', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), hAsync("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && hAsync("div", { key: '7138e79e61b1a8f42bc5a9175c57fa2f15d7ec5a', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: 'b617c722f5b8028d73ed34b69310f312c65f34a7', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'd0dd876fc48815df3710413c201c0b445a8e16c0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'e7b960157cc6fc5fe92a12090b2be55e8ae072e4', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '05498ffc60cab911dbff0ecbc6168dea59ada9a5', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '3d401346cea301be4ca03671f7370f6f4b0b6bde' })))))), hAsync("div", { key: '971f3c5fcc07f36c28eb469a47ec0290c692e139', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "buttons": ["buttonsChanged"],
         "isOpen": ["onIsOpenChange"],
         "trigger": ["triggerChanged"]
     }; }
@@ -7836,12 +8021,13 @@ class ActionSheet {
             "htmlAttributes": [16],
             "isOpen": [4, "is-open"],
             "trigger": [1],
+            "activeRadioId": [32],
             "present": [64],
             "dismiss": [64],
             "onDidDismiss": [64],
             "onWillDismiss": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "keydown", "onKeydown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -9683,105 +9869,305 @@ class CardTitle {
     }; }
 }
 
-const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}";
-
-const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}";
-
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- *
- * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
  *
- * @part container - The container for the checkbox mark.
- * @part label - The label text describing the checkbox.
- * @part mark - The checkmark used to indicate the checked state.
- * @part supporting-text - Supporting text displayed beneath the checkbox label.
- * @part helper-text - Supporting text displayed beneath the checkbox label when the checkbox is valid.
- * @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
  */
-class Checkbox {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionChange = createEvent(this, "ionChange", 7);
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.inputId = `ion-cb-${checkboxIds++}`;
-        this.inputLabelId = `${this.inputId}-lbl`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        this.inheritedAttributes = {};
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true`, the checkbox will visually appear as indeterminate.
-         */
-        this.indeterminate = false;
+const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
+    let notchVisibilityIO;
+    const needsExplicitNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (
         /**
-         * If `true`, the user cannot interact with the checkbox.
+         * If the notch is not being used
+         * then we do not need to set the notch width.
          */
-        this.disabled = false;
+        notchSpacerEl === undefined ||
+            /**
+             * If either the label property is being
+             * used or the label slot is not defined,
+             * then we do not need to estimate the notch width.
+             */
+            el.label !== undefined ||
+            getLabelSlot() === null) {
+            return false;
+        }
+        return true;
+    };
+    const calculateNotchWidth = () => {
+        if (needsExplicitNotchWidth()) {
+            /**
+             * Run this the frame after
+             * the browser has re-painted the host element.
+             * Otherwise, the label element may have a width
+             * of 0 and the IntersectionObserver will be used.
+             */
+            raf(() => {
+                setNotchWidth();
+            });
+        }
+    };
+    /**
+     * When using a label prop we can render
+     * the label value inside of the notch and
+     * let the browser calculate the size of the notch.
+     * However, we cannot render the label slot in multiple
+     * places so we need to manually calculate the notch dimension
+     * based on the size of the slotted content.
+     *
+     * This function should only be used to set the notch width
+     * on slotted label content. The notch width for label prop
+     * content is automatically calculated based on the
+     * intrinsic size of the label text.
+     */
+    const setNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (notchSpacerEl === undefined) {
+            return;
+        }
+        if (!needsExplicitNotchWidth()) {
+            notchSpacerEl.style.removeProperty('width');
+            return;
+        }
+        const width = getLabelSlot().scrollWidth;
+        if (
         /**
-         * The value of the checkbox does not mean if it's checked or not, use the `checked`
-         * property for that.
+         * If the computed width of the label is 0
+         * and notchSpacerEl's offsetParent is null
+         * then that means the element is hidden.
+         * As a result, we need to wait for the element
+         * to become visible before setting the notch width.
          *
-         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
-         * it's only used when the checkbox participates in a native `<form>`.
-         */
-        this.value = 'on';
-        /**
-         * Where to place the label relative to the checkbox.
-         * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
-        /**
-         * If true, screen readers will announce it as a required field. This property
-         * works only for accessibility purposes, it will not prevent the form from
-         * submitting if the value is invalid.
-         */
-        this.required = false;
-        /**
-         * Sets the checked property and emits
-         * the ionChange event. Use this to update the
-         * checked state in response to user-generated
-         * actions such as a click.
+         * We do not check el.offsetParent because
+         * that can be null if the host element has
+         * position: fixed applied to it.
+         * notchSpacerEl does not have position: fixed.
          */
-        this.setChecked = (state) => {
-            const isChecked = (this.checked = state);
-            this.ionChange.emit({
-                checked: isChecked,
-                value: this.value,
-            });
-        };
-        this.toggleChecked = (ev) => {
-            ev.preventDefault();
-            this.setChecked(!this.checked);
-            this.indeterminate = false;
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.onKeyDown = (ev) => {
-            if (ev.key === ' ') {
-                ev.preventDefault();
-                if (!this.disabled) {
-                    this.toggleChecked(ev);
-                }
-            }
-        };
-        this.onClick = (ev) => {
-            if (this.disabled) {
+        width === 0 &&
+            notchSpacerEl.offsetParent === null &&
+            win$1 !== undefined &&
+            'IntersectionObserver' in win$1) {
+            /**
+             * If there is an IO already attached
+             * then that will update the notch
+             * once the element becomes visible.
+             * As a result, there is no need to create
+             * another one.
+             */
+            if (notchVisibilityIO !== undefined) {
+                return;
+            }
+            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
+                /**
+                 * If the element is visible then we
+                 * can try setting the notch width again.
+                 */
+                if (ev[0].intersectionRatio === 1) {
+                    setNotchWidth();
+                    io.disconnect();
+                    notchVisibilityIO = undefined;
+                }
+            }, 
+            /**
+             * Set the root to be the host element
+             * This causes the IO callback
+             * to be fired in WebKit as soon as the element
+             * is visible. If we used the default root value
+             * then WebKit would only fire the IO callback
+             * after any animations (such as a modal transition)
+             * finished, and there would potentially be a flicker.
+             */
+            { threshold: 0.01, root: el }));
+            io.observe(notchSpacerEl);
+            return;
+        }
+        /**
+         * If the element is visible then we can set the notch width.
+         * The notch is only visible when the label is scaled,
+         * which is why we multiply the width by 0.75 as this is
+         * the same amount the label element is scaled by in the host CSS.
+         * (See $form-control-label-stacked-scale in ionic.globals.scss).
+         */
+        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+    };
+    const destroy = () => {
+        if (notchVisibilityIO) {
+            notchVisibilityIO.disconnect();
+            notchVisibilityIO = undefined;
+        }
+    };
+    return {
+        calculateNotchWidth,
+        destroy,
+    };
+};
+
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const compareOptions = (currentValue, compareValue, compareWith) => {
+    if (typeof compareWith === 'function') {
+        return compareWith(currentValue, compareValue);
+    }
+    else if (typeof compareWith === 'string') {
+        return currentValue[compareWith] === compareValue[compareWith];
+    }
+    else {
+        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+    }
+};
+/**
+ * Compares a value against the current value(s) to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const isOptionSelected = (currentValue, compareValue, compareWith) => {
+    if (currentValue === undefined) {
+        return false;
+    }
+    if (Array.isArray(currentValue)) {
+        return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+    }
+    else {
+        return compareOptions(currentValue, compareValue, compareWith);
+    }
+};
+
+/**
+ * Checks if the form element is in an invalid state based on
+ * Ionic validation classes.
+ *
+ * @param el The form element to check.
+ * @returns `true` if the element is invalid, `false` otherwise.
+ */
+const checkInvalidState = (el) => {
+    const hasIonTouched = el.classList.contains('ion-touched');
+    const hasIonInvalid = el.classList.contains('ion-invalid');
+    return hasIonTouched && hasIonInvalid;
+};
+
+const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}";
+
+const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}";
+
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
+ *
+ * @part container - The container for the checkbox mark.
+ * @part label - The label text describing the checkbox.
+ * @part mark - The checkmark used to indicate the checked state.
+ * @part supporting-text - Supporting text displayed beneath the checkbox label.
+ * @part helper-text - Supporting text displayed beneath the checkbox label when the checkbox is valid.
+ * @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
+ */
+class Checkbox {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ionChange = createEvent(this, "ionChange", 7);
+        this.ionFocus = createEvent(this, "ionFocus", 7);
+        this.ionBlur = createEvent(this, "ionBlur", 7);
+        this.inputId = `ion-cb-${checkboxIds++}`;
+        this.inputLabelId = `${this.inputId}-lbl`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        this.inheritedAttributes = {};
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the checkbox will visually appear as indeterminate.
+         */
+        this.indeterminate = false;
+        /**
+         * If `true`, the user cannot interact with the checkbox.
+         */
+        this.disabled = false;
+        /**
+         * The value of the checkbox does not mean if it's checked or not, use the `checked`
+         * property for that.
+         *
+         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+         * it's only used when the checkbox participates in a native `<form>`.
+         */
+        this.value = 'on';
+        /**
+         * Where to place the label relative to the checkbox.
+         * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        this.labelPlacement = 'start';
+        /**
+         * If true, screen readers will announce it as a required field. This property
+         * works only for accessibility purposes, it will not prevent the form from
+         * submitting if the value is invalid.
+         */
+        this.required = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        /**
+         * Sets the checked property and emits
+         * the ionChange event. Use this to update the
+         * checked state in response to user-generated
+         * actions such as a click.
+         */
+        this.setChecked = (state) => {
+            const isChecked = (this.checked = state);
+            this.ionChange.emit({
+                checked: isChecked,
+                value: this.value,
+            });
+        };
+        this.toggleChecked = (ev) => {
+            ev.preventDefault();
+            this.setChecked(!this.checked);
+            this.indeterminate = false;
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.onKeyDown = (ev) => {
+            if (ev.key === ' ') {
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.toggleChecked(ev);
+                }
+            }
+        };
+        this.onClick = (ev) => {
+            if (this.disabled) {
                 return;
             }
             this.toggleChecked(ev);
@@ -9794,16 +10180,29 @@ class Checkbox {
             ev.stopPropagation();
         };
     }
+    connectedCallback() {
+        const { el } = this;
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /** @internal */
     async setFocus() {
         this.el.focus();
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -9816,7 +10215,7 @@ class Checkbox {
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -9825,7 +10224,7 @@ class Checkbox {
         if (!hasHintText) {
             return;
         }
-        return (hAsync("div", { class: "checkbox-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (hAsync("div", { class: "checkbox-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
@@ -9835,7 +10234,7 @@ class Checkbox {
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (hAsync(Host, { key: 'ee2e02d28f9d15a1ec746609f7e9559444f621e5', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'ae0fbd4b21accbac132e6b85c513512ad9179394', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -9845,10 +10244,10 @@ class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '84d4c33da0348dc65ad36fb0fafd48be366dcf3b', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '427db69a3ab8a17aa0867519c90f585b8930406b', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), hAsync("div", { key: '9dda7024b3a4f1ee55351f783f9a10f9b4ad0d12', class: {
+            }) }, hAsync("label", { key: '7a3d7f3c27dde514f2dbf2e34f4629fad33ec3bf', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '4130d77ddf034271fecccda14e101a5a809921b6', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), hAsync("div", { key: '5daa74f4e62b0947e37764762524001ee42609d9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: 'f9d1d545ffd4164b650808241b51ea1bedc6a42c' }), this.renderHintText()), hAsync("div", { key: 'a96d61ac324864228f14caa0e9f2c0d15418882e', class: "native-wrapper" }, hAsync("svg", { key: '64ff3e4d87e190601811ef64323edec18d510cd1', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '23ff66138f8c3a2f56f39113fc842d54b2f7952a' }), this.renderHintText()), hAsync("div", { key: 'ab914d9623c19fc46821d5e62db92f1192ebbe7e', class: "native-wrapper" }, hAsync("svg", { key: '66e3f4f5dcaa9756fb0e9452299954f9ed3dcb7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -9878,6 +10277,8 @@ class Checkbox {
             "justify": [1],
             "alignment": [1],
             "required": [4],
+            "isInvalid": [32],
+            "hintTextId": [32],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -10266,6 +10667,15 @@ class Content {
     }
     resize() {
     }
+    /**
+     * Recalculate content dimensions. Called by overlays (e.g., popover) when
+     * sibling elements like headers or footers have finished rendering and their
+     * heights are available, ensuring accurate offset-top calculations.
+     * @internal
+     */
+    async recalculateDimensions() {
+        readTask(() => this.readDimensions());
+    }
     readDimensions() {
         const page = getPageElement(this.el);
         const top = Math.max(this.el.offsetTop, 0);
@@ -10434,7 +10844,7 @@ class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (hAsync(Host, Object.assign({ key: 'f2a24aa66dbf5c76f9d4b06f708eb73cadc239df', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -10442,12 +10852,12 @@ class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), hAsync("div", { key: '6480ca7648b278abb36477b3838bccbcd4995e2a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '29a23b663f5f0215bb000820c01e1814c0d55985', class: {
+            } }, inheritedAttributes), hAsync("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '0fe1bd05609a4b88ae2ce9addf5d5dc5dc1806f0' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
     static get style() { return contentCss; }
@@ -10462,6 +10872,7 @@ class Content {
             "scrollX": [4, "scroll-x"],
             "scrollY": [4, "scroll-y"],
             "scrollEvents": [4, "scroll-events"],
+            "recalculateDimensions": [64],
             "getScrollElement": [64],
             "getBackgroundElement": [64],
             "scrollToTop": [64],
@@ -13022,6 +13433,28 @@ class Datetime {
                 destroyKeyboardMO();
             }
         };
+        /**
+         * TODO(FW-6931): Remove this fallback upon solving the root cause
+         * Fallback to ensure the datetime becomes ready even if
+         * IntersectionObserver never reports it as intersecting.
+         *
+         * This is primarily used in environments where the observer
+         * might not fire as expected, such as when running under
+         * synthetic tests that stub IntersectionObserver.
+         */
+        this.ensureReadyIfVisible = () => {
+            if (this.el.classList.contains('datetime-ready')) {
+                return;
+            }
+            const rect = this.el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                return;
+            }
+            this.initializeListeners();
+            writeTask(() => {
+                this.el.classList.add('datetime-ready');
+            });
+        };
         this.processValue = (value) => {
             const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
             const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
@@ -13339,6 +13772,17 @@ class Datetime {
          * triggering the `hiddenIO` observer below.
          */
         raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
+        /**
+         * TODO(FW-6931): Remove this fallback upon solving the root cause
+         * Fallback: If IntersectionObserver never reports that the
+         * datetime is visible but the host clearly has layout, ensure
+         * we still initialize listeners and mark the component as ready.
+         *
+         * We schedule this after everything has had a chance to run.
+         */
+        setTimeout(() => {
+            this.ensureReadyIfVisible();
+        }, 100);
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -14094,7 +14538,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -14104,7 +14548,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14746,7 +15190,7 @@ class FabButton {
             "translucent": [4],
             "type": [1],
             "size": [1],
-            "closeIcon": [8, "close-icon"]
+            "closeIcon": [1, "close-icon"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -16196,317 +16640,121 @@ class InfiniteScroll {
              *    Done.
              */
             this.isBusy = true;
-            // ******** DOM READ ****************
-            // Save the current content dimensions before the UI updates
-            const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
-            // ******** DOM READ ****************
-            requestAnimationFrame(() => {
-                readTask(() => {
-                    // UI has updated, save the new content dimensions
-                    const scrollHeight = scrollEl.scrollHeight;
-                    // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
-                    const newScrollTop = scrollHeight - prev;
-                    // ******** DOM WRITE ****************
-                    requestAnimationFrame(() => {
-                        writeTask(() => {
-                            scrollEl.scrollTop = newScrollTop;
-                            this.isBusy = false;
-                            this.didFire = false;
-                        });
-                    });
-                });
-            });
-        }
-        else {
-            this.didFire = false;
-        }
-    }
-    canStart() {
-        return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
-    }
-    enableScrollEvents(shouldListen) {
-        if (this.scrollEl) {
-            if (shouldListen) {
-                this.scrollEl.addEventListener('scroll', this.onScroll);
-            }
-            else {
-                this.scrollEl.removeEventListener('scroll', this.onScroll);
-            }
-        }
-    }
-    render() {
-        const mode = getIonMode$1(this);
-        const disabled = this.disabled;
-        return (hAsync(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
-                [mode]: true,
-                'infinite-scroll-loading': this.isLoading,
-                'infinite-scroll-enabled': !disabled,
-            } }));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "threshold": ["thresholdChanged"],
-        "disabled": ["disabledChanged"]
-    }; }
-    static get style() { return infiniteScrollCss; }
-    static get cmpMeta() { return {
-        "$flags$": 256,
-        "$tagName$": "ion-infinite-scroll",
-        "$members$": {
-            "threshold": [1],
-            "disabled": [4],
-            "position": [1],
-            "isLoading": [32],
-            "complete": [64]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
-
-const infiniteScrollContentMdCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
-
-class InfiniteScrollContent {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    }
-    componentDidLoad() {
-        if (this.loadingSpinner === undefined) {
-            const mode = getIonMode$1(this);
-            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
-        }
-    }
-    renderLoadingText() {
-        const { customHTMLEnabled, loadingText } = this;
-        if (customHTMLEnabled) {
-            return hAsync("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(loadingText) });
-        }
-        return hAsync("div", { class: "infinite-loading-text" }, this.loadingText);
-    }
-    render() {
-        const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7c16060dcfe2a0b0fb3e2f8f4c449589a76f1baa', class: {
-                [mode]: true,
-                // Used internally for styling
-                [`infinite-scroll-content-${mode}`]: true,
-            } }, hAsync("div", { key: 'a94f4d8746e053dc718f97520bd7e48cb316443a', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '10143d5d2a50a2a2bc5de1cee8e7ab51263bcf23', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: '8846e88191690d9c61a0b462889ed56fbfed8b0d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
-    }
-    static get style() { return {
-        ios: infiniteScrollContentIosCss,
-        md: infiniteScrollContentMdCss
-    }; }
-    static get cmpMeta() { return {
-        "$flags$": 288,
-        "$tagName$": "ion-infinite-scroll-content",
-        "$members$": {
-            "loadingSpinner": [1025, "loading-spinner"],
-            "loadingText": [1, "loading-text"]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
-/**
- * A utility to calculate the size of an outline notch
- * width relative to the content passed. This is used in
- * components such as `ion-select` with `fill="outline"`
- * where we need to pass slotted HTML content. This is not
- * needed when rendering plaintext content because we can
- * render the plaintext again hidden with `opacity: 0` inside
- * of the notch. As a result we can rely on the intrinsic size
- * of the element to correctly compute the notch width. We
- * cannot do this with slotted content because we cannot project
- * it into 2 places at once.
- *
- * @internal
- * @param el: The host element
- * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
- * @param getLabelSlot: A function that returns a reference to the slotted content.
- */
-const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
-    let notchVisibilityIO;
-    const needsExplicitNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (
-        /**
-         * If the notch is not being used
-         * then we do not need to set the notch width.
-         */
-        notchSpacerEl === undefined ||
-            /**
-             * If either the label property is being
-             * used or the label slot is not defined,
-             * then we do not need to estimate the notch width.
-             */
-            el.label !== undefined ||
-            getLabelSlot() === null) {
-            return false;
-        }
-        return true;
-    };
-    const calculateNotchWidth = () => {
-        if (needsExplicitNotchWidth()) {
-            /**
-             * Run this the frame after
-             * the browser has re-painted the host element.
-             * Otherwise, the label element may have a width
-             * of 0 and the IntersectionObserver will be used.
-             */
-            raf(() => {
-                setNotchWidth();
-            });
-        }
-    };
-    /**
-     * When using a label prop we can render
-     * the label value inside of the notch and
-     * let the browser calculate the size of the notch.
-     * However, we cannot render the label slot in multiple
-     * places so we need to manually calculate the notch dimension
-     * based on the size of the slotted content.
-     *
-     * This function should only be used to set the notch width
-     * on slotted label content. The notch width for label prop
-     * content is automatically calculated based on the
-     * intrinsic size of the label text.
-     */
-    const setNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (notchSpacerEl === undefined) {
-            return;
-        }
-        if (!needsExplicitNotchWidth()) {
-            notchSpacerEl.style.removeProperty('width');
-            return;
-        }
-        const width = getLabelSlot().scrollWidth;
-        if (
-        /**
-         * If the computed width of the label is 0
-         * and notchSpacerEl's offsetParent is null
-         * then that means the element is hidden.
-         * As a result, we need to wait for the element
-         * to become visible before setting the notch width.
-         *
-         * We do not check el.offsetParent because
-         * that can be null if the host element has
-         * position: fixed applied to it.
-         * notchSpacerEl does not have position: fixed.
-         */
-        width === 0 &&
-            notchSpacerEl.offsetParent === null &&
-            win$1 !== undefined &&
-            'IntersectionObserver' in win$1) {
-            /**
-             * If there is an IO already attached
-             * then that will update the notch
-             * once the element becomes visible.
-             * As a result, there is no need to create
-             * another one.
-             */
-            if (notchVisibilityIO !== undefined) {
-                return;
-            }
-            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
-                /**
-                 * If the element is visible then we
-                 * can try setting the notch width again.
-                 */
-                if (ev[0].intersectionRatio === 1) {
-                    setNotchWidth();
-                    io.disconnect();
-                    notchVisibilityIO = undefined;
-                }
-            }, 
-            /**
-             * Set the root to be the host element
-             * This causes the IO callback
-             * to be fired in WebKit as soon as the element
-             * is visible. If we used the default root value
-             * then WebKit would only fire the IO callback
-             * after any animations (such as a modal transition)
-             * finished, and there would potentially be a flicker.
-             */
-            { threshold: 0.01, root: el }));
-            io.observe(notchSpacerEl);
-            return;
+            // ******** DOM READ ****************
+            // Save the current content dimensions before the UI updates
+            const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
+            // ******** DOM READ ****************
+            requestAnimationFrame(() => {
+                readTask(() => {
+                    // UI has updated, save the new content dimensions
+                    const scrollHeight = scrollEl.scrollHeight;
+                    // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
+                    const newScrollTop = scrollHeight - prev;
+                    // ******** DOM WRITE ****************
+                    requestAnimationFrame(() => {
+                        writeTask(() => {
+                            scrollEl.scrollTop = newScrollTop;
+                            this.isBusy = false;
+                            this.didFire = false;
+                        });
+                    });
+                });
+            });
         }
-        /**
-         * If the element is visible then we can set the notch width.
-         * The notch is only visible when the label is scaled,
-         * which is why we multiply the width by 0.75 as this is
-         * the same amount the label element is scaled by in the host CSS.
-         * (See $form-control-label-stacked-scale in ionic.globals.scss).
-         */
-        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
-    };
-    const destroy = () => {
-        if (notchVisibilityIO) {
-            notchVisibilityIO.disconnect();
-            notchVisibilityIO = undefined;
+        else {
+            this.didFire = false;
         }
-    };
-    return {
-        calculateNotchWidth,
-        destroy,
-    };
-};
-
-/**
- * Uses the compareWith param to compare two values to determine if they are equal.
- *
- * @param currentValue The current value of the control.
- * @param compareValue The value to compare against.
- * @param compareWith The function or property name to use to compare values.
- */
-const compareOptions = (currentValue, compareValue, compareWith) => {
-    if (typeof compareWith === 'function') {
-        return compareWith(currentValue, compareValue);
     }
-    else if (typeof compareWith === 'string') {
-        return currentValue[compareWith] === compareValue[compareWith];
+    canStart() {
+        return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;
     }
-    else {
-        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+    enableScrollEvents(shouldListen) {
+        if (this.scrollEl) {
+            if (shouldListen) {
+                this.scrollEl.addEventListener('scroll', this.onScroll);
+            }
+            else {
+                this.scrollEl.removeEventListener('scroll', this.onScroll);
+            }
+        }
     }
-};
-/**
- * Compares a value against the current value(s) to determine if it is selected.
- *
- * @param currentValue The current value of the control.
- * @param compareValue The value to compare against.
- * @param compareWith The function or property name to use to compare values.
- */
-const isOptionSelected = (currentValue, compareValue, compareWith) => {
-    if (currentValue === undefined) {
-        return false;
+    render() {
+        const mode = getIonMode$1(this);
+        const disabled = this.disabled;
+        return (hAsync(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
+                [mode]: true,
+                'infinite-scroll-loading': this.isLoading,
+                'infinite-scroll-enabled': !disabled,
+            } }));
     }
-    if (Array.isArray(currentValue)) {
-        return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "threshold": ["thresholdChanged"],
+        "disabled": ["disabledChanged"]
+    }; }
+    static get style() { return infiniteScrollCss; }
+    static get cmpMeta() { return {
+        "$flags$": 256,
+        "$tagName$": "ion-infinite-scroll",
+        "$members$": {
+            "threshold": [1],
+            "disabled": [4],
+            "position": [1],
+            "isLoading": [32],
+            "complete": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
+
+const infiniteScrollContentMdCss = "ion-infinite-scroll-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;min-height:84px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
+
+class InfiniteScrollContent {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
     }
-    else {
-        return compareOptions(currentValue, compareValue, compareWith);
+    componentDidLoad() {
+        if (this.loadingSpinner === undefined) {
+            const mode = getIonMode$1(this);
+            this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+        }
     }
-};
-
-/**
- * Checks if the form element is in an invalid state based on
- * Ionic validation classes.
- *
- * @param el The form element to check.
- * @returns `true` if the element is invalid, `false` otherwise.
- */
-const checkInvalidState = (el) => {
-    const hasIonTouched = el.classList.contains('ion-touched');
-    const hasIonInvalid = el.classList.contains('ion-invalid');
-    return hasIonTouched && hasIonInvalid;
-};
+    renderLoadingText() {
+        const { customHTMLEnabled, loadingText } = this;
+        if (customHTMLEnabled) {
+            return hAsync("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(loadingText) });
+        }
+        return hAsync("div", { class: "infinite-loading-text" }, this.loadingText);
+    }
+    render() {
+        const mode = getIonMode$1(this);
+        return (hAsync(Host, { key: '7c16060dcfe2a0b0fb3e2f8f4c449589a76f1baa', class: {
+                [mode]: true,
+                // Used internally for styling
+                [`infinite-scroll-content-${mode}`]: true,
+            } }, hAsync("div", { key: 'a94f4d8746e053dc718f97520bd7e48cb316443a', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '10143d5d2a50a2a2bc5de1cee8e7ab51263bcf23', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: '8846e88191690d9c61a0b462889ed56fbfed8b0d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+    }
+    static get style() { return {
+        ios: infiniteScrollContentIosCss,
+        md: infiniteScrollContentMdCss
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 288,
+        "$tagName$": "ion-infinite-scroll-content",
+        "$members$": {
+            "loadingSpinner": [1025, "loading-spinner"],
+            "loadingText": [1, "loading-text"]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
 
 /**
  * Used to update a scoped component that uses emulated slots. This fires when
@@ -18227,7 +18475,7 @@ class Item {
             "color": [513],
             "button": [4],
             "detail": [4],
-            "detailIcon": [8, "detail-icon"],
+            "detailIcon": [1, "detail-icon"],
             "disabled": [516],
             "download": [1],
             "href": [1],
@@ -22963,7 +23211,13 @@ class Modal {
             };
             window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        if (this.isSheetModal) {
+        /**
+         * Recalculate isSheetModal because framework bindings (e.g., Angular)
+         * may not have been applied when componentWillLoad ran.
+         */
+        const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
+        this.isSheetModal = isSheetModal;
+        if (isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -23045,6 +23299,79 @@ class Modal {
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
+        /**
+         * When backdrop interaction is allowed, nested router outlets from child routes
+         * may block pointer events to parent content. Apply passthrough styles only when
+         * the modal was the sole content of a child route page.
+         * See https://github.com/ionic-team/ionic-framework/issues/30700
+         */
+        const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
+        if (backdropNotBlocking) {
+            this.setupChildRoutePassthrough();
+        }
+    }
+    /**
+     * For sheet modals that allow background interaction, sets up pointer-events
+     * passthrough on child route page wrappers and nested router outlets.
+     */
+    setupChildRoutePassthrough() {
+        var _a;
+        // Cache the page parent for cleanup
+        this.cachedPageParent = this.getOriginalPageParent();
+        const pageParent = this.cachedPageParent;
+        // Skip ion-app (controller modals) and pages with visible sibling content next to the modal
+        if (!pageParent || pageParent.tagName === 'ION-APP') {
+            return;
+        }
+        const hasVisibleContent = Array.from(pageParent.children).some((child) => {
+            var _a;
+            return child !== this.el &&
+                !(child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') &&
+                child.tagName !== 'TEMPLATE' &&
+                child.tagName !== 'SLOT' &&
+                !(child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()));
+        });
+        if (hasVisibleContent) {
+            return;
+        }
+        // Child route case: page only contained the modal
+        pageParent.classList.add('ion-page-overlay-passthrough');
+        // Also make nested router outlets passthrough
+        const routerOutlet = pageParent.parentElement;
+        if ((routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.tagName) === 'ION-ROUTER-OUTLET' && ((_a = routerOutlet.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'ION-APP') {
+            routerOutlet.style.setProperty('pointer-events', 'none');
+            routerOutlet.setAttribute('data-overlay-passthrough', 'true');
+        }
+    }
+    /**
+     * Finds the ion-page ancestor of the modal's original parent location.
+     */
+    getOriginalPageParent() {
+        if (!this.cachedOriginalParent) {
+            return null;
+        }
+        let pageParent = this.cachedOriginalParent;
+        while (pageParent && !pageParent.classList.contains('ion-page')) {
+            pageParent = pageParent.parentElement;
+        }
+        return pageParent;
+    }
+    /**
+     * Removes passthrough styles added by setupChildRoutePassthrough.
+     */
+    cleanupChildRoutePassthrough() {
+        const pageParent = this.cachedPageParent;
+        if (!pageParent) {
+            return;
+        }
+        pageParent.classList.remove('ion-page-overlay-passthrough');
+        const routerOutlet = pageParent.parentElement;
+        if (routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.hasAttribute('data-overlay-passthrough')) {
+            routerOutlet.style.removeProperty('pointer-events');
+            routerOutlet.removeAttribute('data-overlay-passthrough');
+        }
+        // Clear the cached reference
+        this.cachedPageParent = undefined;
     }
     sheetOnDismiss() {
         /**
@@ -23134,6 +23461,7 @@ class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -23330,6 +23658,17 @@ class Modal {
             this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             return;
         }
+        /**
+         * Don't observe for controller-based modals or when the parent is the
+         * app root (document.body or ion-app). These parents won't be removed,
+         * and observing document.body with subtree: true causes performance
+         * issues with frameworks like Angular during change detection.
+         */
+        if (this.hasController ||
+            this.cachedOriginalParent === document.body ||
+            this.cachedOriginalParent.tagName === 'ION-APP') {
+            return;
+        }
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -23371,20 +23710,20 @@ class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '9a75095a13de0cfc96f1fa69fd92777d25da8daa', "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 }), hAsync("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
+            }, 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 }), hAsync("ion-backdrop", { key: 'd02612d8063ef20f59f173ff47795f71cdaaf63e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '708761b70a93e34c08faae079569f444c7416a4c', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'a72226ff1a98229f9bfd9207b98fc57e02baa430',
             /*
               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
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '0547f32323882660221385d84d492929caa77c6b', 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) })), hAsync("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', 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) })), hAsync("slot", { key: 'fccbd64518b6fa22f9e874deb6b4ba55d8d89c3b', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23424,6 +23763,7 @@ class Modal {
             "keepContentsMounted": [4, "keep-contents-mounted"],
             "focusTrap": [4, "focus-trap"],
             "canDismiss": [4, "can-dismiss"],
+            "isSheetModal": [32],
             "presented": [32],
             "present": [64],
             "dismiss": [64],
@@ -27491,6 +27831,10 @@ class Popover {
         if (destroyTriggerInteraction) {
             destroyTriggerInteraction();
         }
+        if (this.headerResizeObserver) {
+            this.headerResizeObserver.disconnect();
+            this.headerResizeObserver = undefined;
+        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -27593,6 +27937,7 @@ class Popover {
          */
         this.ionMount.emit();
         this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
+        this.recalculateContentOnHeaderReady();
         if (!this.keyboardEvents) {
             this.configureKeyboardInteraction();
         }
@@ -27638,6 +27983,35 @@ class Popover {
         }
         unlock();
     }
+    /**
+     * Watch the header for height changes and trigger content dimension
+     * recalculation when the header has a height > 0. This sets the offset-top
+     * of the content to the height of the header correctly.
+     */
+    recalculateContentOnHeaderReady() {
+        var _a;
+        const popoverContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popover-content');
+        if (!popoverContent) {
+            return;
+        }
+        const contentContainer = this.usersElement || popoverContent;
+        const header = contentContainer.querySelector('ion-header');
+        const contentElements = contentContainer.querySelectorAll('ion-content');
+        if (!header || contentElements.length === 0) {
+            return;
+        }
+        this.headerResizeObserver = new ResizeObserver(async () => {
+            var _a;
+            if (header.offsetHeight > 0) {
+                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this.headerResizeObserver = undefined;
+                for (const contentEl of contentElements) {
+                    await contentEl.recalculateDimensions();
+                }
+            }
+        });
+        this.headerResizeObserver.observe(header);
+    }
     /**
      * Dismiss the popover overlay after it has been presented.
      * This is a no-op if the overlay has not been presented yet. If you want
@@ -27699,9 +28073,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, hAsync("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28051,6 +28425,10 @@ class RadioGroup {
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.labelId = `${this.inputId}-lbl`;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * If `true`, the radios can be deselected.
          */
@@ -28132,6 +28510,18 @@ class RadioGroup {
                 this.labelId = label.id = this.name + '-lbl';
             }
         }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(this.el);
+    }
+    componentWillLoad() {
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     getRadios() {
         return Array.from(this.el.querySelectorAll('ion-radio'));
@@ -28207,16 +28597,16 @@ class RadioGroup {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         const hasHintText = !!helperText || !!errorText;
         if (!hasHintText) {
             return;
         }
-        return (hAsync("div", { class: "radio-group-top" }, hAsync("div", { id: helperTextId, class: "helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text" }, errorText)));
+        return (hAsync("div", { class: "radio-group-top" }, hAsync("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), hAsync("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -28228,7 +28618,7 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return (hAsync(Host, { key: '81b8ebc96b2f383c36717f290d2959cc921ad6e8', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), hAsync("div", { key: '45b09efc10776b889a8f372cba80d25a3fc849da', class: "radio-group-wrapper" }, hAsync("slot", { key: '58714934542c2fdd7396de160364f3f06b32e8f8' }))));
+        return (hAsync(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), hAsync("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, hAsync("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28248,6 +28638,8 @@ class RadioGroup {
             "value": [1032],
             "helperText": [1, "helper-text"],
             "errorText": [1, "error-text"],
+            "isInvalid": [32],
+            "hintTextId": [32],
             "setFocus": [64]
         },
         "$listeners$": [[4, "keydown", "onKeydown"]],
@@ -33376,7 +33768,7 @@ class Select {
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes$1(this.el, ['aria-label']);
-        this.hintTextID = this.getHintTextID();
+        this.hintTextId = this.getHintTextId();
     }
     componentDidLoad() {
         /**
@@ -33555,13 +33947,18 @@ class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const isSelected = isOptionSelected(selectValue, value, this.compareWith);
             return {
-                role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
+                role: isSelected ? 'selected' : '',
                 text: option.textContent,
                 cssClass: optClass,
                 handler: () => {
                     this.setValue(value);
                 },
+                htmlAttributes: {
+                    'aria-checked': isSelected ? 'true' : 'false',
+                    role: 'radio',
+                },
             };
         });
         // Add "cancel" button
@@ -33875,9 +34272,9 @@ class Select {
     }
     renderListbox() {
         const { disabled, inputId, isExpanded, required } = this;
-        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextID, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    getHintTextID() {
+    getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
             return errorTextId;
@@ -33942,7 +34339,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '35b5e18e6f79a802ff2d46d1242e80ff755cc0b9', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -33960,7 +34357,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '6005b34a0c50bc4d7653a4276bc232ecd02e083c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'c7e07aa81ae856c057f16275dd058f37c5670a47', class: "select-wrapper-inner" }, hAsync("slot", { key: '7fc2deefe0424404caacdbbd9e08ed43ba55d28a', name: "start" }), hAsync("div", { key: '157d74ee717b1bc30b5f1c233a09b0c8456aa68e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'ea66db304528b82bf9317730b6dce3db2612f235', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '786eb1530b7476f0615d4e7c0bf4e7e4dc66509c', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, hAsync("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), hAsync("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34002,7 +34399,7 @@ class Select {
             "isExpanded": [32],
             "hasFocus": [32],
             "isInvalid": [32],
-            "hintTextID": [32],
+            "hintTextId": [32],
             "open": [64]
         },
         "$listeners$": undefined,
@@ -36473,6 +36870,10 @@ class Toggle {
         this.inheritedAttributes = {};
         this.didLoad = false;
         this.activated = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -36586,15 +36987,18 @@ class Toggle {
         });
     }
     async connectedCallback() {
+        const { didLoad, el } = this;
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
          * But if we are moving ion-toggle via appendChild,
          * then toggleTrack will be defined.
          */
-        if (this.didLoad) {
+        if (didLoad) {
             this.setupGesture();
         }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
     }
     componentDidLoad() {
         this.setupGesture();
@@ -36605,9 +37009,15 @@ class Toggle {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
     }
     onStart() {
         this.activated = true;
@@ -36648,9 +37058,9 @@ class Toggle {
     get hasLabel() {
         return this.el.textContent !== '';
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -36663,7 +37073,7 @@ class Toggle {
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -36672,15 +37082,15 @@ class Toggle {
         if (!hasHintText) {
             return;
         }
-        return (hAsync("div", { class: "toggle-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (hAsync("div", { class: "toggle-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
-        const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
+        const { activated, alignment, checked, color, disabled, el, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
         const mode = getIonMode$1(this);
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '17bbbc8d229868e5c872b2bc5a3faf579780c5e0', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f569148edd89ee041a4719ffc4733c16b05229bd', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -36690,10 +37100,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '673625b62a2c909e95dccb642c91312967a6cd1c', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '7dc3f357b4708116663970047765da9f8f845bf0', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '8f1c6a182031e8cbc6727e5f4ac0e00ad4247447', class: {
+            }) }, hAsync("label", { key: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '8322b9d54dc7edeb4e16fefcde9f7ebca8d5c3e1' }), this.renderHintText()), hAsync("div", { key: 'fe6984143db817a7b3020a3f57cf5418fc3dcc0e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), hAsync("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36719,7 +37129,9 @@ class Toggle {
             "justify": [1],
             "alignment": [1],
             "required": [4],
-            "activated": [32]
+            "activated": [32],
+            "isInvalid": [32],
+            "hintTextId": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",