voyager-ionic-core 8.8.12 → 9.0.1

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

@@ -1,11 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, d as Host, g as getElement, c as createEvent } from './index-tcQvqkiX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { i as inheritAriaAttributes } from './helpers-HEqiOzXb.js';
-import { h as hostContext, o as openURL, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { t as close } from './index-DV3sJJW8.js';
+import { r as registerInstance, h, d as Host, g as getElement, c as createEvent, f as printIonWarning } from './index-C23AVPx9.js';
+import { b as getIonMode } from './ionic-global-ZXjCXKH0.js';
+import { k as hasShadowDom, i as inheritAriaAttributes } from './helpers-BSmc0nst.js';
+import { h as hostContext, o as openURL, c as createColorClasses } from './theme-byZM6qHV.js';
+import { t as close } from './index-BvabGprD.js';
+import './dir-Dojwmvde.js';
 
 const fabCss = () => `:host{position:absolute;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;z-index:999}:host(.fab-horizontal-center){left:0px;right:0px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-start:dir(rtl)){right:calc(10px + var(--ion-safe-area-right, 0px));left:unset}}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px));}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}@supports selector(:dir(rtl)){:host(.fab-horizontal-end:dir(rtl)){left:calc(10px + var(--ion-safe-area-left, 0px));right:unset}}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:0}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-top:calc((-100% + 16px) / 2)}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-top:-50%}:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-top.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-top:calc(50% + 10px)}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:0}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-button.fab-button-small){margin-bottom:calc((-100% + 16px) / 2)}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-start),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-end){margin-bottom:-50%}:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-top),:host(.fab-vertical-bottom.fab-edge) ::slotted(ion-fab-list.fab-list-side-bottom){margin-bottom:calc(50% + 10px)}:host(.fab-vertical-center){top:0px;bottom:0px;margin-top:auto;margin-bottom:auto}`;
 
@@ -87,6 +88,8 @@ const FabButton = class {
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.fab = null;
+        this.formButtonEl = null;
+        this.formEl = null;
         this.inheritedAttributes = {};
         /**
          * If `true`, the fab button will be show a close icon.
@@ -127,34 +130,105 @@ const FabButton = class {
         this.onBlur = () => {
             this.ionBlur.emit();
         };
-        this.onClick = () => {
-            const { fab } = this;
-            if (!fab) {
-                return;
+        this.onClick = (ev) => {
+            const { el, fab } = this;
+            if (this.type !== 'button' && hasShadowDom(el)) {
+                this.submitForm(ev);
+            }
+            if (fab) {
+                fab.toggle();
             }
-            fab.toggle();
         };
     }
+    disabledChanged() {
+        const { disabled } = this;
+        if (this.formButtonEl) {
+            this.formButtonEl.disabled = disabled;
+        }
+    }
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
     }
+    /**
+     * The native button rendered inside `ion-fab-button` is in the Shadow DOM and
+     * does not participate in form submission, so a hidden native button is added
+     * to the associated form and clicked instead.
+     */
+    renderHiddenButton() {
+        const formEl = (this.formEl = this.findForm());
+        if (formEl) {
+            const { formButtonEl } = this;
+            // Reuse the existing hidden button, syncing values that changed since it was created.
+            if (formButtonEl !== null && formEl.contains(formButtonEl)) {
+                formButtonEl.disabled = this.disabled;
+                formButtonEl.type = this.type;
+                return;
+            }
+            const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
+            newFormButtonEl.type = this.type;
+            newFormButtonEl.style.display = 'none';
+            newFormButtonEl.disabled = this.disabled;
+            formEl.appendChild(newFormButtonEl);
+        }
+    }
+    // TODO(FW-7663): share the hidden button and form lookup with ion-button
+    findForm() {
+        const { form } = this;
+        if (form instanceof HTMLFormElement) {
+            return form;
+        }
+        if (typeof form === 'string') {
+            const el = document.getElementById(form);
+            if (el) {
+                if (el instanceof HTMLFormElement) {
+                    return el;
+                }
+                else {
+                    printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
+                    return null;
+                }
+            }
+            else {
+                printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
+                return null;
+            }
+        }
+        if (form !== undefined) {
+            printIonWarning(`[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
+            return null;
+        }
+        return this.el.closest('form');
+    }
+    submitForm(ev) {
+        if (this.formEl && this.formButtonEl) {
+            ev.preventDefault();
+            this.formButtonEl.click();
+        }
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
     render() {
-        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
+        const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
         const inList = hostContext('ion-fab-list', el);
         const mode = getIonMode(this);
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
-            ? { type: this.type }
+            ? { type }
             : {
                 download: this.download,
                 href,
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        /**
+         * The hidden button is created during render so that setting `type` or
+         * `form` after the component loads still adds it to the form.
+         */
+        if (type !== 'button') {
+            this.renderHiddenButton();
+        }
+        return (h(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -165,9 +239,14 @@ const FabButton = class {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: '914561622c0c6bd41453e828a7d8a39f924875ac' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, h("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && h("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
+            }) }, h(TagType, { key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, h("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && h("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "disabledChanged": 0
+            }]
+    }; }
 };
 FabButton.style = {
     ios: fabButtonIosCss(),

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

@@ -1,9 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { b as inheritAttributes } from './helpers-HEqiOzXb.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-C23AVPx9.js';
+import { b as inheritAttributes } from './helpers-BSmc0nst.js';
+import { b as getIonMode } from './ionic-global-ZXjCXKH0.js';
+import './dir-Dojwmvde.js';
 
 const imgCss = () => `:host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}`;
 
@@ -28,6 +29,8 @@ const Img = class {
         this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
     }
     componentDidLoad() {
+        printIonWarning('[ion-img] - This component is deprecated and will be removed in Ionic v10. ' +
+            'Use a native <img> with the loading="lazy" attribute instead.', this.el);
         this.addIO();
     }
     disconnectedCallback() {
@@ -80,7 +83,7 @@ const Img = class {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode(this) }, h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '57bfb44d9850381fe7b6fcf0c9019b03f7ef86ec', class: getIonMode(this) }, h("img", { key: '888ec06a266fa2751fc0147ede6a567f4e2b29a6', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-infinite-scroll_2.entry.js

@@ -1,11 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, w as writeTask, a as readTask, h, d as Host, g as getElement, e as config } from './index-tcQvqkiX.js';
-import { f as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-MEDq2S8l.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-DQCONYYp.js';
-import './helpers-HEqiOzXb.js';
+import { r as registerInstance, c as createEvent, w as writeTask, a as readTask, h, d as Host, g as getElement, e as config } from './index-C23AVPx9.js';
+import { a as findClosestIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-C1b9CLFg.js';
+import { b as getIonMode } from './ionic-global-ZXjCXKH0.js';
+import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-DWCzVL3Y.js';
+import { s as sanitizeDOMString } from './index-CqoUoxgG.js';
+import './helpers-BSmc0nst.js';
+import './dir-Dojwmvde.js';
 
 const infiniteScrollCss = () => `ion-infinite-scroll{display:none;width:100%}.infinite-scroll-enabled{display:block}`;
 

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

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, f as printIonWarning, h, F as Fragment, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { i as inheritAriaAttributes } from './helpers-HEqiOzXb.js';
-import { i as isRTL } from './dir-C53feagD.js';
-import { c as createColorClasses } from './theme-DiVJyqlX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, c as createEvent, f as printIonWarning, h, F as Fragment, d as Host, g as getElement } from './index-C23AVPx9.js';
+import { i as inheritAriaAttributes } from './helpers-BSmc0nst.js';
+import { i as isRTL } from './dir-Dojwmvde.js';
+import { c as createColorClasses } from './theme-byZM6qHV.js';
+import { b as getIonMode } from './ionic-global-ZXjCXKH0.js';
 
 const inputOtpIosCss = () => `.sc-ion-input-otp-ios-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--separator-width:8px;--separator-height:var(--separator-width);--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-size:0.875rem}.input-otp-group.sc-ion-input-otp-ios{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ios{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem;text-align:center}.input-otp-description-hidden.sc-ion-input-otp-ios{display:none}.input-otp-separator.sc-ion-input-otp-ios{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-size-small.sc-ion-input-otp-ios-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:8px}.input-otp-size-medium.sc-ion-input-otp-ios-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-ios-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios,.input-otp-size-large.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:12px}.input-otp-shape-round.sc-ion-input-otp-ios-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-ios-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-ios-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-ios-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-disabled.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-color:var(--highlight-color);outline:none}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ios-h,.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--border-color:var(--highlight-color)}.ion-color.sc-ion-input-otp-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-ios-h{--border-width:0.55px}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-width:1px}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}`;
 
@@ -85,7 +85,6 @@ const InputOTP = class {
          * Emits the `ionFocus` event when the input group gains focus.
          */
         this.onFocus = (index) => (event) => {
-            var _a;
             const { inputRefs } = this;
             // Only emit ionFocus and set the focusedValue when the
             // component first gains focus
@@ -101,7 +100,7 @@ const InputOTP = class {
                 const targetIndex = this.inputValues[index] ? index : this.getFirstEmptyIndex();
                 finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
                 // Focus the target box
-                (_a = this.inputRefs[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                this.inputRefs[finalIndex]?.focus();
             }
             // Update tabIndexes to match the focused box
             inputRefs.forEach((input, i) => {
@@ -213,7 +212,6 @@ const InputOTP = class {
          * 5. Single character replacement
          */
         this.onInput = (index) => (event) => {
-            var _a, _b;
             const { disabled, length, readonly, validKeyPattern } = this;
             const input = event.target;
             const value = input.value;
@@ -252,9 +250,8 @@ const InputOTP = class {
                 // are filled after a small delay to ensure the input boxes have been
                 // updated before moving the focus
                 setTimeout(() => {
-                    var _a;
                     const nextIndex = validChars.length < length ? validChars.length : length - 1;
-                    (_a = this.inputRefs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+                    this.inputRefs[nextIndex]?.focus();
                 }, 20);
                 this.previousInputValues = [...this.inputValues];
                 return;
@@ -316,9 +313,9 @@ const InputOTP = class {
             // in an input box with the cursor at the beginning of the value of "6",
             // the value will be "26", but we want to grab the "2" as the last character
             // typed.
-            const cursorPos = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : value.length;
+            const cursorPos = input.selectionStart ?? value.length;
             const newCharIndex = cursorPos - 1;
-            const newChar = (_b = value[newCharIndex]) !== null && _b !== void 0 ? _b : value[0];
+            const newChar = value[newCharIndex] ?? value[0];
             // Check if the new character is valid before updating the value
             if (!validKeyPattern.test(newChar)) {
                 input.value = this.inputValues[index] || '';
@@ -338,13 +335,12 @@ const InputOTP = class {
          * the next empty input after pasting.
          */
         this.onPaste = (event) => {
-            var _a, _b;
             const { disabled, inputRefs, length, readonly, validKeyPattern } = this;
             event.preventDefault();
             if (disabled || readonly) {
                 return;
             }
-            const pastedText = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
+            const pastedText = event.clipboardData?.getData('text');
             // If there is no pasted text, still emit the input change event
             // because this is how the native input element behaves
             // but return early because there is nothing to paste.
@@ -369,7 +365,7 @@ const InputOTP = class {
             // Focus the next empty input after pasting
             // If all boxes are filled, focus the last input
             const nextEmptyIndex = validChars.length < length ? validChars.length : length - 1;
-            (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+            inputRefs[nextEmptyIndex]?.focus();
         };
     }
     /**
@@ -379,14 +375,13 @@ const InputOTP = class {
      * Otherwise, the first empty input box or the last input if all are filled will be focused.
      */
     async setFocus(index) {
-        var _a, _b;
         if (typeof index === 'number') {
             const validIndex = Math.max(0, Math.min(index, this.length - 1));
-            (_a = this.inputRefs[validIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            this.inputRefs[validIndex]?.focus();
         }
         else {
             const tabbableIndex = this.getTabbableIndex();
-            (_b = this.inputRefs[tabbableIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+            this.inputRefs[tabbableIndex]?.focus();
         }
     }
     valueChanged() {
@@ -550,20 +545,18 @@ const InputOTP = class {
      * Focuses the next input box.
      */
     focusNext(currentIndex) {
-        var _a;
         const { inputRefs, length } = this;
         if (currentIndex < length - 1) {
-            (_a = inputRefs[currentIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            inputRefs[currentIndex + 1]?.focus();
         }
     }
     /**
      * Focuses the previous input box.
      */
     focusPrevious(currentIndex) {
-        var _a;
         const { inputRefs } = this;
         if (currentIndex > 0) {
-            (_a = inputRefs[currentIndex - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            inputRefs[currentIndex - 1]?.focus();
         }
     }
     /**
@@ -572,12 +565,11 @@ const InputOTP = class {
      * Returns -1 if all inputs are filled.
      */
     getFirstEmptyIndex() {
-        var _a;
         const { inputValues, length } = this;
         // Create an array of the same length as the input OTP
         // and fill it with the input values
         const values = Array.from({ length }, (_, i) => inputValues[i] || '');
-        return (_a = values.findIndex((value) => !value || value === '')) !== null && _a !== void 0 ? _a : -1;
+        return values.findIndex((value) => !value || value === '') ?? -1;
     }
     /**
      * Returns the index of the input that should be tabbed to.
@@ -623,14 +615,13 @@ const InputOTP = class {
         return this.parsedSeparators.includes(index + 1) && index < length - 1;
     }
     render() {
-        var _a, _b;
         const { autocapitalize, color, disabled, el, fill, hasFocus, inheritedAttributes, inputId, inputRefs, inputValues, length, readonly, shape, size, } = this;
         const mode = getIonMode(this);
         const inputmode = this.getInputmode();
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
-        const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: 'ffeec6d07b5d3cd375b72d4c9f4fe755d80ac094', class: createColorClasses(color, {
+        const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
+        return (h(Host, { key: 'bd37661e13cde21feff30c663e6813ce3fff0d9a', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -638,10 +629,10 @@ const InputOTP = class {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'f42471e4ed8054f07162a52b42a0ca49c3d57bb0', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: 'b06461605b2404476b856785b7116e18b4dbaeaa', class: {
+            }) }, h("div", { key: '5e206f870024f1ecfebda999ff31e6e815774deb', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: 'c268f838ddab2c8d6a612a11c7d38e6ca076436d', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: '5bf9e7dc365f6caf0d4b13ae26e5559cdbbd162c' }))));
+            } }, h("slot", { key: 'c0736359b26f609b795e399fc1ad9b540632af18' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,10 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, f as printIonWarning, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { c as createColorClasses } from './theme-DiVJyqlX.js';
-import { x as eyeOff, y as eye } from './index-DV3sJJW8.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, f as printIonWarning, h, d as Host, g as getElement } from './index-C23AVPx9.js';
+import { c as createColorClasses } from './theme-byZM6qHV.js';
+import { x as eyeOff, y as eye } from './index-BvabGprD.js';
+import { b as getIonMode } from './ionic-global-ZXjCXKH0.js';
 
 const iosInputPasswordToggleCss = () => ``;
 
@@ -56,22 +56,21 @@ const InputPasswordToggle = class {
         this.inputElRef = null;
     }
     render() {
-        var _a, _b;
         const { color, type } = this;
         const mode = getIonMode(this);
-        const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
-        const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
+        const showPasswordIcon = this.showIcon ?? eye;
+        const hidePasswordIcon = this.hideIcon ?? eyeOff;
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '91bc55664d496fe457518bd112865dd7811d0c17', class: createColorClasses(color, {
+        return (h(Host, { key: '15a29e51abc236cc21943225ed377f5edca7d103', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, 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) => {
+            }) }, h("ion-button", { key: 'cc9c290e809db66c14aaf63eb496ccf94d3f6414', 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: 'a2bd9197c2635bf8cb155ff25ce022e7d7dc6d00', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '8d1f5143bedabcff2a8792f35ef07fdac1236fd5', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {