@juspay/svelte-ui-components 2.116.1 → 2.117.1

package/dist/Button/Button.svelte

@@ -158,6 +158,21 @@
     --_btn-hover-border: none;
   }
 
+  /* Transparent chassis for gradient marketing CTAs — deliberately no background
+     of its own. Pair with a --button-background gradient (and usually a matching
+     --button-hover-color, since --_btn-hover-color sits before --button-background
+     in the hover fallback chain and would otherwise flatten the gradient to
+     transparent on hover). Geometry (padding/font-size) is intentionally left to
+     the size preset, not this variant. */
+  .variant-brand {
+    --_btn-color: transparent;
+    --_btn-text-color: #ffffff;
+    --_btn-border: none;
+    --_btn-hover-color: transparent;
+    --_btn-hover-text-color: #ffffff;
+    --_btn-hover-border: none;
+  }
+
   /* ---- Size defaults (md reproduces the legacy 16px padding / 14px font) ---- */
   .size-sm {
     --_btn-padding: 8px 12px;

package/dist/Button/properties.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 export type LoaderType = 'Circular' | 'ProgressBar';
 /** Visual style of the button. Maps to a built-in palette via `--button-*` variables. */
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'brand';
 /** Size preset controlling padding/height/font-size. */
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export type ButtonProperties = OptionalButtonProperties & ButtonEventProperties;
@@ -9,7 +9,8 @@ export type OptionalButtonProperties = {
     text?: string;
     /**
      * Visual style: `primary` (default, filled), `secondary` (outlined), `ghost`
-     * (transparent), `destructive` (danger). Each maps to the `--button-*` variables, so an
+     * (transparent), `destructive` (danger), `brand` (transparent chassis for gradient CTAs —
+     * pair with a `--button-background` gradient). Each maps to the `--button-*` variables, so an
      * explicit `--button-color` / `classes` override always wins over the variant default.
      */
     variant?: ButtonVariant;

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.116.1",
+  "version": "2.117.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",