voyager-ionic-core 8.8.10 → 8.8.17

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;
+};

package/dist/collection/utils/overlays.js

@@ -497,7 +497,30 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      * to the overlay container.
      */
     if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
-        overlay.el.focus();
+        /**
+         * Some overlays (e.g. modal) put the dialog role and accessible label
+         * on the `.ion-overlay-wrapper` instead of the host. Screen readers
+         * need focus on the element with `role="dialog"` to properly announce
+         * and navigate the dialog.
+         *
+         * We only target wrappers with `tabindex`, since `role="dialog"` alone
+         * does not make an element focusable. If no focusable dialog wrapper
+         * exists (e.g. picker-legacy), we fall back to the host.
+         */
+        const overlayWrapper = getElementRoot(overlay.el).querySelector('[role="dialog"][tabindex]');
+        const focusTarget = overlayWrapper !== null && overlayWrapper !== void 0 ? overlayWrapper : overlay.el;
+        /**
+         * `preventScroll` keeps this a pure focus move so the viewport does not
+         * jump when the wrapper is partially off-screen (e.g. a sheet modal).
+         * Guard the options call so an older engine that mishandles it can never
+         * reject present(); we fall back to a plain focus() in that case.
+         */
+        try {
+            focusTarget.focus({ preventScroll: true });
+        }
+        catch (_c) {
+            focusTarget.focus();
+        }
     }
     /**
      * If this overlay was previously dismissed without being

package/dist/collection/utils/test/playwright/apply-keyboard-focus.js

@@ -0,0 +1,25 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+/**
+ * Puts an element into the keyboard focus state that draws the focus indicator.
+ * Requires an `ion-app` so `startFocusVisible` is running. Its listeners attach
+ * asynchronously, so focus is retried until `ion-focused` sticks.
+ *
+ * `Shift` re-enables keyboard mode without moving focus, in case a pointer event
+ * earlier in the test turned it off. Focus moves programmatically because Firefox
+ * cannot move it back into the page once blurred, so an early Tab is unretryable.
+ *
+ * Pass `indicatorLocator` when something other than the focused element gets
+ * `ion-focused`. A checkbox or radio alone in an item has no `ion-focusable` class of
+ * its own because the item draws the indicator for it, so wait on the item.
+ */
+export const applyKeyboardFocus = async (page, locator, indicatorLocator = locator) => {
+    await expect(async () => {
+        await page.evaluate(() => { var _a; return (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur(); });
+        await page.keyboard.press('Shift');
+        await locator.focus();
+        await expect(indicatorLocator).toHaveClass(/ion-focused/, { timeout: 250 });
+    }).toPass({ timeout: 5000 });
+};

package/dist/collection/utils/test/playwright/drag-element.js

@@ -9,6 +9,7 @@
  * See https://playwright.dev/docs/api/class-mouse#mouse-move for more information.
  */
 export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true) => {
+    var _a;
     const boundingBox = await el.boundingBox();
     if (!boundingBox) {
         throw new Error('Cannot get a bounding box for an element that is not visible. See https://playwright.dev/docs/api/class-locator#locator-bounding-box for more information');
@@ -18,6 +19,20 @@ export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCo
     // Navigate to the start position.
     await page.mouse.move(startX, startY);
     await page.mouse.down();
+    // Firefox treats focusable elements (tabindex="-1") as draggable text and
+    // initiates text selection on mouse.down(). In Playwright, this selection
+    // locks in before the gesture detector fires, blocking pointer events.
+    // Clearing it here allows the drag gesture to proceed normally.
+    //
+    // This is scoped to Firefox because the extra page.evaluate() is an awaited
+    // round-trip that adds variable latency between mouse.down() and the first
+    // mouse.move(). Chromium and WebKit don't need the selection clear, and on
+    // WebKit that latency perturbs the timing-derived gesture velocity, causing
+    // the item to settle a few pixels off and flaking screenshot comparisons
+    // (e.g. item-sliding safe-area tests).
+    if (((_a = page.context().browser()) === null || _a === void 0 ? void 0 : _a.browserType().name()) === 'firefox') {
+        await page.evaluate(() => { var _a; return (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges(); });
+    }
     // Drag the element.
     await moveElement(page, startX, startY, dragByX, dragByY);
     if (releaseDrag) {

package/dist/collection/utils/test/playwright/index.js

@@ -6,6 +6,7 @@ export * from './playwright-declarations';
 export * from './page/event-spy';
 export * from './page/utils';
 export * from './drag-element';
+export * from './apply-keyboard-focus';
 export * from './matchers';
 export * from './viewports';
 export * from './generator';

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-12T22:12:03",
+  "timestamp": "2026-08-08T17:09:51",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -10562,6 +10562,40 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "form",
+          "type": "HTMLFormElement | string | undefined",
+          "complexType": {
+            "original": "string | HTMLFormElement",
+            "resolved": "HTMLFormElement | string | undefined",
+            "references": {
+              "HTMLFormElement": {
+                "location": "global",
+                "id": "global::HTMLFormElement"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": false,
+          "docs": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "HTMLFormElement"
+            },
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "href",
           "type": "string | undefined",
@@ -38144,6 +38178,11 @@
       "docstring": "",
       "path": "src/interface.d.ts"
     },
+    "src/components/datetime/datetime-interface.ts::DatetimeParts": {
+      "declaration": "export interface DatetimeParts {\n  month: number;\n  day: number | null;\n  year: number;\n  dayOfWeek?: number | null;\n  hour?: number;\n  minute?: number;\n  ampm?: 'am' | 'pm';\n  isAdjacentDay?: boolean;\n}",
+      "docstring": "",
+      "path": "src/components/datetime/datetime-interface.ts"
+    },
     "src/components/picker-column/picker-column-interfaces.ts::PickerColumnChangeEventDetail": {
       "declaration": "export interface PickerColumnChangeEventDetail {\n  value: PickerColumnValue;\n}",
       "docstring": "",