feat(segment-button, toast): add additional parts docs (#21532)

core/api.txt

@@ -1051,6 +1051,7 @@ ion-segment-button,css-prop,--padding-start
 ion-segment-button,css-prop,--padding-top
 ion-segment-button,css-prop,--transition
 ion-segment-button,part,indicator
+ion-segment-button,part,indicator-background
 ion-segment-button,part,native
 
 ion-select,shadow
@@ -1290,6 +1291,10 @@ ion-toast,css-prop,--min-width
 ion-toast,css-prop,--start
 ion-toast,css-prop,--white-space
 ion-toast,css-prop,--width
+ion-toast,part,button
+ion-toast,part,container
+ion-toast,part,header
+ion-toast,part,message
 
 ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false

core/src/components/segment-button/readme.md

@@ -796,10 +796,11 @@ export class SegmentButtonExample {
 
 ## Shadow Parts
 
-| Part          | Description                                                   |
+| Part                     | Description                                                                       |
-| ------------- | ------------------------------------------------------------- |
+| ------------------------ | --------------------------------------------------------------------------------- |
-| `"indicator"` | The indicator displayed on the checked segment button.        |
+| `"indicator"`            | The indicator displayed on the checked segment button.                            |
-| `"native"`    | The native HTML button element that wraps all child elements. |
+| `"indicator-background"` | The background element for the indicator displayed on the checked segment button. |
+| `"native"`               | The native HTML button element that wraps all child elements.                     |
 
 
 ## CSS Custom Properties

core/src/components/segment-button/segment-button.tsx

@@ -12,6 +12,7 @@ let ids = 0;
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part indicator - The indicator displayed on the checked segment button.
+ * @part indicator-background - The background element for the indicator displayed on the checked segment button.
  */
 @Component({
   tag: 'ion-segment-button',

core/src/components/toast/readme.md

@@ -288,6 +288,16 @@ Type: `Promise<void>`
 
 
 
+## Shadow Parts
+
+| Part          | Description                                               |
+| ------------- | --------------------------------------------------------- |
+| `"button"`    | Any button element that is displayed inside of the toast. |
+| `"container"` | The element that wraps all child elements.                |
+| `"header"`    | The header text of the toast.                             |
+| `"message"`   | The body text of the toast.                               |
+
+
 ## CSS Custom Properties
 
 | Name              | Description                                                                                            |

core/src/components/toast/toast.tsx

@@ -13,6 +13,11 @@ import { mdLeaveAnimation } from './animations/md.leave';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part button - Any button element that is displayed inside of the toast.
+ * @part container - The element that wraps all child elements.
+ * @part header - The header text of the toast.
+ * @part message - The body text of the toast.
  */
 @Component({
   tag: 'ion-toast',