@ionic/core 9.0.11-dev.11793792571.1765ff65 → 9.0.11-dev.11793874002.1c88a1d0

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

@@ -1623,6 +1623,7 @@ 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'));
@@ -1641,9 +1642,23 @@ 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();
-        this.updateSlotWidths();
+    }
+    disconnectedCallback() {
+        this.stopObservingSlotSizes();
     }
     titlePlacementChanged() {
         this.updateSlotClasses();
@@ -1663,26 +1678,67 @@ 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(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);
+    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));
             }
         });
+        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 we need to try again.
+     * If not, the content probably hasn't rendered yet, and the ResizeObserver
+     * measures again once it does.
      */
     measureAndUpdateSlots() {
         // Define the relationship between slots based on the conditions array
@@ -1691,6 +1747,13 @@ 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;
@@ -1749,6 +1812,8 @@ 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));
     }
@@ -1833,14 +1898,14 @@ const Toolbar = class {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (index.h(index.Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
+        return (index.h(index.Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', 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: '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 }))));
+            } }, 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() }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -29,6 +29,7 @@ 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'));
@@ -47,9 +48,23 @@ 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();
-        this.updateSlotWidths();
+    }
+    disconnectedCallback() {
+        this.stopObservingSlotSizes();
     }
     titlePlacementChanged() {
         this.updateSlotClasses();
@@ -69,26 +84,67 @@ 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(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);
+    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));
             }
         });
+        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 we need to try again.
+     * If not, the content probably hasn't rendered yet, and the ResizeObserver
+     * measures again once it does.
      */
     measureAndUpdateSlots() {
         // Define the relationship between slots based on the conditions array
@@ -97,6 +153,13 @@ 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;
@@ -155,6 +218,8 @@ 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));
     }
@@ -239,14 +304,14 @@ export class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
+        return (h(Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', class: {
                 ...createColorClasses(this.color, {
                     [theme]: true,
                     'in-toolbar': hostContext('ion-toolbar', this.el),
                     [`toolbar-title-placement-${titlePlacement}`]: true,
                 }),
                 ...childStyles,
-            } }, 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 }))));
+            } }, 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() }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

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

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

@@ -1621,6 +1621,7 @@ 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'));
@@ -1639,9 +1640,23 @@ 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();
-        this.updateSlotWidths();
+    }
+    disconnectedCallback() {
+        this.stopObservingSlotSizes();
     }
     titlePlacementChanged() {
         this.updateSlotClasses();
@@ -1661,26 +1676,67 @@ 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(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);
+    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));
             }
         });
+        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 we need to try again.
+     * If not, the content probably hasn't rendered yet, and the ResizeObserver
+     * measures again once it does.
      */
     measureAndUpdateSlots() {
         // Define the relationship between slots based on the conditions array
@@ -1689,6 +1745,13 @@ 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;
@@ -1747,6 +1810,8 @@ 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));
     }
@@ -1831,14 +1896,14 @@ const Toolbar = class {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
+        return (h(Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', class: {
                 ...createColorClasses(this.color, {
                     [theme]: true,
                     'in-toolbar': hostContext('ion-toolbar', this.el),
                     [`toolbar-title-placement-${titlePlacement}`]: true,
                 }),
                 ...childStyles,
-            } }, 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 }))));
+            } }, 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() }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {