@urbicon-ui/blocks 6.21.0 → 6.21.2

package/dist/primitives/Textarea/textarea.variants.d.ts

@@ -1,194 +1,109 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const textareaVariants: (props?: import("../../utils/variants.js").TVProps<{
-    tier: {
-        modify: {
-            base: string;
-        };
-        commit: {
-            base: string;
-        };
-    };
-    variant: {
-        outlined: {
-            base: string;
-        };
-        filled: {
-            base: string;
-        };
-        ghost: {
-            base: string;
-        };
-        underline: {
-            base: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        lg: {
-            base: string;
-        };
-    };
-    intent: {
-        default: {};
-        success: {
-            base: string;
-            message: string;
-        };
-        warning: {
-            base: string;
-            message: string;
-        };
-        danger: {
-            base: string;
-            message: string;
-        };
-    };
-    autoResize: {
-        true: {
-            base: string;
-        };
-    };
-    disabled: {
-        true: {
-            base: string;
-            label: string;
-        };
-    };
-    readonly: {
-        true: {
-            base: string;
-        };
-    };
-    error: {
-        true: {
-            base: string;
-            message: string;
-        };
-    };
-    required: {
-        true: {
-            label: string;
-        };
-    };
-    messageType: {
-        error: {
-            message: string;
-        };
-        helper: {
-            message: string;
-        };
-    };
-    counterState: {
-        normal: {};
-        warning: {
-            counter: string;
-        };
-        over: {
-            counter: string;
-        };
-    };
-}> | undefined) => {
+export declare const textareaVariants: ((props?: {
+    tier?: "commit" | "modify" | undefined;
+    variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+    intent?: "default" | "success" | "warning" | "danger" | undefined;
+    autoResize?: boolean | undefined;
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+    messageType?: "error" | "helper" | undefined;
+    error?: boolean | undefined;
+    required?: boolean | undefined;
+    counterState?: "warning" | "normal" | "over" | undefined;
+} | undefined) => {
     wrapper: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
-        messageType?: "error" | "helper" | undefined;
         counterState?: "warning" | "normal" | "over" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     base: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
-        messageType?: "error" | "helper" | undefined;
         counterState?: "warning" | "normal" | "over" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     label: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
-        messageType?: "error" | "helper" | undefined;
         counterState?: "warning" | "normal" | "over" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     footer: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
-        messageType?: "error" | "helper" | undefined;
         counterState?: "warning" | "normal" | "over" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     message: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
-        messageType?: "error" | "helper" | undefined;
         counterState?: "warning" | "normal" | "over" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     counter: (props?: ({
         tier?: "commit" | "modify" | undefined;
         variant?: "ghost" | "filled" | "outlined" | "underline" | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         intent?: "default" | "success" | "warning" | "danger" | undefined;
         autoResize?: boolean | undefined;
         disabled?: boolean | undefined;
         readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
-        messageType?: "error" | "helper" | undefined;
         counterState?: "warning" | "normal" | "over" | undefined;
     } & {
-        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
-        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
 export type TextareaVariants = VariantProps<typeof textareaVariants>;
 /** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */

package/dist/primitives/Textarea/textarea.variants.js

@@ -39,25 +39,28 @@ export const textareaVariants = tv({
             }
         },
         size: {
+            // Full xs–xl scale (form-family symmetry with Input's ladder).
             // `pointer-coarse:text-base` floors the font to 16px on touch so iOS
-            // Safari doesn't auto-zoom the field on focus. Desktop keeps 14px.
+            // Safari doesn't auto-zoom the field on focus. Desktop keeps 12/14px.
+            xs: { base: 'px-2 py-1.5 text-xs pointer-coarse:text-base min-h-[4rem]' },
             sm: { base: 'px-3 py-2 text-sm pointer-coarse:text-base min-h-[5rem]' },
             md: { base: 'px-4 py-3 text-base min-h-[7rem]' },
-            lg: { base: 'px-6 py-4 text-lg min-h-[9rem]' }
+            lg: { base: 'px-6 py-4 text-lg min-h-[9rem]' },
+            xl: { base: 'px-8 py-5 text-xl min-h-[11rem]' }
         },
+        // Message colour is owned by messageType/error (declared below) — an
+        // intent-level message tone could never win the fold and shipped
+        // inconsistently under the old stylesheet-order tie-break.
         intent: {
             default: {},
             success: {
-                base: 'border-success focus-visible:border-success focus-visible:ring-success/20',
-                message: 'text-success'
+                base: 'border-success focus-visible:border-success focus-visible:ring-success/20'
             },
             warning: {
-                base: 'border-warning focus-visible:border-warning focus-visible:ring-warning/20',
-                message: 'text-warning-emphasis'
+                base: 'border-warning focus-visible:border-warning focus-visible:ring-warning/20'
             },
             danger: {
-                base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
-                message: 'text-danger'
+                base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20'
             }
         },
         autoResize: {
@@ -74,6 +77,12 @@ export const textareaVariants = tv({
                 base: 'bg-surface-subtle cursor-default'
             }
         },
+        // Declared BEFORE `error` so the error tone wins the message-color
+        // bucket in every call shape — `{ error: true }` alone must read red.
+        messageType: {
+            error: { message: 'text-danger' },
+            helper: { message: 'text-text-tertiary' }
+        },
         error: {
             true: {
                 base: 'border-danger focus-visible:border-danger focus-visible:ring-danger/20',
@@ -85,10 +94,6 @@ export const textareaVariants = tv({
                 label: "after:content-['*'] after:ml-1 after:text-danger"
             }
         },
-        messageType: {
-            error: { message: 'text-danger' },
-            helper: { message: 'text-text-tertiary' }
-        },
         counterState: {
             normal: {},
             warning: { counter: 'text-warning-emphasis' },

package/dist/primitives/Toast/Toaster.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { useBlocksI18n } from '../..';
   import { fly } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
+  import { getOverlayMotion } from '../../utils';
   import { toastVariants, type ToastVariants } from './toast.variants';
   import { toaster } from './toast.store.svelte';
   import { resolveIcon, type IconComponent } from '../../icons';
@@ -11,7 +11,8 @@
   import WarningTriangleIconDefault from '../../icons/WarningTriangleIcon.svelte';
   import DangerCircleIconDefault from '../../icons/DangerCircleIcon.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import type { ToastProps } from './index';
+  import Spinner from '../Spinner/Spinner.svelte';
+  import type { ToastData, ToastProps } from './index';
 
   const bt = useBlocksI18n();
 
@@ -29,6 +30,8 @@
   let {
     placement = 'bottom-right',
     max = 5,
+    transitionDuration,
+    transitionEasing,
     class: className = '',
     unstyled: unstyledProp = false,
     slotClasses: slotClassesProp = {},
@@ -64,12 +67,25 @@
           content: () => '',
           title: () => '',
           description: () => '',
+          actions: () => '',
+          actionButton: () => '',
+          cancelButton: () => '',
           dismissButton: () => '',
           progress: () => ''
         }
       : toastVariants({ placement })
   );
 
+  // Run a toast action/cancel button: fire its handler, then dismiss unless the
+  // action opted out (`dismissOnClick: false`, e.g. a "Retry" that re-issues the
+  // async work and updates the same toast).
+  function runAction(toast: ToastData, which: 'action' | 'cancel') {
+    const action = toast[which];
+    if (!action) return;
+    action.onClick?.(toast.id);
+    if (action.dismissOnClick !== false) toaster.dismiss(toast.id);
+  }
+
   function slot(key: keyof typeof styles, intent?: string) {
     const overrides = slotClasses?.[key];
     if (unstyled) return overrides ?? '';
@@ -84,11 +100,22 @@
     const isBottom = placement.startsWith('bottom');
     const isRight = placement.endsWith('right');
     const isLeft = placement.endsWith('left');
+    // Enter/exit motion resolved from the shared overlay tokens
+    // (--blocks-overlay-*, same source as Dialog/Drawer): a global theme or
+    // `prefers-reduced-motion` retunes every toast, and the two props override
+    // it per toaster instance. Resolved per toast so the live reduced-motion
+    // value applies; `fly` is symmetric here, so the enter duration drives both
+    // directions.
+    const motion = getOverlayMotion({
+      enterDuration: transitionDuration,
+      exitDuration: transitionDuration,
+      easing: transitionEasing
+    });
     return {
       y: isBottom ? 20 : -20,
       x: isRight ? 20 : isLeft ? -20 : 0,
-      duration: 250,
-      easing: quintOut
+      duration: motion.enterDuration,
+      easing: motion.easing
     };
   }
 </script>
@@ -102,7 +129,11 @@
   {#each visibleToasts as toast (toast.id)}
     {@const IntentIcon = INTENT_ICON_MAP[toast.intent] ?? INTENT_ICON_MAP.neutral}
     <div class={slot('toast', toast.intent)} role="alert" transition:fly={flyParams()}>
-      <IntentIcon class={slot('icon', toast.intent)} />
+      {#if toast.loading}
+        <span class={slot('icon', toast.intent)}><Spinner size="sm" /></span>
+      {:else}
+        <IntentIcon class={slot('icon', toast.intent)} />
+      {/if}
 
       <div class={slot('content')}>
         {#if toast.title}
@@ -111,6 +142,28 @@
         {#if toast.description}
           <div class={slot('description')}>{toast.description}</div>
         {/if}
+        {#if toast.action || toast.cancel}
+          <div class={slot('actions')}>
+            {#if toast.action}
+              <button
+                type="button"
+                class={slot('actionButton')}
+                onclick={() => runAction(toast, 'action')}
+              >
+                {toast.action.label}
+              </button>
+            {/if}
+            {#if toast.cancel}
+              <button
+                type="button"
+                class={slot('cancelButton')}
+                onclick={() => runAction(toast, 'cancel')}
+              >
+                {toast.cancel.label}
+              </button>
+            {/if}
+          </div>
+        {/if}
       </div>
 
       {#if toast.dismissible}

package/dist/primitives/Toast/index.d.ts

@@ -11,6 +11,17 @@ export declare const TOAST_INTENTS: readonly ["primary", "info", "success", "war
  * standard intent palette.
  */
 export type ToastIntent = (typeof TOAST_INTENTS)[number];
+/**
+ * An action or cancel button rendered inside a toast (Sonner-style).
+ */
+export interface ToastAction {
+    /** Button label. */
+    label: string;
+    /** Click handler. Receives the toast id so the handler can dismiss/update it. */
+    onClick?: (id: string) => void;
+    /** Dismiss the toast after the click. @default true */
+    dismissOnClick?: boolean;
+}
 /**
  * Internal data shape for a rendered toast. Created by `toaster.add()`.
  */
@@ -29,6 +40,25 @@ export interface ToastData {
     dismissible: boolean;
     /** Show an animated progress bar that counts down the remaining `duration`. @default true */
     showProgress: boolean;
+    /** Primary action button (prominent). */
+    action?: ToastAction;
+    /** Secondary/cancel button (quiet). */
+    cancel?: ToastAction;
+    /** Render a spinner instead of the intent icon (used by `toaster.promise` while pending). @default false */
+    loading?: boolean;
+}
+/**
+ * Per-state config for `toaster.promise`. Each state is either a plain title
+ * string or a full {@link ToastInput}; `success`/`error` may also be a function
+ * of the resolved value / rejection reason.
+ */
+export interface ToastPromiseOptions<T> {
+    /** Shown while the promise is pending (spinner, persistent, not dismissible). */
+    loading: string | ToastInput;
+    /** Shown when the promise resolves. */
+    success: string | ToastInput | ((value: T) => string | ToastInput);
+    /** Shown when the promise rejects. */
+    error: string | ToastInput | ((reason: unknown) => string | ToastInput);
 }
 /**
  * Options accepted by `toaster.add()` and the shorthand methods (`info`, `success`, `warning`, `danger`).
@@ -77,6 +107,15 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     placement?: ToastPlacement;
     /** Maximum number of toasts visible at once. Oldest are hidden first. @default 5 */
     max?: number;
+    /**
+     * Override the enter/exit fly animation duration in milliseconds for every
+     * toast in this toaster. Defaults to the overlay token
+     * `--blocks-overlay-enter-duration` (200ms). Set globally via the CSS custom
+     * property or per-instance via this prop. Respects `prefers-reduced-motion`.
+     */
+    transitionDuration?: number;
+    /** Override the enter/exit fly easing. Defaults to the overlay token easing (`quintOut`). */
+    transitionEasing?: (t: number) => number;
     /** Extra classes merged onto the container element. */
     class?: string;
     /** Strip all default tv classes. Use with `slotClasses` for a fully custom look. */

package/dist/primitives/Toast/toast.store.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ToastData, ToastInput, ToastShorthandOpts } from './index.js';
+import type { ToastData, ToastInput, ToastPromiseOptions, ToastShorthandOpts } from './index.js';
 import type { ToastPlacement } from './toast.variants.js';
 /**
  * Reactive store that manages the global toast queue.
@@ -24,6 +24,30 @@ declare class ToastStore {
     registerSubscriber(): () => void;
     /** Create a toast with full control over all options. Returns the toast ID for programmatic dismissal. */
     add(input: ToastInput): string;
+    /**
+     * Merge new fields into an existing toast in place — same id, same stack
+     * position — and reset its auto-dismiss timer to the new `duration`. No-op if
+     * the toast is gone. Backs `promise()`, which flips a pending toast to
+     * success/error without it sliding out and a new one flying in.
+     */
+    update(id: string, input: ToastInput): void;
+    /**
+     * Drive a toast through a promise's lifecycle (Sonner-style). Shows a
+     * persistent, non-dismissible spinner toast while pending, then flips it in
+     * place to success on resolve or danger on reject. `success`/`error` may be a
+     * plain title, a full {@link ToastInput}, or a function of the resolved value
+     * / rejection reason. Returns the toast id.
+     *
+     * @example
+     * ```ts
+     * toaster.promise(saveDraft(), {
+     *   loading: 'Saving…',
+     *   success: (draft) => `Saved “${draft.title}”`,
+     *   error: (e) => `Could not save: ${e.message}`
+     * });
+     * ```
+     */
+    promise<T>(promise: Promise<T>, opts: ToastPromiseOptions<T>): string;
     /** Remove a single toast by ID. Clears its auto-dismiss timer. */
     dismiss(id: string): void;
     /** Remove all toasts and cancel their timers. */

package/dist/primitives/Toast/toast.store.svelte.js

@@ -50,7 +50,10 @@ class ToastStore {
             description: input.description,
             duration: input.duration ?? 5000,
             dismissible: input.dismissible ?? true,
-            showProgress: input.showProgress ?? true
+            showProgress: input.showProgress ?? true,
+            action: input.action,
+            cancel: input.cancel,
+            loading: input.loading ?? false
         };
         this.toasts = [...this.toasts, toast];
         if (toast.duration > 0) {
@@ -58,6 +61,93 @@ class ToastStore {
         }
         return id;
     }
+    /**
+     * Merge new fields into an existing toast in place — same id, same stack
+     * position — and reset its auto-dismiss timer to the new `duration`. No-op if
+     * the toast is gone. Backs `promise()`, which flips a pending toast to
+     * success/error without it sliding out and a new one flying in.
+     */
+    update(id, input) {
+        const idx = this.toasts.findIndex((t) => t.id === id);
+        if (idx === -1)
+            return;
+        const next = { ...this.toasts[idx], ...input };
+        this.toasts = [...this.toasts.slice(0, idx), next, ...this.toasts.slice(idx + 1)];
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+        if (next.duration > 0) {
+            this.timers.set(id, setTimeout(() => this.dismiss(id), next.duration));
+        }
+    }
+    /**
+     * Drive a toast through a promise's lifecycle (Sonner-style). Shows a
+     * persistent, non-dismissible spinner toast while pending, then flips it in
+     * place to success on resolve or danger on reject. `success`/`error` may be a
+     * plain title, a full {@link ToastInput}, or a function of the resolved value
+     * / rejection reason. Returns the toast id.
+     *
+     * @example
+     * ```ts
+     * toaster.promise(saveDraft(), {
+     *   loading: 'Saving…',
+     *   success: (draft) => `Saved “${draft.title}”`,
+     *   error: (e) => `Could not save: ${e.message}`
+     * });
+     * ```
+     */
+    promise(promise, opts) {
+        const loadingInput = typeof opts.loading === 'string' ? { title: opts.loading } : opts.loading;
+        const id = this.add({
+            intent: 'neutral',
+            ...loadingInput,
+            loading: true,
+            duration: 0,
+            dismissible: false,
+            showProgress: false
+        });
+        // Shared settle fields: leave the spinner/persistent/non-dismissible state
+        // and become a normal auto-dismissing toast. `description: undefined` clears
+        // the loading description unless the success/error config sets its own.
+        const settled = {
+            loading: false,
+            duration: 5000,
+            dismissible: true,
+            showProgress: true
+        };
+        // A throwing user formatter must not turn into an unhandled rejection on the
+        // internal `.then`; fall back to a bare settled toast (still flips out of the
+        // loading state) and dev-warn instead.
+        const resolveMessage = (fn, arg, label) => {
+            let out;
+            try {
+                out = typeof fn === 'function' ? fn(arg) : fn;
+            }
+            catch (err) {
+                if (import.meta.env?.DEV)
+                    console.warn(`[Toast] promise ${label} formatter threw:`, err);
+            }
+            return typeof out === 'string' ? { title: out } : out;
+        };
+        promise.then((value) => {
+            this.update(id, {
+                intent: 'success',
+                description: undefined,
+                ...settled,
+                ...resolveMessage(opts.success, value, 'success')
+            });
+        }, (reason) => {
+            this.update(id, {
+                intent: 'danger',
+                description: undefined,
+                ...settled,
+                ...resolveMessage(opts.error, reason, 'error')
+            });
+        });
+        return id;
+    }
     /** Remove a single toast by ID. Clears its auto-dismiss timer. */
     dismiss(id) {
         const timer = this.timers.get(id);