fix(toolbar): allow slot to size to content to account for images

Author: brandyscarney

core/src/components/toolbar/toolbar.ionic.scss

@@ -70,12 +70,12 @@
 // Ionic Toolbar Slot Placement
 // --------------------------------------------------
 // We're using the slots to force the main toolbar content to be
-// cenetered in the toolbar. This is a bit of a hack but it works.
+// centered in the toolbar. This is a bit of a hack but it works.
 // The main content is placed in the center and then JavaScript evaluates
 // the sizes of the different slots and sets what size the pairs should be
 // based on the larger one. We then use `flex-basis` to set the expected
 // size of the slots and disable `flex-shrink` so that the smaller slot cannot
-// shrink and throw off the center, we also diable flex-grow so that slots do
+// shrink and throw off the center, we also disable flex-grow so that slots do
 // not grow more than they need. The slots are paired up so the mirroring slots
 // always have the same size. That is, start and end are paired and primary
 // and secondary are paired. All of this works together to force the main

core/src/components/toolbar/toolbar.tsx

@@ -112,8 +112,17 @@ export class Toolbar implements ComponentInterface {
       if (this.el.classList.contains(`has-${slot}-content`)) {
         const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slot}"]`) as HTMLElement | null;
         if (slotElement) {
+          // Temporarily allow slot to size to content by setting flex-basis
+          // to 'auto'. This ensures that slotted content (like images) can
+          // render at their intrinsic width for measurement.
+          const { name } = slotPairs.find((pair) => pair.slots.includes(slot))!;
+          this.el.style.setProperty(`--${name}-size`, 'auto');
+
           const width = slotElement.offsetWidth;
+
+          // Set the slot size variable to the measured width
           if (width > 0) {
+            this.el.style.setProperty(`--${name}-size`, `${width}px`);
             slotWidths.set(slot, width);
           } else {
             allMeasurementsSuccessful = false;