@juspay/svelte-ui-components 2.54.0 → 2.55.0

package/dist/Card/Card.svelte

@@ -11,11 +11,20 @@
     headerRight,
     footer,
     stretch = false,
-    scrollable = false
+    scrollable = false,
+    cssVars
   }: CardProperties = $props();
 
   const isInteractive = $derived(typeof onclick === 'function');
 
+  const styleAttr = $derived(
+    cssVars
+      ? Object.entries(cssVars)
+          .map(([name, value]) => `${name}: ${value}`)
+          .join('; ')
+      : null
+  );
+
   const handleKeydown = (event: KeyboardEvent): void => {
     if (event.key === 'Enter' || event.key === ' ') {
       if (event.key === ' ') {
@@ -34,6 +43,7 @@
   class:card-interactive={isInteractive}
   class:card-stretch={stretch}
   class:card-has-scroll={scrollable}
+  style={styleAttr}
   data-pw={typeof testId === 'string' ? testId : null}
   role={isInteractive ? 'button' : null}
   tabindex={isInteractive ? 0 : null}

package/dist/Card/properties.d.ts

@@ -41,4 +41,13 @@ export type OptionalCardProperties = {
      * Defaults to false.
      */
     scrollable?: boolean;
+    /**
+     * Per-instance CSS custom properties applied as inline style on the root `.card`.
+     * Keys must be CSS variable names (e.g. `--bottom-sections-count`); values are
+     * emitted verbatim. This lets a consumer feed a dynamic, per-instance value into a
+     * recipe class whose selectors or media queries read that variable — something a
+     * static `classes` string cannot express. When omitted, no `style` attribute is
+     * rendered, so existing consumers are unchanged.
+     */
+    cssVars?: Record<string, string | number>;
 };

package/package.json

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