@ionic/core 8.5.5-dev.11746028401.1b2f6b8c → 8.5.5-dev.11746635887.17fec492

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

@@ -1162,7 +1162,7 @@ const RouterOutlet = class {
 };
 RouterOutlet.style = IonRouterOutletStyle0;
 
-const titleIonicCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{font-size:var(--ion-font-size-450, 1.125rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-700, 28px);text-decoration:none;text-transform:none;padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host-context(ion-toolbar){top:0;position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:-1}:host-context(ion-toolbar){inset-inline-start:0}:host(.title-large){font-size:var(--ion-font-size-700, 1.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-900, 36px);text-decoration:none;text-transform:none}";
+const titleIonicCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{font-size:var(--ion-font-size-450, 1.125rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-700, 28px);text-decoration:none;text-transform:none;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.title-large){font-size:var(--ion-font-size-700, 1.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-900, 36px);text-decoration:none;text-transform:none}";
 const IonTitleIonicStyle0 = titleIonicCss;
 
 const titleIosCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host(.ion-color){color:var(--ion-color-base)}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host{inset-inline-start:0}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large:dir(rtl)) .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
@@ -1213,7 +1213,7 @@ ToolbarTitle.style = {
     md: IonTitleMdStyle0
 };
 
-const toolbarIonicCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{--background:var(--ion-primitives-base-white, #ffffff);--color:var(--ion-primitives-neutral-1200, #242424);--border-color:currentColor;--padding-top:var(--ion-space-200, 8px);--padding-bottom:var(--ion-space-200, 8px);--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--min-height:var(--ion-scale-1400, 56px)}.toolbar-container{gap:var(--ion-space-400, 16px)}.toolbar-content{-ms-flex:2;flex:2;-ms-flex-order:3;order:3;min-width:0}:host(.toolbar-searchbar) ::slotted(ion-searchbar){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}::slotted(ion-title){-webkit-padding-start:var(--padding-top);padding-inline-start:var(--padding-top);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}:host(.toolbar-title-default) ::slotted(ion-title){text-align:center}:host(.toolbar-title-large) ::slotted(ion-title){-webkit-padding-start:var(--ion-space-400, 16px);padding-inline-start:var(--ion-space-400, 16px);-webkit-padding-end:var(--ion-space-400, 16px);padding-inline-end:var(--ion-space-400, 16px)}::slotted([slot=secondary]){-ms-flex-order:2;order:2}::slotted([slot=primary]){-ms-flex-order:4;order:4;text-align:end}::slotted([slot=start]){-ms-flex-order:1;order:1}::slotted([slot=start]),::slotted([slot=end]){display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:var(--ion-space-200, 8px)}::slotted([slot=end]){-ms-flex-pack:end;justify-content:end;-ms-flex-order:5;order:5;font-size:var(--ion-font-size-600, 1.5rem)}";
+const toolbarIonicCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{--background:var(--ion-primitives-base-white, #ffffff);--color:var(--ion-primitives-neutral-1200, #242424);--border-color:currentColor;--padding-top:var(--ion-space-200, 8px);--padding-bottom:var(--ion-space-200, 8px);--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--min-height:var(--ion-scale-1400, 56px)}.toolbar-container{gap:var(--ion-space-400, 16px)}.toolbar-content{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0}:host(.toolbar-searchbar) ::slotted(ion-searchbar){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}::slotted(ion-buttons){gap:var(--ion-space-200, 8px)}::slotted(ion-title){-webkit-padding-start:var(--ion-space-200, 8px);padding-inline-start:var(--ion-space-200, 8px);-webkit-padding-end:var(--ion-space-200, 8px);padding-inline-end:var(--ion-space-200, 8px)}:host(.toolbar-title-default) ::slotted(ion-title){text-align:center}:host(.toolbar-title-large) ::slotted(ion-title){-webkit-padding-start:var(--ion-space-400, 16px);padding-inline-start:var(--ion-space-400, 16px);-webkit-padding-end:var(--ion-space-400, 16px);padding-inline-end:var(--ion-space-400, 16px)}:host(.has-end-content) slot[name=end],:host(.show-end) slot[name=end]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-start-content) slot[name=start],:host(.show-start) slot[name=start]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0)}:host(.has-primary-content) slot[name=primary],:host(.show-primary) slot[name=primary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-secondary-content) slot[name=secondary],:host(.show-secondary) slot[name=secondary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0)}";
 const IonToolbarIonicStyle0 = toolbarIonicCss;
 
 const toolbarIosCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:4;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:-ms-inline-flexbox;display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){-ms-flex-item-align:start;align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:3;order:3}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{-ms-flex:1;flex:1;-ms-flex-order:8;order:8;min-width:100%}";
@@ -1243,6 +1243,131 @@ const Toolbar = class {
         if (lastButtons) {
             lastButtons.classList.add('buttons-last-slot');
         }
+        this.updateSlotClasses();
+    }
+    componentDidLoad() {
+        this.updateSlotClasses();
+        this.updateSlotWidths();
+    }
+    /**
+     * 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
+     */
+    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);
+            }
+        });
+    }
+    /**
+     * 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.
+     */
+    measureAndUpdateSlots() {
+        // Define the relationship between slots based on the conditions array
+        // Group slots that should have the same width
+        const slotPairs = [
+            { name: 'start-end', slots: ['start', 'end'] },
+            { name: 'primary-secondary', slots: ['primary', 'secondary'] },
+        ];
+        // First, measure all slot widths
+        const slotWidths = new Map();
+        let allMeasurementsSuccessful = true;
+        // Measure all slots with content
+        const slots = ['start', 'end', 'primary', 'secondary'];
+        slots.forEach((slot) => {
+            var _a;
+            if (this.el.classList.contains(`has-${slot}-content`)) {
+                const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
+                if (slotElement) {
+                    const width = slotElement.offsetWidth;
+                    if (width > 0) {
+                        slotWidths.set(slot, width);
+                    }
+                    else {
+                        allMeasurementsSuccessful = false;
+                    }
+                }
+            }
+        });
+        // Then set the CSS custom properties based on the largest width in each pair
+        slotPairs.forEach(({ name, slots }) => {
+            // Find the maximum width among the slots in this pair
+            let maxWidth = 0;
+            let hasAnyContent = false;
+            slots.forEach((slot) => {
+                var _a;
+                if (slotWidths.has(slot)) {
+                    hasAnyContent = true;
+                    maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
+                }
+            });
+            // If at least one slot in the pair has content, set the min-width for the pair
+            if (hasAnyContent && maxWidth > 0) {
+                // Set a single CSS variable for the pair
+                this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
+            }
+        });
+        return allMeasurementsSuccessful;
+    }
+    updateSlotClasses() {
+        // Check if slots have content
+        const slots = ['start', 'end', 'primary', 'secondary'];
+        const classesToAdd = [];
+        const classesToRemove = [];
+        slots.forEach((slot) => {
+            const slotHasContent = this.hasSlotContent(slot);
+            const slotClass = `has-${slot}-content`;
+            if (slotHasContent) {
+                classesToAdd.push(slotClass);
+            }
+            else {
+                classesToRemove.push(slotClass);
+            }
+        });
+        // Force visibilities in certain conditions. This works by adding a class to the toolbar
+        // named `show-{slot}`. This class will be added if the toolbar has the required slots
+        // and does not have any of the excluded slots, otherwise it will be removed.
+        // This is useful to enforce centering of the toolbar content when there are different amounts
+        // of slots on either side of the toolbar.
+        const conditions = [
+            { name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
+            { name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
+            { name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
+            { name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
+        ];
+        conditions.forEach((condition) => {
+            const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
+            const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
+            const className = `show-${condition.name}`;
+            if (hasRequiredSlots && !hasExcludedSlots) {
+                classesToAdd.push(className);
+            }
+            else {
+                classesToRemove.push(className);
+            }
+        });
+        // Add classes to the toolbar element
+        this.el.classList.add(...classesToAdd);
+        this.el.classList.remove(...classesToRemove);
+        // Update slot widths after classes have been updated
+        this.updateSlotWidths();
+    }
+    hasSlotContent(slotName) {
+        var _a;
+        const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
+        return !!slotNode && slotNode.assignedNodes().length > 0;
     }
     childrenStyle(ev) {
         ev.stopPropagation();
@@ -1269,13 +1394,13 @@ const Toolbar = class {
     render() {
         const theme$1 = ionicGlobal.getIonTheme(this);
         const childStyles = {};
-        this.childrenStyles.forEach((value) => {
-            Object.assign(childStyles, value);
+        this.childrenStyles.forEach((style) => {
+            Object.assign(childStyles, style);
         });
-        return (index.h(index.Host, { key: '6368640c5bcc3515d628c24116912e7ba1e79a00', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '9cf12f7133f19ef24ec4818e5334850b7315b602', class: Object.assign(Object.assign({}, theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
-            })) }, index.h("div", { key: '139edd9fb7a7c42d94dd79e783d841b052abb245', class: "toolbar-background", part: "background" }), index.h("div", { key: '72716d4a9af0191d6083d1a2444cea42e4521127', class: "toolbar-container", part: "container" }, index.h("slot", { key: '5049c3e4235dd52b80b50f87b74f58c03fc53c00', name: "start" }), index.h("slot", { key: 'cf43c31b7d81dfb49e0fdf987978c621fc563213', name: "secondary" }), index.h("div", { key: '34bd76bdb954adcecb4a9c263584733d617e5988', class: "toolbar-content", part: "content" }, index.h("slot", { key: 'a63dfc76eb070c680426e3fe6b8efc9bec9a69ac' })), index.h("slot", { key: 'bb0a4cb83c30d206489c2dcfb6238481ccfc51af', name: "primary" }), index.h("slot", { key: 'e3c632b6810493f714ec632d17b878740874e919', name: "end" }))));
+            })), childStyles) }, index.h("div", { key: 'ba137a3b6cc68902ec93b469968885de6746a7e6', class: "toolbar-background", part: "background" }), index.h("div", { key: 'd3a278f4d7e50a1b3c93a8e9412df81e6e6387bc', class: "toolbar-container", part: "container" }, index.h("slot", { key: '7ac00536a8fe5ecbf695d21a51f62079ff0262e0', name: "start", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: 'f641e8b71125023f7dd71f4080c6b37ef33f9639', name: "secondary", onSlotchange: () => this.updateSlotClasses }), index.h("div", { key: 'a785319051166ac161069df114387ccc3e499822', class: "toolbar-content", part: "content" }, index.h("slot", { key: '4930bfc6a5425f923f4f23c27f9312d506463b0c' })), index.h("slot", { key: 'd0e78019181ff220bfb54110bdbe0d12be330374', name: "primary", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: '5c4a39a0764001ca90e96ccb9a9b7eba158fe5e6', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -78,7 +78,7 @@ Avatar.style = {
     md: IonAvatarMdStyle0
 };
 
-const badgeIonicCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--padding-top:var(--ion-space-0, 0px);--padding-bottom:var(--ion-space-0, 0px);font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-500, 20px);text-decoration:none;text-transform:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--ion-scale-250, 10px)}:host(.badge-bold){--background:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff))}:host(.badge-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.badge-subtle){--background:var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, #f2f4fd));--color:var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, #0d4bc3))}:host(.badge-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.badge-soft){border-radius:var(--ion-border-radius-200, 8px)}:host(.badge-xxsmall.badge-soft),:host(.badge-xsmall.badge-soft),:host(.badge-small.badge-soft){border-radius:var(--ion-border-radius-100, 4px)}:host(.badge-round){border-radius:var(--ion-border-radius-full, 999px)}:host(.badge-rectangular){border-radius:var(--ion-border-radius-0, 0px)}:host(.badge-xxsmall){--padding-start:var(--ion-space-050, 2px);--padding-end:var(--ion-space-050, 2px);min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px);font-size:var(--ion-font-size-300, 0.75rem);line-height:var(--ion-font-line-height-400, 16px)}:host(.badge-xxsmall) ::slotted(ion-icon){width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}:host(.badge-xsmall){--padding-start:var(--ion-space-100, 4px);--padding-end:var(--ion-space-100, 4px);min-width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px);font-size:var(--ion-font-size-350, 0.875rem);line-height:var(--ion-font-line-height-600, 24px)}:host(.badge-xsmall) ::slotted(ion-icon){width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(.badge-small){--padding-start:var(--ion-space-100, 4px);--padding-end:var(--ion-space-100, 4px);min-width:var(--ion-scale-800, 32px);height:var(--ion-scale-800, 32px)}:host(.badge-small) ::slotted(ion-icon){width:var(--ion-scale-500, 20px);height:var(--ion-scale-500, 20px)}:host(.badge-medium){font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-1000, 40px);height:var(--ion-scale-1000, 40px)}:host(.badge-medium) ::slotted(ion-icon){width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px)}:host(.badge-large){font-size:var(--ion-font-size-400, 1rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-1200, 48px);height:var(--ion-scale-1200, 48px)}:host(.badge-large) ::slotted(ion-icon){width:var(--ion-scale-800, 32px);height:var(--ion-scale-800, 32px)}:host(.badge-xlarge){font-size:var(--ion-font-size-550, 1.375rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-700, 28px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-1400, 56px);height:var(--ion-scale-1400, 56px)}:host(.badge-xlarge) ::slotted(ion-icon){width:var(--ion-scale-1000, 40px);height:var(--ion-scale-1000, 40px)}:host(:empty){--padding-start:0;--padding-end:0}:host([vertical]:not(:empty)){--padding-start:var(--ion-scale-100, 4px);--padding-end:var(--ion-scale-100, 4px);--padding-top:var(--ion-scale-100, 4px);--padding-bottom:var(--ion-scale-100, 4px)}:host(.badge-small:empty){min-width:var(--ion-scale-200, 8px);height:var(--ion-scale-200, 8px)}:host(.badge-medium:empty){min-width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}:host(.badge-large:empty){min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host([vertical].in-tab-button){position:relative}:host([vertical]) ::slotted(ion-icon){top:50%;position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical]) ::slotted(ion-icon){inset-inline-start:50%}:host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),:host([vertical]:not(.in-tab-button).in-button.badge-xsmall),:host([vertical]:not(.in-tab-button).in-button.badge-small){inset-inline-end:calc(-1 * var(var(--ion-space-050, 2px)))}:host([vertical]:not(.in-tab-button).in-button.badge-medium),:host([vertical]:not(.in-tab-button).in-button.badge-large),:host([vertical]:not(.in-tab-button).in-button.badge-xlarge){inset-inline-end:var(--ion-space-050, 2px)}:host(:not(:empty).in-button){font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-1, 1%);line-height:var(--ion-font-line-height-500, 20px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(:not(:empty).in-button) ::slotted(ion-icon){width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}";
+const badgeIonicCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--padding-top:var(--ion-space-0, 0px);--padding-bottom:var(--ion-space-0, 0px);font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-500, 20px);text-decoration:none;text-transform:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--ion-scale-250, 10px)}:host(.badge-bold){--background:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff))}:host(.badge-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.badge-subtle){--background:var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, #f2f4fd));--color:var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, #0d4bc3))}:host(.badge-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.badge-soft){border-radius:var(--ion-border-radius-200, 8px)}:host(.badge-small.badge-soft){border-radius:var(--ion-border-radius-100, 4px)}:host(.badge-round){border-radius:var(--ion-border-radius-full, 999px)}:host(.badge-rectangular){border-radius:var(--ion-border-radius-0, 0px)}:host(.badge-small){--padding-start:var(--ion-space-050, 2px);--padding-end:var(--ion-space-050, 2px);min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(.badge-small) ::slotted(ion-icon){width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}:host(.badge-medium),:host(.badge-large){--padding-start:var(--ion-space-100, 4px);--padding-end:var(--ion-space-100, 4px);font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px)}:host(.badge-medium) ::slotted(ion-icon),:host(.badge-large) ::slotted(ion-icon){width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(:empty){--padding-start:0;--padding-end:0}:host([vertical]:not(:empty)){--padding-start:var(--ion-scale-100, 4px);--padding-end:var(--ion-scale-100, 4px);--padding-top:var(--ion-scale-100, 4px);--padding-bottom:var(--ion-scale-100, 4px)}:host(.badge-small:empty){min-width:var(--ion-scale-200, 8px);height:var(--ion-scale-200, 8px)}:host(.badge-medium:empty){min-width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}:host(.badge-large:empty){min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host([vertical].in-tab-button){position:relative}:host([vertical]) ::slotted(ion-icon){top:50%;position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical]) ::slotted(ion-icon){inset-inline-start:50%}:host([vertical]:not(.in-tab-button).in-button.badge-small){inset-inline-end:calc(-1 * var(var(--ion-space-050, 2px)))}:host([vertical]:not(.in-tab-button).in-button.badge-medium),:host([vertical]:not(.in-tab-button).in-button.badge-large){inset-inline-end:var(--ion-space-050, 2px)}:host(:not(:empty).in-button){font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-1, 1%);line-height:var(--ion-font-line-height-500, 20px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(:not(:empty).in-button) ::slotted(ion-icon){width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}";
 const IonBadgeIonicStyle0 = badgeIonicCss;
 
 const badgeIosCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);min-width:10px;font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host([vertical]:not(.in-button):not(.in-tab-button)),:host(:empty){--padding-start:0;--padding-end:0;--padding-bottom:0;--padding-top:0;border-radius:999px;width:10px;height:10px;font-size:0.5rem;line-height:10px}:host(:not(:empty).in-button){min-width:16px;height:16px;font-size:0.75rem;line-height:20px}:host(:not(:empty).in-button) ::slotted(ion-icon){width:12px;height:12px}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}:host([vertical].in-tab-button){position:relative;min-width:8px}:host([vertical].in-tab-button) ::slotted(ion-icon){top:50%;position:absolute;width:12px;height:12px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical].in-tab-button) ::slotted(ion-icon){inset-inline-start:50%}";
@@ -146,7 +146,7 @@ const Badge = class {
         const shape = this.getShape();
         const size = this.getSize();
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '3ec4768d90cf6916e4e6fc709eb923ec7fbd80c6', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: theme.createColorClasses(this.color, {
                 [theme$1]: true,
                 [`badge-${hue}`]: hue !== undefined,
                 [`badge-${shape}`]: shape !== undefined,
@@ -154,7 +154,7 @@ const Badge = class {
                 [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
                 'in-button': theme.hostContext('ion-button', this.el),
                 'in-tab-button': theme.hostContext('ion-tab-button', this.el),
-            }) }, index.h("slot", { key: '0527cd120de62f52ef6d080a37689768a15dea4c' })));
+            }) }, index.h("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -167,8 +167,6 @@ Do not edit directly, this file was auto-generated.
   border-radius: var(--ion-border-radius-200, 8px);
 }
 
-:host(.badge-xxsmall.badge-soft),
-:host(.badge-xsmall.badge-soft),
 :host(.badge-small.badge-soft) {
   border-radius: var(--ion-border-radius-100, 4px);
 }
@@ -183,98 +181,39 @@ Do not edit directly, this file was auto-generated.
   border-radius: var(--ion-border-radius-0, 0px);
 }
 
-/* 2-Extra Small Badge */
-:host(.badge-xxsmall) {
+/* Small Badge */
+:host(.badge-small) {
   --padding-start: var(--ion-space-050, 2px);
   --padding-end: var(--ion-space-050, 2px);
   min-width: var(--ion-scale-400, 16px);
   height: var(--ion-scale-400, 16px);
-  font-size: var(--ion-font-size-300, 0.75rem);
-  line-height: var(--ion-font-line-height-400, 16px);
 }
 
-:host(.badge-xxsmall) ::slotted(ion-icon) {
+:host(.badge-small) ::slotted(ion-icon) {
   width: var(--ion-scale-300, 12px);
   height: var(--ion-scale-300, 12px);
 }
 
-/* Extra Small Badge */
-:host(.badge-xsmall) {
+/* Medium Badge */
+/* Large size defaults to the medium size to avoid styles breakage */
+:host(.badge-medium),
+:host(.badge-large) {
   --padding-start: var(--ion-space-100, 4px);
   --padding-end: var(--ion-space-100, 4px);
-  min-width: var(--ion-scale-600, 24px);
-  height: var(--ion-scale-600, 24px);
-  font-size: var(--ion-font-size-350, 0.875rem);
-  line-height: var(--ion-font-line-height-600, 24px);
-}
-
-:host(.badge-xsmall) ::slotted(ion-icon) {
-  width: var(--ion-scale-400, 16px);
-  height: var(--ion-scale-400, 16px);
-}
-
-/* Small Badge */
-:host(.badge-small) {
-  --padding-start: var(--ion-space-100, 4px);
-  --padding-end: var(--ion-space-100, 4px);
-  min-width: var(--ion-scale-800, 32px);
-  height: var(--ion-scale-800, 32px);
-}
-
-:host(.badge-small) ::slotted(ion-icon) {
-  width: var(--ion-scale-500, 20px);
-  height: var(--ion-scale-500, 20px);
-}
-
-/* Medium Badge */
-:host(.badge-medium) {
   font-size: var(--ion-font-size-350, 0.875rem);
   font-weight: var(--ion-font-weight-medium, 500);
   letter-spacing: var(--ion-font-letter-spacing-0, 0%);
   line-height: var(--ion-font-line-height-600, 24px);
   text-decoration: none;
   text-transform: none;
-  min-width: var(--ion-scale-1000, 40px);
-  height: var(--ion-scale-1000, 40px);
-}
-
-:host(.badge-medium) ::slotted(ion-icon) {
-  width: var(--ion-scale-600, 24px);
+  min-width: var(--ion-scale-600, 24px);
   height: var(--ion-scale-600, 24px);
 }
 
-/* Large Badge */
-:host(.badge-large) {
-  font-size: var(--ion-font-size-400, 1rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-600, 24px);
-  text-decoration: none;
-  text-transform: none;
-  min-width: var(--ion-scale-1200, 48px);
-  height: var(--ion-scale-1200, 48px);
-}
-
+:host(.badge-medium) ::slotted(ion-icon),
 :host(.badge-large) ::slotted(ion-icon) {
-  width: var(--ion-scale-800, 32px);
-  height: var(--ion-scale-800, 32px);
-}
-
-/* Extra Large Badge */
-:host(.badge-xlarge) {
-  font-size: var(--ion-font-size-550, 1.375rem);
-  font-weight: var(--ion-font-weight-medium, 500);
-  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
-  line-height: var(--ion-font-line-height-700, 28px);
-  text-decoration: none;
-  text-transform: none;
-  min-width: var(--ion-scale-1400, 56px);
-  height: var(--ion-scale-1400, 56px);
-}
-
-:host(.badge-xlarge) ::slotted(ion-icon) {
-  width: var(--ion-scale-1000, 40px);
-  height: var(--ion-scale-1000, 40px);
+  width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
 }
 
 :host(:empty) {
@@ -320,15 +259,12 @@ Do not edit directly, this file was auto-generated.
   inset-inline-start: 50%;
 }
 
-:host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),
-:host([vertical]:not(.in-tab-button).in-button.badge-xsmall),
 :host([vertical]:not(.in-tab-button).in-button.badge-small) {
   inset-inline-end: calc(-1 * var(var(--ion-space-050, 2px)));
 }
 
 :host([vertical]:not(.in-tab-button).in-button.badge-medium),
-:host([vertical]:not(.in-tab-button).in-button.badge-large),
-:host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
+:host([vertical]:not(.in-tab-button).in-button.badge-large) {
   inset-inline-end: var(--ion-space-050, 2px);
 }
 

package/dist/collection/components/badge/badge.js

@@ -66,7 +66,7 @@ export class Badge {
         const shape = this.getShape();
         const size = this.getSize();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '3ec4768d90cf6916e4e6fc709eb923ec7fbd80c6', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`badge-${hue}`]: hue !== undefined,
                 [`badge-${shape}`]: shape !== undefined,
@@ -74,7 +74,7 @@ export class Badge {
                 [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
                 'in-button': hostContext('ion-button', this.el),
                 'in-tab-button': hostContext('ion-tab-button', this.el),
-            }) }, h("slot", { key: '0527cd120de62f52ef6d080a37689768a15dea4c' })));
+            }) }, h("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -155,15 +155,15 @@ export class Badge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | \"xxsmall\" | undefined",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"xxsmall\"` for the smallest badge.\nSet to \"xsmall\" for a very small badge.\nSet to `\"small\"` for a small badge.\nSet to \"medium\" for a medium badge.\nSet to \"large\" for a large badge.\nSet to `\"xlarge\"` for the largest badge.\n\nDefaults to `\"small\"` for the `ionic` theme, undefined for all other themes."
+                    "text": "Set to `\"small\"` for a small badge.\nSet to `\"medium\"` for a medium badge.\nSet to `\"large\"` for a large badge, when it is empty (no text or icon).\n\nDefaults to `\"small\"` for the `ionic` theme, undefined for all other themes."
                 },
                 "attribute": "size",
                 "reflect": false

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

@@ -115,26 +115,10 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-700, 28px);
   text-decoration: none;
   text-transform: none;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
   box-sizing: border-box;
   pointer-events: none;
 }
 
-:host-context(ion-toolbar) {
-  top: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform: translateZ(0);
-  z-index: -1;
-}
-:host-context(ion-toolbar) {
-  inset-inline-start: 0;
-}
-
 :host(.title-large) {
   font-size: var(--ion-font-size-700, 1.75rem);
   font-weight: var(--ion-font-weight-medium, 500);

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

@@ -176,8 +176,7 @@ Do not edit directly, this file was auto-generated.
 }
 
 .toolbar-content {
-  flex: 2;
-  order: 3;
+  flex: 1 1 auto;
   min-width: 0;
 }
 
@@ -188,11 +187,15 @@ Do not edit directly, this file was auto-generated.
   padding-bottom: 0;
 }
 
+::slotted(ion-buttons) {
+  gap: var(--ion-space-200, 8px);
+}
+
 ::slotted(ion-title) {
-  -webkit-padding-start: var(--padding-top);
-  padding-inline-start: var(--padding-top);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
+  -webkit-padding-start: var(--ion-space-200, 8px);
+  padding-inline-start: var(--ion-space-200, 8px);
+  -webkit-padding-end: var(--ion-space-200, 8px);
+  padding-inline-end: var(--ion-space-200, 8px);
 }
 
 :host(.toolbar-title-default) ::slotted(ion-title) {
@@ -206,28 +209,30 @@ Do not edit directly, this file was auto-generated.
   padding-inline-end: var(--ion-space-400, 16px);
 }
 
-::slotted([slot=secondary]) {
-  order: 2;
-}
-
-::slotted([slot=primary]) {
-  order: 4;
+:host(.has-end-content) slot[name=end],
+:host(.show-end) slot[name=end] {
+  display: flex;
+  flex: 0 0 var(--start-end-size, 0);
+  justify-content: flex-end;
   text-align: end;
 }
 
-::slotted([slot=start]) {
-  order: 1;
+:host(.has-start-content) slot[name=start],
+:host(.show-start) slot[name=start] {
+  display: flex;
+  flex: 0 0 var(--start-end-size, 0);
 }
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
+:host(.has-primary-content) slot[name=primary],
+:host(.show-primary) slot[name=primary] {
   display: flex;
-  flex: 1;
-  gap: var(--ion-space-200, 8px);
+  flex: 0 0 var(--primary-secondary-size, 0);
+  justify-content: flex-end;
+  text-align: end;
 }
 
-::slotted([slot=end]) {
-  justify-content: end;
-  order: 5;
-  font-size: var(--ion-font-size-600, 1.5rem);
+:host(.has-secondary-content) slot[name=secondary],
+:host(.show-secondary) slot[name=secondary] {
+  display: flex;
+  flex: 0 0 var(--primary-secondary-size, 0);
 }