voyager-ionic-core 8.7.9 → 8.7.13

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

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-mCdtaoPe.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, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BymNv-BL.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } 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-menu_3.entry.js

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-BymNv-BL.js';
+import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-DCabi1dI.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
 import { shouldUseCloseWatcher } from './hardware-back-button-CPLxO-Ev.js';
 import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-DEn3pfjm.js';

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

@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
 import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
 import { g as getCapacitor } from './capacitor-CFERIeaU.js';
-import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BymNv-BL.js';
+import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-DCabi1dI.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { e as deepReady, w as waitForMount } from './index-r2D9DEro.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
@@ -1918,7 +1918,13 @@ const Modal = class {
             };
             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) {
@@ -2000,6 +2006,79 @@ const Modal = class {
         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() {
         /**
@@ -2089,6 +2168,7 @@ const Modal = class {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -2285,6 +2365,17 @@ const Modal = class {
             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) {
@@ -2326,20 +2417,20 @@ const Modal = class {
         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 }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
-import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-BymNv-BL.js';
+import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-DCabi1dI.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BYawdMXj.js';
 import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
@@ -1178,6 +1178,10 @@ const Popover = class {
         if (destroyTriggerInteraction) {
             destroyTriggerInteraction();
         }
+        if (this.headerResizeObserver) {
+            this.headerResizeObserver.disconnect();
+            this.headerResizeObserver = undefined;
+        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -1280,6 +1284,7 @@ const Popover = class {
          */
         this.ionMount.emit();
         this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
+        this.recalculateContentOnHeaderReady();
         if (!this.keyboardEvents) {
             this.configureKeyboardInteraction();
         }
@@ -1325,6 +1330,35 @@ const Popover = class {
         }
         unlock();
     }
+    /**
+     * Watch the header for height changes and trigger content dimension
+     * recalculation when the header has a height > 0. This sets the offset-top
+     * of the content to the height of the header correctly.
+     */
+    recalculateContentOnHeaderReady() {
+        var _a;
+        const popoverContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popover-content');
+        if (!popoverContent) {
+            return;
+        }
+        const contentContainer = this.usersElement || popoverContent;
+        const header = contentContainer.querySelector('ion-header');
+        const contentElements = contentContainer.querySelectorAll('ion-content');
+        if (!header || contentElements.length === 0) {
+            return;
+        }
+        this.headerResizeObserver = new ResizeObserver(async () => {
+            var _a;
+            if (header.offsetHeight > 0) {
+                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this.headerResizeObserver = undefined;
+                for (const contentEl of contentElements) {
+                    await contentEl.recalculateDimensions();
+                }
+            }
+        });
+        this.headerResizeObserver.observe(header);
+    }
     /**
      * Dismiss the popover overlay after it has been presented.
      * This is a no-op if the overlay has not been presented yet. If you want
@@ -1386,9 +1420,9 @@ const Popover = class {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), h("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, h("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -6,6 +6,7 @@ import { f as addEventListener, m as removeEventListener, a as renderHiddenInput
 import { i as isOptionSelected } from './compare-with-utils-sObYyvOy.js';
 import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
+import { c as checkInvalidState } from './validity-DJztqcrH.js';
 
 const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:\"\";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}";
 
@@ -175,6 +176,10 @@ const RadioGroup = class {
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.labelId = `${this.inputId}-lbl`;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * If `true`, the radios can be deselected.
          */
@@ -256,6 +261,52 @@ const RadioGroup = class {
                 this.labelId = label.id = this.name + '-lbl';
             }
         }
+        // Watch for class changes to update validation state.
+        if (typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(this.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(this.el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(this.el);
+    }
+    componentWillLoad() {
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     getRadios() {
         return Array.from(this.el.querySelectorAll('ion-radio'));
@@ -331,16 +382,16 @@ const RadioGroup = class {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         const hasHintText = !!helperText || !!errorText;
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text" }, errorText)));
+        return (h("div", { class: "radio-group-top" }, h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -352,7 +403,7 @@ const RadioGroup = class {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return (h(Host, { key: '81b8ebc96b2f383c36717f290d2959cc921ad6e8', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '45b09efc10776b889a8f372cba80d25a3fc849da', class: "radio-group-wrapper" }, h("slot", { key: '58714934542c2fdd7396de160364f3f06b32e8f8' }))));
+        return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, h("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, h, i as forceUpdate, d as Host, g as getElement } from './index-C8IsBmNU.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
-import { s as safeCall } from './overlays-BymNv-BL.js';
+import { s as safeCall } from './overlays-DCabi1dI.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import './index-ZjP4CjeZ.js';
 import './helpers-DEn3pfjm.js';

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

@@ -2,10 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement, i as forceUpdate } 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 { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
+import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-DEn3pfjm.js';
-import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-BymNv-BL.js';
+import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-DCabi1dI.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
 import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
@@ -201,7 +202,7 @@ const Select = class {
                      * a higher priority.
                      */
                     Promise.resolve().then(() => {
-                        this.hintTextID = this.getHintTextID();
+                        this.hintTextId = this.getHintTextId();
                     });
                 }
             });
@@ -215,7 +216,7 @@ const Select = class {
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-        this.hintTextID = this.getHintTextID();
+        this.hintTextId = this.getHintTextId();
     }
     componentDidLoad() {
         /**
@@ -394,13 +395,18 @@ const Select = class {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const isSelected = isOptionSelected(selectValue, value, this.compareWith);
             return {
-                role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
+                role: isSelected ? 'selected' : '',
                 text: option.textContent,
                 cssClass: optClass,
                 handler: () => {
                     this.setValue(value);
                 },
+                htmlAttributes: {
+                    'aria-checked': isSelected ? 'true' : 'false',
+                    role: 'radio',
+                },
             };
         });
         // Add "cancel" button
@@ -714,9 +720,9 @@ const Select = class {
     }
     renderListbox() {
         const { disabled, inputId, isExpanded, required } = this;
-        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextID, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    getHintTextID() {
+    getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
             return errorTextId;
@@ -781,7 +787,7 @@ const Select = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '35b5e18e6f79a802ff2d46d1242e80ff755cc0b9', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -799,7 +805,7 @@ const Select = class {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '6005b34a0c50bc4d7653a4276bc232ecd02e083c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'c7e07aa81ae856c057f16275dd058f37c5670a47', class: "select-wrapper-inner" }, h("slot", { key: '7fc2deefe0424404caacdbbd9e08ed43ba55d28a', name: "start" }), h("div", { key: '157d74ee717b1bc30b5f1c233a09b0c8456aa68e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ea66db304528b82bf9317730b6dce3db2612f235', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '786eb1530b7476f0615d4e7c0bf4e7e4dc66509c', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, h("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), h("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, i as forceUpdate, w as writeTask, 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';

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

@@ -5,7 +5,7 @@ import { f as printIonWarning, r as registerInstance, c as createEvent, e as con
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-mCdtaoPe.js';
 import { g as getElementRoot, r as raf } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-BymNv-BL.js';
+import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-DCabi1dI.js';
 import { c as createColorClasses, 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-toggle.entry.js

@@ -3,6 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, e as config, 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 hapticSelection } from './haptic-DzAMWJuk.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global-CDrldh-5.js';
 import { i as isRTL } from './dir-C53feagD.js';
@@ -29,6 +30,10 @@ const Toggle = class {
         this.inheritedAttributes = {};
         this.didLoad = false;
         this.activated = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -142,15 +147,52 @@ const Toggle = class {
         });
     }
     async connectedCallback() {
+        const { didLoad, el } = this;
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
          * But if we are moving ion-toggle via appendChild,
          * then toggleTrack will be defined.
          */
-        if (this.didLoad) {
+        if (didLoad) {
             this.setupGesture();
         }
+        // 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);
     }
     componentDidLoad() {
         this.setupGesture();
@@ -161,9 +203,15 @@ const Toggle = class {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
     }
     onStart() {
         this.activated = true;
@@ -204,9 +252,9 @@ const Toggle = class {
     get hasLabel() {
         return this.el.textContent !== '';
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -219,7 +267,7 @@ const Toggle = 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.
@@ -228,15 +276,15 @@ const Toggle = class {
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "toggle-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: "toggle-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 { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
+        const { activated, alignment, checked, color, disabled, el, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '17bbbc8d229868e5c872b2bc5a3faf579780c5e0', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'f569148edd89ee041a4719ffc4733c16b05229bd', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -246,10 +294,10 @@ const Toggle = class {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '673625b62a2c909e95dccb642c91312967a6cd1c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '7dc3f357b4708116663970047765da9f8f845bf0', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '8f1c6a182031e8cbc6727e5f4ac0e00ad4247447', class: {
+            }) }, h("label", { key: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '8322b9d54dc7edeb4e16fefcde9f7ebca8d5c3e1' }), this.renderHintText()), h("div", { key: 'fe6984143db817a7b3020a3f57cf5418fc3dcc0e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), h("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {