feat(toast-notification): make title/subtitle/caption slottable

COMPONENT_INDEX.md

@@ -4387,9 +4387,12 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 
 ### Slots
 
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------- |
-| --        | Yes     | --    | --       |
+| Slot name | Default | Props | Fallback                |
+| :-------- | :------ | :---- | :---------------------- |
+| --        | Yes     | --    | --                      |
+| caption   | No      | --    | <code>{caption}</code>  |
+| subtitle  | No      | --    | <code>{subtitle}</code> |
+| title     | No      | --    | <code>{title}</code>    |
 
 ### Events
 

docs/src/COMPONENT_API.json

@@ -12279,7 +12279,27 @@
           "reactive": false
         }
       ],
-      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "slots": [
+        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "caption",
+          "default": false,
+          "fallback": "{caption}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "subtitle",
+          "default": false,
+          "fallback": "{subtitle}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "title",
+          "default": false,
+          "fallback": "{title}",
+          "slot_props": "{}"
+        }
+      ],
       "events": [
         {
           "type": "dispatched",

docs/src/pages/components/ToastNotification.svx

@@ -11,6 +11,14 @@ source: Notification/ToastNotification.svelte
 
 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 
+### Slottable title, subtitle, caption
+
+<ToastNotification>
+  <strong slot="title">Error: </strong>
+  <strong slot="subtitle">An internal server error occurred.</strong>
+  <strong slot="caption">{new Date().toLocaleString()}</strong>
+</ToastNotification>
+
 ### Hidden close button
 
 <ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />

src/Notification/ToastNotification.svelte

@@ -36,7 +36,6 @@
   import { createEventDispatcher, onMount } from "svelte";
   import NotificationButton from "./NotificationButton.svelte";
   import NotificationIcon from "./NotificationIcon.svelte";
-  import NotificationTextDetails from "./NotificationTextDetails.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -79,13 +78,18 @@
     on:mouseleave
   >
     <NotificationIcon kind="{kind}" />
-    <NotificationTextDetails
-      title="{title}"
-      subtitle="{subtitle}"
-      caption="{caption}"
-    >
+    <div class:bx--toast-notification__details="{true}">
+      <h3 class:bx--toast-notification__title="{true}">
+        <slot name="title">{title}</slot>
+      </h3>
+      <div class:bx--toast-notification__subtitle="{true}">
+        <slot name="subtitle">{subtitle}</slot>
+      </div>
+      <div class:bx--toast-notification__caption="{true}">
+        <slot name="caption">{caption}</slot>
+      </div>
       <slot />
-    </NotificationTextDetails>
+    </div>
     {#if !hideCloseButton}
       <NotificationButton
         iconDescription="{iconDescription}"

types/Notification/ToastNotification.svelte.d.ts

@@ -73,5 +73,5 @@ export default class ToastNotification extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
   },
-  { default: {} }
+  { default: {}; caption: {}; subtitle: {}; title: {} }
 > {}