voyager-ionic-core 8.8.17 → 9.0.3

package/dist/collection/components/input-otp/input-otp.js

@@ -75,7 +75,6 @@ export class InputOTP {
          * 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
@@ -91,7 +90,7 @@ export class InputOTP {
                 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) => {
@@ -203,7 +202,6 @@ export class InputOTP {
          * 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;
@@ -242,9 +240,8 @@ export class InputOTP {
                 // 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;
@@ -306,9 +303,9 @@ export class InputOTP {
             // 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] || '';
@@ -328,13 +325,12 @@ export class InputOTP {
          * 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.
@@ -359,7 +355,7 @@ export class InputOTP {
             // 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();
         };
     }
     /**
@@ -369,14 +365,13 @@ export class InputOTP {
      * 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() {
@@ -540,20 +535,18 @@ export class InputOTP {
      * 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();
         }
     }
     /**
@@ -562,12 +555,11 @@ export class InputOTP {
      * 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.
@@ -613,14 +605,13 @@ export class InputOTP {
         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,
@@ -628,10 +619,10 @@ export class InputOTP {
                 [`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' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,22 +54,21 @@ export class InputPasswordToggle {
         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 }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -170,13 +170,12 @@ export class Item {
      * in Android WebView. Worth revisiting when FW-6106 closes.
      */
     watchForIndicatorControls() {
-        var _a;
         if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
             return;
         }
         // `Node.moveBefore` relocates the item without either callback firing, so
         // never leave a previous observer behind
-        (_a = this.indicatorControlObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.indicatorControlObserver?.disconnect();
         this.indicatorControlObserver = new MutationObserver((records) => {
             // The subtree observer also fires for text and hidden input churn, so only
             // re-read the DOM when a control was added or removed
@@ -307,20 +306,24 @@ export class Item {
          * multi-input item, and in a clickable item, which is a second tab stop.
          */
         const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
-        return (h(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
-                item: true,
-                [mode]: true,
-                'item-lines-default': lines === undefined,
-                [`item-lines-${lines}`]: lines !== undefined,
-                'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
-                'item-disabled': disabled,
-                'in-list': inList,
-                'item-multiple-inputs': this.multipleInputs,
-                'item-focus-indicator-room': slottedIndicatorNeedsRoom,
-                'ion-activatable': canActivate,
-                'ion-focusable': this.focusable,
-                'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'd42583cf62133b2553de2e7a5357168640bb1834' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, h("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, h("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
+        return (h(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: {
+                ...childStyles,
+                ...labelColorStyles,
+                ...createColorClasses(this.color, {
+                    item: true,
+                    [mode]: true,
+                    'item-lines-default': lines === undefined,
+                    [`item-lines-${lines}`]: lines !== undefined,
+                    'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
+                    'item-disabled': disabled,
+                    'in-list': inList,
+                    'item-multiple-inputs': this.multipleInputs,
+                    'item-focus-indicator-room': slottedIndicatorNeedsRoom,
+                    'ion-activatable': canActivate,
+                    'ion-focusable': this.focusable,
+                    'item-rtl': document.dir === 'rtl',
+                }),
+            }, role: inList ? 'listitem' : null }, h(TagType, { key: 'd42583cf62133b2553de2e7a5357168640bb1834', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, h("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, h("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,11 +27,11 @@ export class ItemDivider {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ff2ae8eee7704ca28e3f25a39fc3d910f57b1879', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b191727cc26c600287fd856e49216bf1ae1d5aad', class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: '9747421ee3c6b8012ad5a71091aa9775d002885e', name: "start" }), h("div", { key: '0ad8e1355c70efcc095b954c29af497a18b35b37', class: "item-divider-inner", part: "inner" }, h("div", { key: '7562f4f033e786b620ef2bd62d7c35f1013b4905', class: "item-divider-wrapper", part: "container" }, h("slot", { key: '013a0c58ca93afa395a52df30020d1b9e86ffc3a' })), h("slot", { key: 'a08f7b7a133110cbb51b1f4843133bacc306d3a1', name: "end" }))));
+            }) }, h("slot", { key: 'a8e2eb48ca858b64da8ad018fa8d1667030b7143', name: "start" }), h("div", { key: '3219e0b76ac4a96db50a67f1f2794a235111c613', class: "item-divider-inner", part: "inner" }, h("div", { key: '31a64775153cd8704458e0e2a4a512096585deb4', class: "item-divider-wrapper", part: "container" }, h("slot", { key: 'd46dfb578028790eb6ccaac5e6009a5d96aa831a' })), h("slot", { key: 'a5fc7ac27e418ea82d9dcc913a8dae7e35493760', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class ItemGroup {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f1743af1d075682f63fae3802c5c5bf050507563', role: "group", class: {
+        return (h(Host, { key: 'd24ee9c70a99d11b7d95dfb4a8066670bdfcbc1d', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,

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

@@ -50,12 +50,12 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: 'b576e8f449ee9a03e659abd923421b051f7427c8', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a10d36e60d61865141c57c03a114e4845b400a55', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: '568c7de194ecef7d1efec2abdf855b3fce71aa03' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'fe1a494a40febc5c415098d8c9b2edad9fac02c9', class: "button-inner", part: "inner" }, h("slot", { key: '8e4ec73c1a9c047a29dac8ad09ff1cce94a751c7', name: "top" }), h("div", { key: '7828c6413d2cab692a3a2e5aa2a17240e0dcb230', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'c8eb9881db296280ba895ab249e5d1bb3fc27206', name: "start" }), h("slot", { key: '144b18f7ea90a45abbe0b1fa878c87e623897b7b', name: "icon-only" }), h("slot", { key: '6c63ebad29552a32e1ed9ca3c95aa005b35b9b86' }), h("slot", { key: '99478d52600bf32342649a2f74ed8e1eb07407d4', name: "end" })), h("slot", { key: '00247fc54e61cface4e6ac6e8ea05a0685f5e26e', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'dc5057f2ff0926b2e5fd1520fed6cf7dc3197cf8' }))));
+            }) }, h(TagType, { key: '5cc49ef73318213f6202d1d0f460f629ea65f17f', ...attrs, class: "button-native", part: "native", disabled: disabled }, h("span", { key: '0643b16660b4ca00b0f3b4dbe2739e9ce076abea', class: "button-inner", part: "inner" }, h("slot", { key: '8778d6d09aa9e0db278ce00c5456a1acfe82c15f', name: "top" }), h("div", { key: '4fc849494c8cb2380015161e096b5c61cf517d90', class: "horizontal-wrapper", part: "container" }, h("slot", { key: '9d0c0a5a63d8ec636df9c85d48bbdb39fb63af5e', name: "start" }), h("slot", { key: 'a40561497c7e7d73173edd24ed335230e6eebb2b', name: "icon-only" }), h("slot", { key: 'b94f2a4aa5bf4a1104497ced1920d6ee43d33659' }), h("slot", { key: '91713dbb3e6a617c00f950857f2ed5e5ffceaa9a', name: "end" })), h("slot", { key: 'f5af33c3bfb50fc629a06e1120bba55da07b2afb', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'fc56e1644ef9c5b2e1e66683465a7fd09c05215c' }))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class ItemOptions {
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: '7b4b93984182222c64c7a2a22a18e52ac19e3049', class: {
+        return (h(Host, { key: '6e60ff004d48bf7701711e518ec0b21264496ae8', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

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

@@ -3,7 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
-import { isEndSide } from "../../utils/helpers";
+import { componentOnReady, isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { watchForOptions } from "../../utils/watch-options";
 import { getIonMode } from "../../global/ionic-global";
@@ -96,7 +96,6 @@ export class ItemSliding {
      * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
      */
     async open(side) {
-        var _a;
         /**
          * It is possible for the item to be added to the DOM
          * after the item-sliding component was created. As a result,
@@ -105,7 +104,7 @@ export class ItemSliding {
          * However, if the item is already defined then
          * we do not query for it again.
          */
-        const item = (this.item = (_a = this.item) !== null && _a !== void 0 ? _a : this.el.querySelector('ion-item'));
+        const item = (this.item = this.item ?? this.el.querySelector('ion-item'));
         if (item === null) {
             return;
         }
@@ -179,21 +178,18 @@ export class ItemSliding {
         }
     }
     async updateOptions() {
-        var _a;
-        const options = this.el.querySelectorAll('ion-item-options');
+        const options = Array.from(this.el.querySelectorAll('ion-item-options'));
+        /**
+         * Frameworks that assign element props after inserting the element haven't set
+         * `side` while `connectedCallback` runs, so reading it any earlier reports every
+         * option as `end`.
+         */
+        await Promise.all(options.map((option) => new Promise((resolve) => componentOnReady(option, resolve))));
         let sides = 0;
         // Reset left and right options in case they were removed
         this.leftOptions = this.rightOptions = undefined;
-        for (let i = 0; i < options.length; i++) {
-            const item = options.item(i);
-            /**
-             * We cannot use the componentOnReady helper
-             * util here since we need to wait for all of these items
-             * to be ready before we set `this.sides` and `this.optsDirty`.
-             */
-            // eslint-disable-next-line custom-rules/no-component-on-ready-method
-            const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
-            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+        for (const option of options) {
+            const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -393,7 +389,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '72d2ec1c5074128d2c9ad2f439cdc98daa93e8b5', class: {
+        return (h(Host, { key: '2b00049c5ae2efaa3b81a28892543d733fa6a5d0', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/dist/collection/components/label/label.js

@@ -58,13 +58,13 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'd603670c442213c28737b0c052c094705b8c84ef', class: createColorClasses(this.color, {
+        return (h(Host, { key: '461604c1887f322dc13d7df3d5cdbb7ee1361117', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: 'a8c3aed240a20ee5856c423662878481a1e6d4cf' })));
+            }) }, h("slot", { key: 'a7005d0a217641278aa8e95144e8e4b9ae87a1c5' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/list/list.js

@@ -21,7 +21,7 @@ export class List {
      */
     async closeSlidingItems() {
         const item = this.el.querySelector('ion-item-sliding');
-        if (item === null || item === void 0 ? void 0 : item.closeOpened) {
+        if (item?.closeOpened) {
             return item.closeOpened();
         }
         return false;
@@ -29,7 +29,7 @@ export class List {
     render() {
         const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { key: '7f9943751542d2cbd49a4ad3f28e16d9949f70d4', role: "list", class: {
+        return (h(Host, { key: 'b21e063d568b07331ea9443647b3faf33265256a', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,

package/dist/collection/components/list-header/list-header.js

@@ -13,10 +13,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f5fcd3e6b9f1ba52381fd0d14c0d50517da50f9f', class: createColorClasses(this.color, {
+        return (h(Host, { key: '92ab17533e169b1a1c990285449e0546aac98021', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '99d09b1d2438ad981d20ff965c8945635c2161a3', class: "list-header-inner", part: "inner" }, h("slot", { key: 'efa7ab08935cfa378734cda0612b49ba5b7b6d36' }))));
+            }) }, h("div", { key: '26639255577380a8e70b61f753aa9ed57590694f', class: "list-header-inner", part: "inner" }, h("slot", { key: 'f69055e7a7a47ae8dcbbe289e18b6630f0792714' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loading/loading.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -82,14 +82,17 @@ export class Loading {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     componentWillLoad() {
-        var _a;
         if (this.spinner === undefined) {
             const mode = getIonMode(this);
             this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
-        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+        if (!this.htmlAttributes?.id) {
             setOverlayId(this.el);
         }
     }
@@ -114,6 +117,10 @@ export class Loading {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     /**
      * Present the loading overlay after it has been created.
@@ -179,9 +186,14 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: 'f86ddbc600cb5c396b7de38fb5f49625388c3c3f', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, { key: 'b4430bc66aedeca19d5645667cba73c169c4bd76', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'b53727aaddc37ef3c685fcc150c6d5193290a847', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c61bede8e0a4e47daa6f1f9d0f364ef6aec0bc3', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '84e51ceb07118f1eaeb757df28801c255496931b', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'fc97f1912e0fc558b7c309a5bc084415f5f620b2', class: "loading-spinner" }, h("ion-spinner", { key: '6e186d856cd3f10f22c3e317ef00f31b4216459c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'dcbe9d9a619daa1c08174e73827bdabeb59dde92', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: {
+                ...getClassMap(this.cssClass),
+                [mode]: true,
+                'overlay-hidden': true,
+                'loading-translucent': this.translucent,
+            } }, h("ion-backdrop", { key: 'dec0df942ae778c99ebd4dbf08d6c2a0a992639d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '71b2d5fc259666225047fc901648ada1efcd5d4b', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1d83dc3b57ee70c9e8c0f006c6fa576bd96ecded', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd1cd127e044b8831e396b53122322c1db7e89904', class: "loading-spinner" }, h("ion-spinner", { key: '38c2580cf5659da612872f01801a5fbdc2c023ba', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '90e5e32ffe0df2c691f364149f43374e676bfaa3', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/menu/menu.js

@@ -103,7 +103,7 @@ export class Menu {
         });
     }
     sideChanged() {
-        this.isEndSide = isEnd(this.side);
+        this.isEndSide = isEnd(this.side, this.el);
         /**
          * Menu direction animation is calculated based on the document direction.
          * If the document direction changes, we need to create a new animation.
@@ -293,9 +293,8 @@ export class Menu {
      * @param role The role of the element that is closing the menu.
      */
     setOpen(shouldOpen, animated = true, role) {
-        var _a;
         // Blur the active element to prevent it from being kept focused inside an element that will be set with aria-hidden="true"
-        (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+        document.activeElement?.blur();
         return menuController._setOpen(this, shouldOpen, animated, role);
     }
     trapKeyboardFocus(ev, doc) {
@@ -362,7 +361,7 @@ export class Menu {
          * Menu direction animation is calculated based on the document direction.
          * If the document direction changes, we need to create a new animation.
          */
-        const isEndSide = isEnd(this.side);
+        const isEndSide = isEnd(this.side, this.el);
         if (width === this.width && this.animation !== undefined && isEndSide === this.isEndSide) {
             return;
         }
@@ -555,7 +554,6 @@ export class Menu {
         }
     }
     afterAnimation(isOpen, role) {
-        var _a;
         // keep opening/closing the menu disabled for a touch more yet
         // only add listeners/css if it's enabled and isOpen
         // and only remove listeners/css if it's not open
@@ -583,7 +581,7 @@ export class Menu {
              * it isn't already focused. Use the host element instead of the
              * first descendant to avoid the scroll position jumping around.
              */
-            const focusedMenu = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('ion-menu');
+            const focusedMenu = document.activeElement?.closest('ion-menu');
             if (focusedMenu !== this.el) {
                 this.el.focus();
             }
@@ -658,14 +656,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '29ef73894e2795e4ce23e59888ffb87faf4dd543', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '1208ba437fa58680325408d3d4c8580950da1d68', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '22e44f7bd602ee0c96550f0dfc22ac81c0033ad6', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '7bbef92fe03bb3ce4d3981eb8535aab449aab2fc' })), h("ion-backdrop", { key: '9ab8d5b61563e16b212c71c03869d4fc23a0400b', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'c0ddc957b7a7956b41901d77ae02d91e73071c55', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '6e44c56116431a024f114ab85ded1b822c942fac' })), h("ion-backdrop", { key: '5f4bbcf84444d96ec6b02bf567e1aaf95f59078d', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: 'dcade732e366f0687d92cb9ce4065b78b0b41d24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'b8869377822b082c6c4d3f16135b50b733eabf65', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -62,7 +62,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '7c4a449e239679376f38471d95fd602f9caec5f6' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '8bb5bf453280a66109198c970b678ad800c7a8cf', class: "button-inner" }, h("slot", { key: '7f78b1e7a0695f2bd600d13ca81f50dd8b965726' }, h("ion-icon", { key: '9f67f5bb06b1f03a6e5df9ecbe23ebf69fb40756', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '10be7145c614144e94c3cc0b92dc5ee4e1587fe6', type: "unbounded" }))));
+            }) }, h("button", { key: '48fc0a7011414b60dd7d5136f247e937ae4bb8c8', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '8c712f28c5afd345e403a9afc525931112852708', class: "button-inner" }, h("slot", { key: 'dd872325e42baf435188478c8d1cfc416075089d' }, h("ion-icon", { key: 'a4f02bdb715b07792c17e12c7837873d70171f88', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '564e2a8a804e14d1135502f7b17d8b7b9862e81b', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -31,10 +31,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '55135952f3a42cb5d21916dfb7b169d894b381e3', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '76d21ea6493b8161860c941e3754fef1e20395cc', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: 'e8ecb59a6ec075b07e2a1b8fcdf7df3dd9975a03' })));
+            } }, h("slot", { key: '9383610fd3105e1928a38788eb596e313e2b07f8' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/animations/ios.enter.js

@@ -26,7 +26,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')).beforeStyles({ opacity: 1 });
     // The content animation is only added if scrolling is enabled for
     // all the breakpoints.
-    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page'));
     const baseAnimation = createAnimation('entering-base')
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')

package/dist/collection/components/modal/animations/md.enter.js

@@ -28,7 +28,7 @@ export const mdEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
     // The content animation is only added if scrolling is enabled for
     // all the breakpoints.
-    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page'));
     const baseAnimation = createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')