1 files changed, 6 insertions, 16 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md
index b7a84dc6e..a7d1cb713 100644
--- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md
+++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md
@@ -87,17 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low
 
 We use the following JavaScript to trigger our live toast demo:
 
-```js
-const toastTrigger = document.getElementById('liveToastBtn')
-const toastLiveExample = document.getElementById('liveToast')
-if (toastTrigger) {
-  toastTrigger.addEventListener('click', () => {
-    const toast = new bootstrap.Toast(toastLiveExample)
-
-    toast.show()
-  })
-}
-```
+{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
 
 ### Translucent
 
@@ -108,7 +98,7 @@ Toasts are slightly translucent to blend in with what's below them.
   <div class="toast-header">
     {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
     <strong class="me-auto">Bootstrap</strong>
-    <small class="text-muted">11 mins ago</small>
+    <small class="text-body-secondary">11 mins ago</small>
     <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
   </div>
   <div class="toast-body">
@@ -127,7 +117,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-muted">just now</small>
+      <small class="text-body-secondary">just now</small>
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
@@ -139,7 +129,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
-      <small class="text-muted">2 seconds ago</small>
+      <small class="text-body-secondary">2 seconds ago</small>
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
@@ -246,7 +236,7 @@ For systems that generate more notifications, consider using a wrapping element
       <div class="toast-header">
         {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-muted">just now</small>
+        <small class="text-body-secondary">just now</small>
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
       </div>
       <div class="toast-body">
@@ -258,7 +248,7 @@ For systems that generate more notifications, consider using a wrapping element
       <div class="toast-header">
         {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
         <strong class="me-auto">Bootstrap</strong>
-        <small class="text-muted">2 seconds ago</small>
+        <small class="text-body-secondary">2 seconds ago</small>
         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
       </div>
       <div class="toast-body">