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

Sets the `flex-basis` variable to `auto` if the slot contains an img to allow it to calculate the width using the image's intrinsic width.

---------

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

core/src/components/toolbar/test/basic/toolbar.e2e.ts

@@ -180,3 +180,67 @@ configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEa
     });
   });
 });
+
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toolbar: basic'), () => {
+    test.describe(title('slot content'), () => {
+      test('should not have visual regressions with slotted svgs', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-header>
+              <ion-toolbar>
+                <img src="/src/components/toolbar/test/image.svg" slot="start"/>
+                <ion-title>Toolbar</ion-title>
+                <ion-img src="/src/components/toolbar/test/image.svg" slot="end"/>
+              </ion-toolbar>
+            </ion-header>
+          `,
+          config
+        );
+
+        const header = page.locator('ion-header');
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-svgs`));
+      });
+
+      test('should not have visual regressions with slotted images', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-header>
+              <ion-toolbar>
+                <img src="https://picsum.photos/id/237/50/50" slot="start" />
+                <ion-title>Toolbar</ion-title>
+                <ion-img src="https://picsum.photos/id/237/50/50" slot="end"></ion-img>
+              </ion-toolbar>
+            </ion-header>
+          `,
+          config
+        );
+
+        const header = page.locator('ion-header');
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-images`));
+      });
+
+      test('should not have visual regressions with nested slotted images', async ({ page }) => {
+        await page.setContent(
+          `
+            <ion-header>
+              <ion-toolbar>
+                <div slot="start">
+                  <img src="https://picsum.photos/id/237/50/50" />
+                </div>
+                <ion-title>Toolbar</ion-title>
+                <div slot="end">
+                  <ion-img src="https://picsum.photos/id/237/50/50"></ion-img>
+                </div>
+              </ion-toolbar>
+            </ion-header>
+          `,
+          config
+        );
+
+        const header = page.locator('ion-header');
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-nested-slotted-images`));
+      });
+    });
+  });
+});