voyager-ionic-core 8.7.9 → 8.7.13

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-06T00:35:45",
+  "timestamp": "2025-12-17T02:25:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",
@@ -120,10 +120,10 @@
         },
         {
           "name": "toggleIcon",
-          "type": "any",
+          "type": "string",
           "complexType": {
-            "original": "any",
-            "resolved": "any",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
@@ -139,7 +139,7 @@
           "default": "chevronDown",
           "values": [
             {
-              "type": "any"
+              "type": "string"
             }
           ],
           "optional": false,
@@ -1188,7 +1188,13 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "keydown",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [
         {
           "name": "--backdrop-opacity",
@@ -1485,15 +1491,15 @@
         "ion-select"
       ],
       "dependencies": [
-        "ion-backdrop",
         "ion-icon",
-        "ion-ripple-effect"
+        "ion-ripple-effect",
+        "ion-backdrop"
       ],
       "dependencyGraph": {
         "ion-action-sheet": [
-          "ion-backdrop",
           "ion-icon",
-          "ion-ripple-effect"
+          "ion-ripple-effect",
+          "ion-backdrop"
         ],
         "ion-select": [
           "ion-action-sheet"
@@ -10254,10 +10260,10 @@
         },
         {
           "name": "closeIcon",
-          "type": "any",
+          "type": "string",
           "complexType": {
-            "original": "any",
-            "resolved": "any",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
@@ -10273,7 +10279,7 @@
           "default": "close",
           "values": [
             {
-              "type": "any"
+              "type": "string"
             }
           ],
           "optional": false,
@@ -14856,10 +14862,10 @@
         },
         {
           "name": "detailIcon",
-          "type": "any",
+          "type": "string",
           "complexType": {
-            "original": "any",
-            "resolved": "any",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
@@ -14875,7 +14881,7 @@
           "default": "chevronForward",
           "values": [
             {
-              "type": "any"
+              "type": "string"
             }
           ],
           "optional": false,
@@ -31731,9 +31737,9 @@
           "ion-backdrop"
         ],
         "ion-action-sheet": [
-          "ion-backdrop",
           "ion-icon",
-          "ion-ripple-effect"
+          "ion-ripple-effect",
+          "ion-backdrop"
         ],
         "ion-alert": [
           "ion-ripple-effect",

package/dist/esm/index.js

@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-C8IsBmNU.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-mCdtaoPe.js';
 export { o as openURL } from './theme-DiVJyqlX.js';
 export { m as menuController } from './index-CvDIirVx.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-BymNv-BL.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-DCabi1dI.js';
 import './index-ZjP4CjeZ.js';
 import './gesture-controller-BTEOs1at.js';
 import './hardware-back-button-CPLxO-Ev.js';

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

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
 import { c as createButtonActiveGesture } from './button-active-L570Swow.js';
 import { r as raf } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-BymNv-BL.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-DCabi1dI.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
 import { c as createAnimation } from './animation-Dt8bGnA-.js';
@@ -119,6 +119,7 @@ const ActionSheet = class {
         this.delegateController = createDelegateController(this);
         this.lockController = createLockController();
         this.triggerController = createTriggerController();
+        this.hasRadioButtons = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -163,6 +164,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();
@@ -243,11 +257,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' && !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();
@@ -264,6 +389,8 @@ const ActionSheet = class {
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             setOverlayId(this.el);
         }
+        // Initialize activeRadioId for radio buttons
+        this.buttonsChanged();
     }
     componentDidLoad() {
         /**
@@ -301,22 +428,74 @@ const ActionSheet = class {
          */
         this.triggerChanged();
     }
+    renderActionSheetButtons(filteredButtons) {
+        const mode = getIonMode(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 (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 }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null)));
+        });
+    }
     render() {
-        const { header, htmlAttributes, overlayIndex } = this;
+        const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
         const mode = 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 (h(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(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 }), h("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), h("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, h("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("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 }), h("ion-backdrop", { key: '521ede659f747864f6c974e09016436eceb7158c', tappable: this.backdropDismiss }), h("div", { key: '7a7946fc434bc444f16a70638f5e948c69d33fcd', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'bcff39a580489dbafa255842e57aa8602c6d0f18', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '84bba13ce14261f0f0daa3f9c77648c9e7f36e0e', class: "action-sheet-container" }, h("div", { key: 'd9c8ac404fd6719a7adf8cb36549f67616f9a0c4', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: '180433a8ad03ef5c54728a1a8f34715b6921d658', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), h("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && h("div", { key: '7138e79e61b1a8f42bc5a9175c57fa2f15d7ec5a', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: 'b617c722f5b8028d73ed34b69310f312c65f34a7', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'd0dd876fc48815df3710413c201c0b445a8e16c0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'e7b960157cc6fc5fe92a12090b2be55e8ae072e4', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '05498ffc60cab911dbff0ecbc6168dea59ada9a5', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '3d401346cea301be4ca03671f7370f6f4b0b6bde' })))))), h("div", { key: '971f3c5fcc07f36c28eb469a47ec0290c692e139', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "buttons": ["buttonsChanged"],
         "isOpen": ["onIsOpenChange"],
         "trigger": ["triggerChanged"]
     }; }

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

@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
 import { c as createButtonActiveGesture } from './button-active-L570Swow.js';
 import { r as raf } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BymNv-BL.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-DCabi1dI.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
 import { c as createAnimation } from './animation-Dt8bGnA-.js';

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

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

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

@@ -3,6 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
 import { i as inheritAriaAttributes, a as renderHiddenInput } from './helpers-DEn3pfjm.js';
+import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
 
@@ -59,6 +60,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
@@ -105,16 +110,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 = 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 = 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) {
@@ -127,7 +179,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.
@@ -136,7 +188,7 @@ const Checkbox = class {
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), 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;
@@ -146,7 +198,7 @@ const Checkbox = class {
         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 (h(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(color, {
+        return (h(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(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -156,10 +208,10 @@ const Checkbox = class {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '84d4c33da0348dc65ad36fb0fafd48be366dcf3b', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '427db69a3ab8a17aa0867519c90f585b8930406b', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '9dda7024b3a4f1ee55351f783f9a10f9b4ad0d12', class: {
+            }) }, h("label", { key: '7a3d7f3c27dde514f2dbf2e34f4629fad33ec3bf', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4130d77ddf034271fecccda14e101a5a809921b6', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '5daa74f4e62b0947e37764762524001ee42609d9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'f9d1d545ffd4164b650808241b51ea1bedc6a42c' }), this.renderHintText()), h("div", { key: 'a96d61ac324864228f14caa0e9f2c0d15418882e', class: "native-wrapper" }, 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 }, h("slot", { key: '23ff66138f8c3a2f56f39113fc842d54b2f7952a' }), this.renderHintText()), h("div", { key: 'ab914d9623c19fc46821d5e62db92f1192ebbe7e', class: "native-wrapper" }, h("svg", { key: '66e3f4f5dcaa9756fb0e9452299954f9ed3dcb7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

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

@@ -4,7 +4,7 @@
 import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
 import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
 import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-DEn3pfjm.js';
-import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BymNv-BL.js';
+import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-DCabi1dI.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
 import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';
@@ -784,6 +784,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();
+            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;
@@ -1101,6 +1123,17 @@ const Datetime = class {
          * 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
@@ -1856,7 +1889,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1866,7 +1899,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, i as forceUpdate, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
-import { c as createNotchController, a as checkInvalidState } from './validity-B8oWougr.js';
+import { c as createNotchController } from './notch-controller-BwelN_JM.js';
+import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { d as debounceEvent, i as inheritAriaAttributes, b as inheritAttributes, c as componentOnReady } from './helpers-DEn3pfjm.js';
 import { c as createSlotMutationController, g as getCounterText } from './input.utils-DrvTa8gz.js';
 import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';