@juspay/svelte-ui-components 2.117.0 → 2.118.0

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/Tabs/Tabs.svelte

@@ -283,7 +283,7 @@
           {#if typeof tabItem?.icon === 'string' && tabItem.icon.length > 0}
             <Img src={tabItem.icon} alt="" fallback="" classes="tabs-item-icon" />
           {/if}
-          {label}
+          <span class="tabs-item-label" data-text={label}>{label}</span>
           {#if tabItem?.status && tabItem.status !== 'none'}
             <span class="tabs-item-status status-{tabItem.status}" aria-hidden="true"></span>
           {/if}
@@ -448,6 +448,28 @@
     flex-shrink: 0;
   }
 
+  /* Reserves the active-state (bolder) width of the label so selecting a tab
+     never reflows the tab bar: without this, .tabs-item.active's font-weight
+     jump makes the tab (and every tab after it) physically resize, which
+     visibly shifts sibling tabs and defeats the indicator's slide animation
+     with a jump. The ::after ghost renders data-text at the active weight
+     with height:0/visibility:hidden -- invisible, but its width still sets
+     the shrink-to-fit width of the inline-block label, so the box is already
+     as wide as the active state needs even while showing the lighter weight. */
+  .tabs-item-label {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tabs-item-label::after {
+    content: attr(data-text);
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    font-weight: var(--tabs-active-font-weight, 600);
+  }
+
   /* Trailing status dot for nav/menu tabs. margin-left:auto pushes it to the row's
      end (e.g. a settings menu); harmless on a normal tab bar where the item shrinks
      to content. */

package/package.json

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