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

package/dist/cjs/scroll-hide-controller-BSVBCkbw.js

@@ -0,0 +1,345 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-DkNv4J_i.js');
+var index$1 = require('./index-CB1PuDlX.js');
+var keyboard = require('./keyboard-cHxZlTyz.js');
+var index$2 = require('./index-DhGCo_n8.js');
+
+/**
+ * The element that resizes when the keyboard opens
+ * is going to depend on the resize mode
+ * which is why we check that here.
+ */
+const getResizeContainer = (resizeMode) => {
+    /**
+     * If doc is undefined then we are
+     * in an SSR environment, so the keyboard
+     * adjustment does not apply.
+     * If the webview does not resize then there
+     * is no container to resize.
+     */
+    if (index.doc === undefined || resizeMode === keyboard.KeyboardResize.None || resizeMode === undefined) {
+        return null;
+    }
+    /**
+     * The three remaining resize modes: Native, Ionic, and Body
+     * all cause `ion-app` to resize, so we can listen for changes
+     * on that. In the event `ion-app` is not available then
+     * we can fall back to `body`.
+     */
+    const appRootSelector = index$1.config.get('appRootSelector', 'ion-app');
+    const ionApp = index.doc.querySelector(appRootSelector);
+    return ionApp ?? index.doc.body;
+};
+/**
+ * Get the height of ion-app or body.
+ * This is used for determining if the webview
+ * has resized before the keyboard closed.
+ * */
+const getResizeContainerHeight = (resizeMode) => {
+    const containerElement = getResizeContainer(resizeMode);
+    return containerElement === null ? 0 : containerElement.clientHeight;
+};
+/**
+ * Creates a controller that tracks and reacts to opening or closing the keyboard.
+ *
+ * @internal
+ * @param keyboardChangeCallback A function to call when the keyboard opens or closes.
+ */
+const createKeyboardController = async (keyboardChangeCallback) => {
+    let keyboardWillShowHandler;
+    let keyboardWillHideHandler;
+    let keyboardVisible;
+    /**
+     * This lets us determine if the webview content
+     * has resized as a result of the keyboard.
+     */
+    let initialResizeContainerHeight;
+    const init = async () => {
+        const resizeOptions = await keyboard.Keyboard.getResizeMode();
+        const resizeMode = resizeOptions === undefined ? undefined : resizeOptions.mode;
+        keyboardWillShowHandler = () => {
+            /**
+             * We need to compute initialResizeContainerHeight right before
+             * the keyboard opens to guarantee the resize container is visible.
+             * The resize container may not be visible if we compute this
+             * as soon as the keyboard controller is created.
+             * We should only need to do this once to avoid additional clientHeight
+             * computations.
+             */
+            if (initialResizeContainerHeight === undefined) {
+                initialResizeContainerHeight = getResizeContainerHeight(resizeMode);
+            }
+            keyboardVisible = true;
+            fireChangeCallback(keyboardVisible, resizeMode);
+        };
+        keyboardWillHideHandler = () => {
+            keyboardVisible = false;
+            fireChangeCallback(keyboardVisible, resizeMode);
+        };
+        index.win?.addEventListener('keyboardWillShow', keyboardWillShowHandler);
+        index.win?.addEventListener('keyboardWillHide', keyboardWillHideHandler);
+    };
+    const fireChangeCallback = (state, resizeMode) => {
+        if (keyboardChangeCallback) {
+            keyboardChangeCallback(state, createResizePromiseIfNeeded(resizeMode));
+        }
+    };
+    /**
+     * Code responding to keyboard lifecycles may need
+     * to show/hide content once the webview has
+     * resized as a result of the keyboard showing/hiding.
+     * createResizePromiseIfNeeded provides a way for code to wait for the
+     * resize event that was triggered as a result of the keyboard.
+     */
+    const createResizePromiseIfNeeded = (resizeMode) => {
+        if (
+        /**
+         * If we are in an SSR environment then there is
+         * no window to resize. Additionally, if there
+         * is no resize mode or the resize mode is "None"
+         * then initialResizeContainerHeight will be 0
+         */
+        initialResizeContainerHeight === 0 ||
+            /**
+             * If the keyboard is closed before the webview resizes initially
+             * then the webview will never resize.
+             */
+            initialResizeContainerHeight === getResizeContainerHeight(resizeMode)) {
+            return;
+        }
+        /**
+         * Get the resize container so we can
+         * attach the ResizeObserver below to
+         * the correct element.
+         */
+        const containerElement = getResizeContainer(resizeMode);
+        if (containerElement === null) {
+            return;
+        }
+        /**
+         * Some part of the web content should resize,
+         * and we need to listen for a resize.
+         */
+        return new Promise((resolve) => {
+            const callback = () => {
+                /**
+                 * As per the spec, the ResizeObserver
+                 * will fire when observation starts if
+                 * the observed element is rendered and does not
+                 * have a size of 0 x 0. However, the watched element
+                 * may or may not have resized by the time this first
+                 * callback is fired. As a result, we need to check
+                 * the dimensions of the element.
+                 *
+                 * https://www.w3.org/TR/resize-observer/#intro
+                 */
+                if (containerElement.clientHeight === initialResizeContainerHeight) {
+                    /**
+                     * The resize happened, so stop listening
+                     * for resize on this element.
+                     */
+                    ro.disconnect();
+                    resolve();
+                }
+            };
+            /**
+             * In Capacitor there can be delay between when the window
+             * resizes and when the container element resizes, so we cannot
+             * rely on a 'resize' event listener on the window.
+             * Instead, we need to determine when the container
+             * element resizes using a ResizeObserver.
+             */
+            const ro = new ResizeObserver(callback);
+            ro.observe(containerElement);
+        });
+    };
+    const destroy = () => {
+        index.win?.removeEventListener('keyboardWillShow', keyboardWillShowHandler);
+        index.win?.removeEventListener('keyboardWillHide', keyboardWillHideHandler);
+        keyboardWillShowHandler = keyboardWillHideHandler = undefined;
+    };
+    const isKeyboardVisible = () => keyboardVisible;
+    await init();
+    return { init, destroy, isKeyboardVisible };
+};
+
+const TOP_VISIBLE_THRESHOLD = 80;
+const SCROLL_HIDE_THRESHOLD = 60;
+const WHEEL_SUPPRESS_DURATION_MS = 80;
+const SUPPRESS_SHOW_DURATION_MS = 400;
+/**
+ * Creates a controller that manages scroll-based hide/show behavior
+ * for headers, footers, and tab bars.
+ *
+ * Listens to both wheel and scroll events. Wheel events (desktop mice)
+ * give direction instantly via deltaY. Scroll events cover touch,
+ * trackpad, and programmatic scrolling where wheel doesn't fire.
+ * A short suppression window stops them from double-processing the
+ * same gesture.
+ *
+ * When the user reverses scroll direction, we save that position as
+ * an anchor. The bar only hides after scrolling 60px past that
+ * anchor, which prevents flickering on small or jittery movements.
+ * Showing is immediate on direction change.
+ *
+ * When `options` is provided, the controller also handles the DOM
+ * setup: ResizeObserver for height tracking, CSS variable read/write,
+ * content partner/hidden class toggling, inert/aria-hidden, and
+ * full teardown cleanup. This avoids duplicating the same setup
+ * across header, footer, and tab-bar.
+ *
+ * @internal
+ * @param contentEl The content element to resolve the scroll element from.
+ * @param options Configuration for DOM setup (classes, CSS vars, a11y).
+ */
+const createScrollHideController = async (contentEl, options) => {
+    const { el, cssVar, hiddenClass, contentPartnerClass, contentHiddenClass, shouldKeepAriaHidden } = options;
+    let controllerIsHidden = false;
+    let resizeObserver;
+    // --- DOM setup: height tracking, classes, a11y ---
+    const updateHideHeight = () => {
+        index$1.readTask(() => {
+            const heightPx = el.offsetHeight;
+            index$1.writeTask(() => {
+                el.style.setProperty(cssVar, `${heightPx}px`);
+                contentEl.style.setProperty(cssVar, `${heightPx}px`);
+            });
+        });
+    };
+    const setHidden = (hidden) => {
+        controllerIsHidden = hidden;
+        el.classList.toggle(hiddenClass, hidden);
+        if (hidden) {
+            el.setAttribute('inert', '');
+            el.setAttribute('aria-hidden', 'true');
+        }
+        else {
+            el.removeAttribute('inert');
+            if (!shouldKeepAriaHidden || !shouldKeepAriaHidden()) {
+                el.removeAttribute('aria-hidden');
+            }
+        }
+        contentEl.classList.toggle(contentHiddenClass, hidden);
+    };
+    // --- Scroll math ---
+    const scrollEl = await index$2.getScrollElement(contentEl);
+    let lastScrollPosition = 0;
+    let scrollPositionAtDirectionChange = 0;
+    let lastWheelEventTimestamp = 0;
+    let suppressShowUntil = 0;
+    const commitHide = (hidden) => {
+        if (hidden) {
+            suppressShowUntil = Date.now() + SUPPRESS_SHOW_DURATION_MS;
+        }
+        else {
+            suppressShowUntil = 0;
+        }
+        setHidden(hidden);
+    };
+    const handleWheel = (wheelEvent) => {
+        lastWheelEventTimestamp = Date.now();
+        index$1.readTask(() => {
+            const currentScrollTop = scrollEl.scrollTop;
+            // Both wheel and scroll events fire for mouse wheel input.
+            // Scroll events are suppressed for 80ms after a wheel event,
+            // but when they resume, handleScroll needs an up-to-date
+            // lastScrollPosition or it may detect the wrong direction.
+            lastScrollPosition = currentScrollTop;
+            if (currentScrollTop <= TOP_VISIBLE_THRESHOLD) {
+                if (controllerIsHidden) {
+                    index$1.writeTask(() => commitHide(false));
+                }
+                return;
+            }
+            if (wheelEvent.deltaY < 0) {
+                scrollPositionAtDirectionChange = currentScrollTop;
+                if (controllerIsHidden) {
+                    index$1.writeTask(() => commitHide(false));
+                }
+            }
+            else if (wheelEvent.deltaY > 0) {
+                const scrolledSinceDirectionChange = currentScrollTop - scrollPositionAtDirectionChange;
+                if (scrolledSinceDirectionChange >= SCROLL_HIDE_THRESHOLD && !controllerIsHidden) {
+                    index$1.writeTask(() => commitHide(true));
+                }
+            }
+        });
+    };
+    const handleScroll = () => {
+        if (Date.now() - lastWheelEventTimestamp < WHEEL_SUPPRESS_DURATION_MS) {
+            return;
+        }
+        index$1.readTask(() => {
+            const currentScrollTop = scrollEl.scrollTop;
+            if (currentScrollTop <= TOP_VISIBLE_THRESHOLD) {
+                if (controllerIsHidden) {
+                    index$1.writeTask(() => commitHide(false));
+                }
+                lastScrollPosition = currentScrollTop;
+                return;
+            }
+            if (currentScrollTop === lastScrollPosition) {
+                return;
+            }
+            const isScrollingDown = currentScrollTop > lastScrollPosition;
+            const wasScrollingDown = lastScrollPosition > scrollPositionAtDirectionChange;
+            if (isScrollingDown !== wasScrollingDown) {
+                scrollPositionAtDirectionChange = lastScrollPosition;
+            }
+            const scrolledSinceDirectionChange = Math.abs(currentScrollTop - scrollPositionAtDirectionChange);
+            const requiredScrollDistance = isScrollingDown ? SCROLL_HIDE_THRESHOLD : 0;
+            lastScrollPosition = currentScrollTop;
+            if (scrolledSinceDirectionChange < requiredScrollDistance) {
+                return;
+            }
+            const shouldHide = isScrollingDown;
+            if (shouldHide !== controllerIsHidden) {
+                if (!shouldHide && Date.now() < suppressShowUntil) {
+                    return;
+                }
+                index$1.writeTask(() => commitHide(shouldHide));
+            }
+        });
+    };
+    // --- Controller ---
+    let initialized = false;
+    const init = () => {
+        initialized = true;
+        updateHideHeight();
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(() => updateHideHeight());
+            resizeObserver.observe(el);
+        }
+        scrollEl.addEventListener('scroll', handleScroll, { passive: true });
+        scrollEl.addEventListener('wheel', handleWheel, { passive: true });
+        contentEl.classList.add(contentPartnerClass);
+    };
+    const destroy = () => {
+        if (!initialized)
+            return;
+        scrollEl.removeEventListener('scroll', handleScroll);
+        scrollEl.removeEventListener('wheel', handleWheel);
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = undefined;
+        }
+        contentEl.classList.remove(contentPartnerClass, contentHiddenClass);
+        contentEl.style.removeProperty(cssVar);
+        if (controllerIsHidden) {
+            el.classList.remove(hiddenClass);
+            el.removeAttribute('inert');
+            el.removeAttribute('aria-hidden');
+            controllerIsHidden = false;
+        }
+        el.style.removeProperty(cssVar);
+    };
+    const isHidden = () => controllerIsHidden;
+    return { isHidden, init, destroy };
+};
+
+exports.createKeyboardController = createKeyboardController;
+exports.createScrollHideController = createScrollHideController;

package/dist/cjs/{select-option-render-CzyhrkOu.js → select-option-render-X_iZ-xeh.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BiQyIvoc.js');
-var index$1 = require('./index-B4ONUQRp.js');
+var index = require('./index-CB1PuDlX.js');
+var index$1 = require('./index-B3s1jjBU.js');
 
 /**
  * Converts a DOM node into a Stencil VNode (or text string) so the

package/dist/cjs/{slot-mutation-controller-CRa_cKOh.js → slot-mutation-controller-BS-L1szN.js}

@@ -3,7 +3,8 @@
  */
 'use strict';
 
-var helpers = require('./helpers-BrETKUUX.js');
+var index = require('./index-DkNv4J_i.js');
+var helpers = require('./helpers-DHNLF4fD.js');
 var dir = require('./dir-Bma_9Lqh.js');
 
 /**
@@ -95,8 +96,8 @@ const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
          */
         width === 0 &&
             notchSpacerEl.offsetParent === null &&
-            helpers.win !== undefined &&
-            'IntersectionObserver' in helpers.win) {
+            index.win !== undefined &&
+            'IntersectionObserver' in index.win) {
             /**
              * If there is an IO already attached
              * then that will update the notch
@@ -314,6 +315,11 @@ const createStartEndContainerController = (el, getStartContainer, getEndContaine
     };
 };
 
+/**
+ * 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.
@@ -332,6 +338,24 @@ 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.
@@ -341,21 +365,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.
  */
 const createClickController = (el, getNativeInput) => {
     let hasSlottedClick = false;
+    let rejectingFocus = false;
+    let removeDisarmListeners;
     const handleClickCapture = (ev) => {
         if (isSlottedClick(ev, el)) {
             hasSlottedClick = true;
@@ -370,15 +403,69 @@ 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();
+            helpers.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 };
 };
 
 /**
@@ -393,7 +480,7 @@ const createClickController = (el, getNativeInput) => {
 const createSlotMutationController = (el, slotName, mutationCallback) => {
     let hostMutationObserver;
     let slottedContentMutationObserver;
-    if (helpers.win !== undefined && 'MutationObserver' in helpers.win) {
+    if (index.win !== undefined && 'MutationObserver' in index.win) {
         const slots = Array.isArray(slotName) ? slotName : [slotName];
         hostMutationObserver = new MutationObserver((entries) => {
             for (const entry of entries) {

package/dist/cjs/{status-tap-hRIvObiJ.js → status-tap-D5yiKwdj.js}

@@ -3,9 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-BiQyIvoc.js');
-var index$1 = require('./index-DMz2Eyis.js');
-var helpers = require('./helpers-BrETKUUX.js');
+var index = require('./index-CB1PuDlX.js');
+var index$1 = require('./index-DhGCo_n8.js');
+var helpers = require('./helpers-DHNLF4fD.js');
+require('./index-DkNv4J_i.js');
+require('./focus-visible-DGPRKkcx.js');
 require('./dir-Bma_9Lqh.js');
 
 const startStatusTap = () => {

package/dist/cjs/{swipe-back-C-aigThB.js → swipe-back-xM_5R5s-.js}

@@ -3,10 +3,12 @@
  */
 'use strict';
 
-var helpers = require('./helpers-BrETKUUX.js');
+var helpers = require('./helpers-DHNLF4fD.js');
 var dir = require('./dir-Bma_9Lqh.js');
 var index = require('./index-DRPqwSvU.js');
-require('./index-BiQyIvoc.js');
+require('./index-DkNv4J_i.js');
+require('./focus-visible-DGPRKkcx.js');
+require('./index-CB1PuDlX.js');
 require('./gesture-controller-CeJslptU.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/cjs/{theme-Bw0rpaNN.js → theme-Cy4joHPt.js}

@@ -3,8 +3,32 @@
  */
 'use strict';
 
+/**
+ * Checks if an element has a parent matching the specified selector.
+ * This handles an element in both light DOM and shadow DOM contexts.
+ * @param selector The parent selector to check for (e.g., 'ion-datetime'
+ * or 'ion-toolbar[color]').
+ * @param el The element to check.
+ * @returns `true` if the element has a parent matching the specified selector,
+ * `false` otherwise.
+ */
 const hostContext = (selector, el) => {
-    return el.closest(selector) !== null;
+    // Check the light DOM first
+    if (el.closest(selector) !== null) {
+        return true;
+    }
+    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
+    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
+    // doesn't include attributes or classes.
+    if (selector.includes('[') || selector.includes('.')) {
+        return false;
+    }
+    // Check the shadow DOM by looking at the shadow root host and
+    // converting the selector to uppercase to compare with tagName
+    const upperCaseTagName = selector.toUpperCase();
+    const rootNode = el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    return shadowHost?.tagName === upperCaseTagName;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in

package/dist/cjs/validity-CoPMWggj.js

@@ -0,0 +1,51 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+/**
+ * Checks if the form element is in an invalid state based on
+ * Ionic validation classes.
+ *
+ * @param el The form element to check.
+ * @returns `true` if the element is invalid, `false` otherwise.
+ */
+const checkInvalidState = (el) => {
+    const hasIonTouched = el.classList.contains('ion-touched');
+    const hasIonInvalid = el.classList.contains('ion-invalid');
+    return hasIonTouched && hasIonInvalid;
+};
+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.
+ */
+const reportValidityToElementInternals = (nativeElement, internals) => {
+    if (!nativeElement?.validity) {
+        return;
+    }
+    if (nativeElement.validity.valid) {
+        internals.setValidity({});
+    }
+    else {
+        const validityFlags = getValidityFlags(nativeElement.validity);
+        internals.setValidity(validityFlags, nativeElement.validationMessage, nativeElement);
+    }
+};
+
+exports.checkInvalidState = checkInvalidState;
+exports.reportValidityToElementInternals = reportValidityToElementInternals;

package/dist/collection/collection-manifest.json

@@ -27,10 +27,13 @@
     "components/picker-column/picker-column.js",
     "components/picker/picker.js",
     "components/datetime-button/datetime-button.js",
+    "components/divider/divider.js",
     "components/fab/fab.js",
     "components/fab-button/fab-button.js",
     "components/fab-list/fab-list.js",
     "components/footer/footer.js",
+    "components/gallery/gallery.js",
+    "components/gallery-item/gallery-item.js",
     "components/grid/grid.js",
     "components/header/header.js",
     "components/img/img.js",
@@ -146,6 +149,11 @@
         "ion-datetime"
       ]
     },
+    {
+      "components": [
+        "ion-gallery"
+      ]
+    },
     {
       "components": [
         "ion-input"