voyager-ionic-core 9.0.3 → 9.0.7

package/dist/collection/components/content/content.js

@@ -3,6 +3,7 @@
  */
 import { Build, Host, forceUpdate, h, readTask, } from "@stencil/core";
 import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from "../../utils/helpers";
+import { getOverlaySizeType } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -47,6 +48,10 @@ export class Content {
             data: undefined,
             isScrolling: true,
         };
+        /**
+         * Whether the host is sized to its content.
+         */
+        this.sizeToContent = false;
         /**
          * If `true`, the content will scroll behind the headers
          * and footers. This effect can easily be seen by setting the toolbar
@@ -80,6 +85,7 @@ export class Content {
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.sizeToContent = this.readSizeToContent();
     }
     connectedCallback() {
         this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
@@ -119,6 +125,7 @@ export class Content {
         }
         // Re-observe on reattach, since componentDidLoad only fires once.
         this.setupFullscreenResizeObserver();
+        this.updateSizeToContent();
     }
     componentDidLoad() {
         // The custom elements build assigns fullscreen after connectedCallback.
@@ -175,6 +182,16 @@ export class Content {
         });
         this.fullscreenResizeObserver.observe(this.el);
     }
+    /**
+     * Picks up an overlay that is no longer sized the way the last render
+     * assumed, re-rendering only when the answer changes. Read in a `readTask`
+     * because resolving the custom property forces a style recalculation.
+     */
+    updateSizeToContent() {
+        readTask(() => {
+            this.sizeToContent = this.readSizeToContent();
+        });
+    }
     destroyFullscreenResizeObserver() {
         if (this.fullscreenResizeObserver !== undefined) {
             this.fullscreenResizeObserver.disconnect();
@@ -221,6 +238,30 @@ export class Content {
         const mode = getIonMode(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
+    /**
+     * Reads whether to size the component to its content height. Forces a style
+     * recalculation, so it belongs in a read task or before the first render.
+     *
+     * This applies inside popovers and modals with a content-based `--height`,
+     * where the overlay does not provide the content with a definite height
+     * to fill.
+     *
+     * Only `--height` is consulted. Styling the wrapper directly, such as
+     * `ion-modal::part(content) { height: fit-content; }`, does not change
+     * `--height` and therefore cannot be observed. `--height` is the only
+     * supported way to opt into content-based sizing.
+     */
+    readSizeToContent() {
+        if (hostContext('ion-popover', this.el)) {
+            return true;
+        }
+        const modal = this.el.closest('ion-modal');
+        if (modal === null) {
+            return false;
+        }
+        const height = getComputedStyle(modal).getPropertyValue('--height');
+        return getOverlaySizeType(height) === 'content';
+    }
     resize() {
         /**
          * Only force update if the component is rendered in a browser context.
@@ -231,6 +272,12 @@ export class Content {
          * TODO: Remove if STENCIL-834 determines Stencil will account for this.
          */
         if (Build.isBrowser) {
+            /**
+             * A window resize can cross a media query that changes the modal's
+             * `--height`. The content's own offsets are unchanged, so neither branch
+             * below re-renders and the class from the last render would go stale.
+             */
+            this.updateSizeToContent();
             if (this.fullscreen) {
                 readTask(() => this.readDimensions());
             }
@@ -241,13 +288,15 @@ export class Content {
         }
     }
     /**
-     * Recalculate content dimensions. Called by overlays (e.g., popover) when
-     * sibling elements like headers or footers have finished rendering and their
-     * heights are available, ensuring accurate offset-top calculations.
+     * Recalculates the content dimensions and whether it should size itself to
+     * its content. Called by overlays when something they own changes, such as
+     * a header finishing its render or `--height` being updated.
+     *
      * @internal
      */
     async recalculateDimensions() {
         readTask(() => this.readDimensions());
+        this.updateSizeToContent();
     }
     readDimensions() {
         const page = getPageElement(this.el);
@@ -418,21 +467,21 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'e1013621096729354ef92915af52dd823e69fdff', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
-                'content-sizing': hostContext('ion-popover', this.el),
+                'content-sizing': this.sizeToContent,
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            }, ...inheritedAttributes }, h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
+            }, ...inheritedAttributes }, h("div", { key: '3d8649b164d6324beaa1bc50e1d204ad06c2ec1a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'dd2d3bed8690b4f5027a43f5ec60e7e7df18106d', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'dc3d4584d9e9afd43699525a619b8e873078fbbf' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -595,6 +644,11 @@ export class Content {
             }
         };
     }
+    static get states() {
+        return {
+            "sizeToContent": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "ionScrollStart",
@@ -679,7 +733,7 @@ export class Content {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Recalculate content dimensions. Called by overlays (e.g., popover) when\nsibling elements like headers or footers have finished rendering and their\nheights are available, ensuring accurate offset-top calculations.",
+                    "text": "Recalculates the content dimensions and whether it should size itself to\nits content. Called by overlays when something they own changes, such as\na header finishing its render or `--height` being updated.",
                     "tags": [{
                             "name": "internal",
                             "text": undefined

package/dist/collection/components/datetime/datetime.js

@@ -56,16 +56,6 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./ut
 export class Datetime {
     constructor() {
         this.inputId = `ion-dt-${datetimeIds++}`;
-        /**
-         * Set true only by `visibleCallback`. Lets `hiddenCallback` ignore the
-         * synthetic "not intersecting" entry IntersectionObserver fires on
-         * `observe()` when the host mounts offscreen.
-         *
-         * Don't reset this in `disconnectedCallback`. Overlays disconnect and
-         * reconnect the host without re-creating the observers, so a reset there
-         * makes `hiddenCallback` miss the dismissal.
-         */
-        this.hasBeenIntersecting = false;
         this.prevPresentation = null;
         this.showMonthAndYear = false;
         this.activeParts = [];
@@ -627,12 +617,19 @@ export class Datetime {
             if (this.el.classList.contains('datetime-ready')) {
                 return;
             }
-            const rect = this.el.getBoundingClientRect();
-            if (rect.width === 0 || rect.height === 0) {
+            if (!this.hasLayoutBox()) {
                 return;
             }
             this.markReady();
         };
+        /**
+         * Whether the datetime is on screen. A modal or popover hides its contents
+         * with `display: none`, which leaves the host without a layout box.
+         */
+        this.hasLayoutBox = () => {
+            const { width, height } = this.el.getBoundingClientRect();
+            return width > 0 && height > 0;
+        };
         this.markReady = () => {
             if (this.el.classList.contains('datetime-ready')) {
                 return;
@@ -965,11 +962,14 @@ export class Datetime {
          * areas will not have the correct values snapped into place.
          */
         const visibleCallback = (entries) => {
-            const ev = entries[0];
+            /**
+             * The browser can batch several observations into one callback, so
+             * only the last entry describes the datetime now.
+             */
+            const ev = entries[entries.length - 1];
             if (!ev.isIntersecting) {
                 return;
             }
-            this.hasBeenIntersecting = true;
             this.markReady();
         };
         const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
@@ -1002,15 +1002,22 @@ export class Datetime {
          * we did originally has been lost.
          */
         const hiddenCallback = (entries) => {
-            const ev = entries[0];
+            const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
                 return;
             }
-            // Ignore the initial "not intersecting" entry IntersectionObserver fires on observe().
-            if (!this.hasBeenIntersecting) {
+            /**
+             * WebKit reports a datetime that is still on screen as not
+             * intersecting, and it doesn't deliver that entry to every observer on
+             * the same root and target, so `visibleCallback` may never hear about
+             * it and add `datetime-ready` back. That is what left the calendar
+             * blank in #30933. Checking the host instead of trusting the entry
+             * also covers the synthetic "not intersecting" entry `observe()` fires
+             * when the datetime mounts offscreen.
+             */
+            if (this.hasLayoutBox()) {
                 return;
             }
-            this.hasBeenIntersecting = false;
             this.destroyInteractionListeners();
             /**
              * When datetime is hidden, we need to make sure that
@@ -1822,7 +1829,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '4e0b529a70924b065bcc6191e08550428b5a52a0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (h(Host, { key: 'a9128b5c55464e30a269daf9d725bf430c8c655c', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses(color, {
                     [mode]: true,
                     ['datetime-readonly']: readonly,
@@ -1834,7 +1841,7 @@ export class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, h("div", { key: 'cc9d1b92f960984cb0466d0003a240ace67da243', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            } }, h("div", { key: 'b49f3a98db2b7cf535d7ea894d518f75f8a1fefb', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }

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

@@ -151,6 +151,12 @@
   position: relative;
   flex: 1;
   width: 100%;
+  /**
+   * The input keeps a minimum width so that the value stays visible
+   * when a long label or wide slotted content would otherwise shrink
+   * it to nothing.
+   */
+  min-width: 2ch;
   max-width: 100%;
   height: 100%;
   max-height: 100%;

package/dist/collection/components/input/input.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
-import { createNotchController, createStartContainerController, checkInvalidState } from "../../utils/forms/index";
+import { createClickController, createNotchController, createStartContainerController, checkInvalidState, } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -227,11 +227,7 @@ export class Input {
      * Instead, the click event from the ion-input is emitted.
      */
     onClickCapture(ev) {
-        const nativeInput = this.nativeInput;
-        if (nativeInput && ev.target === nativeInput) {
-            ev.stopPropagation();
-            this.el.click();
-        }
+        this.clickController?.handleClickCapture(ev);
     }
     componentWillLoad() {
         this.inheritedAttributes = {
@@ -252,6 +248,7 @@ export class Input {
             return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
+        this.clickController = createClickController(el, () => this.nativeInput);
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -527,7 +524,7 @@ export class Input {
          * the input has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '9e9495b8f962372d526343ff76b80fb9700fce19', class: createColorClasses(this.color, {
+        return (h(Host, { key: '290cf987de670276bf40b9f19d35d3769d9c0540', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -538,14 +535,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '7121f34ed782caf7a7b82703b94fc9d6c78ce5ba', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '0c1f8526d86c8a2433c23873fa64b1edc0eafe29', class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'a50323fde0fb12997c2324eded132908680ea450', name: "start" })), h("div", { key: '626360c4e115a5286baab49680b2a02cd39614c8', class: "input-control" }, this.renderLabel(), h("div", { key: '1cefd9d8cd6ed96fab7b58237f8f8b0c5e1be92e', class: "native-wrapper", onClick: this.onLabelClick }, h("input", { key: '3dee5302f3a685a848fedd7e1face5095e3ac64b', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById(), ...this.inheritedAttributes }))), h("div", { key: '39fff82e00e63963fe5f17794900ace2a3faa208', class: "input-end" }, this.clearInput && !readonly && !disabled && (h("button", { key: '1fa86fdb5baf4a7cd531ee0fe767a42b44fb33fc', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '27f4bd671f6084a7e608e4f9442192c950879dc2', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7827c61ffdd02952fc8cf2096f621b50fc51ec03', class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '1d8af52d3506742d87334b388859a8bf613e1be0', name: "start" })), h("div", { key: '927a412064538c00df98fabc06a32c564d05e984', class: "input-control" }, this.renderLabel(), h("div", { key: '05f80c0b11a7da57445f976bd2dbb557fa63c9bc', class: "native-wrapper", onClick: this.onLabelClick }, h("input", { key: 'cb6f5d81ba7c2a04cc4c9deb5d3f5bca8562b6db', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById(), ...this.inheritedAttributes }))), h("div", { key: '82cd1b0458dcd491fd1a46b29764f2b79a969bc6', class: "input-end" }, this.clearInput && !readonly && !disabled && (h("button", { key: 'dfcf0ed81cf36fc61b8e12ed4605ac6b6eb50dad', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'ced39304f97e56870f7480afa025ffe232010cfb', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'f4098769eef1cc5aa2074c369f757ccb94a98e1c', name: "end" })), shouldRenderHighlight && h("div", { key: '258fe6ff8f9f57836f2a3a0b6163bd2b7dbf0699', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '11e2c866135f332e81b4637de178e1c5c7da0d38', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'afb0e75e7103b2bf925a9c7649c93eb1d5702670', name: "end" })), shouldRenderHighlight && h("div", { key: '1f305bba279e93685d7139acf0aff6bf4a77500c', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -151,6 +151,12 @@
   position: relative;
   flex: 1;
   width: 100%;
+  /**
+   * The input keeps a minimum width so that the value stays visible
+   * when a long label or wide slotted content would otherwise shrink
+   * it to nothing.
+   */
+  min-width: 2ch;
   max-width: 100%;
   height: 100%;
   max-height: 100%;

package/dist/collection/components/input-otp/input-otp.js

@@ -19,6 +19,11 @@ export class InputOTP {
          * focus behavior when an input box is focused.
          */
         this.isKeyboardNavigation = false;
+        /**
+         * The `length` watcher runs before new inputs render, so
+         * `componentDidRender` updates their tab indexes instead.
+         */
+        this.updateTabIndexesAfterRender = false;
         this.inputValues = [];
         this.hasFocus = false;
         this.previousInputValues = [];
@@ -378,6 +383,10 @@ export class InputOTP {
         this.initializeValues();
         this.updateTabIndexes();
     }
+    lengthChanged() {
+        this.initializeValues();
+        this.updateTabIndexesAfterRender = true;
+    }
     /**
      * Processes the separators prop into an array of numbers.
      *
@@ -434,6 +443,12 @@ export class InputOTP {
     componentDidLoad() {
         this.updateTabIndexes();
     }
+    componentDidRender() {
+        if (this.updateTabIndexesAfterRender) {
+            this.updateTabIndexesAfterRender = false;
+            this.updateTabIndexes();
+        }
+    }
     /**
      * Get the regex pattern for allowed characters.
      * If a pattern is provided, use it to create a regex pattern
@@ -611,7 +626,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
-        return (h(Host, { key: 'bd37661e13cde21feff30c663e6813ce3fff0d9a', class: createColorClasses(color, {
+        return (h(Host, { key: 'def9fbd4fa135e6f435380c6ea86ac1621b4a111', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -619,10 +634,18 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", { key: '5e206f870024f1ecfebda999ff31e6e815774deb', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: 'c268f838ddab2c8d6a612a11c7d38e6ca076436d', class: {
+            }) }, h("div", { key: '5d3d7646a3d4fc856b7b2e1f53d29fca47b10baf', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => {
+                if (el) {
+                    inputRefs[index] = el;
+                }
+                else {
+                    // The input was removed, so drop its ref and any after it.
+                    inputRefs.splice(index);
+                }
+            }, onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '9d72a4ab35b5fdd6bba9701050c385ed253b310f', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: 'c0736359b26f609b795e399fc1ad9b540632af18' }))));
+            } }, h("slot", { key: '7deb3373c0d4e5deac22fa51577d271b9bb3a6d2' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }
@@ -1054,6 +1077,9 @@ export class InputOTP {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "length",
+                "methodName": "lengthChanged"
             }, {
                 "propName": "separators",
                 "methodName": "processSeparators"

package/dist/collection/components/item/item.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h } from "@stencil/core";
-import { inheritAttributes, raf } from "../../utils/helpers";
+import { createAttributeController } from "../../utils/attribute-controller";
+import { raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { chevronForward } from "ionicons/icons";
 import { getIonMode } from "../../global/ionic-global";
@@ -23,7 +24,6 @@ export class Item {
     constructor() {
         this.labelColorStyles = {};
         this.itemStyles = new Map();
-        this.inheritedAriaAttributes = {};
         this.didLoad = false;
         this.multipleInputs = false;
         this.focusable = true;
@@ -104,9 +104,16 @@ export class Item {
             this.watchForIndicatorControls();
             this.updateInteractivityOnSlotChange();
         }
+        this.ariaController?.init();
     }
     componentWillLoad() {
-        this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
+        /**
+         * Only the initial copy takes the attribute off the host, so an `aria-label` written
+         * after load names both the native element and the Host, which is a `listitem` when
+         * the item is in an `ion-list`. The two names always agree, so a screen reader just
+         * reads it twice.
+         */
+        this.ariaController = createAttributeController(this.el, ['aria-label'], () => forceUpdate(this));
     }
     componentDidLoad() {
         raf(() => {
@@ -123,6 +130,7 @@ export class Item {
             this.indicatorControlObserver.disconnect();
             this.indicatorControlObserver = undefined;
         }
+        this.ariaController?.destroy();
     }
     totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
@@ -230,7 +238,8 @@ export class Item {
         return controls[0];
     }
     render() {
-        const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
+        const { detail, detailIcon, download, labelColorStyles, lines, disabled, href, rel, target, routerAnimation, routerDirection, multipleInputs, } = this;
+        const inheritedAriaAttributes = this.ariaController?.attributes ?? {};
         const childStyles = {};
         const mode = getIonMode(this);
         const clickable = this.isClickable();
@@ -306,7 +315,7 @@ export class Item {
          * multi-input item, and in a clickable item, which is a second tab stop.
          */
         const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
-        return (h(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: {
+        return (h(Host, { key: '7fe924642310c19f057ae1bfa29c1acdf5cc7ed6', "aria-disabled": ariaDisabled, class: {
                 ...childStyles,
                 ...labelColorStyles,
                 ...createColorClasses(this.color, {
@@ -323,7 +332,7 @@ export class Item {
                     'ion-focusable': this.focusable,
                     'item-rtl': document.dir === 'rtl',
                 }),
-            }, role: inList ? 'listitem' : null }, h(TagType, { key: 'd42583cf62133b2553de2e7a5357168640bb1834', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, h("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, h("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
+            }, role: inList ? 'listitem' : null }, h(TagType, { key: '8fddfb2a076b4b98e45ee8b23579d011dba12acb', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: '7f888b62b2023cf501fd308e32629e7a291c2d05', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '6d5cdde307caa65b131edb65cb0a5f8294cf151c', class: "item-inner", part: "inner" }, h("div", { key: '9fbfffdff4cf51adf1f02d573953cf8b145574b0', class: "input-wrapper", part: "container" }, h("slot", { key: '574c7e61cdaa3959a28bad7353105ef217a76ed9', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'ed7e211960cd65ed17f865a6d50d5bdde069416b', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '2847bb21f42e9d5ab8ea86262b2bc1c3b3f7c902', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: '55502ef394db0953144387fa3baebf9fa6a976a9' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu/menu.js

@@ -5,7 +5,7 @@ import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { focusFirstDescendant, focusLastDescendant } from "../../utils/focus-trap";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
-import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher, updateCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { menuController } from "../../utils/menu-controller/index";
@@ -560,6 +560,7 @@ export class Menu {
         // emit opened/closed events
         this._isOpen = isOpen;
         this.isAnimating = false;
+        updateCloseWatcher();
         if (!this._isOpen) {
             this.blocker.unblock();
         }
@@ -656,14 +657,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '1208ba437fa58680325408d3d4c8580950da1d68', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '5cf26df26d4e539860cbeaea98ec621b98c3fcfc', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: 'c0ddc957b7a7956b41901d77ae02d91e73071c55', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '6e44c56116431a024f114ab85ded1b822c942fac' })), h("ion-backdrop", { key: '5f4bbcf84444d96ec6b02bf567e1aaf95f59078d', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'f337016e293bb8665c99762e0c389dd6c372bb33', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '4c3fe331aa42cd57d7ad9bd1f5910f8eeb62d7da' })), h("ion-backdrop", { key: '61af7ea876d81574841e1dd3e81e2352e555d096', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,7 +77,12 @@
   --max-width: auto;
   --height: 100%;
   --min-height: auto;
-  --max-height: auto;
+  /**
+   * Clamps a content-sized `--height` (auto, fit-content, ...) to the
+   * overlay, giving the wrapper's flex children something to shrink
+   * toward so `ion-content` scrolls instead of overflowing.
+   */
+  --max-height: 100%;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -129,8 +134,14 @@ ion-backdrop {
 /**
  * The wrapper receives programmatic focus for screen readers but should not
  * show a visible focus ring, which is meant only for keyboard navigation.
+ *
+ * A flex layout is required for the wrapper to size itself to its content
+ * when the modal is content-sized (`--height` is auto, fit-content, ...).
+ * This makes it so that the content can scroll when it overflows the wrapper.
  */
 .modal-wrapper {
+  display: flex;
+  flex-direction: column;
   outline: none;
 }