voyager-ionic-core 8.7.11 → 8.7.15

package/dist/collection/components/action-sheet/action-sheet.js

@@ -20,6 +20,7 @@ export class ActionSheet {
         this.delegateController = createDelegateController(this);
         this.lockController = createLockController();
         this.triggerController = createTriggerController();
+        this.hasRadioButtons = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -64,6 +65,19 @@ export 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();
@@ -144,11 +158,122 @@ export 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();
@@ -165,6 +290,8 @@ export 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() {
         /**
@@ -202,19 +329,70 @@ export class ActionSheet {
          */
         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" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
@@ -568,6 +746,11 @@ export class ActionSheet {
             }
         };
     }
+    static get states() {
+        return {
+            "activeRadioId": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "didPresent",
@@ -822,6 +1005,9 @@ export class ActionSheet {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "buttons",
+                "methodName": "buttonsChanged"
+            }, {
                 "propName": "isOpen",
                 "methodName": "onIsOpenChange"
             }, {
@@ -829,6 +1015,15 @@ export class ActionSheet {
                 "methodName": "triggerChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 const buttonClass = (button) => {
     return Object.assign({ 'action-sheet-button': true, 'ion-activatable': !button.disabled, 'ion-focusable': !button.disabled, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));

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

@@ -229,7 +229,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'ed82ea53705523f9afc5f1a9addff44cc6424f27', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'd148ed2332917f03fafd63dbbef10131df0ec5f0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -244,7 +244,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'fadec13053469dd0405bbbc61b70ced568aa4826' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '6bf0e5144fb1148002e88038522402b789689d2c', class: "button-inner" }, h("slot", { key: '25da0ca155cfa9e2754842c34f4fd09f576ac2d2', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '51414065bb11953ec9d818f8d9353589bc9072c5', name: "start" }), h("slot", { key: 'c9b5f8842aeabd20628df2f4600f1257ea913d8d' }), h("slot", { key: '478dd3671c7be1909fc84e672f0fa8dfe6082263', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'e1d55f85a55144d743f58a5914cd116cb065fa8c', type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: '9da73c530017d510839a224bc4d5315bd44f60ed' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '9046184db918cc53e90796860c43d1dfb7d1f85c', class: "button-inner" }, h("slot", { key: '9dd37ab124803e703567ddde4154c81ed1922be1', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '01713ecf19c68be05072ffcd00ed7ff2d76c4551', name: "start" }), h("slot", { key: '121124874ba1357bc10ffaf4f7ed13803a02add9' }), h("slot", { key: '09317cf5ced153fbb94d4ebba69db858f9dbe570', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '8bdd9d082f48582be903221b13b67095046cd9aa', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }
@@ -643,6 +643,9 @@ export class Button {
             }, {
                 "propName": "aria-label",
                 "methodName": "onAriaChanged"
+            }, {
+                "propName": "aria-pressed",
+                "methodName": "onAriaChanged"
             }];
     }
 }

package/dist/collection/components/content/content.js

@@ -191,6 +191,15 @@ export class Content {
             }
         }
     }
+    /**
+     * 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);
@@ -360,7 +369,7 @@ export class Content {
         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,
@@ -368,12 +377,12 @@ export class Content {
             }), 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));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -603,6 +612,26 @@ export class Content {
     }
     static get methods() {
         return {
+            "recalculateDimensions": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Recalculate content dimensions. Called by overlays (e.g., popover) when\nsibling elements like headers or footers have finished rendering and their\nheights are available, ensuring accurate offset-top calculations.",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
             "getScrollElement": {
                 "complexType": {
                     "signature": "() => Promise<HTMLElement>",

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

@@ -381,11 +381,11 @@ export class FabButton {
                 "attribute": "size"
             },
             "closeIcon": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/header/header.md.css

@@ -124,7 +124,7 @@ ion-header ion-toolbar:first-of-type {
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
-.header-collapse-condense {
+.header-md.header-collapse-condense {
   display: none;
 }
 

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -62,14 +62,14 @@ export class InputPasswordToggle {
         const isPasswordVisible = type === 'text';
         return (h(Host, { key: '91bc55664d496fe457518bd112865dd7811d0c17', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'f3e436422110c9cb4d5c0b83500255b24ab4cdef', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '6344d6838f5cdcba54c6bf4b592f036092044de0', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '5c8b121153f148f92aa7cba0447673a4f6f3ad1e', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'a2bd9197c2635bf8cb155ff25ce022e7d7dc6d00', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -329,11 +329,11 @@ export class Item {
                 "attribute": "detail"
             },
             "detailIcon": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/modal/modal.js

@@ -463,7 +463,13 @@ export 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) {
@@ -545,6 +551,79 @@ export 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() {
         /**
@@ -634,6 +713,7 @@ export class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -838,6 +918,17 @@ export 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) {
@@ -879,20 +970,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+        return (h(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 }), h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("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 }), h("ion-backdrop", { key: 'd02612d8063ef20f59f173ff47795f71cdaaf63e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '708761b70a93e34c08faae079569f444c7416a4c', class: "modal-shadow" }), h("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 && (h("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 && (h("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) })), h("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) })), h("slot", { key: 'fccbd64518b6fa22f9e874deb6b4ba55d8d89c3b', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1451,6 +1542,7 @@ export class Modal {
     }
     static get states() {
         return {
+            "isSheetModal": {},
             "presented": {}
         };
     }