@ionic/core 9.0.11-dev.11793874002.1c88a1d0 → 9.0.11-dev.11793889755.165fa328

package/dist/cjs/ion-accordion_2.cjs.entry.js

@@ -12,7 +12,7 @@ require('./index-DkNv4J_i.js');
 require('./focus-visible-DGPRKkcx.js');
 require('./dir-Bma_9Lqh.js');
 
-const accordionIonicCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--token-border-size-025, var(--token-scale-025, 1px));background-color:var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));content:"";z-index:3}:host(.accordion-last)::after{display:none}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528));--border-width:var(--token-border-size-0, var(--token-scale-0, 0px));--inner-border-width:var(--token-scale-0, 0px);--min-height:var(--token-scale-700, 28px);--padding-top:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--background-activated:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556}#content-wrapper{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.accordion-disabled)::before{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none;z-index:2}`;
+const accordionIonicCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--token-border-size-025, var(--token-scale-025, 1px));background-color:var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));content:"";z-index:3}:host(.accordion-last)::after{display:none}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528));--border-width:var(--token-border-size-0, var(--token-scale-0, 0px));--inner-border-width:var(--token-scale-0, 0px);--min-height:var(--token-scale-700, 28px);--padding-top:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--background-activated:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556}#content-wrapper{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.accordion-disabled) ::slotted(ion-item[slot=header]){--color:var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}:host(.accordion-disabled) #content-wrapper{color:var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}`;
 
 const accordionIosCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}`;
 

package/dist/cjs/ion-app_8.cjs.entry.js

@@ -1623,7 +1623,6 @@ const Toolbar = class {
         ];
         this.showClasses = ['show-start', 'show-end', 'show-primary', 'show-secondary'];
         this.slotSizeVars = ['--start-end-size', '--primary-secondary-size'];
-        this.hasLoaded = false;
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -1642,23 +1641,9 @@ const Toolbar = class {
         }
         this.updateSlotClasses();
     }
-    connectedCallback() {
-        /**
-         * The resize observer is stopped when the toolbar is removed from the DOM.
-         * If the toolbar is added back (for example, when it is moved), start it again.
-         * On the first connection the toolbar has not rendered yet, so this is left
-         * to componentDidLoad.
-         */
-        if (this.hasLoaded) {
-            this.updateSlotClasses();
-        }
-    }
     componentDidLoad() {
-        this.hasLoaded = true;
         this.updateSlotClasses();
-    }
-    disconnectedCallback() {
-        this.stopObservingSlotSizes();
+        this.updateSlotWidths();
     }
     titlePlacementChanged() {
         this.updateSlotClasses();
@@ -1678,67 +1663,26 @@ const Toolbar = class {
      * Updates the CSS custom properties for slot widths
      * This ensures that slots shown by their met conditions
      * have a minimum width matching their required slot
-     *
-     * The slotted content is watched with a ResizeObserver instead of being
-     * measured after a timeout:
-     * - The observer callback runs after layout and before paint, so the slot
-     *   widths are set in the same frame the content is first laid out. The
-     *   title is already centered when it is first painted and does not move.
-     * - The callback runs again whenever the slotted content changes size,
-     *   for example when a button is added or removed, or when a hidden
-     *   toolbar becomes visible.
      */
-    updateSlotWidths() {
-        // Stop watching the previous content before watching the current one.
-        this.stopObservingSlotSizes();
-        // Browsers without ResizeObserver can only measure once.
-        if (typeof ResizeObserver === 'undefined') {
-            this.measureAndUpdateSlots();
-            return;
-        }
-        const elementsToObserve = [];
-        const slots = ['start', 'end', 'primary', 'secondary'];
-        slots.forEach((slot) => {
-            if (this.el.classList.contains(`has-${slot}-content`)) {
-                elementsToObserve.push(...this.getSlottedElements(slot));
+    updateSlotWidths(tries = 0) {
+        // Set timeout to try to execute after everything is rendered
+        setTimeout(() => {
+            // Attempt to measure and update
+            const success = this.measureAndUpdateSlots();
+            // If not all measurements were successful, try again in 100 ms
+            // cap recursion at 5 tries for safety
+            if (!success && tries < 5) {
+                setTimeout(() => {
+                    this.updateSlotWidths(tries + 1);
+                }, 100);
             }
         });
-        if (elementsToObserve.length === 0) {
-            return;
-        }
-        /**
-         * The observer also calls the callback once right after observing
-         * an element, which takes care of the first measurement.
-         */
-        const observer = new ResizeObserver(() => this.measureAndUpdateSlots());
-        elementsToObserve.forEach((element) => observer.observe(element));
-        this.slotResizeObserver = observer;
-    }
-    /**
-     * Stops watching the slotted content for size changes.
-     */
-    stopObservingSlotSizes() {
-        if (this.slotResizeObserver) {
-            this.slotResizeObserver.disconnect();
-            this.slotResizeObserver = undefined;
-        }
-    }
-    /**
-     * Returns the elements assigned to the given slot of the toolbar.
-     */
-    getSlottedElements(slotName) {
-        const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
-        if (!slotElement) {
-            return [];
-        }
-        return slotElement.assignedElements({ flatten: true });
     }
     /**
      * Measure the widths of the slots and update the CSS custom properties
      * for the minimum width of each pair of slots based on the largest width in each pair.
      * Returns whether we successfully measured all of the slots we expect to have content.
-     * If not, the content probably hasn't rendered yet, and the ResizeObserver
-     * measures again once it does.
+     * If not, the content probably hasn't rendered yet and we need to try again.
      */
     measureAndUpdateSlots() {
         // Define the relationship between slots based on the conditions array
@@ -1747,13 +1691,6 @@ const Toolbar = class {
             { name: 'start-end', slots: ['start', 'end'] },
             { name: 'primary-secondary', slots: ['primary', 'secondary'] },
         ];
-        /**
-         * Once a size property is set, the slots cannot be narrower than it.
-         * Remove the properties first so each slot is measured at the width of
-         * its content, which lets the slots shrink when their content does.
-         * This runs before paint, so the slots are never painted without a size.
-         */
-        this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
         // First, measure all slot widths
         const slotWidths = new Map();
         let allMeasurementsSuccessful = true;
@@ -1812,8 +1749,6 @@ const Toolbar = class {
      * Removes all slot visibility classes and slot width CSS variables.
      */
     removeSlotClasses() {
-        // The slot widths are no longer used, so there is nothing to watch.
-        this.stopObservingSlotSizes();
         this.el.classList.remove(...this.slotClasses, ...this.showClasses);
         this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
     }
@@ -1898,14 +1833,14 @@ const Toolbar = class {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (index.h(index.Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', class: {
+        return (index.h(index.Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
                 ...theme.createColorClasses(this.color, {
                     [theme$1]: true,
                     'in-toolbar': theme.hostContext('ion-toolbar', this.el),
                     [`toolbar-title-placement-${titlePlacement}`]: true,
                 }),
                 ...childStyles,
-            } }, index.h("div", { key: '68da02a622db1ed136a31700421c5da005ae3884', class: "toolbar-background", part: "background" }), index.h("div", { key: 'cefcad22e28e1468de024a0cbe477464a872dc66', class: "toolbar-container", part: "container" }, index.h("slot", { key: '9ebfc464b5c32c6d2b5c81a0a0c415effa15ce3c', name: "start", onSlotchange: () => this.updateSlotClasses() }), index.h("slot", { key: '55a07aa0000e1b02814f7a01ad1610d1d723f442', name: "secondary", onSlotchange: () => this.updateSlotClasses() }), index.h("div", { key: '51d1e06e0463788b5f794831faadd305aa8bca75', class: "toolbar-content", part: "content" }, index.h("slot", { key: '6982cc6886f76cf43d78e3f0e9243dc05f67d34c' })), index.h("slot", { key: 'b00b9b9b28c1637a04781ef88b5d9474fb5c0647', name: "primary", onSlotchange: () => this.updateSlotClasses() }), index.h("slot", { key: '4fce3b9b17f7775d0ba14cd5185e500753b4976e', name: "end", onSlotchange: () => this.updateSlotClasses() }))));
+            } }, index.h("div", { key: '26f85390aa62f118e585fd8560fba0620b30fd51', class: "toolbar-background", part: "background" }), index.h("div", { key: '57e32773d5642dde7f5d7cca9aaceb41b4d800bd', class: "toolbar-container", part: "container" }, index.h("slot", { key: '5429b3f898703339749a55af6bb28d7e4d969679', name: "start", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: 'c5565f7020f52a1f075d9c6908ace042d488642f', name: "secondary", onSlotchange: () => this.updateSlotClasses }), index.h("div", { key: '2d083bcd57512041321a68b43d6b90144eb20166', class: "toolbar-content", part: "content" }, index.h("slot", { key: 'eb8abc0b9b96c699355891fbd0d284094cde7632' })), index.h("slot", { key: 'ca66f2dcce1f5382ed40a120cf32f759597a11ad', name: "primary", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: '19e3eb792d45c21404fe48f119d68248b5d7dca7', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/accordion/accordion.ionic.css

@@ -185,15 +185,10 @@
   color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
-:host(.accordion-disabled)::before {
-  border-radius: inherit;
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
-  content: "";
-  pointer-events: none;
-  z-index: 2;
+:host(.accordion-disabled) ::slotted(ion-item[slot=header]) {
+  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
+}
+
+:host(.accordion-disabled) #content-wrapper {
+  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }

package/dist/collection/components/toolbar/toolbar.js

@@ -29,7 +29,6 @@ export class Toolbar {
         ];
         this.showClasses = ['show-start', 'show-end', 'show-primary', 'show-secondary'];
         this.slotSizeVars = ['--start-end-size', '--primary-secondary-size'];
-        this.hasLoaded = false;
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -48,23 +47,9 @@ export class Toolbar {
         }
         this.updateSlotClasses();
     }
-    connectedCallback() {
-        /**
-         * The resize observer is stopped when the toolbar is removed from the DOM.
-         * If the toolbar is added back (for example, when it is moved), start it again.
-         * On the first connection the toolbar has not rendered yet, so this is left
-         * to componentDidLoad.
-         */
-        if (this.hasLoaded) {
-            this.updateSlotClasses();
-        }
-    }
     componentDidLoad() {
-        this.hasLoaded = true;
         this.updateSlotClasses();
-    }
-    disconnectedCallback() {
-        this.stopObservingSlotSizes();
+        this.updateSlotWidths();
     }
     titlePlacementChanged() {
         this.updateSlotClasses();
@@ -84,67 +69,26 @@ export class Toolbar {
      * Updates the CSS custom properties for slot widths
      * This ensures that slots shown by their met conditions
      * have a minimum width matching their required slot
-     *
-     * The slotted content is watched with a ResizeObserver instead of being
-     * measured after a timeout:
-     * - The observer callback runs after layout and before paint, so the slot
-     *   widths are set in the same frame the content is first laid out. The
-     *   title is already centered when it is first painted and does not move.
-     * - The callback runs again whenever the slotted content changes size,
-     *   for example when a button is added or removed, or when a hidden
-     *   toolbar becomes visible.
      */
-    updateSlotWidths() {
-        // Stop watching the previous content before watching the current one.
-        this.stopObservingSlotSizes();
-        // Browsers without ResizeObserver can only measure once.
-        if (typeof ResizeObserver === 'undefined') {
-            this.measureAndUpdateSlots();
-            return;
-        }
-        const elementsToObserve = [];
-        const slots = ['start', 'end', 'primary', 'secondary'];
-        slots.forEach((slot) => {
-            if (this.el.classList.contains(`has-${slot}-content`)) {
-                elementsToObserve.push(...this.getSlottedElements(slot));
+    updateSlotWidths(tries = 0) {
+        // Set timeout to try to execute after everything is rendered
+        setTimeout(() => {
+            // Attempt to measure and update
+            const success = this.measureAndUpdateSlots();
+            // If not all measurements were successful, try again in 100 ms
+            // cap recursion at 5 tries for safety
+            if (!success && tries < 5) {
+                setTimeout(() => {
+                    this.updateSlotWidths(tries + 1);
+                }, 100);
             }
         });
-        if (elementsToObserve.length === 0) {
-            return;
-        }
-        /**
-         * The observer also calls the callback once right after observing
-         * an element, which takes care of the first measurement.
-         */
-        const observer = new ResizeObserver(() => this.measureAndUpdateSlots());
-        elementsToObserve.forEach((element) => observer.observe(element));
-        this.slotResizeObserver = observer;
-    }
-    /**
-     * Stops watching the slotted content for size changes.
-     */
-    stopObservingSlotSizes() {
-        if (this.slotResizeObserver) {
-            this.slotResizeObserver.disconnect();
-            this.slotResizeObserver = undefined;
-        }
-    }
-    /**
-     * Returns the elements assigned to the given slot of the toolbar.
-     */
-    getSlottedElements(slotName) {
-        const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
-        if (!slotElement) {
-            return [];
-        }
-        return slotElement.assignedElements({ flatten: true });
     }
     /**
      * Measure the widths of the slots and update the CSS custom properties
      * for the minimum width of each pair of slots based on the largest width in each pair.
      * Returns whether we successfully measured all of the slots we expect to have content.
-     * If not, the content probably hasn't rendered yet, and the ResizeObserver
-     * measures again once it does.
+     * If not, the content probably hasn't rendered yet and we need to try again.
      */
     measureAndUpdateSlots() {
         // Define the relationship between slots based on the conditions array
@@ -153,13 +97,6 @@ export class Toolbar {
             { name: 'start-end', slots: ['start', 'end'] },
             { name: 'primary-secondary', slots: ['primary', 'secondary'] },
         ];
-        /**
-         * Once a size property is set, the slots cannot be narrower than it.
-         * Remove the properties first so each slot is measured at the width of
-         * its content, which lets the slots shrink when their content does.
-         * This runs before paint, so the slots are never painted without a size.
-         */
-        this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
         // First, measure all slot widths
         const slotWidths = new Map();
         let allMeasurementsSuccessful = true;
@@ -218,8 +155,6 @@ export class Toolbar {
      * Removes all slot visibility classes and slot width CSS variables.
      */
     removeSlotClasses() {
-        // The slot widths are no longer used, so there is nothing to watch.
-        this.stopObservingSlotSizes();
         this.el.classList.remove(...this.slotClasses, ...this.showClasses);
         this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
     }
@@ -304,14 +239,14 @@ export class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', class: {
+        return (h(Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
                 ...createColorClasses(this.color, {
                     [theme]: true,
                     'in-toolbar': hostContext('ion-toolbar', this.el),
                     [`toolbar-title-placement-${titlePlacement}`]: true,
                 }),
                 ...childStyles,
-            } }, h("div", { key: '68da02a622db1ed136a31700421c5da005ae3884', class: "toolbar-background", part: "background" }), h("div", { key: 'cefcad22e28e1468de024a0cbe477464a872dc66', class: "toolbar-container", part: "container" }, h("slot", { key: '9ebfc464b5c32c6d2b5c81a0a0c415effa15ce3c', name: "start", onSlotchange: () => this.updateSlotClasses() }), h("slot", { key: '55a07aa0000e1b02814f7a01ad1610d1d723f442', name: "secondary", onSlotchange: () => this.updateSlotClasses() }), h("div", { key: '51d1e06e0463788b5f794831faadd305aa8bca75', class: "toolbar-content", part: "content" }, h("slot", { key: '6982cc6886f76cf43d78e3f0e9243dc05f67d34c' })), h("slot", { key: 'b00b9b9b28c1637a04781ef88b5d9474fb5c0647', name: "primary", onSlotchange: () => this.updateSlotClasses() }), h("slot", { key: '4fce3b9b17f7775d0ba14cd5185e500753b4976e', name: "end", onSlotchange: () => this.updateSlotClasses() }))));
+            } }, h("div", { key: '26f85390aa62f118e585fd8560fba0620b30fd51', class: "toolbar-background", part: "background" }), h("div", { key: '57e32773d5642dde7f5d7cca9aaceb41b4d800bd', class: "toolbar-container", part: "container" }, h("slot", { key: '5429b3f898703339749a55af6bb28d7e4d969679', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'c5565f7020f52a1f075d9c6908ace042d488642f', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: '2d083bcd57512041321a68b43d6b90144eb20166', class: "toolbar-content", part: "content" }, h("slot", { key: 'eb8abc0b9b96c699355891fbd0d284094cde7632' })), h("slot", { key: 'ca66f2dcce1f5382ed40a120cf32f759597a11ad', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '19e3eb792d45c21404fe48f119d68248b5d7dca7', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-11-05T10:23:02",
+  "timestamp": "2026-11-05T14:44:45",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.45.2",

package/dist/esm/ion-accordion_2.entry.js

@@ -10,7 +10,7 @@ import './index-ZjP4CjeZ.js';
 import './focus-visible-BYk20Mf5.js';
 import './dir-Dj4J3LkD.js';
 
-const accordionIonicCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--token-border-size-025, var(--token-scale-025, 1px));background-color:var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));content:"";z-index:3}:host(.accordion-last)::after{display:none}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528));--border-width:var(--token-border-size-0, var(--token-scale-0, 0px));--inner-border-width:var(--token-scale-0, 0px);--min-height:var(--token-scale-700, 28px);--padding-top:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--background-activated:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556}#content-wrapper{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.accordion-disabled)::before{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none;z-index:2}`;
+const accordionIonicCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--token-border-size-025, var(--token-scale-025, 1px));background-color:var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));content:"";z-index:3}:host(.accordion-last)::after{display:none}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528));--border-width:var(--token-border-size-0, var(--token-scale-0, 0px));--inner-border-width:var(--token-scale-0, 0px);--min-height:var(--token-scale-700, 28px);--padding-top:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--background-activated:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556}#content-wrapper{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.accordion-disabled) ::slotted(ion-item[slot=header]){--color:var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}:host(.accordion-disabled) #content-wrapper{color:var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}`;
 
 const accordionIosCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}`;
 

package/dist/esm/ion-app_8.entry.js

@@ -1621,7 +1621,6 @@ const Toolbar = class {
         ];
         this.showClasses = ['show-start', 'show-end', 'show-primary', 'show-secondary'];
         this.slotSizeVars = ['--start-end-size', '--primary-secondary-size'];
-        this.hasLoaded = false;
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -1640,23 +1639,9 @@ const Toolbar = class {
         }
         this.updateSlotClasses();
     }
-    connectedCallback() {
-        /**
-         * The resize observer is stopped when the toolbar is removed from the DOM.
-         * If the toolbar is added back (for example, when it is moved), start it again.
-         * On the first connection the toolbar has not rendered yet, so this is left
-         * to componentDidLoad.
-         */
-        if (this.hasLoaded) {
-            this.updateSlotClasses();
-        }
-    }
     componentDidLoad() {
-        this.hasLoaded = true;
         this.updateSlotClasses();
-    }
-    disconnectedCallback() {
-        this.stopObservingSlotSizes();
+        this.updateSlotWidths();
     }
     titlePlacementChanged() {
         this.updateSlotClasses();
@@ -1676,67 +1661,26 @@ const Toolbar = class {
      * Updates the CSS custom properties for slot widths
      * This ensures that slots shown by their met conditions
      * have a minimum width matching their required slot
-     *
-     * The slotted content is watched with a ResizeObserver instead of being
-     * measured after a timeout:
-     * - The observer callback runs after layout and before paint, so the slot
-     *   widths are set in the same frame the content is first laid out. The
-     *   title is already centered when it is first painted and does not move.
-     * - The callback runs again whenever the slotted content changes size,
-     *   for example when a button is added or removed, or when a hidden
-     *   toolbar becomes visible.
      */
-    updateSlotWidths() {
-        // Stop watching the previous content before watching the current one.
-        this.stopObservingSlotSizes();
-        // Browsers without ResizeObserver can only measure once.
-        if (typeof ResizeObserver === 'undefined') {
-            this.measureAndUpdateSlots();
-            return;
-        }
-        const elementsToObserve = [];
-        const slots = ['start', 'end', 'primary', 'secondary'];
-        slots.forEach((slot) => {
-            if (this.el.classList.contains(`has-${slot}-content`)) {
-                elementsToObserve.push(...this.getSlottedElements(slot));
+    updateSlotWidths(tries = 0) {
+        // Set timeout to try to execute after everything is rendered
+        setTimeout(() => {
+            // Attempt to measure and update
+            const success = this.measureAndUpdateSlots();
+            // If not all measurements were successful, try again in 100 ms
+            // cap recursion at 5 tries for safety
+            if (!success && tries < 5) {
+                setTimeout(() => {
+                    this.updateSlotWidths(tries + 1);
+                }, 100);
             }
         });
-        if (elementsToObserve.length === 0) {
-            return;
-        }
-        /**
-         * The observer also calls the callback once right after observing
-         * an element, which takes care of the first measurement.
-         */
-        const observer = new ResizeObserver(() => this.measureAndUpdateSlots());
-        elementsToObserve.forEach((element) => observer.observe(element));
-        this.slotResizeObserver = observer;
-    }
-    /**
-     * Stops watching the slotted content for size changes.
-     */
-    stopObservingSlotSizes() {
-        if (this.slotResizeObserver) {
-            this.slotResizeObserver.disconnect();
-            this.slotResizeObserver = undefined;
-        }
-    }
-    /**
-     * Returns the elements assigned to the given slot of the toolbar.
-     */
-    getSlottedElements(slotName) {
-        const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
-        if (!slotElement) {
-            return [];
-        }
-        return slotElement.assignedElements({ flatten: true });
     }
     /**
      * Measure the widths of the slots and update the CSS custom properties
      * for the minimum width of each pair of slots based on the largest width in each pair.
      * Returns whether we successfully measured all of the slots we expect to have content.
-     * If not, the content probably hasn't rendered yet, and the ResizeObserver
-     * measures again once it does.
+     * If not, the content probably hasn't rendered yet and we need to try again.
      */
     measureAndUpdateSlots() {
         // Define the relationship between slots based on the conditions array
@@ -1745,13 +1689,6 @@ const Toolbar = class {
             { name: 'start-end', slots: ['start', 'end'] },
             { name: 'primary-secondary', slots: ['primary', 'secondary'] },
         ];
-        /**
-         * Once a size property is set, the slots cannot be narrower than it.
-         * Remove the properties first so each slot is measured at the width of
-         * its content, which lets the slots shrink when their content does.
-         * This runs before paint, so the slots are never painted without a size.
-         */
-        this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
         // First, measure all slot widths
         const slotWidths = new Map();
         let allMeasurementsSuccessful = true;
@@ -1810,8 +1747,6 @@ const Toolbar = class {
      * Removes all slot visibility classes and slot width CSS variables.
      */
     removeSlotClasses() {
-        // The slot widths are no longer used, so there is nothing to watch.
-        this.stopObservingSlotSizes();
         this.el.classList.remove(...this.slotClasses, ...this.showClasses);
         this.slotSizeVars.forEach((cssVar) => this.el.style.removeProperty(cssVar));
     }
@@ -1896,14 +1831,14 @@ const Toolbar = class {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', class: {
+        return (h(Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
                 ...createColorClasses(this.color, {
                     [theme]: true,
                     'in-toolbar': hostContext('ion-toolbar', this.el),
                     [`toolbar-title-placement-${titlePlacement}`]: true,
                 }),
                 ...childStyles,
-            } }, h("div", { key: '68da02a622db1ed136a31700421c5da005ae3884', class: "toolbar-background", part: "background" }), h("div", { key: 'cefcad22e28e1468de024a0cbe477464a872dc66', class: "toolbar-container", part: "container" }, h("slot", { key: '9ebfc464b5c32c6d2b5c81a0a0c415effa15ce3c', name: "start", onSlotchange: () => this.updateSlotClasses() }), h("slot", { key: '55a07aa0000e1b02814f7a01ad1610d1d723f442', name: "secondary", onSlotchange: () => this.updateSlotClasses() }), h("div", { key: '51d1e06e0463788b5f794831faadd305aa8bca75', class: "toolbar-content", part: "content" }, h("slot", { key: '6982cc6886f76cf43d78e3f0e9243dc05f67d34c' })), h("slot", { key: 'b00b9b9b28c1637a04781ef88b5d9474fb5c0647', name: "primary", onSlotchange: () => this.updateSlotClasses() }), h("slot", { key: '4fce3b9b17f7775d0ba14cd5185e500753b4976e', name: "end", onSlotchange: () => this.updateSlotClasses() }))));
+            } }, h("div", { key: '26f85390aa62f118e585fd8560fba0620b30fd51', class: "toolbar-background", part: "background" }), h("div", { key: '57e32773d5642dde7f5d7cca9aaceb41b4d800bd', class: "toolbar-container", part: "container" }, h("slot", { key: '5429b3f898703339749a55af6bb28d7e4d969679', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'c5565f7020f52a1f075d9c6908ace042d488642f', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: '2d083bcd57512041321a68b43d6b90144eb20166', class: "toolbar-content", part: "content" }, h("slot", { key: 'eb8abc0b9b96c699355891fbd0d284094cde7632' })), h("slot", { key: 'ca66f2dcce1f5382ed40a120cf32f759597a11ad', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '19e3eb792d45c21404fe48f119d68248b5d7dca7', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {