@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

package/dist/collection/global/config.js

@@ -3,7 +3,9 @@
  */
 // TODO(FW-2832): types
 export class Config {
-    m = new Map();
+    constructor() {
+        this.m = new Map();
+    }
     reset(configObj) {
         this.m = new Map(Object.entries(configObj));
     }
@@ -35,7 +37,7 @@ export const configFromSession = (win) => {
         const configStr = win.sessionStorage.getItem(IONIC_SESSION_KEY);
         return configStr !== null ? JSON.parse(configStr) : {};
     }
-    catch {
+    catch (e) {
         return {};
     }
 };
@@ -43,7 +45,7 @@ export const saveConfig = (win, c) => {
     try {
         win.sessionStorage.setItem(IONIC_SESSION_KEY, JSON.stringify(c));
     }
-    catch {
+    catch (e) {
         return;
     }
 };
@@ -57,7 +59,7 @@ export const configFromURL = (win) => {
         try {
             return [decodeURIComponent(key), decodeURIComponent(value)];
         }
-        catch {
+        catch (e) {
             return ['', ''];
         }
     })

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

@@ -1,14 +1,155 @@
 /*!
  * (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) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.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)) => {
+    var _a;
+    if ((ref === null || ref === void 0 ? void 0 : ref.mode) && isModeValidForTheme(ref === null || ref === void 0 ? void 0 : 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 = ((_a = el.closest('[mode]')) === null || _a === void 0 ? void 0 : _a.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) => {
+    var _a, _b;
+    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 = (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : (_b = el.closest('[mode]')) === null || _b === void 0 ? void 0 : _b.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') {
@@ -19,46 +160,127 @@ export const initialize = (userConfig = {}) => {
     const Ionic = (win.Ionic = win.Ionic || {});
     // create the Ionic.config from raw config object (if it exists)
     // and convert Ionic.config into a ConfigApi that has a get() fn
-    const configObj = {
-        ...configFromSession(win),
-        persistConfig: false,
-        ...Ionic.config,
-        ...configFromURL(win),
-        ...userConfig,
-    };
+    const configObj = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), { persistConfig: false }), Ionic.config), configFromURL(win)), userConfig);
     config.reset(configObj);
     if (config.getBoolean('persistConfig')) {
         saveConfig(win, configObj);
     }
     // 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/index.js

@@ -17,5 +17,5 @@ export { getMode, setupConfig } from './utils/config';
 export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
-export { alertController, actionSheetController, modalController, loadingController, popoverController, toastController, } from './utils/overlays';
+export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';
 export { IonicSlides } from './components/slides/IonicSlides';

package/dist/collection/utils/animation/animation.js

@@ -122,7 +122,7 @@ export const createAnimation = (animationId) => {
         return ani;
     };
     const onFinish = (callback, opts) => {
-        const callbacks = opts?.oneTimeCallback ? onFinishOneTimeCallbacks : onFinishCallbacks;
+        const callbacks = (opts === null || opts === void 0 ? void 0 : opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
         callbacks.push({ c: callback, o: opts });
         return ani;
     };
@@ -155,7 +155,7 @@ export const createAnimation = (animationId) => {
              * for another animation to have already
              * cleaned up a particular stylesheet
              */
-            if (stylesheet?.parentNode) {
+            if (stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.parentNode) {
                 stylesheet.parentNode.removeChild(stylesheet);
             }
         });
@@ -655,7 +655,7 @@ export const createAnimation = (animationId) => {
     };
     const play = (opts) => {
         return new Promise((resolve) => {
-            if (opts?.sync) {
+            if (opts === null || opts === void 0 ? void 0 : opts.sync) {
                 shouldForceSyncPlayback = true;
                 onFinish(() => (shouldForceSyncPlayback = false), { oneTimeCallback: true });
             }

package/dist/collection/utils/config.js

@@ -4,19 +4,18 @@
 export const setupConfig = (config) => {
     const win = window;
     const Ionic = win.Ionic;
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (Ionic && Ionic.config && Ionic.config.constructor.name !== 'Object') {
         return;
     }
     win.Ionic = win.Ionic || {};
-    win.Ionic.config = {
-        ...win.Ionic.config,
-        ...config,
-    };
+    win.Ionic.config = Object.assign(Object.assign({}, win.Ionic.config), config);
     return win.Ionic.config;
 };
 export const getMode = () => {
+    var _a;
     const win = window;
-    const config = win?.Ionic?.config;
+    const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
     if (config) {
         if (config.mode) {
             return config.mode;

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-controller/index.js

@@ -36,7 +36,7 @@ export const createFocusController = () => {
          */
         if (focusManagerEnabled) {
             const activeEl = document.activeElement;
-            if (activeEl !== null && referenceEl?.contains(activeEl)) {
+            if (activeEl !== null && (referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.contains(activeEl))) {
                 activeEl.setAttribute(LAST_FOCUS, 'true');
             }
         }

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

@@ -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,
@@ -27,7 +27,7 @@ export const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden
  */
 export const focusFirstDescendant = (ref, fallbackElement) => {
     const firstInput = ref.querySelector(focusableQueryString);
-    focusElementInContext(firstInput, fallbackElement ?? ref);
+    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
 };
 /**
  * Focuses the last descendant in a context
@@ -42,7 +42,7 @@ export const focusFirstDescendant = (ref, fallbackElement) => {
 export const focusLastDescendant = (ref, fallbackElement) => {
     const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
     const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    focusElementInContext(lastInput, fallbackElement ?? ref);
+    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
 };
 /**
  * Focuses a particular element in a context. If the element
@@ -63,10 +63,21 @@ export const focusLastDescendant = (ref, fallbackElement) => {
  */
 const focusElementInContext = (hostToFocus, fallbackElement) => {
     let elementToFocus = hostToFocus;
-    const shadowRoot = hostToFocus?.shadowRoot;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : 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');

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

@@ -17,6 +17,28 @@ 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);
+};
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;

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 === null || doc === void 0 ? void 0 : 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 === null || doc === void 0 ? void 0 : 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/index.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export * from './notch-controller';
-export * from './start-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
 export * from './validity';
+export * from './clear-button-press-controller';

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

@@ -13,3 +13,34 @@ export const checkInvalidState = (el) => {
     const hasIonInvalid = el.classList.contains('ion-invalid');
     return hasIonTouched && hasIonInvalid;
 };
+export const getValidityFlags = (validity) => {
+    return {
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing,
+    };
+};
+/**
+ * Reports the validity state of a native form element to ElementInternals.
+ * This delegates to the native element's built-in validation, which automatically
+ * handles required, minlength, maxlength, and other constraints.
+ */
+export const reportValidityToElementInternals = (nativeElement, internals) => {
+    if (!(nativeElement === null || nativeElement === void 0 ? void 0 : nativeElement.validity)) {
+        return;
+    }
+    if (nativeElement.validity.valid) {
+        internals.setValidity({});
+    }
+    else {
+        const validityFlags = getValidityFlags(nativeElement.validity);
+        internals.setValidity(validityFlags, nativeElement.validationMessage, nativeElement);
+    }
+};