@juspay/svelte-ui-components 2.51.0 → 2.53.0

package/dist/InputButton/InputButton.svelte

@@ -3,7 +3,6 @@
   import Input from '../Input/Input.svelte';
   import type { InputButtonProperties } from './properties';
   import type { ValidationState } from '../types';
-  import type { SvelteComponent } from 'svelte';
 
   let {
     value = $bindable(''),
@@ -17,12 +16,15 @@
     bottomButtonEventProperties,
     leftIcon,
     rightIcon,
-    classes
+    classes,
+    mandatory,
+    size,
+    error
   }: InputButtonProperties = $props();
 
   let validationState = $state<ValidationState>('InProgress');
 
-  let inputRef: SvelteComponent | null = $state(null);
+  let inputRef: ReturnType<typeof Input> | null = $state(null);
 
   // Derive enable state for right button
   const isRightButtonEnabled = $derived(validationState === 'Valid');
@@ -62,12 +64,14 @@
 <div class="container {classes ?? ''}">
   {#if inputProperties.label && inputProperties.label !== ''}
     <label class="label" for={inputProperties.name}>
-      {inputProperties.label}
+      {inputProperties.label}{#if mandatory}<span class="mandatory-marker" aria-label="required">
+          *</span
+        >{/if}
     </label>
   {/if}
 
-  <div class="input-button-container">
-    <div class="input-button {validationState === 'Invalid' ? 'invalid' : 'valid'}">
+  <div class="input-button-container {size ? `size-${size}` : ''}">
+    <div class="input-button" class:invalid={validationState === 'Invalid'}>
       {#if leftButtonProperties != null}
         <div class="left-button">
           <Button {...leftButtonProperties} {...leftButtonEventProperties} icon={leftIcon} />
@@ -101,12 +105,14 @@
       </div>
     {/if}
   </div>
-  {#if inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
+  {#if typeof error === 'string' && error.length > 0}
+    <div class="external-error-message">{error}</div>
+  {:else if typeof inputProperties.onErrorMessage === 'string' && inputProperties.onErrorMessage !== '' && validationState === 'Invalid'}
     <div class="error-message">
       {inputProperties.onErrorMessage}
     </div>
   {/if}
-  {#if inputProperties.infoMessage !== ''}
+  {#if typeof inputProperties.infoMessage === 'string' && inputProperties.infoMessage !== ''}
     <div class="info-message">
       {inputProperties.infoMessage}
     </div>
@@ -127,9 +133,8 @@
     --input-box-shadow: none;
     --input-margin: none;
     --input-width: fit-content;
-    height: var(--input-height, fit-content);
     font-size: var(--input-font-size, 16px) !important;
-    font-weight: 500;
+    font-weight: var(--input-button-font-weight, 500);
     margin: var(--input-button-margin);
     border-radius: var(--input-button-radius, 4px);
     border: var(--input-button-container-border);
@@ -193,6 +198,30 @@
     margin: var(--input-btn-info-msg-margin, 12px 0px 0px 0px);
   }
 
+  .mandatory-marker {
+    color: var(--inputbutton-mandatory-color, #e11900);
+  }
+
+  .size-sm {
+    --input-height: var(--inputbutton-sm-height, 36px);
+    --input-padding: var(--inputbutton-sm-padding, 6px 12px);
+  }
+
+  .size-md {
+    --input-height: var(--inputbutton-md-height, 44px);
+    --input-padding: var(--inputbutton-md-padding, 10px 16px);
+  }
+
+  .size-lg {
+    --input-height: var(--inputbutton-lg-height, 54px);
+    --input-padding: var(--inputbutton-lg-padding, 14px 20px);
+  }
+
+  .external-error-message {
+    color: var(--inputbutton-external-error-color, #fa1405);
+    margin: var(--inputbutton-external-error-margin, 6px 0px 0px 0px);
+  }
+
   .left-button {
     --button-color: var(--left-button-color);
     --button-text-color: var(--left-button-text-color);

package/dist/InputButton/properties.d.ts

@@ -1,6 +1,16 @@
 import type { ButtonEventProperties, OptionalButtonProperties } from '../Button/properties';
 import type { InputEventProperties, OptionalInputProperties } from '../Input/properties';
 import type { Snippet } from 'svelte';
+/**
+ * Preset size variants for the InputButton component.
+ * - `sm`: 36px height with compact padding (6px 12px)
+ * - `md`: 44px height with standard padding (10px 16px)
+ * - `lg`: 54px height with generous padding (14px 20px)
+ *
+ * All sizes are overridable via the corresponding CSS variables
+ * (`--inputbutton-sm-height`, `--inputbutton-md-padding`, etc.).
+ */
+export type InputButtonSize = 'sm' | 'md' | 'lg';
 export type InputButtonProperties = OptionalInputButtonProperties & InputButtonEventProperties & {
     value: string;
 };
@@ -12,6 +22,17 @@ export type OptionalInputButtonProperties = {
     leftIcon?: Snippet;
     rightIcon?: Snippet;
     classes?: string;
+    /** When true, renders a red asterisk (*) next to the label to signal the field is required. */
+    mandatory?: boolean;
+    /** Preset height/padding size variant. Overridable per-size via CSS variables. */
+    size?: InputButtonSize;
+    /**
+     * External error message to display below the input-button row. Takes precedence over
+     * the internal `inputProperties.onErrorMessage` — when this prop is a non-empty string,
+     * the internal validation error is suppressed. Pass an empty string or omit to let
+     * internal validation messages surface normally.
+     */
+    error?: string;
 };
 export type InputButtonEventProperties = {
     inputEventProperties?: InputEventProperties;

package/dist/Modal/Modal.svelte

@@ -7,7 +7,7 @@
   import Button from '../Button/Button.svelte';
 
   let overlayDiv: HTMLDivElement | null = $state(null);
-  let backPressed = false;
+  let backPressed = $state(false);
 
   let {
     size = 'fit-content',
@@ -30,47 +30,87 @@
     onsecondaryButtonClick,
     onoverlayClick,
     onkeydown,
-    classes
+    classes,
+    overlayBackdropFilter,
+    usePortal = false
   }: ModalProperties = $props();
 
+  // Fix [major]: plain const so the debouncer closure retains its internal lastCallTime state
+  // across re-renders. $derived would recreate the debouncer on every reactive re-evaluation,
+  // resetting the timer and breaking debounce correctness.
   const debounce = createDebouncer(debounceTime);
 
-  function handlePopstate() {
+  // Fix [minor]: portalAction with null guard + update hook so usePortal toggles work post-mount.
+  const portalAction = (node: HTMLElement, params: { usePortal: boolean }) => {
+    if (!params.usePortal || typeof document === 'undefined' || !document.body) {
+      return;
+    }
+    const target = document.body;
+    target.appendChild(node);
+    return {
+      update(updatedParams: { usePortal: boolean }) {
+        if (updatedParams.usePortal && !node.parentElement?.isSameNode(document.body)) {
+          document.body.appendChild(node);
+        }
+      },
+      destroy() {
+        node.parentNode?.removeChild(node);
+      }
+    };
+  };
+
+  const handlePopstate = (): void => {
     backPressed = true;
     onclose?.();
-  }
+  };
 
-  function handleRightImageClick(event: MouseEvent): void {
+  const handleRightImageClick = (event: MouseEvent): void => {
     onheaderRightImageClick?.(event);
-  }
+  };
 
-  function handleLeftImageClick(event: MouseEvent): void {
+  const handleLeftImageClick = (event: MouseEvent): void => {
     onheaderLeftImageClick?.(event);
-  }
+  };
 
-  function handlePrimaryButtonClick(event: MouseEvent): void {
+  const handlePrimaryButtonClick = (event: MouseEvent): void => {
     onprimaryButtonClick?.(event);
-  }
+  };
 
-  function handleSecondaryButtonClick(event: MouseEvent): void {
+  const handleSecondaryButtonClick = (event: MouseEvent): void => {
     onsecondaryButtonClick?.(event);
-  }
+  };
 
-  function handleOverlayClick(event: MouseEvent) {
+  const handleOverlayClick = (event: MouseEvent): void => {
     if (event.target === overlayDiv) {
       debounce(() => {
         onoverlayClick?.();
       });
     }
-  }
+  };
 
-  function handleKeyDown(event: KeyboardEvent): void {
+  const handleKeyDown = (event: KeyboardEvent): void => {
     onkeydown?.(event);
-    let key = event?.key;
+    const key = event?.key;
     if (key === 'Escape') {
       onoverlayClick?.();
     }
-  }
+  };
+
+  // Fix [major]: role=button image divs need Enter/Space handlers for WCAG 2.1 SC 2.1.1.
+  // Keyboard activation (Enter/Space) invokes the same prop callbacks as click.
+  const handleLeftImageKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onheaderLeftImageClick?.(new MouseEvent('click'));
+    }
+  };
+
+  const handleRightImageKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onheaderRightImageClick?.(new MouseEvent('click'));
+    }
+  };
 
   onMount(() => {
     document.body.style.overflow = 'hidden';
@@ -99,9 +139,13 @@
   <OverlayAnimation>
     <div
       bind:this={overlayDiv}
+      use:portalAction={{ usePortal }}
       class="modal {align} {showOverlay ? 'overlay-active' : 'overlay-inactive'} {classes ?? ''}"
+      style={overlayBackdropFilter != null
+        ? `--modal-overlay-backdrop-filter: ${overlayBackdropFilter};`
+        : null}
       onclick={handleOverlayClick}
-      {onkeydown}
+      onkeydown={handleKeyDown}
       role="button"
       tabindex="0"
       data-pw={testId}
@@ -113,7 +157,7 @@
               {#if typeof header.leftImage === 'string' && header.leftImage.length > 0}
                 <div
                   onclick={handleLeftImageClick}
-                  {onkeydown}
+                  onkeydown={handleLeftImageKeyDown}
                   role="button"
                   tabindex="0"
                   data-pw={leftImageTestId}
@@ -131,7 +175,7 @@
                   role="button"
                   tabindex="0"
                   onclick={handleRightImageClick}
-                  {onkeydown}
+                  onkeydown={handleRightImageKeyDown}
                   data-pw={header.buttonTestId}
                 >
                   <img class="header-right-img" src={header.rightImage} alt="" />
@@ -186,6 +230,8 @@
 
   .overlay-active {
     background-color: var(--background-color, #00000066);
+    backdrop-filter: var(--modal-overlay-backdrop-filter, none);
+    -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter, none);
     pointer-events: auto;
   }
 

package/dist/Modal/properties.d.ts

@@ -3,7 +3,8 @@ import type { ModalTransition } from '../types';
 import type { Snippet } from 'svelte';
 export type ModalSize = 'large' | 'medium' | 'small' | 'fit-content';
 export type ModalAlign = 'top' | 'center' | 'bottom';
-export type ModalProperties = ModalEventProperties & {
+export type ModalProperties = OptionalModalProperties & ModalEventProperties;
+export type OptionalModalProperties = {
     size?: ModalSize;
     align?: ModalAlign;
     showOverlay?: boolean;
@@ -27,6 +28,10 @@ export type ModalProperties = ModalEventProperties & {
     content?: Snippet;
     footerSnippet?: Snippet;
     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, mounts the overlay at document.body to escape clipping/stacking contexts. Default: false. */
+    usePortal?: boolean;
 };
 export type ModalEventProperties = {
     onclose?: () => void;

package/package.json

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