@juspay/svelte-ui-components 2.38.0 → 2.40.0

package/dist/Accordion/Accordion.svelte

@@ -1,21 +1,60 @@
 <script lang="ts">
   import type { AccordionProperties } from './properties';
 
-  let { expand = false, children, classes }: AccordionProperties = $props();
+  let {
+    expand = $bindable(false),
+    children,
+    trigger,
+    ontoggle,
+    triggerClasses,
+    classes,
+    testId
+  }: AccordionProperties = $props();
+
+  function handleTriggerClick(): void {
+    expand = !expand;
+    ontoggle?.(expand);
+  }
 </script>
 
-<div class="accordion {classes ?? ''}" class:expanded={expand}>
+{#if trigger}
+  <div
+    class="accordion-trigger {triggerClasses ?? ''}"
+    role="button"
+    tabindex="0"
+    aria-expanded={expand}
+    onclick={handleTriggerClick}
+    onkeydown={(event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        handleTriggerClick();
+      }
+    }}
+  >
+    {@render trigger({ expanded: expand })}
+  </div>
+{/if}
+
+<div
+  class="accordion {classes ?? ''}"
+  class:expanded={expand}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
   <div class="accordion-content">
     {@render children?.()}
   </div>
 </div>
 
 <style>
+  .accordion-trigger {
+    cursor: var(--accordion-trigger-cursor, pointer);
+  }
+
   .accordion {
     display: grid;
     grid-template-rows: 0fr;
     overflow: hidden;
-    transition: grid-template-rows 0.2s ease-out;
+    transition: grid-template-rows var(--accordion-transition, 0.2s ease-out);
   }
 
   .accordion.expanded {

package/dist/Accordion/Accordion.svelte.d.ts

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

package/dist/Accordion/properties.d.ts

@@ -1,6 +1,15 @@
 import type { Snippet } from 'svelte';
-export type AccordionProperties = {
+export type AccordionProperties = OptionalAccordionProperties & AccordionEventProperties;
+export type OptionalAccordionProperties = {
     expand?: boolean;
     children?: Snippet;
+    trigger?: Snippet<[{
+        expanded: boolean;
+    }]>;
+    triggerClasses?: string;
     classes?: string;
+    testId?: string;
+};
+export type AccordionEventProperties = {
+    ontoggle?: (expanded: boolean) => void;
 };

package/dist/Gauge/Gauge.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import type { GaugeProperties } from './properties';
 
-  let { value, showLabel = true, testId, classes }: GaugeProperties = $props();
+  let {
+    value,
+    max = 100,
+    showLabel = true,
+    labelFormatter,
+    testId,
+    classes
+  }: GaugeProperties = $props();
 
   const VIEW_BOX = 100;
   const CENTER = VIEW_BOX / 2;
@@ -9,11 +16,25 @@
   const RADIUS = (VIEW_BOX - STROKE) / 2;
   const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 
-  let clamped = $derived(Math.min(100, Math.max(0, value)));
+  // Guard against max=0 (division by zero yields NaN or Infinity).
+  // When max is 0 or negative the gauge renders empty (0%).
+  let clamped = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0);
   let offset = $derived(CIRCUMFERENCE - (clamped / 100) * CIRCUMFERENCE);
+  // labelFormatter receives the raw (value, max) pair so callers have full
+  // context. The built-in fallback shows the computed percentage string
+  // (e.g. value=50, max=200 → "25%").
+  let labelText = $derived(labelFormatter ? labelFormatter(value, max) : `${Math.round(clamped)}%`);
 </script>
 
-<div class="gauge {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+<div
+  class="gauge {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  role="progressbar"
+  aria-valuenow={clamped}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-label="gauge"
+>
   <svg viewBox="0 0 {VIEW_BOX} {VIEW_BOX}">
     <circle class="track" cx={CENTER} cy={CENTER} r={RADIUS} fill="none" />
     <circle
@@ -29,7 +50,7 @@
     />
   </svg>
   {#if showLabel}
-    <div class="label">{Math.round(clamped)}%</div>
+    <div class="label">{labelText}</div>
   {/if}
 </div>
 

package/dist/Gauge/properties.d.ts

@@ -3,7 +3,21 @@ export type MandatoryGaugeProperties = {
     value: number;
 };
 export type OptionalGaugeProperties = {
+    /**
+     * The maximum value of the gauge. `value` is divided by `max` to compute
+     * the fill percentage, so `<Gauge value={50} max={200} />` renders at 25%.
+     * Defaults to `100` (making `value` a direct percentage). When `max` is 0
+     * or negative the gauge renders empty (0%) to avoid division by zero.
+     * @default 100
+     */
+    max?: number;
     showLabel?: boolean;
+    /**
+     * Custom label renderer called with the raw `(value, max)` pair. Return any
+     * string to replace the default `"${Math.round(percentage)}%"` label.
+     * Example: `labelFormatter={(v, m) => \`${v} / ${m}\`}` shows "50 / 200".
+     */
+    labelFormatter?: (value: number, max: number) => string;
     testId?: string;
     classes?: string;
 };

package/dist/index.d.ts

@@ -78,6 +78,7 @@ export type * from './Toolbar/properties';
 export type * from './Carousel/properties';
 export type * from './Badge/properties';
 export type * from './Banner/properties';
+export type * from './Accordion/properties';
 export type * from './Table/properties';
 export type * from './Stepper/properties';
 export type * from './Toast/properties';

package/package.json

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