voyager-ionic-core 9.0.1 → 9.0.6

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

package/dist/collection/components/modal/modal.js

@@ -21,8 +21,8 @@ import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { createSheetGesture } from "./gestures/sheet";
 import { createSwipeToCloseGesture, SwipeToCloseDefaults } from "./gestures/swipe-to-close";
-import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeAreaOverrides, clearSafeAreaOverrides, getRootSafeAreaTop, onRootSafeAreaTopChange, hasCustomModalDimensions, } from "./safe-area-utils";
-import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
+import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeAreaOverrides, clearSafeAreaOverrides, getRootSafeAreaTop, onRootSafeAreaTopChange, getModalCoveredAxes, } from "./safe-area-utils";
+import { onModalHeightChange, setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -1053,7 +1053,7 @@ export class Modal {
     /**
      * Creates the context object for safe-area utilities.
      *
-     * `hasCustomDimensions` is only set by `setInitialSafeAreaOverrides()`
+     * `coveredAxes` is only set by `setInitialSafeAreaOverrides()`
      * because it is only read by `getInitialSafeAreaConfig()`. Other callers
      * (resize handler, post-animation update, fullscreen-padding apply) would
      * pay a `getComputedStyle()` cost for a value they never consult.
@@ -1067,6 +1067,26 @@ export class Modal {
             currentBreakpoint: this.currentBreakpoint,
         };
     }
+    /**
+     * Keeps the content's sizing in sync with `--height`. The content reads the
+     * property to determine whether it should size itself to its content, and
+     * changes to `--height` on an ancestor or the root can change that behavior
+     * without changing the modal itself.
+     */
+    watchHeightForContent() {
+        /**
+         * A sheet's height comes from its breakpoints, so its content never sizes
+         * itself to `--height`. Watching it would cause the drag to recalculate on
+         * every frame.
+         */
+        if (this.isSheetModal) {
+            return;
+        }
+        this.unsubscribeHeightChange?.();
+        this.unsubscribeHeightChange = onModalHeightChange(this.el, () => {
+            this.el.querySelectorAll('ion-content').forEach((contentEl) => contentEl.recalculateDimensions());
+        });
+    }
     /**
      * Sets initial safe-area overrides before modal animation.
      * Called in present() before animation starts.
@@ -1080,10 +1100,11 @@ export class Modal {
     setInitialSafeAreaOverrides() {
         const context = {
             ...this.getSafeAreaContext(),
-            hasCustomDimensions: hasCustomModalDimensions(this.el),
+            coveredAxes: getModalCoveredAxes(this.el),
         };
         const safeAreaConfig = getInitialSafeAreaConfig(context);
         applySafeAreaOverrides(this.el, safeAreaConfig);
+        this.watchHeightForContent();
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
@@ -1203,6 +1224,8 @@ export class Modal {
         clearSafeAreaOverrides(this.el);
         this.unsubscribeRootSafeAreaTop?.();
         this.unsubscribeRootSafeAreaTop = undefined;
+        this.unsubscribeHeightChange?.();
+        this.unsubscribeHeightChange = undefined;
         // Remove internal sheet offset property
         this.el.style.removeProperty('--ion-modal-offset-top');
         const { contentEl } = this.findContentAndFooter();
@@ -1240,7 +1263,7 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, { key: '7c9c736052c5a788cf31040b6b2386dd9ea7454b', "no-router": true,
+        return (h(Host, { key: '17a95bd7722bac2344bea041aff97db17f55c0cf', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1, ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
@@ -1253,7 +1276,7 @@ export class Modal {
                 'overlay-hidden': true,
                 [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
                 ...getClassMap(this.cssClass),
-            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: '01b5b5765fb3a32393c736065c824bf760728823', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '40fa7727a0923f7d7461dd027f1511a6a148d84a', class: "modal-shadow" }), h("div", { key: '9af934b607f60795bd5bff7bee6eacfc9b14fa35',
+            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: '9dab1ef4771c0d847ba2be8672afbaa2748517f3', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '64af7ed1c5f552b61fc4b9387b926acc76c8a99a', class: "modal-shadow" }), h("div", { key: '7e76d77d5b2e8f0467bb793facf5aa86f8d01bbe',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1266,9 +1289,9 @@ export class Modal {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: 'df84a6806413b13efc5b03c862edde83151579a7', class: "modal-handle",
+            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: '5efc0bb0a59adcc594ac48da9fd90e57908a7ffb', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '072d3929ec6f25481946b184d8ac24219011e783', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '6175fcd0b39c086b4e9eb9e96c4d631c2a86774b', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.md.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;
 }