@juspay/svelte-ui-components 2.28.2 → 2.29.0

package/dist/Banner/Banner.svelte

@@ -15,11 +15,15 @@
     dismissIcon,
     onclick,
     ondismiss,
-    classes
+    classes,
+    title,
+    role = null
   }: BannerProperties = $props();
 
   let interactive = $derived(typeof onclick === 'function');
 
+  let rootClass = $derived(['banner', classes ?? ''].filter((c) => c.length > 0).join(' '));
+
   function handleClick(event: MouseEvent): void {
     onclick?.(event);
   }
@@ -43,10 +47,10 @@
 {#if visible}
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <div
-    class="banner {classes ?? ''}"
+    class={rootClass}
     onclick={interactive ? handleClick : null}
     onkeydown={interactive ? handleKeydown : null}
-    role={interactive ? 'button' : null}
+    role={role !== null ? role : interactive ? 'button' : null}
     tabindex={interactive ? 0 : null}
     data-pw={typeof testId === 'string' ? testId : null}
     transition:slide={{ duration: 300 }}
@@ -56,11 +60,18 @@
         {@render icon()}
       </div>
     {/if}
-    <div class="banner-text">
-      {text}
-      {#if typeof linkText === 'string' && linkText.length > 0}
-        <span class="banner-link-text">{linkText}</span>
+    <div class="banner-body">
+      {#if typeof title === 'function'}
+        <div class="banner-title">
+          {@render title()}
+        </div>
       {/if}
+      <div class="banner-text">
+        {text}
+        {#if typeof linkText === 'string' && linkText.length > 0}
+          <span class="banner-link-text">{linkText}</span>
+        {/if}
+      </div>
     </div>
     {#if typeof rightContent === 'function'}
       <div class="banner-right">
@@ -102,6 +113,8 @@
     font-weight: var(--banner-font-weight, 500);
     line-height: var(--banner-line-height, 1.3);
     border-bottom: var(--banner-border-bottom, none);
+    border: var(--banner-border);
+    border-radius: var(--banner-border-radius, 0);
     cursor: var(--banner-cursor, pointer);
     position: var(--banner-position, sticky);
     top: var(--banner-top, 0);
@@ -121,6 +134,20 @@
     height: var(--banner-icon-size, 18px);
   }
 
+  .banner-body {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    gap: var(--banner-body-gap, 0);
+  }
+
+  .banner-title {
+    font-weight: var(--banner-title-font-weight, inherit);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .banner-text {
     overflow: var(--banner-text-overflow, hidden);
     text-overflow: var(--banner-text-ellipsis, ellipsis);

package/dist/Banner/properties.d.ts

@@ -5,6 +5,7 @@ export type MandatoryBannerProperties = {
 };
 export type OptionalBannerProperties = {
     icon?: Snippet;
+    title?: Snippet;
     linkText?: string;
     dismissible?: boolean;
     visible?: boolean;
@@ -12,6 +13,7 @@ export type OptionalBannerProperties = {
     rightContent?: Snippet;
     dismissIcon?: Snippet;
     classes?: string;
+    role?: string | null;
 };
 export type BannerEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { BreadcrumbProperties } from './properties';
+
+  let { items, item, ariaLabel, separator, classes, testId }: BreadcrumbProperties = $props();
+</script>
+
+<nav
+  class="breadcrumb {classes ?? ''}"
+  aria-label={ariaLabel}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  <ol class="breadcrumb-list">
+    {#each items as crumb, index (index)}
+      <li class="breadcrumb-item">
+        {#if typeof item === 'function'}
+          {@render item({
+            href: crumb.href,
+            label: crumb.label,
+            isLast: index === items.length - 1,
+            index
+          })}
+        {/if}
+      </li>
+      {#if index < items.length - 1}
+        <li class="breadcrumb-separator" aria-hidden="true">
+          {#if typeof separator === 'function'}
+            {@render separator()}
+          {:else}
+            /
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .breadcrumb-list {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: var(--breadcrumb-list-gap);
+    flex-wrap: var(--breadcrumb-flex-wrap, nowrap);
+    align-items: center;
+  }
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+  }
+
+  .breadcrumb-separator {
+    display: flex;
+    align-items: center;
+    color: var(--breadcrumb-separator-color, currentColor);
+  }
+</style>

package/dist/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbProperties } from './properties';
+declare const Breadcrumb: import("svelte").Component<BreadcrumbProperties, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/Breadcrumb/properties.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export type BreadcrumbItemData = {
+    href: string;
+    label: string;
+};
+export type BreadcrumbItemContext = {
+    href: string;
+    label: string;
+    isLast: boolean;
+    index: number;
+};
+export type BreadcrumbProperties = {
+    items: readonly BreadcrumbItemData[];
+    item: Snippet<[BreadcrumbItemContext]>;
+    ariaLabel: string;
+    separator?: Snippet;
+    classes?: string;
+    testId?: string;
+};

package/dist/Breadcrumb/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Calendar/Calendar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { CalendarProperties } from './properties';
   import { SvelteDate } from 'svelte/reactivity';
-  import { tick } from 'svelte';
+  import { tick, untrack } from 'svelte';
   import chevronLeftSvg from '../assets/chevron-left.svg?raw';
   import chevronRightSvg from '../assets/chevron-right.svg?raw';
   import Button from '../Button/Button.svelte';
@@ -22,11 +22,17 @@
     onselect,
     onrangeselect,
     onmonthchange,
-    classes
+    classes,
+    initialMonth = null
   }: CalendarProperties = $props();
 
   const now = new SvelteDate();
-  let displayDate = new SvelteDate(now.getFullYear(), now.getMonth(), 1);
+  // Intentionally read initialMonth once (untracked) — it seeds the display month at mount
+  // and subsequent prop changes should not navigate the calendar (user navigates via the buttons).
+  let displayDate = untrack(() => {
+    const seed = initialMonth !== null ? initialMonth : now;
+    return new SvelteDate(seed.getFullYear(), seed.getMonth(), 1);
+  });
   let focusedDay: number | null = $state(null);
 
   let gridRef: HTMLElement | null = $state(null);
@@ -359,7 +365,7 @@
   }
 
   .header {
-    display: flex;
+    display: var(--calendar-header-display, flex);
     align-items: center;
     justify-content: space-between;
     margin-bottom: var(--calendar-header-margin-bottom, 12px);

package/dist/Calendar/properties.d.ts

@@ -14,6 +14,8 @@ export type OptionalCalendarProperties = {
     previousMonthIcon?: Snippet;
     nextMonthIcon?: Snippet;
     classes?: string;
+    /** The month to display initially (only year+month are used). Defaults to the current month. */
+    initialMonth?: Date | null;
 };
 export type CalendarEventProperties = {
     onselect?: (event: {