@ionic/core 9.0.10 → 9.0.11-dev.11793705116.185a3203

package/dist/collection/global/ionic-global.js

@@ -1,14 +1,153 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getMode, setMode } from "@stencil/core";
+import { Build, getMode, setMode, getElement } from "@stencil/core";
 import { printIonWarning } from "../utils/logging/index";
+import { shouldUseCloseWatcher } from "../utils/hardware-back-button";
 import { isPlatform, setupPlatforms } from "../utils/platform";
 import { config, configFromSession, configFromURL, saveConfig } from "./config";
-// TODO(FW-2832): types
 let defaultMode;
-export const getIonMode = (ref) => {
-    return (ref && getMode(ref)) || defaultMode;
+let defaultTheme = 'md';
+let rICHandle;
+/**
+ * Prints a warning message to the developer to inform them of
+ * an invalid configuration of mode and theme.
+ * @param mode The invalid mode configuration.
+ * @param theme The invalid theme configuration.
+ */
+const printInvalidModeWarning = (mode, theme, ref) => {
+    printIonWarning(`Invalid mode and theme combination provided: mode: ${mode}, theme: ${theme}. Fallback mode ${getDefaultModeForTheme(theme)} will be used.`, ref);
+};
+/**
+ * Validates if a mode is accepted for a theme configuration.
+ * @param mode The mode to validate.
+ * @param theme The theme the mode is being used with.
+ * @returns `true` if the mode is valid for the theme, `false` if invalid.
+ */
+export const isModeValidForTheme = (mode, theme) => {
+    if (mode === 'md') {
+        return theme === 'md' || theme === 'ionic';
+    }
+    else if (mode === 'ios') {
+        return theme === 'ios' || theme === 'ionic';
+    }
+    return false;
+};
+/**
+ * Returns the default mode for a specified theme.
+ * @param theme The theme to return a default mode for.
+ * @returns The default mode, either `ios` or `md`.
+ */
+const getDefaultModeForTheme = (theme) => {
+    if (theme === 'ios') {
+        return 'ios';
+    }
+    return 'md';
+};
+/**
+ * Returns the default theme for a specified mode.
+ * @param mode The mode to return a default theme for.
+ * @returns The default theme.
+ */
+const getDefaultThemeForMode = (mode) => {
+    if (mode === 'ios') {
+        return 'ios';
+    }
+    return 'md';
+};
+const isModeSupported = (elmMode) => ['ios', 'md'].includes(elmMode);
+const isThemeSupported = (theme) => ['ios', 'md', 'ionic'].includes(theme);
+const isIonicElement = (elm) => elm.tagName?.startsWith('ION-');
+/**
+ * Returns the mode value of the element reference or the closest
+ * parent with a valid mode.
+ * @param ref The element reference to look up the mode for.
+ * @param theme Optionally can provide the theme to avoid an additional look-up.
+ * @returns The mode value for the element reference.
+ */
+export const getIonMode = (ref, theme = getIonTheme(ref)) => {
+    if (ref?.mode && isModeValidForTheme(ref?.mode, theme)) {
+        /**
+         * If the reference already has a mode configuration,
+         * use it instead of performing a look-up.
+         */
+        return ref.mode;
+    }
+    else {
+        const el = getElement(ref);
+        const mode = el.closest('[mode]')?.getAttribute('mode') || defaultMode;
+        if (isModeValidForTheme(mode, theme)) {
+            /**
+             * The mode configuration is supported for the configured theme.
+             */
+            return mode;
+        }
+        else {
+            printInvalidModeWarning(mode, theme, ref);
+        }
+    }
+    return getDefaultModeForTheme(theme);
+};
+/**
+ * Returns the theme value of the element reference or the closest
+ * parent with a valid theme.
+ *
+ * @param ref The element reference to look up the theme for.
+ * @returns The theme value for the element reference, defaults to
+ * the default theme if it cannot be determined.
+ */
+export const getIonTheme = (ref) => {
+    const theme = ref && getMode(ref);
+    if (theme) {
+        return theme;
+    }
+    /**
+     * If the theme cannot be detected, then fallback to using
+     * the `mode` attribute to determine the style sheets to use.
+     */
+    const el = getElement(ref);
+    const mode = ref?.mode ?? el.closest('[mode]')?.getAttribute('mode');
+    if (mode) {
+        return getDefaultThemeForMode(mode);
+    }
+    /**
+     * If a mode is not detected, then fallback to using the
+     * default theme.
+     */
+    return defaultTheme;
+};
+export const rIC = (callback) => {
+    if ('requestIdleCallback' in window) {
+        return window.requestIdleCallback(callback);
+    }
+    return setTimeout(callback, 32);
+};
+export const cIC = (id) => {
+    if ('cancelIdleCallback' in window) {
+        window.cancelIdleCallback(id);
+    }
+    else {
+        clearTimeout(id);
+    }
+};
+export const needInputShims = () => {
+    /**
+     * iOS always needs input shims
+     */
+    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
+    if (needsShimsIOS) {
+        return true;
+    }
+    /**
+     * Android only needs input shims when running
+     * in the browser and only if the browser is using the
+     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
+     */
+    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
+    if (isAndroidMobileWeb) {
+        return true;
+    }
+    return false;
 };
 export const initialize = (userConfig = {}) => {
     if (typeof window === 'undefined') {
@@ -32,33 +171,120 @@ export const initialize = (userConfig = {}) => {
     }
     // Setup platforms
     setupPlatforms(win);
-    // first see if the mode was set as an attribute on <html>
-    // which could have been set by the user, or by pre-rendering
-    // otherwise get the mode via config settings, and fallback to md
     Ionic.config = config;
+    /**
+     * Check if the mode was set as an attribute on <html>
+     * which could have been set by the user, or by pre-rendering
+     * otherwise get the mode via config settings, and fallback to md.
+     */
     Ionic.mode = defaultMode = config.get('mode', doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md'));
+    /**
+     * Check if the theme was set as an attribute on <html>
+     * which could have been set by the user, or by pre-rendering
+     * otherwise get the theme via config settings, and fallback to md.
+     */
+    Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || getDefaultThemeForMode(defaultMode));
+    if (!isModeValidForTheme(defaultMode, defaultTheme)) {
+        printInvalidModeWarning(defaultMode, defaultTheme, configObj);
+        defaultMode = getDefaultModeForTheme(defaultTheme);
+    }
     config.set('mode', defaultMode);
     doc.documentElement.setAttribute('mode', defaultMode);
     doc.documentElement.classList.add(defaultMode);
+    config.set('theme', defaultTheme);
+    doc.documentElement.setAttribute('theme', defaultTheme);
+    doc.documentElement.classList.add(defaultTheme);
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }
-    const isIonicElement = (elm) => elm.tagName?.startsWith('ION-');
-    const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
     setMode((elm) => {
+        /**
+         * Iterate over all the element nodes, to both validate and
+         * set the "mode" that is used for determining the styles to
+         * apply to the element.
+         *
+         * setMode refers to Stencil's internal metadata for "mode",
+         * which is used to set the correct styleUrl for the component.
+         *
+         * If the "theme" attribute or property is set, then use it
+         * to determine the style sheets to use.
+         *
+         * If the "mode" attribute or property is set, then use it
+         * to determine the style sheets to use. This is fallback
+         * behavior for applications that are not setting the "theme".
+         */
         while (elm) {
-            const elmMode = elm.mode || elm.getAttribute('mode');
+            const theme = elm.getAttribute('theme');
+            if (theme) {
+                if (isThemeSupported(theme)) {
+                    return theme;
+                }
+                else if (isIonicElement(elm)) {
+                    printIonWarning(`Invalid theme: "${theme}". Supported themes include: "ios" or "md".`);
+                }
+            }
+            /**
+             * If a theme is not detected, then fallback to using the
+             * `mode` attribute to determine the style sheets to use.
+             */
+            const elmMode = elm.getAttribute('mode');
             if (elmMode) {
-                if (isAllowedIonicModeValue(elmMode)) {
+                if (isModeSupported(elmMode)) {
                     return elmMode;
                 }
                 else if (isIonicElement(elm)) {
-                    printIonWarning('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+                    printIonWarning(`Invalid mode: "${elmMode}". Ionic modes can be only "ios" or "md"`);
                 }
             }
             elm = elm.parentElement;
         }
-        return defaultMode;
+        return defaultTheme;
     });
+    // `IonApp` code
+    // ----------------------------------------------
+    if (Build.isBrowser) {
+        // If initialize is called again, clear the previous pending callback
+        if (rICHandle !== undefined) {
+            cIC(rICHandle);
+        }
+        rICHandle = rIC(async () => {
+            const isHybrid = isPlatform(window, 'hybrid');
+            if (!config.getBoolean('_testing')) {
+                import('../utils/tap-click').then((module) => module.startTapClick(config));
+            }
+            if (config.getBoolean('statusTap', isHybrid)) {
+                import('../utils/status-tap').then((module) => module.startStatusTap());
+            }
+            if (config.getBoolean('inputShims', needInputShims())) {
+                /**
+                 * needInputShims() ensures that only iOS and Android
+                 * platforms proceed into this block.
+                 */
+                const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
+                import('../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
+            }
+            const hardwareBackButtonModule = await import('../utils/hardware-back-button');
+            const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
+            if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
+                hardwareBackButtonModule.startHardwareBackButton();
+            }
+            else {
+                /**
+                 * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+                 * then the close watcher will not be used.
+                 */
+                if (shouldUseCloseWatcher()) {
+                    printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                }
+                hardwareBackButtonModule.blockHardwareBackButton();
+            }
+            if (typeof window !== 'undefined') {
+                import('../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
+            }
+            import('../utils/focus-visible').then((module) => module.getOrInitFocusVisibleUtility());
+            // Reset handle once executed
+            rICHandle = undefined;
+        });
+    }
 };
 export default initialize;

package/dist/collection/utils/css-value-validation.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Helpers for validating user-supplied CSS values using regular expressions, without
+ * relying on browser CSS APIs.
+ */
+// Matches `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
+// Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
+const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
+// Matches a `var(--name)` reference with an optional fallback, e.g.
+// `var(--my-gap)` or `var(--my-gap, 16px)`.
+const VAR_FUNCTION_PATTERN = /^var\(\s*--[^\s,)]+\s*(?:,[\s\S]*)?\)$/i;
+/**
+ * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
+ * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+ * Also supports simple `calc` / `min` / `max` / `clamp(...)` functions.
+ *
+ * @param value String value to validate.
+ */
+export function isValidLengthPercentage(value) {
+    const v = value.trim();
+    if (!v) {
+        return false;
+    }
+    return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
+}
+/**
+ * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+ * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
+ * custom property is resolved by the browser, so the resolved value is not
+ * validated here.
+ *
+ * @param value String value to validate.
+ */
+export function isCssVariable(value) {
+    return VAR_FUNCTION_PATTERN.test(value.trim());
+}

package/dist/collection/utils/focus-trap.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { focusVisibleElement } from "./helpers";
+import { focusRedirectedElement } from "./helpers";
 /**
  * This query string selects elements that
  * are eligible to receive focus. We select
@@ -14,7 +14,7 @@ import { focusVisibleElement } from "./helpers";
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,
@@ -66,7 +66,18 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
     const shadowRoot = hostToFocus?.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+        const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+        // If the host has a setFocus() method, use it to delegate focus properly.
+        // This is needed for shadow DOM components like ion-textarea that override
+        // focus() to delegate to their inner native elements.
+        const hasSetFocus = typeof hostToFocus.setFocus === 'function';
+        if (innerFocusable && hasSetFocus) {
+            // Keep the host element so we can call setFocus() on it
+            elementToFocus = hostToFocus;
+        }
+        else {
+            elementToFocus = innerFocusable || hostToFocus;
+        }
     }
     if (elementToFocus) {
         const radioGroup = elementToFocus.closest('ion-radio-group');
@@ -74,7 +85,7 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
             radioGroup.setFocus();
         }
         else {
-            focusVisibleElement(elementToFocus);
+            focusRedirectedElement(elementToFocus);
         }
     }
     else {

package/dist/collection/utils/focus-visible.js

@@ -17,9 +17,58 @@ const FOCUS_KEYS = [
     'Home',
     'End',
 ];
+let focusVisibleUtility = null;
+export const getOrInitFocusVisibleUtility = () => {
+    if (!focusVisibleUtility) {
+        focusVisibleUtility = startFocusVisible();
+    }
+    return focusVisibleUtility;
+};
+/**
+ * Used to set focus on an element that uses `ion-focusable`.
+ * Do not use this if focusing the element as a result of a keyboard
+ * event as the focus utility should handle this for us. This method
+ * should be used when we want to programmatically focus an element as
+ * a result of another user action. (Ex: We focus the first element
+ * inside of a popover when the user presents it, but the popover is not always
+ * presented as a result of keyboard action.)
+ *
+ * @param elements - The elements to set focus on.
+ */
+export const focusElements = (elements) => {
+    const focusVisible = getOrInitFocusVisibleUtility();
+    focusVisible.setFocus(elements);
+};
+/**
+ * Reports whether the most recent interaction on the page was keyboard-driven.
+ *
+ * Check this before drawing the keyboard focus indicator programmatically.
+ *
+ * @returns `true` while the user is navigating with a keyboard, and before the
+ * first interaction on the page.
+ */
+export const isKeyboardMode = () => getOrInitFocusVisibleUtility().isKeyboardMode();
+/**
+ * Watches how the user is interacting with the page and marks the focused
+ * element with `ion-focused`, so the keyboard focus indicator is only drawn
+ * while the user navigates with a keyboard.
+ *
+ * @param rootEl Scopes the utility to this element's shadow root, so it only
+ * reacts to interactions inside it. Omit it to listen on the document.
+ * @returns `setFocus` to mark elements focused programmatically, and `destroy`
+ * to detach the listeners.
+ */
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
+    /*
+     * Starts as `true` so an element focused before the user has interacted,
+     * such as one focused on page load, still draws an indicator.
+     */
     let keyboardMode = true;
+    /*
+     * `ref` is where the listeners go and `root` is the element focus falls back
+     * to once it leaves everything inside `ref`.
+     */
     const ref = rootEl ? rootEl.shadowRoot : document;
     const root = rootEl ? rootEl : document.body;
     const setFocus = (elements) => {
@@ -31,12 +80,24 @@ export const startFocusVisible = (rootEl) => {
         keyboardMode = false;
         setFocus([]);
     };
+    /*
+     * Only the keys that move focus keep the indicator on. Any other key means
+     * the user is typing into the focused element rather than navigating, so the
+     * indicator is dropped.
+     */
     const onKeydown = (ev) => {
         keyboardMode = FOCUS_KEYS.includes(ev.key);
         if (!keyboardMode) {
             setFocus([]);
         }
     };
+    /*
+     * The indicator does not always belong to the element that took focus. The
+     * composed path is walked so every `ion-focusable` ancestor is marked too,
+     * which is how an `ion-item` draws the indicator for a checkbox slotted into
+     * it, since a checkbox in an item drops the class itself. The composed path
+     * is used because it reaches hosts across shadow boundaries.
+     */
     const onFocusin = (ev) => {
         if (keyboardMode && ev.composedPath !== undefined) {
             const toFocus = ev.composedPath().filter((el) => {
@@ -49,18 +110,27 @@ export const startFocusVisible = (rootEl) => {
             setFocus(toFocus);
         }
     };
+    /*
+     * Focus landing back on `root` means it left every focusable element, so
+     * nothing should stay marked. Focus moving between elements is left alone
+     * because `onFocusin` marks the new one.
+     */
     const onFocusout = () => {
         if (ref.activeElement === root) {
             setFocus([]);
         }
     };
-    ref.addEventListener('keydown', onKeydown);
+    /*
+     * Capture phase, so the mode is current for the overlay focus trap, which
+     * intercepts Tab in its own capture listener.
+     */
+    ref.addEventListener('keydown', onKeydown, true);
     ref.addEventListener('focusin', onFocusin);
     ref.addEventListener('focusout', onFocusout);
     ref.addEventListener('touchstart', pointerDown, { passive: true });
     ref.addEventListener('mousedown', pointerDown);
     const destroy = () => {
-        ref.removeEventListener('keydown', onKeydown);
+        ref.removeEventListener('keydown', onKeydown, true);
         ref.removeEventListener('focusin', onFocusin);
         ref.removeEventListener('focusout', onFocusout);
         ref.removeEventListener('touchstart', pointerDown);
@@ -69,5 +139,6 @@ export const startFocusVisible = (rootEl) => {
     return {
         destroy,
         setFocus,
+        isKeyboardMode: () => keyboardMode,
     };
 };

package/dist/collection/utils/forms/clear-button-press-controller.js

@@ -0,0 +1,40 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { doc } from "../browser/index";
+/**
+ * Tracks an in-flight press on a clear button so a blur landing mid-press can't
+ * hide or unmount the button before the press produces its click.
+ *
+ * Calling `preventDefault()` on `pointerdown` is meant to stop the field
+ * blurring, but not every browser honors it (iOS Safari blurs anyway). The
+ * press is released on `click` rather than `pointerup` because touch
+ * dispatches the click after the finger lifts.
+ *
+ * @internal
+ * @param onPressChange Receives the press state.
+ */
+export const createClearButtonPressController = (onPressChange) => {
+    const release = () => {
+        doc?.removeEventListener('click', release);
+        onPressChange(false);
+    };
+    const onPointerDown = (ev) => {
+        ev.preventDefault();
+        // Only a primary press produces a click.
+        if (ev.button !== 0) {
+            return;
+        }
+        onPressChange(true);
+        doc?.addEventListener('click', release, { once: true });
+    };
+    // Teardown also clears the press, so a disconnect mid-press can't leave the button stuck visible.
+    const destroy = () => {
+        release();
+    };
+    return {
+        onPointerDown,
+        release,
+        destroy,
+    };
+};

package/dist/collection/utils/forms/click-controller.js

@@ -2,6 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { raf } from "../helpers";
+/**
+ * Content that handles its own click, so clicking it should not also activate
+ * the form control.
+ */
+const INTERACTIVE_CONTENT = 'a[href], button, details, embed, iframe, select, textarea, input:not([type="hidden"]), audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), .ion-activatable, .ion-focusable';
 /**
  * The content slotted into a form control's start or end slot that a click
  * started on, or `null` when the click did not start on slotted content.
@@ -20,6 +25,24 @@ export const getSlottedClickContent = (ev, el) => {
  * end slot.
  */
 const isSlottedClick = (ev, el) => getSlottedClickContent(ev, el) !== null;
+/**
+ * Whether a click started on slotted content that handles its own click.
+ *
+ * The composed path is used rather than `closest` so that a control which
+ * keeps its interactive element inside its own shadow root, such as
+ * `ion-datetime-button`, is still recognized.
+ */
+const isInteractiveSlottedClick = (ev, el) => {
+    const slotted = getSlottedClickContent(ev, el);
+    if (slotted === null) {
+        return false;
+    }
+    const path = ev.composedPath();
+    return path.slice(0, path.indexOf(slotted) + 1).some((node) => {
+        const target = node;
+        return target.nodeType === Node.ELEMENT_NODE && target.matches(INTERACTIVE_CONTENT);
+    });
+};
 /**
  * A utility for form components that wrap their content in a <label>, such as
  * ion-input, ion-textarea and ion-select.
@@ -29,21 +52,30 @@ const isSlottedClick = (ev, el) => getSlottedClickContent(ev, el) !== null;
  * the host as a duplicate, so the slotted click is remembered and the click
  * that follows it is suppressed.
  *
- * Browsers skip the forwarding when the click lands on interactive content,
- * such as a slotted button, so the slotted click is remembered for a frame
- * rather than until a forwarded click that may never arrive.
+ * Chromium and Firefox skip the forwarding when the click lands on interactive
+ * content, such as a slotted button, so the slotted click is remembered for a
+ * frame rather than until a forwarded click that may never arrive.
+ *
+ * A native control inside the host's shadow root is found through the composed
+ * path, because its click is retargeted to the host. That click is already
+ * emitted from the host, so only the duplicate is suppressed.
+ *
+ * Components using `delegatesFocus`, such as ion-textarea, can reject the focus
+ * a press on interactive slotted content moves to the native control by calling
+ * `handleMouseDown` from the label and `rejectFocus` from the focus handler.
  *
  * @internal
  * @param el - The host element.
  * @param getNativeInput - A callback returning the native form control the
  * label points at, for components that have one. Those components emit the
- * click from the host rather than the control, so the control's click is
- * always stopped and re-dispatched from the host. Omit it for components whose
+ * click from the host rather than the control. Omit it for components whose
  * label has no `for` attribute, such as ion-select, where the browser forwards
  * to an internal control that already re-bubbles targeting the host.
  */
 export const createClickController = (el, getNativeInput) => {
     let hasSlottedClick = false;
+    let rejectingFocus = false;
+    let removeDisarmListeners;
     const handleClickCapture = (ev) => {
         if (isSlottedClick(ev, el)) {
             hasSlottedClick = true;
@@ -58,13 +90,67 @@ export const createClickController = (el, getNativeInput) => {
             return;
         }
         const nativeInput = getNativeInput();
-        if (nativeInput !== undefined && ev.target === nativeInput) {
-            ev.stopPropagation();
-            if (!hasSlottedClick) {
+        if (nativeInput !== undefined && ev.composedPath()[0] === nativeInput) {
+            const isRetargeted = el.shadowRoot !== null && nativeInput.getRootNode() === el.shadowRoot;
+            if (hasSlottedClick || !isRetargeted) {
+                ev.stopPropagation();
+            }
+            if (!hasSlottedClick && !isRetargeted) {
                 el.click();
             }
             hasSlottedClick = false;
         }
     };
-    return { handleClickCapture };
+    /**
+     * The press ends with a click, which can land outside the label, or with a
+     * `dragstart` or `pointercancel` when no click comes. The listeners capture
+     * so a slotted control calling `stopPropagation` can't leave it armed.
+     */
+    const armFocusRejection = () => {
+        removeDisarmListeners?.();
+        rejectingFocus = true;
+        const events = ['click', 'dragstart', 'pointercancel'];
+        const removeListeners = () => {
+            removeDisarmListeners = undefined;
+            events.forEach((name) => document.removeEventListener(name, disarm, true));
+        };
+        const disarm = () => {
+            removeListeners();
+            raf(() => (rejectingFocus = false));
+        };
+        removeDisarmListeners = removeListeners;
+        events.forEach((name) => document.addEventListener(name, disarm, true));
+    };
+    const handleMouseDown = (ev) => {
+        if (ev.button !== 0 || !isInteractiveSlottedClick(ev, el)) {
+            return;
+        }
+        armFocusRejection();
+    };
+    /**
+     * Drops focus moved to the native control by a press on interactive slotted
+     * content, and returns whether it did. WebKit forwards the label's click even
+     * then, so focus goes back to the content it came from inside the host.
+     */
+    const rejectFocus = (ev) => {
+        if (!rejectingFocus) {
+            return false;
+        }
+        const previous = ev.relatedTarget;
+        if (previous !== null && previous !== el && el.contains(previous)) {
+            previous.focus();
+        }
+        // The related target can be a slotted host that isn't focusable, such as ion-button.
+        const nativeInput = getNativeInput?.();
+        if (nativeInput !== undefined &&
+            nativeInput.getRootNode().activeElement === nativeInput) {
+            nativeInput.blur();
+        }
+        return true;
+    };
+    const cancelFocusRejection = () => {
+        removeDisarmListeners?.();
+        rejectingFocus = false;
+    };
+    return { handleClickCapture, handleMouseDown, rejectFocus, cancelFocusRejection, destroy: cancelFocusRejection };
 };