@juspay/svelte-ui-components 2.114.0 → 2.115.0

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

@@ -158,25 +158,35 @@
           {#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">
               {#if typeof header.leftImage === 'string' && header.leftImage.length > 0}
-                <div
-                  onclick={handleLeftImageClick}
-                  onkeydown={handleLeftImageKeyDown}
-                  role="button"
-                  tabindex="0"
-                  aria-label={leftImageAriaLabel ?? null}
-                  data-pw={leftImageTestId}
-                  testID={leftImageTestId}
-                >
+                {@const leftImageSrc = header.leftImage}
+                {#snippet leftImage()}
                   <!-- Inline SVGs so currentColor icons inherit the header text
                        colour; non-SVG URLs fall back to a plain <img>. -->
-                  <Img
-                    inlineSvg
-                    src={header.leftImage}
-                    alt=""
-                    fallback=""
-                    classes="header-left-img"
-                  />
-                </div>
+                  <Img inlineSvg src={leftImageSrc} alt="" fallback="" classes="header-left-img" />
+                {/snippet}
+                <!-- The left image is only a control when a click handler is actually supplied.
+                     Consumers pass a decorative brand/source logo here far more often than a back
+                     button, and announcing those as a focusable "button" that does nothing when
+                     activated is worse for assistive tech than leaving them unannounced. The two
+                     branches are written out rather than computed so the role/tabindex pairing
+                     stays statically checkable. -->
+                {#if typeof onheaderLeftImageClick === 'function'}
+                  <div
+                    onclick={handleLeftImageClick}
+                    onkeydown={handleLeftImageKeyDown}
+                    role="button"
+                    tabindex="0"
+                    aria-label={leftImageAriaLabel ?? null}
+                    data-pw={leftImageTestId}
+                    testID={leftImageTestId}
+                  >
+                    {@render leftImage()}
+                  </div>
+                {:else}
+                  <div data-pw={leftImageTestId} testID={leftImageTestId}>
+                    {@render leftImage()}
+                  </div>
+                {/if}
               {/if}
               {#if typeof header.text === 'string' && header.text.length > 0}
                 <div class="header-text" data-pw={header.testId} testID={header.testId}>

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.0",
+  "version": "2.115.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",