playbook_ui 14.12.0.pre.alpha.play1862buttondisabledlinkbug5714 → 14.12.0.pre.alpha.play1887homeaddressfix5910

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 600fda82f286e0154735f568c8fbf35939daea67a55d2cc25cd2bb634a1c360c
-  data.tar.gz: 356dafee52bc3fe7af29233439baaa80a66cfbeeeed26bb5d9260f541961ed47
+  metadata.gz: f334463a8c895b5718c4265377f2c1a031eb85ab2107c42b20bb126aa1a8db7b
+  data.tar.gz: 58c22a6fe27363f7dcbd5c189c10c225730fd4cec1676dabe044ecd9be51f4d2
 SHA512:
-  metadata.gz: ffa7788de179d9ce532e43c510843ebd0dc037189645c4625a2b3aa58a3d557d69fc8e70ed8103ca40708ea8a24303ae94f5ac34131e5bc88cbd5d5501ec4e65
-  data.tar.gz: 23d84de786c9ba48f4c0d14ffeb94ce7607bc00eedbc9a44e94bef6dbfbbfd123931ebddd60f6091d918f7f51e0ddc0f296e4a28205eb3e443221f188acf376a
+  metadata.gz: bafe3f9038a558afdee04a9e66544653dc4f0ae651663d1843c6cfb9d2cd9165822a4c24aeeba845ecf708f155c7d6b69cebcab421f0bd213501544b0e8eb654
+  data.tar.gz: e18f1d32c6be05479b91f897076a680501a35818b8d9acf4ea5ca44fa29392875d436ac65eff3db9f27fa01516345982be900d4fcfcf5218b1ad8732567a4aa9

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -89,7 +89,6 @@
     }
   }
 
-
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -179,7 +178,7 @@
   }
 
   // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {  
+  @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
@@ -215,7 +214,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-      
+
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -306,4 +305,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
-    if (isVisible) {
-      this.hideElement(elements);
-      this.displayDownArrow();
-    } else {
-      this.showElement(elements);
-      this.displayUpArrow();
+
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
+    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+
+    const row = this.element.closest("tr");
+    if (row) {
+      row.classList.toggle("bg-silver", !isVisible);
+      row.classList.toggle("bg-white", isVisible);
     }
   }
 
+
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -14,10 +14,13 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                                </button>
+                              <button
+                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                class="gray-icon expand-toggle-icon"
+                                data-advanced-table="true">
+                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                              </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
                                 <% if column[:custom_renderer].present? %>
@@ -42,4 +45,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -27,6 +27,9 @@ $avatar-sizes: (
       flex-basis: $size;
 
       & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit] {
+          padding: 2px;
+        }
         [class^=pb_card_kit].overlay_bottom_center,
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
@@ -52,6 +55,10 @@ $avatar-sizes: (
         flex-grow: 0;
         flex-basis: $size;
 
+        .dark & {
+          background: $text_dk_light;
+        }
+
         &::before {
           content: attr(data-initials);
           width: 100%;
@@ -78,9 +85,11 @@ $avatar-sizes: (
       }
     }
   }
+
   &.dark {
     [class^=pb_card_kit] {
       position: absolute;
+      padding: 2px;
     }
   }
 }

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -23,8 +23,8 @@ export type AvatarProps = {
     variant?: string,
     icon?: string
   },
-  data?: {[key: string]: string},
   dark?: boolean,
+  data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
@@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
-  const onlineStatusSize = 
+  const onlineStatusSize =
     ['xxs', 'xs'].includes(size) ? 'sm' :
       ['sm', 'md'].includes(size) ? 'md' :
         ['lg', 'xl'].includes(size) ? 'lg' :
           'sm';
 
-  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
+  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
     {
       top: { inset: true, value: "0" },
       right: { inset: false, value: "xxs" }
@@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         id={id}
     >
       {componentOverlay ? (
-        <Flex display="display_inline_block" 
+        <Flex display="display_inline_block"
             position="relative"
         >
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (
@@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
              <Card
                  borderNone
                  borderRadius="rounded"
+                 dark={dark}
                  padding="none"
                  position="absolute"
                  {...getPlacementProps(componentOverlay.placement, size)}
              >
-    
+
             <Badge
+                dark={dark}
                 rounded
                 text={componentOverlay.text}
                 variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
@@ -131,11 +133,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
             <Card
                 borderNone
                 borderRadius="rounded"
+                dark={dark}
                 htmlOptions={{style: {padding:"2px"}}}
                 position="absolute"
                 {...getPlacementProps(componentOverlay.placement, size)}
             >
               <IconCircle
+                  dark={dark}
                   icon={componentOverlay.icon}
                   size="xxs"
                   variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
@@ -145,7 +149,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         </Flex>
       ) : (
         <>
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -1,22 +1,22 @@
 
 <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
   <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
-    <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+    <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
       <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
         <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
       <% end %>
-      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
+      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
         
-        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
+        <%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
-  <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+  <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
     <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
       <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
     <% end %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
-    <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
+    <%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
     <% end %>
     <% end %>
   <% else %>
@@ -26,4 +26,3 @@
     <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>
 <% end %>
-

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,18 +1,19 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarBadgeComponentOverlay = () => {
+const AvatarBadgeComponentOverlay = (props) => {
     return (
         <div>
             <Avatar
                 componentOverlay={{
                     component: "badge",
                     placement: "bottom-right",
-                    text: "12"
+                    text: "12",
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="sm"
+                {...props}
             />
 
             <Avatar
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="md"
+                {...props}
+
             />
 
             <Avatar
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="lg"
+                {...props}
+
             />
 
             <Avatar
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            /> 
+                {...props}
+            />
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarCircleIconComponentOverlay = () => {
+const AvatarCircleIconComponentOverlay = (props) => {
     return (
         <div>
         <Avatar
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="sm"
+            {...props}
         />
 
         <Avatar
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="md"
+            {...props}
         />
 
         <Avatar
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="lg"
+            {...props}
         />
 
         <Avatar
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="xl"
-        /> 
+            {...props}
+        />
     </div>
     )
 }

data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss

@@ -1,3 +1,4 @@
 .pb_copy_button_kit {
-
+  width: fit-content;
+  height: fit-content;
 }

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -0,0 +1,15 @@
+<%= pb_content_tag do %>
+    <%= pb_rails("button", props: { icon: "copy" }) do %>
+      <%= object.text %>
+    <% end %>
+  <% if object.id %> 
+  <%= pb_rails("tooltip", props: {
+      trigger_element_selector: "##{object.id}",
+      position: object.tooltip_position,
+      tooltip_id: "#{object.id}_tooltip",
+      trigger_method: "click"
+    }) do %>
+        <%= object.tooltip_text %> 
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCopyButton
+    class CopyButton < ::Playbook::KitBase
+      prop :text
+      prop :tooltip_position,
+           type: Playbook::Props::Enum,
+           values: %w[top right bottom left],
+           default: "top"
+      prop :tooltip_text, type: Playbook::Props::String,
+                          default: "Copied!"
+      prop :value
+      prop :from
+
+      def classname
+        generate_classname("pb_copy_button_kit")
+      end
+
+      def data
+        Hash(values[:data]).merge(
+          "copy-value": value,
+          "from": from
+        )
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
+<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/example.yml

@@ -1,8 +1,8 @@
 examples:
-  
+  rails:
+  - copy_button_default: Default
+  - copy_button_from: Copy From
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  
-  

data/app/pb_kits/playbook/pb_copy_button/index.js

@@ -0,0 +1,47 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+export default class PbCopyButton extends PbEnhancedElement {
+  static get selector() {
+    return '.pb_copy_button_kit'
+  }
+
+  connect() {
+    this.handleClick = this.handleClick.bind(this)
+    this.button = this.element.querySelector('button')
+    if (this.button) {
+      this.button.addEventListener('click', this.handleClick)
+    }
+  }
+
+  disconnect() {
+    if (this.button) {
+      this.button.removeEventListener('click', this.handleClick)
+    }
+  }
+
+  handleClick() {
+    const fromId = this.element.getAttribute('data-from')
+    if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      if (fromElement) {
+        let contentToCopy = ''
+        if (fromElement.tagName.toLowerCase() === 'input') {
+          contentToCopy = fromElement.value
+        } else {
+          contentToCopy = fromElement.innerText
+        }
+        navigator.clipboard.writeText(contentToCopy)
+          .catch(err => console.error('Failed to copy text', err))
+        return
+      }
+    }
+
+    const textToCopy = this.element.getAttribute('data-copy-value')
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+        .catch(err => console.error('Failed to copy text', err))
+    } else {
+      console.warn('No data-copy-value attribute found or data-from element')
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -14,6 +14,7 @@ type PbDateProps = {
   alignment?: "left" | "center" | "right";
   aria?: { [key: string]: string };
   className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     aria = {},
     alignment = "left",
     className,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -56,7 +58,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
   );
 
   return (
-    <div 
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -93,7 +95,9 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
           </>
         : size == "md" || size == "lg"
           ? (
-            <Title size={4}
+            <Title
+                dark={dark}
+                size={4}
                 tag="h4"
             >
               {showIcon && (
@@ -127,6 +131,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <>
                 {showIcon && (
                   <Caption className="pb_icon_kit_container"
+                      dark={dark}
                       tag="span"
                   >
                     <Icon fixedWidth
@@ -138,15 +143,20 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
                 {showDayOfWeek && (
                   <>
-                    <Caption tag="div">{weekday}</Caption>
+                    <Caption dark={dark}
+                        tag="div">
+                        {weekday}
+                    </Caption>
                     <Caption color="light"
+                        dark={dark}
                         tag="div"
                         text=" • "
                     />
                   </>
                 )}
 
-                <Caption tag="span">
+                <Caption dark={dark}
+                    tag="span">
                   {month} {day}
                   {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -18,7 +18,7 @@ const DateDefault = (props) => {
             value={"2012-08-03"}
             {...props}
         />
-        <Caption>{"(Hyphenated Date)"}</Caption>
+        <Caption {...props}>{"(Hyphenated Date)"}</Caption>
       </div>
 
       <br />
@@ -56,6 +56,7 @@ const DateDefault = (props) => {
         <Title
             size={4}
             text={"(Hyphenated Date)"}
+            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -4,7 +4,8 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (
     <>
-      <Caption size="xs"
+      <Caption {...props}
+          size="xs"
           text="Basic unstyled example"
       />
       <FormattedDate
@@ -15,10 +16,14 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption size="xs"
+      <Caption {...props}
+
+          size="xs"
           text="Example with wrapping typography kit"
       />
-      <Title size={1}>
+      <Title {...props}
+          size={1}
+      >
         <FormattedDate
             unstyled
             value={new Date('25 Dec 1995')}
@@ -28,10 +33,13 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption size="xs"
+      <Caption {...props}
+          size="xs"
           text="Example with icon + subcaption"
       />
-      <Caption size="xs">
+      <Caption {...props}
+          size="xs"
+      >
         <FormattedDate
             showDayOfWeek
             showIcon

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag("div",
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -0,0 +1,58 @@
+<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
+<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 3000,
+  classname: "toast-to-hide",
+  id: "toast-auto-close",
+  text: "I will disappear in 3 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  auto_close: 10000,
+  closeable: true,
+  id: "toast-auto-close-closeable",
+  text: "I will disappear in 10 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize toast elements and buttons
+  const toasts = {
+    '#toast-auto-close': document.querySelector("#toast-auto-close"),
+    '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
+  }
+  
+  const buttons = {
+    '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
+    '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
+  }
+
+  // Store original toasts and remove them from DOM
+  const originalToasts = {}
+  Object.entries(toasts).forEach(([id, toast]) => {
+    if (toast) {
+      originalToasts[id] = toast.cloneNode(true)
+      toast.remove()
+    }
+  })
+
+  // Set up button click handlers
+  Object.keys(buttons).forEach((toastId) => {
+    const button = buttons[toastId]
+    if (button) {
+      button.onclick = () => {
+        const newToast = originalToasts[toastId].cloneNode(true)
+        newToast.style.display = "flex"
+        document.body.appendChild(newToast)
+      }
+    }
+  })
+})
+</script>