From ac4ea3232b1ccffa1c31dc4c6c416e16848ff607 Mon Sep 17 00:00:00 2001
From: fudom <143608856+fudom@users.noreply.github.com>
Date: Thu, 23 Jan 2025 21:48:58 +0100
Subject: [PATCH] feat(toolbar): add shadow parts for background, container,
 and content (#30069)

Resolves #30068

---------

Add `part` attributes to toolbar for the `background`, `container` and `content`.
---
 core/api.txt                            |  5 ++++-
 core/src/components/toolbar/toolbar.tsx | 10 +++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 67d49417556..6679bd89aa1 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -2000,4 +2000,7 @@ ion-toolbar,css-prop,--padding-end,md
 ion-toolbar,css-prop,--padding-start,ios
 ion-toolbar,css-prop,--padding-start,md
 ion-toolbar,css-prop,--padding-top,ios
-ion-toolbar,css-prop,--padding-top,md
\ No newline at end of file
+ion-toolbar,css-prop,--padding-top,md
+ion-toolbar,part,background
+ion-toolbar,part,container
+ion-toolbar,part,content
\ No newline at end of file
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index 0999d404272..d742953d9ad 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -13,6 +13,10 @@ import type { Color, CssClassMap, StyleEventDetail } from '../../interface';
  * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
  * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
+ *
+ * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
+ * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
+ * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 @Component({
   tag: 'ion-toolbar',
@@ -97,11 +101,11 @@ export class Toolbar implements ComponentInterface {
           }),
         }}
       >
-        <div class="toolbar-background"></div>
-        <div class="toolbar-container">
+        <div class="toolbar-background" part="background"></div>
+        <div class="toolbar-container" part="container">
           <slot name="start"></slot>
           <slot name="secondary"></slot>
-          <div class="toolbar-content">
+          <div class="toolbar-content" part="content">
             <slot></slot>
           </div>
           <slot name="primary"></slot>