@juspay/svelte-ui-components 2.114.1 → 2.116.0

package/dist/Animations/ModalAnimation.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { fly, fade } from 'svelte/transition';
-  import type { ModalAlign } from '../Modal/properties';
+  import type { ModalAlign, ModalEntryAnimation } from '../Modal/properties';
   import type { ModalTransition } from '../types';
 
   type Props = {
     enable?: boolean;
     align?: ModalAlign;
     transitionType?: ModalTransition;
+    entryAnimation?: ModalEntryAnimation;
     children?: Snippet;
     testId?: string;
   };
@@ -16,6 +17,7 @@
     enable = true,
     align = 'bottom',
     transitionType = 'ALL',
+    entryAnimation,
     children,
     testId
   }: Props = $props();
@@ -23,6 +25,16 @@
   let flyAnimationProperties = $derived.by(() => {
     const base = { x: 0, y: 0, duration: 380 };
 
+    // entryAnimation, when set, overrides the align-based default below —
+    // e.g. a centered modal (which normally fades) can opt into the same
+    // fly distances top/bottom alignment already use.
+    if (entryAnimation === 'slide-up') {
+      return { ...base, y: 300 };
+    }
+    if (entryAnimation === 'slide-down') {
+      return { ...base, y: -30 };
+    }
+
     switch (align) {
       case 'top':
         return { ...base, y: -30 };
@@ -35,7 +47,9 @@
 
   let fadeAnimationProperties = { duration: 300 };
 
-  let useFlyAnimation = $derived(align === 'top' || align === 'bottom');
+  let useFlyAnimation = $derived(
+    entryAnimation != null ? entryAnimation !== 'fade' : align === 'top' || align === 'bottom'
+  );
   let useOutTransition = $derived(transitionType === 'ALL');
 </script>
 

package/dist/Animations/ModalAnimation.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from 'svelte';
-import type { ModalAlign } from '../Modal/properties';
+import type { ModalAlign, ModalEntryAnimation } from '../Modal/properties';
 import type { ModalTransition } from '../types';
 type Props = {
     enable?: boolean;
     align?: ModalAlign;
     transitionType?: ModalTransition;
+    entryAnimation?: ModalEntryAnimation;
     children?: Snippet;
     testId?: string;
 };

package/dist/Animations/OverlayAnimation.svelte

@@ -5,15 +5,28 @@
   type Props = {
     children?: Snippet;
     testId?: string;
+    /** When true, fades in on mount (same 350ms duration as the existing fade-out). Default false preserves the current instant-appear behavior. */
+    fadeIn?: boolean;
   };
 
-  let { children, testId }: Props = $props();
+  let { children, testId, fadeIn = false }: Props = $props();
 </script>
 
-<div
-  out:fade={{ duration: 350 }}
-  data-pw={typeof testId === 'string' ? testId : null}
-  testID={typeof testId === 'string' ? testId : null}
->
-  {@render children?.()}
-</div>
+{#if fadeIn}
+  <div
+    in:fade={{ duration: 350 }}
+    out:fade={{ duration: 350 }}
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
+    {@render children?.()}
+  </div>
+{:else}
+  <div
+    out:fade={{ duration: 350 }}
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
+    {@render children?.()}
+  </div>
+{/if}

package/dist/Animations/OverlayAnimation.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 type Props = {
     children?: Snippet;
     testId?: string;
+    /** When true, fades in on mount (same 350ms duration as the existing fade-out). Default false preserves the current instant-appear behavior. */
+    fadeIn?: boolean;
 };
 declare const OverlayAnimation: import("svelte").Component<Props, {}, "">;
 type OverlayAnimation = ReturnType<typeof OverlayAnimation>;

package/dist/Button/Button.svelte

@@ -198,6 +198,10 @@
     font-weight: var(--button-font-weight, 500);
     font-size: var(--button-font-size, var(--_btn-font-size, 14px));
     background-color: var(--button-color, var(--_btn-color, #3a4550));
+    /* Image layer, deliberately not the `background` shorthand — the shorthand
+       would reset a consumer's own background-image/position/size layers
+       whenever the hook is unset. Gradients go here; solids stay on --button-color. */
+    background-image: var(--button-background, none);
     color: var(--button-text-color, var(--_btn-text-color, white));
     height: var(--button-height, fit-content);
     padding: var(--button-padding, var(--_btn-padding, 16px));
@@ -216,6 +220,7 @@
     gap: var(--button-content-gap, 16px);
     visibility: var(--button-visibility, visible);
     box-shadow: var(--button-box-shadow, none);
+    transition: var(--button-transition, none);
 
     /* A button label should never soft-wrap onto a second line as the label text
        changes (e.g. "Select" -> "Select (1)") — that jitters the layout around it.
@@ -232,7 +237,10 @@
     font-weight: var(--disabled-font-weight);
     /* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */
     border: var(--disabled-border, var(--button-border, var(--_btn-border, none)));
-    background: var(--disabled-background-color, var(--button-color, var(--_btn-color, #3a4550)));
+    background: var(
+      --disabled-background-color,
+      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))
+    );
     box-shadow: var(
       --button-disabled-box-shadow,
       var(--disabled-box-shadow, var(--button-box-shadow, none))
@@ -262,7 +270,10 @@
   .button-el:hover:not(.disabled) {
     background: var(
       --button-hover-color,
-      var(--_btn-hover-color, var(--button-color, var(--_btn-color, #3a4550)))
+      var(
+        --_btn-hover-color,
+        var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))
+      )
     );
     color: var(
       --button-hover-text-color,
@@ -278,7 +289,10 @@
 
   .button-el:active:not(.disabled) {
     transform: var(--button-active-transform);
-    background: var(--button-active-background, var(--button-color, var(--_btn-color, #3a4550)));
+    background: var(
+      --button-active-background,
+      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))
+    );
     box-shadow: var(--button-active-box-shadow, var(--button-box-shadow, none));
   }
 

package/dist/Modal/Modal.svelte

@@ -17,6 +17,7 @@
     supportHardwareBackPress = false,
     enableTransition = true,
     transitionType = 'ALL',
+    entryAnimation,
     header = {},
     footer,
     debounceTime = 700,
@@ -34,6 +35,7 @@
     onkeydown,
     classes,
     overlayBackdropFilter,
+    overlayFadeIn = false,
     usePortal = false
   }: ModalProperties = $props();
 
@@ -138,7 +140,7 @@
 <svelte:window onkeydown={handleKeyDown} />
 
 {#if typeof content === 'function'}
-  <OverlayAnimation>
+  <OverlayAnimation fadeIn={overlayFadeIn}>
     <div
       bind:this={overlayDiv}
       use:portalAction={{ usePortal }}
@@ -153,7 +155,7 @@
       data-pw={testId}
       testID={testId}
     >
-      <ModalAnimation enable={enableTransition} {align} {transitionType}>
+      <ModalAnimation enable={enableTransition} {align} {transitionType} {entryAnimation}>
         <div class="modal-content {size}">
           {#if (typeof header?.leftImage === 'string' && header.leftImage.length > 0) || (typeof header?.text === 'string' && header.text.length > 0) || (typeof header?.rightImage === 'string' && header.rightImage.length > 0)}
             <div class="header">

package/dist/Modal/properties.d.ts

@@ -3,6 +3,14 @@ import type { ModalTransition } from '../types';
 import type { Snippet } from 'svelte';
 export type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
 export type ModalAlign = 'top' | 'center' | 'bottom';
+/**
+ * Overrides ModalAnimation's default per-align entry transition ('top'/'bottom'
+ * fly, 'center' fade). 'slide-up' and 'slide-down' reuse the same fly
+ * distance/duration constants as bottom/top alignment respectively, so e.g. a
+ * centered modal can slide up like a bottom sheet instead of just fading in.
+ * Leave unset to keep the existing per-align default.
+ */
+export type ModalEntryAnimation = 'fade' | 'slide-up' | 'slide-down';
 export type ModalProperties = OptionalModalProperties & ModalEventProperties;
 export type OptionalModalProperties = {
     size?: ModalSize;
@@ -11,6 +19,8 @@ export type OptionalModalProperties = {
     supportHardwareBackPress?: boolean;
     enableTransition?: boolean;
     transitionType?: ModalTransition;
+    /** Overrides the default per-align entry transition. See ModalEntryAnimation. Default: unset (per-align behavior). */
+    entryAnimation?: ModalEntryAnimation;
     header?: {
         leftImage?: string;
         rightImage?: string;
@@ -34,6 +44,8 @@ export type OptionalModalProperties = {
     classes?: string;
     /** CSS value applied to backdrop-filter on the overlay (e.g. "blur(6px)"). Exposed as --modal-overlay-backdrop-filter CSS var. Default: none (no blur). */
     overlayBackdropFilter?: string;
+    /** When true, the overlay backdrop fades in on mount instead of appearing instantly. Pairs well with entryAnimation="slide-up" for a softer combined entrance. Default: false (current instant-appear behavior). */
+    overlayFadeIn?: boolean;
     /** When true, mounts the overlay at document.body to escape clipping/stacking contexts. Default: false. */
     usePortal?: boolean;
 };

package/dist/Toast/Toast.svelte

@@ -177,6 +177,7 @@
     top: var(--toast-top, 10px);
     left: var(--toast-left, 0);
     right: var(--toast-right, 0);
+    bottom: var(--toast-bottom, auto);
     background-color: var(--toast-background-color, #87ceeb);
     opacity: var(--toast-opacity, 1);
     box-sizing: var(--toast-box-sizing);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.114.1",
+  "version": "2.116.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",