@juspay/svelte-ui-components 2.115.0 → 2.116.1

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/ChipInput/ChipInput.svelte

@@ -88,6 +88,19 @@
     justify-content: var(--chip-input-justify-content, flex-start);
     gap: var(--chip-input-gap, 6px);
     width: var(--chip-input-width, 100%);
+
+    /* Capture the surrounding cascade's Pill and Input values under distinct names, so the
+       per-token mappings below can fall back to them. This has to happen HERE, on the root, where
+       --pill-* and --input-* have not yet been re-declared: reading them in the same declaration
+       that sets them would be a custom-property cycle and would compute to invalid. Consumers that
+       theme Pill/Input app-wide get chips that match the rest of their UI, instead of the library's
+       hardcoded light-theme hexes overriding their theme. */
+    --chip-input-pill-background-default: var(--pill-background, #e0e0e0);
+    --chip-input-pill-color-default: var(--pill-color, #333333);
+    --chip-input-pill-dismiss-color-default: var(--pill-dismiss-color, currentColor);
+    --chip-input-draft-border-default: var(--input-border, 1px solid transparent);
+    --chip-input-draft-focus-border-default: var(--input-focus-border, 1px solid transparent);
+    --chip-input-draft-radius-default: var(--input-radius, 4px);
   }
 
   .chip-input-draft-wrap {
@@ -96,8 +109,8 @@
 
   .chip-input :global(.chip-input-pill) {
     --pill-gap: var(--chip-input-pill-gap, 4px);
-    --pill-background: var(--chip-input-pill-background, #e0e0e0);
-    --pill-color: var(--chip-input-pill-color, #333333);
+    --pill-background: var(--chip-input-pill-background, var(--chip-input-pill-background-default));
+    --pill-color: var(--chip-input-pill-color, var(--chip-input-pill-color-default));
     --pill-font-size: var(--chip-input-pill-font-size, 13px);
     --pill-font-weight: var(--chip-input-pill-font-weight, 500);
     --pill-padding: var(--chip-input-pill-padding, 6px 10px);
@@ -105,15 +118,21 @@
     --pill-border: var(--chip-input-pill-border, none);
     --pill-max-width: var(--chip-input-pill-max-width);
     --pill-dismiss-size: var(--chip-input-pill-dismiss-size, 14px);
-    --pill-dismiss-color: var(--chip-input-pill-dismiss-color, currentColor);
+    --pill-dismiss-color: var(
+      --chip-input-pill-dismiss-color,
+      var(--chip-input-pill-dismiss-color-default)
+    );
   }
 
   .chip-input-draft-wrap :global(.chip-input-draft) {
     --input-width: var(--chip-input-draft-width, 90px);
     --input-height: var(--chip-input-draft-height, 28px);
-    --input-border: var(--chip-input-draft-border, 1px solid transparent);
-    --input-radius: var(--chip-input-draft-radius, 4px);
-    --input-focus-border: var(--chip-input-draft-focus-border, 1px solid transparent);
+    --input-border: var(--chip-input-draft-border, var(--chip-input-draft-border-default));
+    --input-radius: var(--chip-input-draft-radius, var(--chip-input-draft-radius-default));
+    --input-focus-border: var(
+      --chip-input-draft-focus-border,
+      var(--chip-input-draft-focus-border-default)
+    );
     --input-padding: var(--chip-input-draft-padding, 0 2px);
     --input-margin: 0;
     --input-font-size: var(--chip-input-draft-font-size, 13px);

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/package.json

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