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

package/hydrate/index.js

@@ -46763,6 +46763,7 @@ 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'));
@@ -46781,9 +46782,23 @@ 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();
@@ -46803,26 +46818,67 @@ 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
-     */
-    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);
+     *
+     * 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));
             }
         });
+        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
@@ -46831,6 +46887,13 @@ 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;
@@ -46889,6 +46952,8 @@ 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));
     }
@@ -46972,14 +47037,14 @@ class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (hAsync(Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
+        return (hAsync(Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', class: {
                 ...createColorClasses$1(this.color, {
                     [theme]: true,
                     'in-toolbar': hostContext('ion-toolbar', this.el),
                     [`toolbar-title-placement-${titlePlacement}`]: true,
                 }),
                 ...childStyles,
-            } }, hAsync("div", { key: '26f85390aa62f118e585fd8560fba0620b30fd51', class: "toolbar-background", part: "background" }), hAsync("div", { key: '57e32773d5642dde7f5d7cca9aaceb41b4d800bd', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '5429b3f898703339749a55af6bb28d7e4d969679', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'c5565f7020f52a1f075d9c6908ace042d488642f', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: '2d083bcd57512041321a68b43d6b90144eb20166', class: "toolbar-content", part: "content" }, hAsync("slot", { key: 'eb8abc0b9b96c699355891fbd0d284094cde7632' })), hAsync("slot", { key: 'ca66f2dcce1f5382ed40a120cf32f759597a11ad', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '19e3eb792d45c21404fe48f119d68248b5d7dca7', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            } }, hAsync("div", { key: '68da02a622db1ed136a31700421c5da005ae3884', class: "toolbar-background", part: "background" }), hAsync("div", { key: 'cefcad22e28e1468de024a0cbe477464a872dc66', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '9ebfc464b5c32c6d2b5c81a0a0c415effa15ce3c', name: "start", onSlotchange: () => this.updateSlotClasses() }), hAsync("slot", { key: '55a07aa0000e1b02814f7a01ad1610d1d723f442', name: "secondary", onSlotchange: () => this.updateSlotClasses() }), hAsync("div", { key: '51d1e06e0463788b5f794831faadd305aa8bca75', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '6982cc6886f76cf43d78e3f0e9243dc05f67d34c' })), hAsync("slot", { key: 'b00b9b9b28c1637a04781ef88b5d9474fb5c0647', name: "primary", onSlotchange: () => this.updateSlotClasses() }), hAsync("slot", { key: '4fce3b9b17f7775d0ba14cd5185e500753b4976e', name: "end", onSlotchange: () => this.updateSlotClasses() }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/hydrate/index.mjs

@@ -46761,6 +46761,7 @@ 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'));
@@ -46779,9 +46780,23 @@ 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();
@@ -46801,26 +46816,67 @@ 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
-     */
-    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);
+     *
+     * 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));
             }
         });
+        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
@@ -46829,6 +46885,13 @@ 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;
@@ -46887,6 +46950,8 @@ 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));
     }
@@ -46970,14 +47035,14 @@ class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (hAsync(Host, { key: '3b97d3de5b1910257170355995eb7a50a2b6dcc4', class: {
+        return (hAsync(Host, { key: '2ee4ee2329ba499bd3fe24eb58f8954c86d39b01', class: {
                 ...createColorClasses$1(this.color, {
                     [theme]: true,
                     'in-toolbar': hostContext('ion-toolbar', this.el),
                     [`toolbar-title-placement-${titlePlacement}`]: true,
                 }),
                 ...childStyles,
-            } }, hAsync("div", { key: '26f85390aa62f118e585fd8560fba0620b30fd51', class: "toolbar-background", part: "background" }), hAsync("div", { key: '57e32773d5642dde7f5d7cca9aaceb41b4d800bd', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '5429b3f898703339749a55af6bb28d7e4d969679', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'c5565f7020f52a1f075d9c6908ace042d488642f', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: '2d083bcd57512041321a68b43d6b90144eb20166', class: "toolbar-content", part: "content" }, hAsync("slot", { key: 'eb8abc0b9b96c699355891fbd0d284094cde7632' })), hAsync("slot", { key: 'ca66f2dcce1f5382ed40a120cf32f759597a11ad', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '19e3eb792d45c21404fe48f119d68248b5d7dca7', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            } }, hAsync("div", { key: '68da02a622db1ed136a31700421c5da005ae3884', class: "toolbar-background", part: "background" }), hAsync("div", { key: 'cefcad22e28e1468de024a0cbe477464a872dc66', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '9ebfc464b5c32c6d2b5c81a0a0c415effa15ce3c', name: "start", onSlotchange: () => this.updateSlotClasses() }), hAsync("slot", { key: '55a07aa0000e1b02814f7a01ad1610d1d723f442', name: "secondary", onSlotchange: () => this.updateSlotClasses() }), hAsync("div", { key: '51d1e06e0463788b5f794831faadd305aa8bca75', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '6982cc6886f76cf43d78e3f0e9243dc05f67d34c' })), hAsync("slot", { key: 'b00b9b9b28c1637a04781ef88b5d9474fb5c0647', name: "primary", onSlotchange: () => this.updateSlotClasses() }), hAsync("slot", { key: '4fce3b9b17f7775d0ba14cd5185e500753b4976e', name: "end", onSlotchange: () => this.updateSlotClasses() }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "9.0.11-dev.11793792571.1765ff65",
+  "version": "9.0.11-dev.11793874002.1c88a1d0",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"

package/components/p-DdOVnjsY.js

@@ -1,4 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import{d as t,H as o,j as e,h as a,f as r,t as n}from"./p-DFBWAYvo.js";import{c as i,h as s}from"./p-BUF_V-Kg.js";import{b as d}from"./p-C93i7QCU.js";const l=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.childrenStyles=new Map,this.slotClasses=["has-start-content","has-end-content","has-primary-content","has-secondary-content"],this.showClasses=["show-start","show-end","show-primary","show-secondary"],this.slotSizeVars=["--start-end-size","--primary-secondary-size"]}componentWillLoad(){const t=Array.from(this.el.querySelectorAll("ion-buttons")),o=t.find((t=>"start"===t.slot));o&&o.classList.add("buttons-first-slot");const e=t.reverse(),a=e.find((t=>"end"===t.slot))||e.find((t=>"primary"===t.slot))||e.find((t=>"secondary"===t.slot));a&&a.classList.add("buttons-last-slot"),this.updateSlotClasses()}componentDidLoad(){this.updateSlotClasses(),this.updateSlotWidths()}titlePlacementChanged(){this.updateSlotClasses()}getTitlePlacement(){return void 0!==this.titlePlacement?this.titlePlacement:"ionic"===d(this)||"ios"===d(this)?"center":"start"}updateSlotWidths(t=0){setTimeout((()=>{!this.measureAndUpdateSlots()&&t<5&&setTimeout((()=>{this.updateSlotWidths(t+1)}),100)}))}measureAndUpdateSlots(){const t=[{name:"start-end",slots:["start","end"]},{name:"primary-secondary",slots:["primary","secondary"]}],o=new Map;let e=!0;return["start","end","primary","secondary"].forEach((a=>{if(this.el.classList.contains(`has-${a}-content`)){const r=this.el.shadowRoot?.querySelector(`slot[name="${a}"]`);if(r){if(r.assignedElements({flatten:!0}).some((t=>"IMG"===t.tagName||"ION-IMG"===t.tagName||null!==t.querySelector("img, ion-img")))){const{name:o}=t.find((t=>t.slots.includes(a)));this.el.style.setProperty(`--${o}-size`,"auto")}const n=r.offsetWidth;n>0?o.set(a,n):e=!1}}})),t.forEach((({name:t,slots:e})=>{let a=0,r=!1;e.forEach((t=>{o.has(t)&&(r=!0,a=Math.max(a,o.get(t)??0))})),r&&a>0&&this.el.style.setProperty(`--${t}-size`,`${a}px`)})),e}removeSlotClasses(){this.el.classList.remove(...this.slotClasses,...this.showClasses),this.slotSizeVars.forEach((t=>this.el.style.removeProperty(t)))}updateSlotClasses(){if("center"!==this.getTitlePlacement())return void this.removeSlotClasses();const t=[],o=[];["start","end","primary","secondary"].forEach((e=>{const a=`has-${e}-content`;this.hasSlotContent(e)?t.push(a):o.push(a)})),[{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"]}].forEach((e=>{const a=e.requiredSlots.every((o=>t.includes(`has-${o}-content`))),r=e.excludeSlots.some((o=>t.includes(`has-${o}-content`))),n=`show-${e.name}`;a&&!r?t.push(n):o.push(n)})),this.el.classList.add(...t),this.el.classList.remove(...o),this.updateSlotWidths()}hasSlotContent(t){const o=this.el.shadowRoot?.querySelector(`slot[name="${t}"]`);return!!o&&o.assignedNodes().length>0}childrenStyle(t){t.stopPropagation();const o=t.target.tagName,a=t.detail,r={},n=this.childrenStyles.get(o)||{};let i=!1;Object.keys(a).forEach((t=>{const o=`toolbar-${t}`,e=a[t];e!==n[o]&&(i=!0),e&&(r[o]=!0)})),i&&(this.childrenStyles.set(o,r),e(this))}render(){const t=d(this),o={};this.childrenStyles.forEach((t=>{Object.assign(o,t)}));const e=this.getTitlePlacement();return a(r,{key:"3b97d3de5b1910257170355995eb7a50a2b6dcc4",class:{...i(this.color,{[t]:!0,"in-toolbar":s("ion-toolbar",this.el),[`toolbar-title-placement-${e}`]:!0}),...o}},a("div",{key:"26f85390aa62f118e585fd8560fba0620b30fd51",class:"toolbar-background",part:"background"}),a("div",{key:"57e32773d5642dde7f5d7cca9aaceb41b4d800bd",class:"toolbar-container",part:"container"},a("slot",{key:"5429b3f898703339749a55af6bb28d7e4d969679",name:"start",onSlotchange:()=>this.updateSlotClasses}),a("slot",{key:"c5565f7020f52a1f075d9c6908ace042d488642f",name:"secondary",onSlotchange:()=>this.updateSlotClasses}),a("div",{key:"2d083bcd57512041321a68b43d6b90144eb20166",class:"toolbar-content",part:"content"},a("slot",{key:"eb8abc0b9b96c699355891fbd0d284094cde7632"})),a("slot",{key:"ca66f2dcce1f5382ed40a120cf32f759597a11ad",name:"primary",onSlotchange:()=>this.updateSlotClasses}),a("slot",{key:"19e3eb792d45c21404fe48f119d68248b5d7dca7",name:"end",onSlotchange:()=>this.updateSlotClasses})))}get el(){return this}static get watchers(){return{titlePlacement:[{titlePlacementChanged:0}]}}static get style(){return{ionic:":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(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528));--border-color:currentColor;--padding-top:var(--token-space-200, var(--token-scale-200, 8px));--padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));--padding-start:var(--token-space-200, var(--token-scale-200, 8px));--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--min-height:var(--token-scale-1400, 56px)}.toolbar-container{gap:var(--token-space-400, var(--token-scale-400, 16px));z-index:10}.toolbar-background{z-index:-1}.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(--token-space-200, var(--token-scale-200, 8px))}::slotted(ion-title){-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}:host(.toolbar-title-large) ::slotted(ion-title){-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))}: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)}:host(.toolbar-title-placement-start) ::slotted(ion-title){text-align:start}:host(.toolbar-title-placement-center) ::slotted(ion-title){text-align:center}:host(.toolbar-title-placement-end) ::slotted(ion-title){text-align:end}",ios:":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%}",md:":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-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:3;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-webkit-margin-end:4px;margin-inline-end:4px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:4;order:4}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}"}}},[289,"ion-toolbar",{color:[513],titlePlacement:[1,"title-placement"]},[[0,"ionStyle","childrenStyle"]],{titlePlacement:[{titlePlacementChanged:0}]}]);function c(){"undefined"!=typeof customElements&&["ion-toolbar"].forEach((t=>{"ion-toolbar"===t&&(customElements.get(n(t))||customElements.define(n(t),l))}))}export{l as T,c as d}