From 4f3e9c70b96dbc00c524302575819224ce1cdd1a Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Wed, 23 Apr 2025 07:37:17 +0800
Subject: [PATCH] Fixing toast animation

---
 dist/basecoat.css                    | 16 +++++++++++++---
 dist/basecoat.tailwind.css           | 18 ++++++++++++++----
 docs/_includes/components/select.njk |  4 ++++
 docs/_includes/components/toast.njk  |  6 +++---
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/dist/basecoat.css b/dist/basecoat.css
index 17559fa..5d64503 100644
--- a/dist/basecoat.css
+++ b/dist/basecoat.css
@@ -3155,7 +3155,6 @@
   .toaster {
     pointer-events: none;
     position: fixed;
-    right: calc(var(--spacing) * 0);
     bottom: calc(var(--spacing) * 0);
     z-index: 50;
     display: flex;
@@ -3165,12 +3164,23 @@
     @media (width >= 40rem) {
       max-width: calc(var(--spacing) * 90);
     }
+    &:not([data-align]), &[data-align='end'] {
+      right: calc(var(--spacing) * 0);
+    }
+    &[data-align='start'] {
+      left: calc(var(--spacing) * 0);
+    }
+    &[data-align='center'] {
+      left: calc(1/2 * 100%);
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
     .toast {
       pointer-events: auto;
       margin-top: calc(var(--spacing) * 4);
       display: grid;
       width: 100%;
-      animation: toast-in 0.3s ease-in-out;
+      animation: toast-up 0.3s ease-in-out;
       grid-template-rows: 1fr;
       transition-property: grid-template-rows,opacity,margin;
       transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3206,7 +3216,7 @@
     }
   }
 }
-@keyframes toast-in {
+@keyframes toast-up {
   from {
     opacity: 0;
     transform: translateY(100%);
diff --git a/dist/basecoat.tailwind.css b/dist/basecoat.tailwind.css
index 30ab89a..06cb756 100644
--- a/dist/basecoat.tailwind.css
+++ b/dist/basecoat.tailwind.css
@@ -773,13 +773,23 @@
 /* Toasts */
 @layer components {
   .toaster {
-    @apply fixed bottom-0 right-0 p-4 pointer-events-none z-50 w-full sm:max-w-90 flex flex-col-reverse;
+    @apply fixed bottom-0 p-4 pointer-events-none z-50 w-full sm:max-w-90 flex flex-col-reverse;
 
+    &:not([data-align]),
+    &[data-align='end'] {
+      @apply right-0;
+    }
+    &[data-align='start'] {
+      @apply left-0;
+    }
+    &[data-align='center'] {
+      @apply left-1/2 -translate-x-1/2;
+    }
     .toast {
-      @apply pointer-events-auto w-full mt-4 animate-[toast-in_0.3s_ease-in-out] grid  grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;
+      @apply pointer-events-auto w-full mt-4 animate-[toast-up_0.3s_ease-in-out] grid  grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;
       
       .toast-content {
-        @apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg  overflow-hidden;
+        @apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden;
       }
       &[aria-hidden='true'] {
         @apply grid-rows-[0fr] opacity-0 m-0 border-0 p-0 overflow-hidden;
@@ -791,7 +801,7 @@
     }
   }
 }
-@keyframes toast-in {
+@keyframes toast-up {
   from {
     opacity: 0;
     transform: translateY(100%);
diff --git a/docs/_includes/components/select.njk b/docs/_includes/components/select.njk
index a0ebb3a..693ef32 100644
--- a/docs/_includes/components/select.njk
+++ b/docs/_includes/components/select.njk
@@ -140,6 +140,10 @@
 
       $filter: {
         '@input'(e) { this.filterOptions(e.target.value) },
+        '@keydown.escape.prevent'() {
+          this.open = false;
+          this.$refs.trigger.focus();
+        },
         '@keydown.down.prevent'() { this.moveOptionFocus(+1); },
         '@keydown.up.prevent'() { this.moveOptionFocus(-1); },
         '@keydown.home.prevent'() { this.focusOption(0) },
diff --git a/docs/_includes/components/toast.njk b/docs/_includes/components/toast.njk
index 8466ef2..1371440 100644
--- a/docs/_includes/components/toast.njk
+++ b/docs/_includes/components/toast.njk
@@ -8,13 +8,13 @@
 <script>
   document.addEventListener('alpine:init', () => {
     Alpine.store('toaster', { isPaused: false });
-    Alpine.data('toast', (category = []) => ({
+    Alpine.data('toast', (category = '', timeoutDuration = null) => ({
       open: false,
       timeoutDuration: null,
       timeoutId: null,
 
       init() {
-        this.timeoutDuration =  category === 'error' ? 5000 : 3000;
+        this.timeoutDuration = timeoutDuration || (category === 'error' ? 5000 : 3000);
         this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
         this.open = true;
         this.$watch('$store.toaster.isPaused', (isPaused) => {
@@ -74,7 +74,7 @@
     aria-hidden="false"
     :aria-hidden="!open"
     {% if toast.category %}data-category="{{ toast.category }}"{% endif %}
-    x-data="toast('{{ toast.category }}')"
+    x-data="toast('{{ toast.category }}', {{ toast.timeoutDuration }})"
     x-bind="$toast"
   >
     <div class="toast-content">