voyager-ionic-core 9.0.3 → 9.0.6

package/dist/collection/components/textarea/textarea.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } 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";
@@ -189,11 +189,7 @@ export class Textarea {
      * Instead, the click event from the ion-textarea is emitted.
      */
     onClickCapture(ev) {
-        const nativeInput = this.nativeInput;
-        if (nativeInput && ev.target === nativeInput) {
-            ev.stopPropagation();
-            this.el.click();
-        }
+        this.clickController?.handleClickCapture(ev);
     }
     connectedCallback() {
         const { el } = this;
@@ -206,6 +202,7 @@ export class Textarea {
             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(() => {
@@ -461,7 +458,7 @@ export class Textarea {
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '78da9c96e6a29f19b237f268dd8bfd044afe27b6', class: createColorClasses(this.color, {
+        return (h(Host, { key: '0f01ed6565313c45beaea5e0aa429a86b9cfa1a0', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -470,7 +467,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'c5ea3f26e01e66b857d3a1c88dbafbf2dbb81fdb', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '5a9d0efc8c13d9bd4ec4ceadf1bdb84205c47b3d', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'da08262e33f3a5b454847297338a74f07c5b60c9', name: "start" })), h("div", { key: '6461dc7381929eb83679ec07563b7bdf8bfc3f9f', class: "textarea-control" }, this.renderLabel(), h("div", { key: '8f7902a9e6040384d25d0e2061c04f6b49acf187', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '2149d8b2c23a164c536327c98d7a632e1e85428a', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '84f5f42add89875c3f0cce734b512a9e7be81e03', class: "textarea-end" }, h("slot", { key: 'ea654d78013a00b8af33deb89d42c2b7f6c9cb99', name: "end" })), shouldRenderHighlight && h("div", { key: 'b72195d2606816b3b71e65214d78cef1740f4804', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'a59548c3d3bf66543fd6e06b5c3b6e649f963164', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '29055193d664d9fe84ba0340fdcbbc54fec0e403', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '2cc122d9541ce7ae3c2309c27123b6c6c91cbfc7', name: "start" })), h("div", { key: 'c847a6fa1eaf6ef2b296415cd72bdd3aee9828a2', class: "textarea-control" }, this.renderLabel(), h("div", { key: 'f9205f82d6346daa86dc7e0f6e1eb221c76ed7b0', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '0bdb517fa5b3a44eeb3bb2ed1f9a8eab21a9a6a1', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '1ce661b800ef12146bdb97fb193e22be227ea052', class: "textarea-end" }, h("slot", { key: 'aca5704db48fe8e0e784cf57f2978ae2d63b3edc', name: "end" })), shouldRenderHighlight && h("div", { key: 'd916816d44cbdb4bc9a05032c5490eaa9bf3ba47', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

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

@@ -155,6 +155,12 @@
   position: relative;
   flex: 1;
   width: 100%;
+  /**
+   * The textarea 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%;
   max-height: 100%;
   border: 0;
@@ -292,7 +298,15 @@
 
 .native-wrapper {
   display: grid;
-  min-width: inherit;
+  /**
+   * The wrapper has to carry the same minimum width as the textarea it holds.
+   * It is the flex item that competes with the label and the slots for space,
+   * so without it the textarea keeps its width but overflows the field.
+   *
+   * The minimum cannot be inherited because .textarea-control sets
+   * `min-width: 0` so that the slots keep their size.
+   */
+  min-width: 2ch;
   max-width: inherit;
   min-height: inherit;
   max-height: inherit;

package/dist/collection/index.js

@@ -10,7 +10,7 @@ export { getTimeGivenProgression } from './utils/animation/cubic-bezier';
 export { createGesture } from './utils/gesture';
 export { initialize } from './global/ionic-global';
 export { componentOnReady } from './utils/helpers';
-export { LogLevel } from './utils/logging';
+export { LogLevel, printIonWarning, printIonError } from './utils/logging';
 export { isPlatform, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
 export { getMode, setupConfig } from './utils/config';

package/dist/collection/utils/attribute-controller.js

@@ -0,0 +1,126 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { win } from "./browser/index";
+import { ariaAttributes, inheritAttributes } from "./helpers";
+/**
+ * Copies a set of attributes off the host element so they can be applied to an element
+ * inside the shadow root, then keeps that copy in sync as the host attributes change.
+ * Using `inheritAttributes` alone copies once at load, so anything written to the host
+ * afterwards never reaches the element the assistive technology reads.
+ *
+ * Create the controller in `componentWillLoad`. It takes the initial copy and starts
+ * watching right away, so `init()` is only needed to resume after a move.
+ *
+ * Two things to know before adopting it. Only the initial copy removes the attributes
+ * from the host, so a value written after load sits on the host as well as on the
+ * element it is applied to, which matters if the host has a role of its own. And an
+ * attribute from the initial markup can never be removed, only overwritten, since the
+ * copy already took it off the host and a `removeAttribute` there fires no mutation.
+ * An empty string works for `aria-label` and friends, but a token-valued attribute
+ * has to be set to its default instead, so `aria-pressed="false"` rather than empty.
+ *
+ * @internal
+ * @param el The host element to copy from and watch.
+ * @param attributes The attributes to copy and watch.
+ * @param onChange Called after `attributes` changes, so the component can re-render.
+ * @param hostOwnedAttributes Attributes copied at load but not watched. Use it for
+ * attributes the component renders on its own `<Host>`, since a later change to one of
+ * those is the component's own write, and for attributes that would put a second node in
+ * the accessibility tree if the host kept a copy alongside the one we apply.
+ */
+export const createAttributeController = (el, attributes, onChange, hostOwnedAttributes = []) => {
+    let inherited = inheritAttributes(el, attributes);
+    let observer;
+    const watchedAttributes = attributes.filter((attr) => !hostOwnedAttributes.includes(attr));
+    /**
+     * The names still on the host, which is everything written after load. The initial
+     * copy removes what it captures, so a missing attribute only counts as a removal
+     * when its name is in here.
+     */
+    const hostWritten = new Set();
+    const setPresence = (name, value) => {
+        if (value === null) {
+            hostWritten.delete(name);
+        }
+        else {
+            hostWritten.add(name);
+        }
+    };
+    /**
+     * Nothing is watching while the host is out of the tree, since `disconnectedCallback`
+     * calls `destroy()`, and `forceUpdate` is a no-op on a disconnected host anyway. So
+     * the host has to be re-read on the way back in.
+     */
+    const readMissedChanges = () => {
+        const changed = {};
+        for (const name of watchedAttributes) {
+            const value = el.getAttribute(name);
+            const wasOnHost = hostWritten.has(name);
+            setPresence(name, value);
+            /**
+             * An attribute that was never written to the host is missing because the initial
+             * copy took it, not because the developer cleared it.
+             */
+            if ((value === null && !wasOnHost) || value === inherited[name]) {
+                continue;
+            }
+            changed[name] = value;
+        }
+        if (Object.keys(changed).length > 0) {
+            inherited = { ...inherited, ...changed };
+            onChange();
+        }
+    };
+    const init = () => {
+        // There is no MutationObserver in SSR or the hydrate build.
+        if (observer !== undefined || watchedAttributes.length === 0 || win === undefined || !('MutationObserver' in win)) {
+            return;
+        }
+        readMissedChanges();
+        observer = new MutationObserver((mutations) => {
+            const changed = {};
+            for (const mutation of mutations) {
+                const name = mutation.attributeName;
+                // A removed attribute reads back as null, which clears it from the element the
+                // values are spread onto.
+                const value = el.getAttribute(name);
+                setPresence(name, value);
+                changed[name] = value;
+            }
+            inherited = { ...inherited, ...changed };
+            onChange();
+        });
+        observer.observe(el, { attributeFilter: watchedAttributes });
+    };
+    const destroy = () => {
+        observer?.disconnect();
+        observer = undefined;
+    };
+    /**
+     * Has to run after the initial copy, because that copy removes the attributes from the
+     * host and an observer armed any earlier would read the removal as a developer clearing
+     * them.
+     */
+    init();
+    return {
+        get attributes() {
+            return inherited;
+        },
+        init,
+        destroy,
+    };
+};
+/**
+ * The `createAttributeController` equivalent of `inheritAriaAttributes`, which copies and
+ * watches every ARIA attribute plus `role`.
+ *
+ * @internal
+ * @param el The host element to copy from and watch.
+ * @param onChange Called after the attributes change, so the component can re-render.
+ * @param hostOwnedAttributes Attributes copied at load but not watched. See
+ * `createAttributeController`.
+ */
+export const createAriaAttributeController = (el, onChange, hostOwnedAttributes = []) => {
+    return createAttributeController(el, ariaAttributes, onChange, hostOwnedAttributes);
+};

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

@@ -0,0 +1,70 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { raf } from "../helpers";
+/**
+ * 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.
+ *
+ * The slotted element is compared against the host in case the form control
+ * itself is slotted into, for example, an item. Without that check a control
+ * carrying slot="start"/"end" would treat every click on itself as a slotted
+ * click.
+ */
+export const getSlottedClickContent = (ev, el) => {
+    const slotted = ev.target.closest('[slot="start"], [slot="end"]');
+    return slotted !== null && slotted !== el && el.contains(slotted) ? slotted : null;
+};
+/**
+ * Whether a click started on content slotted into a form control's start or
+ * end slot.
+ */
+const isSlottedClick = (ev, el) => getSlottedClickContent(ev, el) !== null;
+/**
+ * A utility for form components that wrap their content in a <label>, such as
+ * ion-input, ion-textarea and ion-select.
+ *
+ * Clicking slotted content also clicks that label, and the browser follows it
+ * with a click on the label's control. That second click would be emitted from
+ * 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.
+ *
+ * @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
+ * label has no `for` attribute, such as ion-select, where the browser forwards
+ * to an internal control that already re-bubbles targeting the host.
+ */
+export const createClickController = (el, getNativeInput) => {
+    let hasSlottedClick = false;
+    const handleClickCapture = (ev) => {
+        if (isSlottedClick(ev, el)) {
+            hasSlottedClick = true;
+            raf(() => (hasSlottedClick = false));
+            return;
+        }
+        if (getNativeInput === undefined) {
+            if (hasSlottedClick) {
+                ev.stopPropagation();
+                hasSlottedClick = false;
+            }
+            return;
+        }
+        const nativeInput = getNativeInput();
+        if (nativeInput !== undefined && ev.target === nativeInput) {
+            ev.stopPropagation();
+            if (!hasSlottedClick) {
+                el.click();
+            }
+            hasSlottedClick = false;
+        }
+    };
+    return { handleClickCapture };
+};

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

@@ -5,4 +5,5 @@ export * from './notch-controller';
 export * from './start-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
+export * from './click-controller';
 export * from './validity';

package/dist/collection/utils/helpers.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { win } from "./browser/index";
 import { printIonError } from "./logging/index";
 import { isRTL } from "./rtl/index";
 export const transitionEndAsync = (el, expectedDuration = 0) => {
@@ -82,8 +83,8 @@ export const hasLazyBuild = (stencilEl) => {
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
  *
- * This does not need to be reactive as changing attributes on the host element
- * does not trigger a re-render.
+ * This copies once. Use `createAttributeController` instead when the attributes can
+ * change after load, since a host attribute change does not trigger a re-render.
  */
 export const inheritAttributes = (el, attributes = []) => {
     const attributeObject = {};
@@ -102,8 +103,10 @@ export const inheritAttributes = (el, attributes = []) => {
  * List of available ARIA attributes + `role`.
  * Removed deprecated attributes.
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ *
+ * @internal Exported for `attribute-controller.ts`, which needs the same set.
  */
-const ariaAttributes = [
+export const ariaAttributes = [
     'role',
     'aria-activedescendant',
     'aria-atomic',
@@ -176,6 +179,44 @@ export const addEventListener = (el, eventName, callback, opts) => {
 export const removeEventListener = (el, eventName, callback, opts) => {
     return el.removeEventListener(eventName, callback, opts);
 };
+/**
+ * Calls back when a CSS custom property that resolves to a length changes,
+ * which no event covers. The probe inherits the property from `hostEl` and
+ * uses it as its height, turning a property change into a size change that
+ * `ResizeObserver` can detect.
+ *
+ * The callback receives the probe's height. For length values, this matches
+ * the resolved property value. For other values, such as `fit-content`, the
+ * probe remains at zero, so the value only signals that the property changed.
+ * Percentages resolve against the probe's containing block, not the element
+ * where the property is ultimately used.
+ *
+ * Pass `initialValue` when the caller has already read the property so that
+ * changes occurring before the observer's first delivery are not missed.
+ * Without it, the first delivery establishes the baseline.
+ */
+export const onCustomPropertyChange = (hostEl, property, callback, initialValue) => {
+    const doc = win?.document;
+    if (!doc || !hostEl || typeof ResizeObserver === 'undefined') {
+        return () => undefined;
+    }
+    const probe = doc.createElement('div');
+    probe.style.cssText = `position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;width:0;height:var(${property},0px);`;
+    hostEl.appendChild(probe);
+    let lastHeight = initialValue;
+    const observer = new ResizeObserver((entries) => {
+        const { height } = entries[0].contentRect;
+        if (lastHeight !== undefined && height !== lastHeight) {
+            callback(height);
+        }
+        lastHeight = height;
+    });
+    observer.observe(probe);
+    return () => {
+        observer.disconnect();
+        probe.remove();
+    };
+};
 /**
  * Gets the root context of a shadow dom element
  * On newer browsers this will be the shadowRoot,

package/dist/collection/utils/logging/index.js

@@ -34,6 +34,8 @@ const isLogLevelEnabled = (minimum) => {
  * to indicate the library that is warning the developer.
  *
  * @param message - The string message to be logged to the console.
+ *
+ * @internal
  */
 export const printIonWarning = (message, ...params) => {
     if (isLogLevelEnabled(LogLevel.WARN)) {
@@ -46,6 +48,8 @@ export const printIonWarning = (message, ...params) => {
  *
  * @param message - The string message to be logged to the console.
  * @param params - Additional arguments to supply to the console.error.
+ *
+ * @internal
  */
 export const printIonError = (message, ...params) => {
     if (isLogLevelEnabled(LogLevel.ERROR)) {

package/dist/collection/utils/overlays.js

@@ -764,6 +764,40 @@ export const safeCall = (handler, arg) => {
     }
     return undefined;
 };
+/**
+ * `--width` and `--height` values that leave an overlay spanning the viewport
+ * on that axis, so it reaches both edges. An empty value means the property
+ * was never overridden.
+ */
+const FULLSCREEN_SIZES = ['', '100%', '100vw', '100vh', '100dvw', '100dvh', '100svw', '100svh'];
+/**
+ * `--width` and `--height` values that size an overlay to its content, leaving
+ * the rendered size dependent on the content and on `--max-width` or
+ * `--max-height`.
+ */
+const CONTENT_SIZES = ['auto', 'fit-content', 'min-content', 'max-content'];
+/**
+ * How an overlay's `--width` or `--height` determines its used size:
+ *
+ * `fullscreen` spans the viewport on that axis. `content` depends on the
+ * overlay's content, so its used size is not known until layout. `definite`
+ * resolves independently of the overlay's content size.
+ *
+ * Values are lowercased because CSS keywords are case-insensitive, while a
+ * custom property preserves the case in which it was authored. Content values
+ * are matched as a suffix so vendor-prefixed values such as `-moz-fit-content`
+ * are recognized.
+ */
+export const getOverlaySizeType = (size) => {
+    const value = size.trim().toLowerCase();
+    if (FULLSCREEN_SIZES.includes(value)) {
+        return 'fullscreen';
+    }
+    if (CONTENT_SIZES.some((keyword) => value.endsWith(keyword))) {
+        return 'content';
+    }
+    return 'definite';
+};
 export const BACKDROP = 'backdrop';
 export const GESTURE = 'gesture';
 export const OVERLAY_GESTURE_PRIORITY = 39;

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2026-09-10T14:41:48",
+  "timestamp": "2026-10-03T19:32:19",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.44.2",
+    "version": "4.45.1",
     "typescriptVersion": "5.8.3"
   },
   "components": [
@@ -31461,7 +31461,13 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "click",
+          "capture": true,
+          "passive": false
+        }
+      ],
       "styles": [
         {
           "name": "--background",

package/dist/esm/{animation-BFNVlYum.js → animation-CFd8Olt3.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { j as printIonError } from './index-C23AVPx9.js';
-import { w as win } from './index-ZjP4CjeZ.js';
+import { c as printIonError } from './index-D9OR05yj.js';
+import { w as win } from './helpers-B54ynME_.js';
 
 let animationPrefix;
 const getAnimationPrefix = (el) => {

package/dist/esm/{app-globals-BgX0BGL1.js → app-globals-7GHLBkwd.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-ZXjCXKH0.js';
+import { i as initialize } from './ionic-global-B-G43ddm.js';
 
 const appGlobalScript = initialize || (() => {});
 const globalScripts = appGlobalScript;

package/dist/esm/attribute-controller-Cn665x42.js

@@ -0,0 +1,128 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { b as inheritAttributes, w as win, q as ariaAttributes } from './helpers-B54ynME_.js';
+
+/**
+ * Copies a set of attributes off the host element so they can be applied to an element
+ * inside the shadow root, then keeps that copy in sync as the host attributes change.
+ * Using `inheritAttributes` alone copies once at load, so anything written to the host
+ * afterwards never reaches the element the assistive technology reads.
+ *
+ * Create the controller in `componentWillLoad`. It takes the initial copy and starts
+ * watching right away, so `init()` is only needed to resume after a move.
+ *
+ * Two things to know before adopting it. Only the initial copy removes the attributes
+ * from the host, so a value written after load sits on the host as well as on the
+ * element it is applied to, which matters if the host has a role of its own. And an
+ * attribute from the initial markup can never be removed, only overwritten, since the
+ * copy already took it off the host and a `removeAttribute` there fires no mutation.
+ * An empty string works for `aria-label` and friends, but a token-valued attribute
+ * has to be set to its default instead, so `aria-pressed="false"` rather than empty.
+ *
+ * @internal
+ * @param el The host element to copy from and watch.
+ * @param attributes The attributes to copy and watch.
+ * @param onChange Called after `attributes` changes, so the component can re-render.
+ * @param hostOwnedAttributes Attributes copied at load but not watched. Use it for
+ * attributes the component renders on its own `<Host>`, since a later change to one of
+ * those is the component's own write, and for attributes that would put a second node in
+ * the accessibility tree if the host kept a copy alongside the one we apply.
+ */
+const createAttributeController = (el, attributes, onChange, hostOwnedAttributes = []) => {
+    let inherited = inheritAttributes(el, attributes);
+    let observer;
+    const watchedAttributes = attributes.filter((attr) => !hostOwnedAttributes.includes(attr));
+    /**
+     * The names still on the host, which is everything written after load. The initial
+     * copy removes what it captures, so a missing attribute only counts as a removal
+     * when its name is in here.
+     */
+    const hostWritten = new Set();
+    const setPresence = (name, value) => {
+        if (value === null) {
+            hostWritten.delete(name);
+        }
+        else {
+            hostWritten.add(name);
+        }
+    };
+    /**
+     * Nothing is watching while the host is out of the tree, since `disconnectedCallback`
+     * calls `destroy()`, and `forceUpdate` is a no-op on a disconnected host anyway. So
+     * the host has to be re-read on the way back in.
+     */
+    const readMissedChanges = () => {
+        const changed = {};
+        for (const name of watchedAttributes) {
+            const value = el.getAttribute(name);
+            const wasOnHost = hostWritten.has(name);
+            setPresence(name, value);
+            /**
+             * An attribute that was never written to the host is missing because the initial
+             * copy took it, not because the developer cleared it.
+             */
+            if ((value === null && !wasOnHost) || value === inherited[name]) {
+                continue;
+            }
+            changed[name] = value;
+        }
+        if (Object.keys(changed).length > 0) {
+            inherited = { ...inherited, ...changed };
+            onChange();
+        }
+    };
+    const init = () => {
+        // There is no MutationObserver in SSR or the hydrate build.
+        if (observer !== undefined || watchedAttributes.length === 0 || win === undefined || !('MutationObserver' in win)) {
+            return;
+        }
+        readMissedChanges();
+        observer = new MutationObserver((mutations) => {
+            const changed = {};
+            for (const mutation of mutations) {
+                const name = mutation.attributeName;
+                // A removed attribute reads back as null, which clears it from the element the
+                // values are spread onto.
+                const value = el.getAttribute(name);
+                setPresence(name, value);
+                changed[name] = value;
+            }
+            inherited = { ...inherited, ...changed };
+            onChange();
+        });
+        observer.observe(el, { attributeFilter: watchedAttributes });
+    };
+    const destroy = () => {
+        observer?.disconnect();
+        observer = undefined;
+    };
+    /**
+     * Has to run after the initial copy, because that copy removes the attributes from the
+     * host and an observer armed any earlier would read the removal as a developer clearing
+     * them.
+     */
+    init();
+    return {
+        get attributes() {
+            return inherited;
+        },
+        init,
+        destroy,
+    };
+};
+/**
+ * The `createAttributeController` equivalent of `inheritAriaAttributes`, which copies and
+ * watches every ARIA attribute plus `role`.
+ *
+ * @internal
+ * @param el The host element to copy from and watch.
+ * @param onChange Called after the attributes change, so the component can re-render.
+ * @param hostOwnedAttributes Attributes copied at load but not watched. See
+ * `createAttributeController`.
+ */
+const createAriaAttributeController = (el, onChange, hostOwnedAttributes = []) => {
+    return createAttributeController(el, ariaAttributes, onChange, hostOwnedAttributes);
+};
+
+export { createAttributeController as a, createAriaAttributeController as c };

package/dist/esm/{button-active-BfOvDr3b.js → button-active-DMuYeDQN.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-C23AVPx9.js';
-import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-Cq4UAeka.js';
+import { w as writeTask } from './index-D9OR05yj.js';
+import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-Dxm7ZmT5.js';
 import { createGesture } from './index-BmLuEdV7.js';
 
 const createButtonActiveGesture = (el, isButton) => {

package/dist/esm/{capacitor-CFERIeaU.js → capacitor-CoEgIpR9.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index-ZjP4CjeZ.js';
+import { w as win } from './helpers-B54ynME_.js';
 
 const getCapacitor = () => {
     if (win !== undefined) {

package/dist/esm/{format-DDFE9jM5.js → format-C9zPmwKU.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { f as printIonWarning } from './index-C23AVPx9.js';
+import { a as printIonWarning } from './index-D9OR05yj.js';
 
 /**
  * Returns true if the selected day is equal to the reference day

package/dist/esm/{framework-delegate-BwNhx9NR.js → framework-delegate-DeT5pmPB.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { c as componentOnReady } from './helpers-BSmc0nst.js';
+import { c as componentOnReady } from './helpers-B54ynME_.js';
 
 // TODO(FW-2832): types
 const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {

package/dist/esm/{haptic-Cq4UAeka.js → haptic-Dxm7ZmT5.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { g as getCapacitor } from './capacitor-CFERIeaU.js';
+import { g as getCapacitor } from './capacitor-CoEgIpR9.js';
 
 var ImpactStyle;
 (function (ImpactStyle) {