voyager-ionic-core 8.7.9 → 8.7.13

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-D6Wc6v08.js');
 var buttonActive = require('./button-active-CMc8cD90.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays--dagG4QM.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 var animation = require('./animation-Bt3H9L1C.js');
@@ -121,6 +121,7 @@ const ActionSheet = class {
         this.delegateController = overlays.createDelegateController(this);
         this.lockController = lockController.createLockController();
         this.triggerController = overlays.createTriggerController();
+        this.hasRadioButtons = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -165,6 +166,19 @@ const ActionSheet = class {
             }
         };
     }
+    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();
@@ -245,11 +259,122 @@ const ActionSheet = class {
         }
         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' && !overlays.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() {
         overlays.prepareOverlay(this.el);
         this.triggerChanged();
@@ -266,6 +391,8 @@ const ActionSheet = class {
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             overlays.setOverlayId(this.el);
         }
+        // Initialize activeRadioId for radio buttons
+        this.buttonsChanged();
     }
     componentDidLoad() {
         /**
@@ -303,22 +430,74 @@ const ActionSheet = class {
          */
         this.triggerChanged();
     }
+    renderActionSheetButtons(filteredButtons) {
+        const mode = ionicGlobal.getIonMode(this);
+        const { activeRadioId } = this;
+        return filteredButtons.map((b, index$1) => {
+            var _a;
+            const isRadio = ((_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a.role) === 'radio';
+            const buttonId = this.getButtonId(b, index$1);
+            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 (index.h("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
+                    if (isRadio) {
+                        this.selectRadioButton(b);
+                    }
+                    this.buttonClick(b);
+                }, disabled: b.disabled, tabIndex: tabIndex }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null)));
+        });
+    }
     render() {
-        const { header, htmlAttributes, overlayIndex } = this;
+        const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
         const mode = ionicGlobal.getIonMode(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 (index.h(index.Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.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 }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), index.h("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, index.h("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '521ede659f747864f6c974e09016436eceb7158c', tappable: this.backdropDismiss }), index.h("div", { key: '7a7946fc434bc444f16a70638f5e948c69d33fcd', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'bcff39a580489dbafa255842e57aa8602c6d0f18', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '84bba13ce14261f0f0daa3f9c77648c9e7f36e0e', class: "action-sheet-container" }, index.h("div", { key: 'd9c8ac404fd6719a7adf8cb36549f67616f9a0c4', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (index.h("div", { key: '180433a8ad03ef5c54728a1a8f34715b6921d658', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && index.h("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), index.h("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && index.h("div", { key: '7138e79e61b1a8f42bc5a9175c57fa2f15d7ec5a', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (index.h("div", { key: 'b617c722f5b8028d73ed34b69310f312c65f34a7', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: 'd0dd876fc48815df3710413c201c0b445a8e16c0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: 'e7b960157cc6fc5fe92a12090b2be55e8ae072e4', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: '05498ffc60cab911dbff0ecbc6168dea59ada9a5', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: '3d401346cea301be4ca03671f7370f6f4b0b6bde' })))))), index.h("div", { key: '971f3c5fcc07f36c28eb469a47ec0290c692e139', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "buttons": ["buttonsChanged"],
         "isOpen": ["onIsOpenChange"],
         "trigger": ["triggerChanged"]
     }; }

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

@@ -8,7 +8,7 @@ var config = require('./config-C5fsO43a.js');
 var buttonActive = require('./button-active-CMc8cD90.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays--dagG4QM.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 var animation = require('./animation-Bt3H9L1C.js');

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

@@ -337,6 +337,15 @@ const Content = class {
             }
         }
     }
+    /**
+     * 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() {
+        index.readTask(() => this.readDimensions());
+    }
     readDimensions() {
         const page = getPageElement(this.el);
         const top = Math.max(this.el.offsetTop, 0);
@@ -506,7 +515,7 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (index.h(index.Host, Object.assign({ key: 'f2a24aa66dbf5c76f9d4b06f708eb73cadc239df', role: isMainContent ? 'main' : undefined, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': theme.hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -514,12 +523,12 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), index.h("div", { key: '6480ca7648b278abb36477b3838bccbcd4995e2a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? index.h("slot", { name: "fixed" }) : null, index.h("div", { key: '29a23b663f5f0215bb000820c01e1814c0d55985', class: {
+            } }, inheritedAttributes), index.h("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? index.h("slot", { name: "fixed" }) : null, index.h("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" }, index.h("slot", { key: '0fe1bd05609a4b88ae2ce9addf5d5dc5dc1806f0' })), transitionShadow ? (index.h("div", { class: "transition-effect" }, index.h("div", { class: "transition-cover" }), index.h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? index.h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, index.h("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (index.h("div", { class: "transition-effect" }, index.h("div", { class: "transition-cover" }), index.h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? index.h("slot", { name: "fixed" }) : null));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -5,6 +5,7 @@
 
 var index = require('./index-D6Wc6v08.js');
 var helpers = require('./helpers-DrTqNghc.js');
+var validity = require('./validity-BpS37YFM.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 
@@ -61,6 +62,10 @@ const Checkbox = class {
          * 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
@@ -107,16 +112,63 @@ const Checkbox = class {
             ev.stopPropagation();
         };
     }
+    connectedCallback() {
+        const { el } = this;
+        // Watch for class changes to update validation state.
+        if (typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = validity.checkInvalidState(el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = validity.checkInvalidState(el);
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, helpers.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) {
@@ -129,7 +181,7 @@ const Checkbox = class {
      * 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.
@@ -138,7 +190,7 @@ const Checkbox = class {
         if (!hasHintText) {
             return;
         }
-        return (index.h("div", { class: "checkbox-bottom" }, index.h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), index.h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (index.h("div", { class: "checkbox-bottom" }, index.h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), index.h("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;
@@ -148,7 +200,7 @@ const Checkbox = class {
         helpers.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 (index.h(index.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: theme.createColorClasses(color, {
+        return (index.h(index.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: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': theme.hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -158,10 +210,10 @@ const Checkbox = class {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, index.h("label", { key: '84d4c33da0348dc65ad36fb0fafd48be366dcf3b', class: "checkbox-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: '427db69a3ab8a17aa0867519c90f585b8930406b', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), index.h("div", { key: '9dda7024b3a4f1ee55351f783f9a10f9b4ad0d12', class: {
+            }) }, index.h("label", { key: '7a3d7f3c27dde514f2dbf2e34f4629fad33ec3bf', class: "checkbox-wrapper", htmlFor: inputId }, index.h("input", Object.assign({ key: '4130d77ddf034271fecccda14e101a5a809921b6', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), index.h("div", { key: '5daa74f4e62b0947e37764762524001ee42609d9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, index.h("slot", { key: 'f9d1d545ffd4164b650808241b51ea1bedc6a42c' }), this.renderHintText()), index.h("div", { key: 'a96d61ac324864228f14caa0e9f2c0d15418882e', class: "native-wrapper" }, index.h("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 }, index.h("slot", { key: '23ff66138f8c3a2f56f39113fc842d54b2f7952a' }), this.renderHintText()), index.h("div", { key: 'ab914d9623c19fc46821d5e62db92f1192ebbe7e', class: "native-wrapper" }, index.h("svg", { key: '66e3f4f5dcaa9756fb0e9452299954f9ed3dcb7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (index.h("path", { d: "M6 12L18 12", part: "mark" })) : (index.h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

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

@@ -6,7 +6,7 @@
 var index = require('./index-D6Wc6v08.js');
 var focusVisible = require('./focus-visible-CCvKiLh3.js');
 var helpers = require('./helpers-DrTqNghc.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays--dagG4QM.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$1 = require('./index-DqmRDbxg.js');
@@ -786,6 +786,28 @@ const Datetime = class {
                 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();
+            index.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 ? data.parseDate(value) : this.defaultParts;
@@ -1103,6 +1125,17 @@ const Datetime = class {
          * triggering the `hiddenIO` observer below.
          */
         helpers.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
@@ -1858,7 +1891,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (index.h(index.Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1868,7 +1901,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, index.h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, index.h("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,8 @@
 'use strict';
 
 var index = require('./index-D6Wc6v08.js');
-var validity = require('./validity-C8QoAYT2.js');
+var notchController = require('./notch-controller-Bzqhjm4f.js');
+var validity = require('./validity-BpS37YFM.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var input_utils = require('./input.utils-B_QROI2g.js');
 var theme = require('./theme-CeDs6Hcv.js');
@@ -235,7 +236,7 @@ const Input = class {
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = input_utils.createSlotMutationController(el, ['label', 'start', 'end'], () => index.forceUpdate(this));
-        this.notchController = validity.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.notchController = notchController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
         // Watch for class changes to update validation state
         if (typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {

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

@@ -7,7 +7,7 @@ var index = require('./index-D6Wc6v08.js');
 var config = require('./config-C5fsO43a.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays--dagG4QM.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 var animation = require('./animation-Bt3H9L1C.js');

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

@@ -5,7 +5,7 @@
 
 var index = require('./index-D6Wc6v08.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays--dagG4QM.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 var hardwareBackButton = require('./hardware-back-button-VCK4V3mG.js');
 var helpers = require('./helpers-DrTqNghc.js');