voyager-ionic-core 8.6.1 → 8.7.2

package/dist/collection/components/datetime/datetime.js

@@ -794,6 +794,8 @@ export class Datetime {
      * Confirms the selected datetime value, updates the
      * `value` property, and optionally closes the popover
      * or modal that the datetime was presented in.
+     *
+     * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async confirm(closeOverlay = false) {
         const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -827,6 +829,8 @@ export class Datetime {
      * Resets the internal state of the datetime but does not update the value.
      * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
      * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
+     *
+     * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
      */
     async reset(startDate) {
         this.processValue(startDate);
@@ -836,6 +840,8 @@ export class Datetime {
      * optionally closes the popover
      * or modal that the datetime was
      * presented in.
+     *
+     * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async cancel(closeOverlay = false) {
         this.ionCancel.emit();
@@ -1451,6 +1457,7 @@ export class Datetime {
                     if (el) {
                         el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                         el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
+                        el.style.setProperty('border', `${dateStyle ? dateStyle.border : ''}`, 'important');
                     }
                 }, tabindex: "-1", "data-day": day, "data-month": _month, "data-year": _year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
                     'calendar-day-padding': isCalendarPadding,
@@ -1649,7 +1656,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1659,7 +1666,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -2475,7 +2482,7 @@ export class Datetime {
                     "parameters": [{
                             "name": "closeOverlay",
                             "type": "boolean",
-                            "docs": ""
+                            "docs": "If `true`, closes the parent overlay. Defaults to `false`."
                         }],
                     "references": {
                         "Promise": {
@@ -2487,7 +2494,10 @@ export class Datetime {
                 },
                 "docs": {
                     "text": "Confirms the selected datetime value, updates the\n`value` property, and optionally closes the popover\nor modal that the datetime was presented in.",
-                    "tags": []
+                    "tags": [{
+                            "name": "param",
+                            "text": "closeOverlay If `true`, closes the parent overlay. Defaults to `false`."
+                        }]
                 }
             },
             "reset": {
@@ -2496,7 +2506,7 @@ export class Datetime {
                     "parameters": [{
                             "name": "startDate",
                             "type": "string | undefined",
-                            "docs": ""
+                            "docs": "A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to."
                         }],
                     "references": {
                         "Promise": {
@@ -2508,7 +2518,10 @@ export class Datetime {
                 },
                 "docs": {
                     "text": "Resets the internal state of the datetime but does not update the value.\nPassing a valid ISO-8601 string will reset the state of the component to the provided date.\nIf no value is provided, the internal state will be reset to the clamped value of the min, max and today.",
-                    "tags": []
+                    "tags": [{
+                            "name": "param",
+                            "text": "startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to."
+                        }]
                 }
             },
             "cancel": {
@@ -2517,7 +2530,7 @@ export class Datetime {
                     "parameters": [{
                             "name": "closeOverlay",
                             "type": "boolean",
-                            "docs": ""
+                            "docs": "If `true`, closes the parent overlay. Defaults to `false`."
                         }],
                     "references": {
                         "Promise": {
@@ -2529,7 +2542,10 @@ export class Datetime {
                 },
                 "docs": {
                     "text": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
-                    "tags": []
+                    "tags": [{
+                            "name": "param",
+                            "text": "closeOverlay If `true`, closes the parent overlay. Defaults to `false`."
+                        }]
                 }
             }
         };

package/dist/collection/components/datetime/utils/state.js

@@ -154,6 +154,7 @@ export const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
             return {
                 textColor: matchingHighlight.textColor,
                 backgroundColor: matchingHighlight.backgroundColor,
+                border: matchingHighlight.border,
             };
         }
     }

package/dist/collection/components/input/input.ios.css

@@ -605,7 +605,7 @@
  */
 :host([disabled]) ::slotted(ion-input-password-toggle),
 :host([readonly]) ::slotted(ion-input-password-toggle) {
-  display: none;
+  visibility: hidden;
 }
 
 /**

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

@@ -605,7 +605,7 @@
  */
 :host([disabled]) ::slotted(ion-input-password-toggle),
 :host([readonly]) ::slotted(ion-input-password-toggle) {
-  display: none;
+  visibility: hidden;
 }
 
 /**

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

@@ -21,6 +21,7 @@ export class InputOTP {
         this.isKeyboardNavigation = false;
         this.inputValues = [];
         this.hasFocus = false;
+        this.previousInputValues = [];
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -121,19 +122,12 @@ export class InputOTP {
             }
         };
         /**
-         * Handles keyboard navigation and input for the OTP component.
+         * Handles keyboard navigation for the OTP component.
          *
          * Navigation:
          * - Backspace: Clears current input and moves to previous box if empty
          * - Arrow Left/Right: Moves focus between input boxes
          * - Tab: Allows normal tab navigation between components
-         *
-         * Input Behavior:
-         * - Validates input against the allowed pattern
-         * - When entering a key in a filled box:
-         *   - Shifts existing values right if there is room
-         *   - Updates the value of the input group
-         *   - Prevents default behavior to avoid automatic focus shift
          */
         this.onKeyDown = (index) => (event) => {
             const { length } = this;
@@ -188,30 +182,31 @@ export class InputOTP {
                 // Let all tab events proceed normally
                 return;
             }
-            // If the input box contains a value and the key being
-            // entered is a valid key for the input box update the value
-            // and shift the values to the right if there is room.
-            if (this.inputValues[index] && this.validKeyPattern.test(event.key)) {
-                if (!this.inputValues[length - 1]) {
-                    for (let i = length - 1; i > index; i--) {
-                        this.inputValues[i] = this.inputValues[i - 1];
-                        this.inputRefs[i].value = this.inputValues[i] || '';
-                    }
-                }
-                this.inputValues[index] = event.key;
-                this.inputRefs[index].value = event.key;
-                this.updateValue(event);
-                // Prevent default to avoid the browser from
-                // automatically moving the focus to the next input
-                event.preventDefault();
-            }
         };
+        /**
+         * Processes all input scenarios for each input box.
+         *
+         * This function manages:
+         * 1. Autofill handling
+         * 2. Input validation
+         * 3. Full selection replacement or typing in an empty box
+         * 4. Inserting in the middle with available space (shifting)
+         * 5. Single character replacement
+         */
         this.onInput = (index) => (event) => {
+            var _a, _b;
             const { length, validKeyPattern } = this;
-            const value = event.target.value;
-            // If the value is longer than 1 character (autofill), split it into
-            // characters and filter out invalid ones
-            if (value.length > 1) {
+            const input = event.target;
+            const value = input.value;
+            const previousValue = this.previousInputValues[index] || '';
+            // 1. Autofill handling
+            // If the length of the value increases by more than 1 from the previous
+            // value, treat this as autofill. This is to prevent the case where the
+            // user is typing a single character into an input box containing a value
+            // as that will trigger this function with a value length of 2 characters.
+            const isAutofill = value.length - previousValue.length > 1;
+            if (isAutofill) {
+                // Distribute valid characters across input boxes
                 const validChars = value
                     .split('')
                     .filter((char) => validKeyPattern.test(char))
@@ -226,8 +221,10 @@ export class InputOTP {
                         });
                     });
                 }
-                // Update the value of the input group and emit the input change event
-                this.value = validChars.join('');
+                for (let i = 0; i < length; i++) {
+                    this.inputValues[i] = validChars[i] || '';
+                    this.inputRefs[i].value = validChars[i] || '';
+                }
                 this.updateValue(event);
                 // Focus the first empty input box or the last input box if all boxes
                 // are filled after a small delay to ensure the input boxes have been
@@ -237,20 +234,79 @@ export class InputOTP {
                     const nextIndex = validChars.length < length ? validChars.length : length - 1;
                     (_a = this.inputRefs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
                 }, 20);
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // Only allow input if it matches the pattern
-            if (value.length > 0 && !validKeyPattern.test(value)) {
-                this.inputRefs[index].value = '';
-                this.inputValues[index] = '';
+            // 2. Input validation
+            // If the character entered is invalid (does not match the pattern),
+            // restore the previous value and exit
+            if (value.length > 0 && !validKeyPattern.test(value[value.length - 1])) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // For single character input, fill the current box
-            this.inputValues[index] = value;
-            this.updateValue(event);
-            if (value.length > 0) {
+            // 3. Full selection replacement or typing in an empty box
+            // If the user selects all text in the input box and types, or if the
+            // input box is empty, replace only this input box. If the box is empty,
+            // move to the next box, otherwise stay focused on this box.
+            const isAllSelected = input.selectionStart === 0 && input.selectionEnd === value.length;
+            const isEmpty = !this.inputValues[index];
+            if (isAllSelected || isEmpty) {
+                this.inputValues[index] = value;
+                input.value = value;
+                this.updateValue(event);
                 this.focusNext(index);
+                this.previousInputValues = [...this.inputValues];
+                return;
             }
+            // 4. Inserting in the middle with available space (shifting)
+            // If typing in a filled input box and there are empty boxes at the end,
+            // shift all values starting at the current box to the right, and insert
+            // the new character at the current box.
+            const hasAvailableBoxAtEnd = this.inputValues[this.inputValues.length - 1] === '';
+            if (this.inputValues[index] && hasAvailableBoxAtEnd && value.length === 2) {
+                // Get the inserted character (from event or by diffing value/previousValue)
+                let newChar = event.data;
+                if (!newChar) {
+                    newChar = value.split('').find((c, i) => c !== previousValue[i]) || value[value.length - 1];
+                }
+                // Validate the new character before shifting
+                if (!validKeyPattern.test(newChar)) {
+                    input.value = this.inputValues[index] || '';
+                    this.previousInputValues = [...this.inputValues];
+                    return;
+                }
+                // Shift values right from the end to the insertion point
+                for (let i = this.inputValues.length - 1; i > index; i--) {
+                    this.inputValues[i] = this.inputValues[i - 1];
+                    this.inputRefs[i].value = this.inputValues[i] || '';
+                }
+                this.inputValues[index] = newChar;
+                this.inputRefs[index].value = newChar;
+                this.updateValue(event);
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            // 5. Single character replacement
+            // Handles replacing a single character in a box containing a value based
+            // on the cursor position. We need the cursor position to determine which
+            // character was the last character typed. For example, if the user types "2"
+            // 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 newCharIndex = cursorPos - 1;
+            const newChar = (_b = value[newCharIndex]) !== null && _b !== void 0 ? _b : value[0];
+            // Check if the new character is valid before updating the value
+            if (!validKeyPattern.test(newChar)) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            this.inputValues[index] = newChar;
+            input.value = newChar;
+            this.updateValue(event);
+            this.previousInputValues = [...this.inputValues];
         };
         /**
          * Handles pasting text into the input OTP component.
@@ -260,7 +316,7 @@ export class InputOTP {
          * the next empty input after pasting.
          */
         this.onPaste = (event) => {
-            var _a, _b, _c;
+            var _a, _b;
             const { inputRefs, length, validKeyPattern } = this;
             event.preventDefault();
             const pastedText = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
@@ -287,13 +343,8 @@ export class InputOTP {
             this.updateValue(event);
             // Focus the next empty input after pasting
             // If all boxes are filled, focus the last input
-            const nextEmptyIndex = validChars.length;
-            if (nextEmptyIndex < length) {
-                (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-            else {
-                (_c = inputRefs[length - 1]) === null || _c === void 0 ? void 0 : _c.focus();
-            }
+            const nextEmptyIndex = validChars.length < length ? validChars.length : length - 1;
+            (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
         };
     }
     /**
@@ -432,6 +483,7 @@ export class InputOTP {
         });
         // Update the value without emitting events
         this.value = this.inputValues.join('');
+        this.previousInputValues = [...this.inputValues];
     }
     /**
      * Updates the value of the input group.
@@ -553,7 +605,7 @@ export class InputOTP {
         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: 'df8fca036cedea0812185a02e3b655d7d76285e0', class: createColorClasses(color, {
+        return (h(Host, { key: 'f15a29fb17b681ef55885ca36d3d5f899cbaca83', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -561,10 +613,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: '831be3f939cf037f0eb8d7e37e0afd4ef9a3c2c5', 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: '5311fedc34f7af3efd5f69e5a3d768055119c4f1', class: {
+            }) }, h("div", Object.assign({ key: 'd7e1d4edd8aafcf2ed4313301287282e90fc7e82', 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: '3724a3159d02860971879a906092f9965f5a7c47', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: '9e8afa2f7fa76c3092582dc27770fdf565a1b9ba' }))));
+            } }, h("slot", { key: '11baa2624926a08274508afe0833d9237a8dc35c' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }
@@ -849,7 +901,8 @@ export class InputOTP {
     static get states() {
         return {
             "inputValues": {},
-            "hasFocus": {}
+            "hasFocus": {},
+            "previousInputValues": {}
         };
     }
     static get events() {

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

@@ -23,6 +23,7 @@ export class Item {
         this.inheritedAriaAttributes = {};
         this.multipleInputs = false;
         this.focusable = true;
+        this.isInteractive = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -44,6 +45,11 @@ export class Item {
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         this.type = 'button';
+        // slot change listener updates state to reflect how/if item should be interactive
+        this.updateInteractivityOnSlotChange = () => {
+            this.setIsInteractive();
+            this.setMultipleInputs();
+        };
     }
     buttonChanged() {
         // Update the focusable option when the button option is changed
@@ -91,13 +97,11 @@ export class Item {
     componentDidLoad() {
         raf(() => {
             this.setMultipleInputs();
+            this.setIsInteractive();
             this.focusable = this.isFocusable();
         });
     }
-    // If the item contains multiple clickable elements and/or inputs, then the item
-    // should not have a clickable input cover over the entire item to prevent
-    // interfering with their individual click events
-    setMultipleInputs() {
+    totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
         const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
         // The following elements can accept focus alongside the previous elements
@@ -106,6 +110,17 @@ export class Item {
         const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
         // The following elements should also stay clickable when an input with cover is present
         const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
+        return {
+            covers,
+            inputs,
+            clickables,
+        };
+    }
+    // If the item contains multiple clickable elements and/or inputs, then the item
+    // should not have a clickable input cover over the entire item to prevent
+    // interfering with their individual click events
+    setMultipleInputs() {
+        const { covers, inputs, clickables } = this.totalNestedInputs();
         // Check for multiple inputs to change the position of the input cover to relative
         // for all of the covered inputs above
         this.multipleInputs =
@@ -113,6 +128,11 @@ export class Item {
                 covers.length + clickables.length > 1 ||
                 (covers.length > 0 && this.isClickable());
     }
+    setIsInteractive() {
+        // If item contains any interactive children, set isInteractive to `true`
+        const { covers, inputs, clickables } = this.totalNestedInputs();
+        this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -214,7 +234,7 @@ export class Item {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (h(Host, { key: '15e7d3b674c25232bc2d51573b291c72548690e5', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '24b59935bd8db8b0b7f940582455a42b82cbf762', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -226,7 +246,7 @@ export class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'f27ae647501e29db554efe8f12f498b165d1dbf6' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'ba039a321df0e4bd5ce11e7a6e7e174c8623b112', name: "start" }), h("div", { key: 'e67fdf4ad9086d855da8402ca04ffe292cf6ce67', class: "item-inner" }, h("div", { key: '2434348a0b3f10052a340c57a7ac127ddc851729', class: "input-wrapper" }, h("slot", { key: '3e27090ae4dab734541b3fd2c94de0f98c0f0030' })), h("slot", { key: '52dc633b60fe612d48d2efffbf2c4c62692bef85', name: "end" }), showDetail && (h("ion-icon", { key: '4fb7397dc8cf4cecb82f19a6151f85112b73992b', 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: '09b2413a7a484ecd8ffb00805223727da4d4e344' }))));
+            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'fd77b6e5f3eb2e1857a0cdd45562d71eabd30255' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: '8824ac8395aafa3d63c92f2128e947cac8393ac4', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '5c9127e388a432687766d86a9db91fd1663abf03', class: "item-inner" }, h("div", { key: '9dc2d2f58c4067c0143b3963334c346c3c7f77df', class: "input-wrapper" }, h("slot", { key: '8377d9e56dc4b1913f1346111b706e7f14c24d30', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'bc771e106174f4a84ee12e92d14df81ad7ed177d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '45336d121a097cbf71ee8a3f6b554745ba5e0bbf', 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: '197e244ae3bffebfa6ac9bfe7658d12e1af0ecb1' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -518,7 +538,8 @@ export class Item {
     static get states() {
         return {
             "multipleInputs": {},
-            "focusable": {}
+            "focusable": {},
+            "isInteractive": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -129,16 +129,15 @@ export class Loading {
     }
     /**
      * Dismiss the loading overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
      * @param role The role of the element that is dismissing the loading.
      * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the loading.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * clicked to dismiss the loading. Some examples include:
+     * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -180,9 +179,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', 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: '1fd5fd8581d59eec321e534f9116f3ec0501010a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'b4028045b0c8fbb9946136d85d939d55120b867c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'b045fb0e61cc28e8163d45be18b431918dc27c80', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '2cf9df796f987d1251b3599d10a48ed87a1d0eb9', class: "loading-spinner" }, h("ion-spinner", { key: '371cd41655402326adcb1e2fe1481009a83243b2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '2a5e5e66d22ee4c1cef0c93815ef023d47e7a8eb', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, h("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }
@@ -744,7 +743,7 @@ export class Loading {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading. Some examples include:\n`\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {
@@ -755,13 +754,13 @@ export class Loading {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the loading overlay after it has been presented.",
+                    "text": "Dismiss the loading overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading. Some examples include:\n`\"cancel\"`, `\"destructive\"`, `\"selected\"`, and `\"backdrop\"`."
                         }]
                 }
             },