@juspay/svelte-ui-components 2.52.0 → 2.54.0

package/dist/Badge/Badge.svelte

@@ -1,15 +1,47 @@
 <script lang="ts">
   import type { BadgeProperties } from './properties';
 
-  let { image, value, classes }: BadgeProperties = $props();
+  let {
+    image,
+    alt = '',
+    value,
+    mode = 'count',
+    hidden = false,
+    ariaLabel,
+    testId,
+    classes
+  }: BadgeProperties = $props();
+
+  let showImage = $derived(typeof image === 'string' && image.length > 0);
+  let showBadge = $derived(!hidden);
+  let isDot = $derived(mode === 'dot');
+
+  let standaloneRole = $derived(isDot ? 'presentation' : 'status');
+  let standaloneAriaLabel = $derived(
+    isDot ? null : (ariaLabel ?? (typeof value === 'string' ? value : null))
+  );
 </script>
 
-<div class="badge-icon {classes ?? ''}">
-  <div class="badge-wrap">
-    <img class="icon-img" src={image} alt="" />
-    <div class="badge">{value}</div>
+{#if showImage}
+  <div class="badge-icon {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+    <div class="badge-wrap">
+      <img class="icon-img" src={image} {alt} />
+      {#if showBadge}
+        <div class="badge" class:badge-dot={isDot}>{isDot ? '' : (value ?? '')}</div>
+      {/if}
+    </div>
   </div>
-</div>
+{:else if showBadge}
+  <div
+    class="badge badge-standalone {classes ?? ''}"
+    class:badge-dot={isDot}
+    role={standaloneRole}
+    aria-label={standaloneAriaLabel}
+    data-pw={typeof testId === 'string' ? testId : null}
+  >
+    {isDot ? '' : (value ?? '')}
+  </div>
+{/if}
 
 <style>
   .badge-wrap {
@@ -42,6 +74,18 @@
     z-index: 1;
   }
 
+  .badge-dot {
+    width: var(--badge-dot-size, 10px);
+    height: var(--badge-dot-size, 10px);
+    min-width: unset;
+    min-height: unset;
+    padding: 0;
+  }
+
+  .badge-standalone {
+    position: var(--badge-standalone-position, static);
+  }
+
   .icon-img {
     border-radius: var(--badge-img-border-radius, 6px);
     width: var(--badge-img-width, 64px);

package/dist/Badge/properties.d.ts

@@ -1,5 +1,14 @@
-export type BadgeProperties = {
-    image: string;
-    value: string;
+export type BadgeMode = 'count' | 'dot';
+export type BadgeProperties = MandatoryBadgeProperties & OptionalBadgeProperties & BadgeEventProperties;
+export type MandatoryBadgeProperties = Record<never, never>;
+export type OptionalBadgeProperties = {
+    image?: string;
+    alt?: string;
+    value?: string;
+    mode?: BadgeMode;
+    hidden?: boolean;
+    ariaLabel?: string;
+    testId?: string;
     classes?: string;
 };
+export type BadgeEventProperties = Record<never, never>;

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

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