@juspay/svelte-ui-components 2.117.1 → 2.118.1

package/dist/Carousel/Carousel.svelte

@@ -173,7 +173,9 @@
           class={activeSlideIndex == index ? 'active-dot' : 'dot'}
           onclick={() => moveSlideToIndex(index)}
           {onkeydown}
-          role="none"
+          role="button"
+          tabindex="0"
+          aria-label={`Go to slide ${index + 1}`}
           data-pw={typeof dotTestId === 'string' ? `${dotTestId}-${index + 1}` : null}
           testID={typeof dotTestId === 'string' ? `${dotTestId}-${index + 1}` : null}
         ></div>
@@ -216,7 +218,7 @@
     width: var(--dot-width, 5px);
     height: var(--dot-height, 5px);
     border-radius: 50%;
-    background: #c4c4c4;
+    background: var(--carousel-dot-color, #c4c4c4);
     cursor: pointer;
     transition: 0.3s ease;
   }
@@ -226,7 +228,7 @@
     height: var(--dot-height, 5px);
     border-radius: 50%;
     cursor: pointer;
-    background: #000000;
+    background: var(--carousel-dot-active-color, #000000);
     transition: 0.3s ease;
   }
   /*

package/dist/ChipInput/ChipInput.svelte

@@ -94,13 +94,30 @@
        --pill-* and --input-* have not yet been re-declared: reading them in the same declaration
        that sets them would be a custom-property cycle and would compute to invalid. Consumers that
        theme Pill/Input app-wide get chips that match the rest of their UI, instead of the library's
-       hardcoded light-theme hexes overriding their theme. */
+       own values overriding their theme.
+
+       Every token that carries the chip's APPEARANCE is captured here — colour, type, spacing and
+       shape alike. An app whose Pill is a 14px, 16px-radius chip was still getting 13px and a
+       999px pill, because re-declaring a token on the element beats inheriting it no matter which
+       property it is; restoring only the colours left the same bug in a less obvious place.
+       Tokens the component owns STRUCTURALLY — the draft field's inline padding, margin and
+       shadow, and its width/height — deliberately stay fixed, since those position the field among
+       the chips rather than describe how it looks. */
     --chip-input-pill-background-default: var(--pill-background, #e0e0e0);
     --chip-input-pill-color-default: var(--pill-color, #333333);
     --chip-input-pill-dismiss-color-default: var(--pill-dismiss-color, currentColor);
+    --chip-input-pill-font-size-default: var(--pill-font-size, 13px);
+    --chip-input-pill-font-weight-default: var(--pill-font-weight, 500);
+    --chip-input-pill-padding-default: var(--pill-padding, 6px 10px);
+    --chip-input-pill-border-radius-default: var(--pill-border-radius, 999px);
+    --chip-input-pill-border-default: var(--pill-border, none);
+    --chip-input-pill-gap-default: var(--pill-gap, 4px);
+    --chip-input-pill-dismiss-size-default: var(--pill-dismiss-size, 14px);
+    --chip-input-pill-max-width-default: var(--pill-max-width);
     --chip-input-draft-border-default: var(--input-border, 1px solid transparent);
     --chip-input-draft-focus-border-default: var(--input-focus-border, 1px solid transparent);
     --chip-input-draft-radius-default: var(--input-radius, 4px);
+    --chip-input-draft-font-size-default: var(--input-font-size, 13px);
   }
 
   .chip-input-draft-wrap {
@@ -108,16 +125,25 @@
   }
 
   .chip-input :global(.chip-input-pill) {
-    --pill-gap: var(--chip-input-pill-gap, 4px);
+    --pill-gap: var(--chip-input-pill-gap, var(--chip-input-pill-gap-default));
     --pill-background: var(--chip-input-pill-background, var(--chip-input-pill-background-default));
     --pill-color: var(--chip-input-pill-color, var(--chip-input-pill-color-default));
-    --pill-font-size: var(--chip-input-pill-font-size, 13px);
-    --pill-font-weight: var(--chip-input-pill-font-weight, 500);
-    --pill-padding: var(--chip-input-pill-padding, 6px 10px);
-    --pill-border-radius: var(--chip-input-pill-border-radius, 999px);
-    --pill-border: var(--chip-input-pill-border, none);
-    --pill-max-width: var(--chip-input-pill-max-width);
-    --pill-dismiss-size: var(--chip-input-pill-dismiss-size, 14px);
+    --pill-font-size: var(--chip-input-pill-font-size, var(--chip-input-pill-font-size-default));
+    --pill-font-weight: var(
+      --chip-input-pill-font-weight,
+      var(--chip-input-pill-font-weight-default)
+    );
+    --pill-padding: var(--chip-input-pill-padding, var(--chip-input-pill-padding-default));
+    --pill-border-radius: var(
+      --chip-input-pill-border-radius,
+      var(--chip-input-pill-border-radius-default)
+    );
+    --pill-border: var(--chip-input-pill-border, var(--chip-input-pill-border-default));
+    --pill-max-width: var(--chip-input-pill-max-width, var(--chip-input-pill-max-width-default));
+    --pill-dismiss-size: var(
+      --chip-input-pill-dismiss-size,
+      var(--chip-input-pill-dismiss-size-default)
+    );
     --pill-dismiss-color: var(
       --chip-input-pill-dismiss-color,
       var(--chip-input-pill-dismiss-color-default)
@@ -133,9 +159,13 @@
       --chip-input-draft-focus-border,
       var(--chip-input-draft-focus-border-default)
     );
+    --input-font-size: var(--chip-input-draft-font-size, var(--chip-input-draft-font-size-default));
+
+    /* Structural, not thematic: the draft field sits inline among the chips, so it keeps its own
+       tight padding and no margin or shadow regardless of how the app themes Input elsewhere.
+       Override them per-instance via --chip-input-draft-* if a layout genuinely needs it. */
     --input-padding: var(--chip-input-draft-padding, 0 2px);
     --input-margin: 0;
-    --input-font-size: var(--chip-input-draft-font-size, 13px);
     --input-box-shadow: none;
   }
 </style>

package/package.json

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