voyager-ionic-core 8.8.12 → 8.8.17

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/modal/gestures/sheet.js

@@ -224,6 +224,13 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         return true;
     };
     const onStart = (detail) => {
+        var _a;
+        /**
+         * Firefox automatically selects the header text during drag
+         * due to the focusable wrapper (tabindex="-1"). Remove any
+         * selection that may have occurred.
+         */
+        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
         /**
          * If canDismiss is anything other than `true`
          * then users should be able to swipe down

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -96,7 +96,14 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
         return false;
     };
     const onStart = (detail) => {
+        var _a;
         const { deltaY } = detail;
+        /**
+         * Firefox automatically selects the header text during drag
+         * due to the focusable wrapper (tabindex="-1"). Remove any
+         * selection that may have occurred.
+         */
+        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
         /**
          * Get the initial scrollY value so
          * that we can correctly reset the scrollY

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

@@ -126,6 +126,14 @@ ion-backdrop {
   z-index: 10;
 }
 
+/**
+ * The wrapper receives programmatic focus for screen readers but should not
+ * show a visible focus ring, which is meant only for keyboard navigation.
+ */
+.modal-wrapper {
+  outline: none;
+}
+
 .modal-shadow {
   position: absolute;
   background: transparent;

package/dist/collection/components/modal/modal.js

@@ -191,9 +191,15 @@ export class Modal {
          * if it exists and is focusable, otherwise let the focus trap handle it.
          */
         this.onModalFocus = (ev) => {
+            var _a;
             const { dragHandleEl, el } = this;
-            // Only handle focus if the modal itself was focused (not a child element)
-            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+            /**
+             * Shadow DOM focus is retargeted to the host, so `ev.target === el` is also
+             * true when a shadow child (the dialog wrapper present() focuses) is focused.
+             * shadowRoot's activeElement is null only when the host was focused directly,
+             * so redirect to the handle only then and leave present()'s wrapper focus intact.
+             */
+            if (ev.target === el && ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
                 dragHandleEl.focus();
             }
         };
@@ -1162,20 +1168,26 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: 'ab93657f4a5b4c97168d292b398d975e4b5b4af4', "no-router": true,
+        return (h(Host, Object.assign({ key: 'bad33199a939bd1e289b3b3f936c676ba403224f', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), h("div", Object.assign({ key: '3f6c61ba60b063592784d76a9594073b3bf210a9',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'd098688a65fb2d1befb255f0e59fd4c00b401092', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '96cd2e59a7d1c0de7c9afb8f8d366367b09fbc93', class: "modal-shadow" }), h("div", Object.assign({ key: '882ccc39ce344a2c51d6508c11c3f40b26eaf2a7',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
+  
+              tabIndex={-1} is required so present() can move focus to this
+              element (which carries the dialog role) instead of the role-less
+              host. role="dialog" alone does not make an element focusable, so
+              without the tabindex focus() would be a no-op and screen readers
+              may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '7f66b4fdb3dec61a2b9aec4e9dbacf5d013d637c', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '714d9904fcc8105b21e2bb66cdc032bffd685d72', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '2dfaaebe3d0b2a46be1224c25f9ab89bf1744332', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '79dfbeb3fe5eee7dc3a243ad880d3f63184f3ab7', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -126,6 +126,14 @@ ion-backdrop {
   z-index: 10;
 }
 
+/**
+ * The wrapper receives programmatic focus for screen readers but should not
+ * show a visible focus ring, which is meant only for keyboard navigation.
+ */
+.modal-wrapper {
+  outline: none;
+}
+
 .modal-shadow {
   position: absolute;
   background: transparent;

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

@@ -130,6 +130,17 @@ input {
   width: auto;
 }
 
+:host(.ion-focused) .radio-icon::after {
+  border-radius: var(--inner-border-radius);
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: var(--ion-color-primary-tint, #1a65eb);
+  content: "";
+  opacity: 0.2;
+}
+
 .radio-wrapper {
   display: flex;
   position: relative;
@@ -456,21 +467,6 @@ input {
   opacity: 0.3;
 }
 
-:host(.ion-focused) .radio-icon::after {
-  border-radius: var(--inner-border-radius);
-  top: -8px;
-  display: block;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
-  content: "";
-  opacity: 0.2;
-}
-:host(.ion-focused) .radio-icon::after {
-  inset-inline-start: -9px;
-}
-
 .native-wrapper .radio-icon {
   width: 0.9375rem;
   height: 1.5rem;

package/dist/collection/components/radio/radio.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from "@stencil/core";
-import { isOptionSelected } from "../../utils/forms/index";
+import { Host, forceUpdate, h } from "@stencil/core";
+import { createItemMultipleInputsObserver, isOptionSelected } from "../../utils/forms/index";
 import { addEventListener, removeEventListener } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -118,6 +118,7 @@ export class Radio {
             this.updateState();
             addEventListener(radioGroup, 'ionValueChange', this.updateState);
         }
+        this.itemFocusObserver = createItemMultipleInputsObserver(this.el, () => forceUpdate(this));
     }
     disconnectedCallback() {
         const radioGroup = this.radioGroup;
@@ -125,6 +126,10 @@ export class Radio {
             removeEventListener(radioGroup, 'ionValueChange', this.updateState);
             this.radioGroup = null;
         }
+        if (this.itemFocusObserver) {
+            this.itemFocusObserver.disconnect();
+            this.itemFocusObserver = undefined;
+        }
     }
     get hasLabel() {
         return this.el.textContent !== '';
@@ -136,7 +141,8 @@ export class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
+        return (h(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -144,13 +150,15 @@ export class Radio {
                 [`radio-justify-${justify}`]: justify !== undefined,
                 [`radio-alignment-${alignment}`]: alignment !== undefined,
                 [`radio-label-placement-${labelPlacement}`]: true,
-                // Focus and active styling should not apply when the radio is in an item
+                // A single-input item has the input cover and draws the indicator itself.
+                // A multi-input item has no cover, so each control draws its own. Active
+                // styling stays suppressed either way.
                 'ion-activatable': !inItem,
-                'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
+                'ion-focusable': !inItem || inMultipleInputsItem,
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'fb358e14faf37142ccad169adb729f3129371406', class: "radio-wrapper" }, h("div", { key: '844ab615aadf6eef46368ad060afaca9c4222cc1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), h("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     static get is() { return "ion-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -130,6 +130,17 @@ input {
   width: auto;
 }
 
+:host(.ion-focused) .radio-icon::after {
+  border-radius: var(--inner-border-radius);
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  background: var(--ion-color-primary-tint, #1a65eb);
+  content: "";
+  opacity: 0.2;
+}
+
 .radio-wrapper {
   display: flex;
   position: relative;
@@ -477,17 +488,6 @@ input {
   opacity: 0.63;
 }
 
-:host(.ion-focused) .radio-icon::after {
-  border-radius: var(--inner-border-radius);
-  display: block;
-  position: absolute;
-  width: 36px;
-  height: 36px;
-  background: var(--ion-color-primary-tint, #1a65eb);
-  content: "";
-  opacity: 0.2;
-}
-
 .native-wrapper .radio-icon {
   width: 1.25rem;
   height: 1.25rem;

package/dist/collection/components/refresher/refresher.js

@@ -203,7 +203,16 @@ export class Refresher {
             });
         };
         this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-        this.gesture = (await import('../../utils/gesture')).createGesture({
+        const { createGesture } = await import('../../utils/gesture');
+        /**
+         * Awaiting the dynamic import yields to the event loop, so the component can
+         * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+         * missing scrollEl here means there is nothing left to attach a gesture to.
+         */
+        if (!this.scrollEl) {
+            return;
+        }
+        this.gesture = createGesture({
             el: this.scrollEl,
             gestureName: 'refresher',
             gesturePriority: 31,
@@ -263,7 +272,16 @@ export class Refresher {
                 refreshingCircle.style.setProperty('animation-delay', '-655ms');
             });
         }
-        this.gesture = (await import('../../utils/gesture')).createGesture({
+        const { createGesture } = await import('../../utils/gesture');
+        /**
+         * Awaiting the dynamic import yields to the event loop, so the component can
+         * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+         * missing scrollEl here means there is nothing left to attach a gesture to.
+         */
+        if (!this.scrollEl) {
+            return;
+        }
+        this.gesture = createGesture({
             el: this.scrollEl,
             gestureName: 'refresher',
             gesturePriority: 31,
@@ -397,7 +415,16 @@ export class Refresher {
                 this.setupNativeRefresher(contentEl);
             }
             else {
-                this.gesture = (await import('../../utils/gesture')).createGesture({
+                const { createGesture } = await import('../../utils/gesture');
+                /**
+                 * Awaiting the dynamic import yields to the event loop, so the component can
+                 * disconnect before it resolves. A disconnected contentEl means there is
+                 * nothing left to attach a gesture to.
+                 */
+                if (!contentEl.isConnected) {
+                    return;
+                }
+                this.gesture = createGesture({
                     el: contentEl,
                     gestureName: 'refresher',
                     gesturePriority: 31,
@@ -716,7 +743,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '80fa313b0d77161680836bdd6aa334d02c549b41', slot: "fixed", class: {
+        return (h(Host, { key: '2eaca7f85b3d40418f213077434e519dfacd9d42', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/collection/components/select/select.js

@@ -836,8 +836,9 @@ export class Select {
          *
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '5f4ee901b65554eacc9fa52230d06b1a5ff1247c', onClick: this.onClick, class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' ||
+            (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
+        return (h(Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -855,7 +856,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'd56d89b5b58da2b5eaebada9d1be58ca45c67806', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'bc8bf089c693781ad5b3a5db76a12223867d748e', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'e1c12b96f1573eb192608c458ed1f3463174cd89', name: "start" }), h("div", { key: '6ee5e3900d8e462f175649b502ac6faa2f2b9909', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'faeaea34aad412e1458beab95d4b1b9ca7b87c41', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'aeff51e51c990844869eff9940575ce6b2223135', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'db13f76b384a7a7461c1ad752108eadf9c0213be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '2fb0e57bd596c0f525be79293b7da4aca55a9385', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'cd694c36242789a89461ed3412af9891ad68411b', name: "start" }), h("div", { key: 'fdf62911be54f4ab29eb3c2eb153f082e76a8f49', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'a32f5c4b101d4d6ad45870f4c4446960009377f5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '61f792024a5f221ef4f28a3c249bd3a0de5edeab', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -6,7 +6,6 @@ import { attachComponent } from "../../utils/framework-delegate";
 import { printIonError } from "../../utils/logging/index";
 export class Tab {
     constructor() {
-        this.loaded = false;
         /** @internal */
         this.active = false;
     }
@@ -30,27 +29,35 @@ export class Tab {
     }
     changeActive(isActive) {
         if (isActive) {
-            this.prepareLazyLoaded();
+            this.prepareLazyLoaded().catch((e) => {
+                printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
+            });
         }
     }
     prepareLazyLoaded() {
-        if (!this.loaded && this.component != null) {
-            this.loaded = true;
-            try {
-                return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
-            }
-            catch (e) {
-                printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
-            }
+        if (this.component == null) {
+            return Promise.resolve(undefined);
+        }
+        /**
+         * The attach is cached so that concurrent activations share a single
+         * attempt and later activations reuse the result. The cache is cleared
+         * only when the attach fails, so a tab whose component failed to load
+         * can be retried the next time it is activated.
+         */
+        if (this.loadPromise === undefined) {
+            this.loadPromise = attachComponent(this.delegate, this.el, this.component, ['ion-page']).catch((e) => {
+                this.loadPromise = undefined;
+                throw e;
+            });
         }
-        return Promise.resolve(undefined);
+        return this.loadPromise;
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: 'fbd837bad7a0632336d46a597ace23673b153e48', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: 'c35c9f96ed3a73270b23f30d9e279dcad9032e28', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: '35c218169fda826c9c1337558e0278d0c7f5f26a' })));
+            } }, h("slot", { key: '1c03523327e571f9ba140be0ccd6fe089e16a77a' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,10 +98,6 @@
   width: auto;
 }
 
-:host(.ion-focused) input {
-  border: 2px solid #5e9ed6;
-}
-
 :host(.toggle-disabled) {
   pointer-events: none;
 }
@@ -114,6 +110,10 @@ input {
   display: none;
 }
 
+:host(:focus) {
+  outline: none;
+}
+
 .toggle-wrapper {
   display: flex;
   position: relative;
@@ -635,4 +635,12 @@ input {
 
 :host(.toggle-disabled) {
   opacity: 0.3;
+}
+
+:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon {
+  box-shadow: 0 0 0 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+}
+
+:host(.ion-color.ion-focused.toggle-checked:not(.toggle-defers-indicator)) .toggle-icon {
+  box-shadow: 0 0 0 4px rgba(var(--ion-color-base-rgb), 0.2);
 }

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, h } from "@stencil/core";
-import { checkInvalidState } from "../../utils/forms/index";
+import { Build, Host, forceUpdate, h } from "@stencil/core";
+import { checkInvalidState, createItemMultipleInputsObserver } from "../../utils/forms/index";
 import { renderHiddenInput, inheritAriaAttributes } from "../../utils/helpers";
 import { hapticSelection } from "../../utils/native/haptic";
 import { isPlatform } from "../../utils/platform";
@@ -196,6 +196,10 @@ export class Toggle {
         }
         // Always set initial state
         this.isInvalid = checkInvalidState(el);
+        this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this), [
+            'item-multiple-inputs',
+            'ion-activatable',
+        ]);
     }
     componentDidLoad() {
         this.setupGesture();
@@ -206,6 +210,10 @@ export class Toggle {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        if (this.itemFocusObserver) {
+            this.itemFocusObserver.disconnect();
+            this.itemFocusObserver = undefined;
+        }
         // Clean up validation observer to prevent memory leaks.
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -286,10 +294,20 @@ export class Toggle {
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
+        const inItem = hostContext('ion-item', el);
+        const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
+        // A clickable item is a second tab stop painting the same row indicator, which
+        // `item-multiple-inputs` misses because it counts cover elements, not toggles.
+        // The attributes are matched too because the class needs the item to render.
+        const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '736e1dcfca34fd41f6f0632652e7f86d6996a232', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'e2fb9e7fb497511a8f763895fab34f20d5f8cb9e', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [mode]: true,
-                'in-item': hostContext('ion-item', el),
+                'in-item': inItem,
+                // `ion-focusable` has to stay on because it is what makes the item focusable.
+                // When the item draws the row indicator, CSS suppresses ours instead.
+                'ion-focusable': true,
+                'toggle-defers-indicator': inItem && !inMultipleInputsItem && !inClickableItem,
                 'toggle-activated': activated,
                 'toggle-checked': checked,
                 'toggle-disabled': disabled,
@@ -297,10 +315,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'e697739fd3964c1c6c23331cf7e38a9841c46a6a', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '3d500b8c1bc879591249d183c1abb3f5f26aff6b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'e38f3fe0e66b4ca434fd81514f5ef771c2960841', class: {
+            }) }, h("label", { key: 'ab95b2af493f6352abefbc8661b112796ed12035', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f5a96b8f56787d67fa4ed2c29a089cd2fa02cb00', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '3bdabb3c25ec4417b0e968bae12f7365a77acb65', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '006dd3558264d69ab020c07005b348adc4ecdd5b' }), this.renderHintText()), h("div", { key: 'dd4e52de31caabee41ec1bc58efecd1e213368c9', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3de9890950b5066173d49a6d615e415d286e4aa5' }), this.renderHintText()), h("div", { key: 'de233f83efd106d043b31cceb5eb9a6e5758d032', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,10 +98,6 @@
   width: auto;
 }
 
-:host(.ion-focused) input {
-  border: 2px solid #5e9ed6;
-}
-
 :host(.toggle-disabled) {
   pointer-events: none;
 }
@@ -114,6 +110,10 @@ input {
   display: none;
 }
 
+:host(:focus) {
+  outline: none;
+}
+
 .toggle-wrapper {
   display: flex;
   position: relative;
@@ -528,7 +528,7 @@ input {
   --handle-width: 20px;
   --handle-height: 20px;
   --handle-max-height: calc(100% + 6px);
-  --handle-spacing: 0;
+  --handle-spacing: 0px;
   --handle-transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -572,6 +572,43 @@ input {
   height: 100%;
 }
 
+:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon-wrapper::after {
+  border-radius: 50%;
+  display: block;
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  transform: translateY(-50%);
+  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);
+  content: "";
+  z-index: -1;
+  inset-block-start: 50%;
+}
+
+:host(.toggle-ltr.ion-focused) .toggle-icon-wrapper::after {
+  left: calc(var(--handle-spacing) + (var(--handle-width) - 36px) / 2);
+}
+
+:host(.toggle-rtl.ion-focused) .toggle-icon-wrapper::after {
+  right: calc(var(--handle-spacing) + (var(--handle-width) - 36px) / 2);
+}
+
+:host(.toggle-ltr.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  transform: translate(calc(var(--handle-spacing) * -2), -50%);
+}
+
+:host(.toggle-rtl.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  transform: translate(calc(var(--handle-spacing) * 2), -50%);
+}
+
+:host(.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+}
+
+:host(.ion-color.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  background: rgba(var(--ion-color-base-rgb), 0.2);
+}
+
 :host(.toggle-disabled) {
   opacity: 0.38;
 }

package/dist/collection/utils/forms/index.js

@@ -3,4 +3,5 @@
  */
 export * from './notch-controller';
 export * from './compare-with-utils';
+export * from './item-multiple-inputs';
 export * from './validity';

package/dist/collection/utils/forms/item-multiple-inputs.js

@@ -0,0 +1,33 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Build } from "@stencil/core";
+/**
+ * `item-multiple-inputs` is toggled on the item after its form controls render,
+ * so a control whose focus styling depends on it needs to re-render when it flips.
+ *
+ * @internal
+ * @param el The form control whose closest `ion-item` should be observed.
+ * @param onChange Called whenever one of `classNames` is added or removed.
+ * @param classNames The item classes the caller's rendering depends on. A caller
+ * reading more than one must list them all, or changes to the rest are ignored.
+ * @returns The observer to disconnect in `disconnectedCallback`, or `undefined`
+ * if it could not be created.
+ */
+export const createItemMultipleInputsObserver = (el, onChange, classNames = ['item-multiple-inputs']) => {
+    const item = el.closest('ion-item');
+    if (!item || !Build.isBrowser || typeof MutationObserver === 'undefined') {
+        return undefined;
+    }
+    const readClasses = () => classNames.map((name) => item.classList.contains(name)).join(',');
+    let previousClasses = readClasses();
+    const observer = new MutationObserver(() => {
+        const currentClasses = readClasses();
+        if (currentClasses !== previousClasses) {
+            previousClasses = currentClasses;
+            onChange();
+        }
+    });
+    observer.observe(item, { attributes: true, attributeFilter: ['class'] });
+    return observer;
+};