voyager-ionic-core 8.8.12 → 9.0.1

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

@@ -206,12 +206,6 @@
 }
 
 .input-clear-icon {
-  -webkit-margin-start: auto;
-  margin-inline-start: auto;
-  -webkit-margin-end: auto;
-  margin-inline-end: auto;
-  margin-top: auto;
-  margin-bottom: auto;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -269,14 +263,47 @@
   line-height: normal;
 }
 
+.input-control {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  /**
+  * Allows the control to shrink below the label and input's intrinsic
+  * width, preventing the start and end slots from being pushed outside
+  * the wrapper. The label and input truncate independently, so it can
+  * use whatever space remains after accounting for the slots.
+  */
+  min-width: 0;
+}
+
 .native-wrapper {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   width: 100%;
 }
 
+/**
+ * When the label sits beside the input, the label should size to its content
+ * and the input should take the remaining space. A zero flex basis prevents
+ * the input from requesting its full width and forcing the label to shrink.
+ * Stacked and floating placements use a column layout, so their flex basis
+ * controls height instead and does not need to be overridden.
+ */
+:host(.input-label-placement-start) .native-wrapper,
+:host(.input-label-placement-end) .native-wrapper,
+:host(.input-label-placement-fixed) .native-wrapper {
+  flex: 1 1 0;
+}
+
+.input-start,
+.input-end {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -377,6 +404,12 @@
    */
   display: flex;
   align-items: center;
+  /**
+  * Allows the label to shrink below its intrinsic content width.
+  * Without this the label keeps its full width and can push the
+  * input and end slot outside the wrapper.
+  */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the input.
@@ -395,6 +428,18 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -438,7 +483,7 @@
  * Label is on the left of the input in LTR and
  * on the right in RTL.
  */
-:host(.input-label-placement-start) .input-wrapper {
+:host(.input-label-placement-start) .input-control {
   flex-direction: row;
 }
 
@@ -460,7 +505,7 @@
  * Label is on the right of the input in LTR and
  * on the left in RTL.
  */
-:host(.input-label-placement-end) .input-wrapper {
+:host(.input-label-placement-end) .input-control {
   flex-direction: row-reverse;
 }
 
@@ -508,10 +553,9 @@
  * Floating: Label sits over the input when the input has no
  * value and is blurred. Label sits above the input and is scaled
  * down when the input is focused or has a value.
- *
  */
-:host(.input-label-placement-stacked) .input-wrapper,
-:host(.input-label-placement-floating) .input-wrapper {
+:host(.input-label-placement-stacked) .input-control,
+:host(.input-label-placement-floating) .input-control {
   flex-direction: column;
   align-items: start;
 }
@@ -542,18 +586,6 @@
   }
 }
 
-/**
- * Ensures the input does not
- * overlap the label.
- */
-:host(.input-label-placement-stacked) input,
-:host(.input-label-placement-floating) input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
-}
-
 /**
  * This makes the label sit over the input
  * when the input is blurred and has no value.
@@ -906,6 +938,14 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  /**
+   * The measured width of the start container, as a negative offset
+   * in LTR and a positive one in RTL. Written to the host by the
+   * start container controller, so renaming it here requires renaming
+   * it there too. Declared with a default so the label is positioned
+   * correctly before the first measurement runs.
+   */
+  --internal-start-container-adjustment: 0px;
   min-height: 56px;
 }
 
@@ -960,15 +1000,25 @@
   border-bottom: none;
 }
 
+/**
+ * The resting label is positioned relative to the control so it can size to
+ * the space between the start and end slots. When floating, the label needs
+ * to escape the control and position itself relative to the wrapper instead.
+ */
+:host(.input-fill-outline:not(.label-floating)) .input-control {
+  position: relative;
+}
+
 :host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper,
 :host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
   position: absolute;
   /**
-   * Label text should not extend
-   * beyond the bounds of the input.
+   * While resting this is the width of the text input, which already
+   * excludes the start and end slots. Once the label floats the
+   * containing block becomes the wrapper and the rule below takes over.
    */
-  max-width: calc(100% - var(--padding-start) - var(--padding-end));
+  max-width: 100%;
 }
 :host-context([dir=rtl]):host(.input-fill-outline.input-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).input-fill-outline.input-label-placement-stacked .label-text-wrapper, :host-context([dir=rtl]):host(.input-fill-outline.input-label-placement-floating) .label-text-wrapper, :host-context([dir=rtl]).input-fill-outline.input-label-placement-floating .label-text-wrapper {
   transform-origin: right top;
@@ -993,7 +1043,7 @@
  * This makes the label sit above the input.
  */
 :host(.label-floating.input-fill-outline) .label-text-wrapper {
-  transform: translateY(-32%) scale(0.75);
+  transform: translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -1005,19 +1055,6 @@
   max-width: calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75);
 }
 
-/**
- * This ensures that the input does not
- * overlap the floating label while still
- * remaining visually centered.
- */
-:host(.input-fill-outline.input-label-placement-stacked) input,
-:host(.input-fill-outline.input-label-placement-floating) input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
 :host(.input-fill-outline) .input-outline-container {
   left: 0;
   right: 0;
@@ -1190,8 +1227,7 @@
 }
 
 .input-clear-icon ion-icon {
-  width: 22px;
-  height: 22px;
+  font-size: 22px;
 }
 
 :host(.input-disabled) {

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.ios.css

@@ -387,6 +387,17 @@ a {
   flex-direction: column;
 }
 
+:host(.item-focus-indicator-room) .input-wrapper {
+  -webkit-margin-start: -12px;
+  margin-inline-start: -12px;
+  -webkit-margin-end: -12px;
+  margin-inline-end: -12px;
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+}
+
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
 :host(.item-multiple-inputs) ::slotted(ion-radio) {

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

@@ -1,11 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, forceUpdate, h } from "@stencil/core";
+import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForward } from "ionicons/icons";
 import { getIonMode } from "../../global/ionic-global";
+const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -23,9 +24,11 @@ export class Item {
         this.labelColorStyles = {};
         this.itemStyles = new Map();
         this.inheritedAriaAttributes = {};
+        this.didLoad = false;
         this.multipleInputs = false;
         this.focusable = true;
         this.isInteractive = false;
+        this.hasSlottedIndicatorControl = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -51,6 +54,7 @@ export class Item {
         this.updateInteractivityOnSlotChange = () => {
             this.setIsInteractive();
             this.setMultipleInputs();
+            this.setHasSlottedIndicatorControl();
         };
     }
     buttonChanged() {
@@ -92,6 +96,14 @@ export class Item {
     }
     connectedCallback() {
         this.hasStartEl();
+        /**
+         * `componentDidLoad` doesn't run again when the item is moved, so re-arm the
+         * observer and re-read the light DOM, which may have changed while detached.
+         */
+        if (this.didLoad) {
+            this.watchForIndicatorControls();
+            this.updateInteractivityOnSlotChange();
+        }
     }
     componentWillLoad() {
         this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
@@ -100,8 +112,17 @@ export class Item {
         raf(() => {
             this.setMultipleInputs();
             this.setIsInteractive();
+            this.setHasSlottedIndicatorControl();
             this.focusable = this.isFocusable();
         });
+        this.watchForIndicatorControls();
+        this.didLoad = true;
+    }
+    disconnectedCallback() {
+        if (this.indicatorControlObserver) {
+            this.indicatorControlObserver.disconnect();
+            this.indicatorControlObserver = undefined;
+        }
     }
     totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
@@ -135,6 +156,49 @@ export class Item {
         const { covers, inputs, clickables } = this.totalNestedInputs();
         this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
     }
+    /**
+     * `slotchange` only fires for nodes assigned directly to a slot, so a control
+     * inside a slotted wrapper (`<div><ion-toggle>`) never reaches
+     * `updateInteractivityOnSlotChange`. The light DOM is observed instead.
+     *
+     * The callback runs the whole handler because a control below a wrapper can also
+     * make the item multi-input, which is what decides whether the controls draw
+     * their own indicator at all.
+     *
+     * `:host(:has())` would avoid the observer, but the `:has()` fallback in
+     * `core.scss` is still open as FW-6106 and it's unreliable for slotted content
+     * in Android WebView. Worth revisiting when FW-6106 closes.
+     */
+    watchForIndicatorControls() {
+        if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // `Node.moveBefore` relocates the item without either callback firing, so
+        // never leave a previous observer behind
+        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
+            if (records.some(touchesIndicatorControl)) {
+                this.updateInteractivityOnSlotChange();
+            }
+        });
+        this.indicatorControlObserver.observe(this.el, { childList: true, subtree: true });
+    }
+    // These controls paint a focus indicator that overhangs their own bounds, and
+    // only the default slot is clipped, so only a control there needs extra room.
+    setHasSlottedIndicatorControl() {
+        const controls = this.el.querySelectorAll(INDICATOR_CONTROL_SELECTOR);
+        this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
+            // The control isn't always a direct child, so walk up to the element the item
+            // slots, which is the one carrying the slot name.
+            let slotted = control;
+            while (slotted !== null && slotted.parentElement !== this.el) {
+                slotted = slotted.parentElement;
+            }
+            return slotted !== null && !slotted.getAttribute('slot');
+        });
+    }
     // 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
@@ -236,19 +300,30 @@ 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: '3977491399280a2aa3f796f0549235f3dc8b5681', "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,
-                'ion-activatable': canActivate,
-                'ion-focusable': this.focusable,
-                'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: '8aff72457004553e83d74a4dda2f9a6b8cf523d7' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'aba9a0f2ad101be6598f364c83236ca3de437a04', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '5e7851e49959e4ed114fcd51cb167db9bd8c0f00', class: "item-inner", part: "inner" }, h("div", { key: 'eee6511845d8459450ca856819839d83cd507c0c', class: "input-wrapper", part: "container" }, h("slot", { key: '76e13f86cd144951b1999eb333a2027b42cdf6e2', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'b264f7b4c367e7700a9a05343177abf7b17045d8', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '66b930bdfebb55ea0b2e784a1c902eb6c64b2370', 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: '06ab8e87917b545f3c221602b9b6d8004a1895ad' }))));
+        /**
+         * A control in a single-input item defers its indicator to the item, so there's
+         * nothing to clip and nothing to make room for. It draws its own indicator in a
+         * 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: {
+                ...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"; }
@@ -543,7 +618,8 @@ export class Item {
         return {
             "multipleInputs": {},
             "focusable": {},
-            "isInteractive": {}
+            "isInteractive": {},
+            "hasSlottedIndicatorControl": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -569,3 +645,11 @@ export class Item {
             }];
     }
 }
+const isIndicatorControl = (node) => {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+    }
+    const el = node;
+    return el.matches(INDICATOR_CONTROL_SELECTOR) || el.querySelector(INDICATOR_CONTROL_SELECTOR) !== null;
+};
+const touchesIndicatorControl = (record) => Array.from(record.addedNodes).some(isIndicatorControl) || Array.from(record.removedNodes).some(isIndicatorControl);

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

@@ -387,6 +387,17 @@ a {
   flex-direction: column;
 }
 
+:host(.item-focus-indicator-room) .input-wrapper {
+  -webkit-margin-start: -12px;
+  margin-inline-start: -12px;
+  -webkit-margin-end: -12px;
+  margin-inline-end: -12px;
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+}
+
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
 :host(.item-multiple-inputs) ::slotted(ion-radio) {

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,